/* ==========================================================================
   "Moms, Sons and Men" section — rebuilt to match the same rounded-
   tile, hover-reveal-photo pattern used on the Men page's Expected
   Outcomes section, for consistency with the rest of the site.
   ========================================================================== */

.smrs-family-section {
    /* Same confirmed cause and fix as .smrs-hero — WordPress's Group
       block forces max-width:1200px + margin-left:0 !important onto
       any plain (non-alignfull) child, which was capping this
       section the same way it capped the hero. Matching !important
       (this stylesheet loads after WordPress's inline styles, so
       with equal specificity ours wins) and removing the cap fixes
       it the same way. */
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 100px 32px;
}

.smrs-family-inner {
    max-width: 1300px;
    margin: 0 auto;
}

.smrs-family-eyebrow {
    display: block;
    color: var(--smrs-dark-green, #0C4143);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 10px;
}

.smrs-family-heading {
    color: #141414;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 40px;
}

/* ==========================================================================
   The Triangle — GOD at the apex, Single Mom / Fatherless Son at the
   two base corners. Two bars ("legs") are pinned at a shared top
   point and rotated outward like clock hands (transform-origin: top
   center + rotate) - this avoids compound translate+rotate math
   entirely, so it stays correct at any width without trigonometry in
   the CSS itself. The absolute pixel offsets below (for the node,
   caption and center content) ARE hardcoded for this fixed container
   size though, since positioning them relative to where a rotated
   bar's far end lands isn't something CSS can express directly -
   this only holds together above the mobile breakpoint, where the
   whole thing collapses to a plain stacked layout instead. */

.smrs-triangle {
    position: relative;
    width: 600px;
    height: 420px;
    max-width: 100%;
    margin: 60px auto 0;
}

.smrs-triangle-apex {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--smrs-dark-green, #0C4143);
    z-index: 3;
}

.smrs-triangle-leg {
    position: absolute;
    top: 75px;
    left: 50%;
    width: 56px;
    height: 320px;
    margin-left: -28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    background: var(--smrs-dark-green, #0C4143);
    border-radius: 28px;
    text-decoration: none;
    transform-origin: top center;
    transition: background 0.3s ease;
    z-index: 2;
}

/* Both legs share the same top-center anchor point by default (see
   .smrs-triangle-leg above), which is what made them touch/overlap
   right where they meet near the apex. Nudging each one's anchor
   further from center (before it rotates) pulls the whole beam -
   including this meeting point - apart by that same amount, opening
   up a visible gap right at the top.

   IMPORTANT: CSS rotate() is clockwise for positive angles, not
   counterclockwise - the previous version had left/right backwards,
   which swung each bar's bottom end OVER to the opposite side
   (crossing into an X instead of forming a clean "Λ" shape, and
   putting the wrong beam text next to each caption as a result).
   rotate(34deg) [clockwise] on the LEFT leg swings its bottom end
   left; rotate(-34deg) [counterclockwise] on the RIGHT leg swings
   its bottom end right. */
.smrs-triangle-leg--left {
    margin-left: -68px;
    transform: rotate(34deg);
}

.smrs-triangle-leg--right {
    margin-left: 12px;
    transform: rotate(-34deg);
}

.smrs-triangle-leg:hover {
    background: #14595c;
}

.smrs-triangle-node {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    margin-bottom: 14px;
}

.smrs-triangle-beam-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* The left leg's own rotate(34deg) ADDS to vertical-rl's built-in 90deg
   clockwise text rotation (landing past 90deg total, which is what
   read as "upside down"), while the right leg's rotate(-34deg)
   subtracts from it and stays under 90deg - that's why only the left
   beam needed fixing. Flipping this beam's text 180deg in place
   (transform-origin defaults to center, so it stays centered in the
   flex column exactly as before) cancels that out and reads
   bottom-to-top instead. */
.smrs-triangle-leg--left .smrs-triangle-beam-text {
    transform: rotate(180deg);
}

/* Fixed-width box (not nowrap + translateX) so the caption can never
   run wider than this and get clipped, at any font size - it wraps
   to a second line instead of extending sideways past the design's
   600px bounds, which is exactly what happened with "Fatherless Son"
   at the larger mobile font size. */
.smrs-triangle-caption {
    position: absolute;
    top: 350px;
    width: 140px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #141414;
}

.smrs-triangle-caption--left {
    left: 11px;
}

.smrs-triangle-caption--right {
    left: 449px;
}

.smrs-triangle-center {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

.smrs-triangle-logo {
    display: block;
    width: 70px;
    height: auto;
    margin: 0 auto 10px;
}

.smrs-triangle-tagline {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--smrs-dark-green, #0C4143);
    margin: 0;
}

/* ---------- Responsive ---------- */
/* Below this width the fixed-pixel geometry above no longer applies -
   same fallback pattern used for every other complex geometric
   section on this site (e.g. the About/Men split-tiles): drop the
   rotation and absolute positioning entirely, and lay everything out
   as a plain, readable, vertically-stacked column instead. */

@media (max-width: 640px) {
    /* Keep the actual triangle shape on mobile (client wants the
       geometry preserved, not a fallback stacked layout) - the whole
       600x420 .smrs-triangle box (every child's position/rotation
       stays exactly as on desktop) is scaled down as one rigid unit
       to fit the available width. Scaling a box doesn't change the
       LAYOUT SPACE it reserves though (only how it's painted), so
       without this wrapper the page would still reserve a full
       600x420 box - as tall as the unscaled version and wide enough
       to trigger horizontal scroll. The wrapper's height is set to
       match the SCALED height, with overflow:hidden trimming the
       reserved space back down to that.

       .smrs-family-section's padding is 32px each side, so the
       available width is (100vw - 64px); dividing that by the
       triangle's true 600px width gives the exact scale factor
       needed to fill it - this stays correct at any phone width
       within this breakpoint, not just one specific screen size. */
    .smrs-triangle-scale-wrap {
        width: 100%;
        max-width: 600px;
        height: calc((100vw - 64px) * 0.7);
        max-height: 420px;
        overflow: hidden;
        margin-top: 40px;
        /* .smrs-triangle is 600px wide - wider than this wrapper on
           any phone - and margin:auto (its desktop centering method)
           collapses to 0 once content is wider than its container,
           which was leaving it flush left instead of centered and
           throwing transform-origin off with it. Flexbox centering
           doesn't have that problem, so it's used here instead. */
        display: flex;
        justify-content: center;
    }
    .smrs-triangle {
        /* max-width:100% from the desktop rule above was fighting this
           scale-transform approach: it shrank the box's actual layout
           width to fit the (narrower-than-600px) wrapper BEFORE the
           scale transform even applied, so everything got shrunk
           twice over. That mismatch between the box's real width and
           the 600px the scale factor/every fixed-pixel child offset
           assumes is exactly what pushed .smrs-triangle-caption--right
           (left:449px) out past the box entirely, clipped by this
           wrapper's overflow:hidden - the scale transform below
           already does 100% of the fitting work, so the box itself
           needs to stay at its true, unconstrained 600px here. */
        max-width: none;
        margin-top: 0;
        margin-left: 0;
        transform: scale(calc((100vw - 64px) / 600px));
        transform-origin: top center;
        flex: 0 0 auto;
    }
    /* Compensate for the scale-down: bump the base sizes here so the
       EFFECTIVE rendered size (after being scaled by roughly 0.4-0.55x
       on typical phones) lands back in a readable range, rather than
       shrinking proportionally with everything else. Kept modest,
       not doubled - a much bigger bump here previously looked
       oversized/awkward, and for the vertical beam text specifically,
       going too large forces it to wrap into a 3rd column, which no
       longer fits the beam's 56px width (it's already 2 columns for
       the longer phrase at the original size - this keeps it at 2). */
    .smrs-triangle-beam-text {
        font-size: 15px;
    }
    .smrs-triangle-caption {
        font-size: 17px;
    }
    .smrs-triangle-apex {
        font-size: 2.2rem;
    }
    .smrs-triangle-tagline {
        font-size: 14px;
    }
}