/* =========================================================================
      About Us — page styling.
      (Filename kept: renaming it would break the enqueue and every bookmark.)

      Enqueued from functions.php (lh_pages_enqueue_css) ONLY on posts whose
      content contains a [lighthouse_about_…] shortcode, with filemtime()
      cache-busting. Everything is scoped under `.lw` so the generic class names
      (.wrap/.sec/.acts/.founder/.statgrid…) can't collide with Avada.

      ONE PAGE: About Us (14798). /faqs/ and /contact/ were rebuilt with native
      Avada elements, so on 2026-08-05 their shortcodes and their rules in here
      were deleted (verified against the DB first: no published post, and no
      postmeta, referenced them — only old revisions).

      ---------------------------------------------------------------------
      HOUSE RULES THIS FILE FOLLOWS (2026-08-05, Ben) — these apply to EVERY
      page, not just this one:

      1. FULL-BLEED BAND + SITE-WIDTH CONTENT = PARENT/CHILD.
            The parent div carries the background (it is a plain block, so it fills
            the Avada column edge-to-edge); a child .wrap carries max-width +
            gutters. Never paint a full-bleed background with a 100vw ::before —
            100vw includes the scrollbar and causes horizontal scroll.
                    <div class="phero">      <-- background lives here
                        <div class="wrap"> …   <-- site width lives here

      2. CONTAINER WIDTH COMES FROM AVADA. --site_width (1230px), never a
            private --wrap value, so this page lines up with every other page.

      3. HEADINGS AND BODY COPY INHERIT THE THEME. No font-size / weight /
            colour / line-height / letter-spacing on h1–h6 or p here. If a heading
            is the wrong size, change its TAG (h3 → h5), don't restyle it.

      4. ZERO PRIVATE COLOUR VARIABLES. Every colour is an Avada global (list
            below). Where a tint has no global of its own it is derived from one
            with hsla() + Avada's own -h/-s/-l channel vars, so it still tracks the
            palette if Brian ever changes it.

      5. BUTTONS MATCH AVADA'S REAL BUTTONS. 50px radius, 20px/30px padding,
            17px/400 type, .17px tracking, capitalize, no shadow, NO hover lift,
            and a full 1px border on all four sides (never a partial border).

      6. THE GUTTER IS THE PARENT'S, AND IT IS 30px — NEVER A CLAMP.
            Measured off the live header and footer at 1440px: both put
            padding: 0 30px on the container and let a 1230px child centre inside it,
            so their CONTENT runs 97.45 -> 1327.54, width 1230.09. Use Avada's own
            --hundredp_padding (= 30px) so it tracks Global Options.

            Avada writes that child as max-width: 1279.2px with
            margin-inline: calc(-4% / 2), because its columns then eat 1.92% a side:
                    1279.2 - (2 x 0.0192 x 1279.2) = 1230.07
            Do NOT copy those two numbers onto a plain div. With no Avada columns
            inside to eat the 1.92%, the content renders the full 1279.2px — WIDER
            than the header. A 1230px child with auto margins inside a 30px-padded
            parent lands in the same place to within 0.08px at every viewport width,
            with one moving part instead of three.

      THE AVADA GLOBAL PALETTE (queried off the live fusion-styles CSS):
          --awb-color1        #ffffff  white
          --awb-color2        #f2f2f2  light grey
          --awb-color3        #e1e1e1  hairline / card border
          --awb-color4        #ffb710  amber
          --awb-color5        #72c9c1  jade
          --awb-color6        #666666
          --awb-color7 / 8    #444444  body text
          --awb-custom_color_1   #012f46            navy (brand)
          --awb-custom_color_2   rgba(255,183,16,.40)  amber 40%
          --awb-custom_color_3   rgba(114,201,193,.63) jade 63%
          --awb-custom_color_4   rgba(1,47,70,.68)     navy 68%
          --awb-custom_color_5   rgba(87,182,222,.17)  sky 17%
          --awb-custom_color_6   rgba(102,102,102,.07) grey 7%
          --awb-custom_color_7   #f5f5dc            beige
          --awb-custom_color_8   #fbf7ef            light beige / cream  <-- page paper
          --awb-custom_color_9   #f7f7f7            off-white
          --awb-custom_color_10  rgba(114,201,193,.23) jade 23%
          --awb-custom_color_11  rgba(255,183,16,.14)  amber 14%
          --awb-custom_color_12  #5b7480            muted body text
      ========================================================================= */

.lw {
    /* Not colours — an elevation token and the two image paths. The colour
          inside the shadow is derived from the navy global. The teacher avatars
          used to live here too; they are now real featured images, set inline by
          lh_about_teacher_avatars(). */
    --shadow: 0 18px 50px -22px hsla(var(--awb-custom_color_1-h), var(--awb-custom_color_1-s), var(--awb-custom_color_1-l), .35);
    --img-online: url(/wp-content/uploads/2026/07/lighthouse-teacher-1.jpg);
    --img-brian: url(/wp-content/uploads/2026/07/lighthouse-founder-brian.webp);
}

/* NOTE — there is deliberately NO `main#main{padding:0}` here any more, and no
      `.fusion-fullwidth{margin:0}` safety net either. That pair was the mobile
      overflow bug, and it was self-inflicted:

      On a 100%-width page template Avada pads the content area by
      --hundredp_padding (30px) and then cancels it on every full-width container
      with `.width-100 .fusion-fullwidth{margin-left/right:-30px}`. Zeroing main's
      padding left the -30px uncancelled, so every container rendered 60px wider
      than the viewport and hung 30px off each edge — at 320px the page was 380px
      wide. Avada's own math already makes the bands go edge to edge; leave it
      alone and full-bleed just works. */

.lw {
    font-family: inherit;
    color: var(--awb-custom_color_12);
    background: var(--awb-custom_color_8);
    line-height: 1.65;
    max-width: 100%;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* Remove Avada's dotted-underline link hover — matches the rest of the site.
      :not(.btn) is load-bearing. Without it the `border-bottom:0 !important` here
      also wiped the bottom edge off every button, which is what produced the
      three-sided "partial border" look. A button's border is set as one shorthand
      on all four sides; never let a global link reset reach into it. */
.lw a:not(.fusion-button),
.lw a:not(.fusion-button):hover,
.lw a:not(.fusion-button):focus {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* :not(.fusion-button) again, for the same reason as the border-bottom reset above:
   `.lw a` is (0,1,1) and Avada colours its buttons with `.fusion-button-default` at
   (0,1,0), so an unscoped `color: inherit` here silently repaints every button label
   in the page's muted body colour and --button_accent_color never lands. */
.lw a:not(.fusion-button) {
    color: inherit;
}

.lw a:focus-visible,
.lw button:focus-visible,
.lw input:focus-visible,
.lw select:focus-visible,
.lw textarea:focus-visible {
    outline: 3px solid var(--awb-color4);
    outline-offset: 2px;
    border-radius: 8px;
}

/* RULE 3: headings inherit the theme entirely. text-wrap:balance is kept —
      it only decides where a line breaks, it never changes the type itself. */
.lw h1,
.lw h2,
.lw h3,
.lw h4,
.lw h5 {
    text-wrap: balance;
}

/* RULE 2 — MEASURED against the live header and footer, 2026-08-06.
      .wrap carries the WIDTH and NOTHING ELSE. It must have no horizontal padding:
      the parent owns the gutter (see RULE 6 below). Putting both max-width and
      padding on one element was the entire misalignment — the border box was
      already exactly right at 1230px / 97.5, and the 44px padding then pushed the
      text in to 141.5 while the header's text sat at 97.45. */
.lw .wrap {
    max-width: var(--site_width, 1230px);
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------- type bits */

.lw .eyebrow {
    font-size: .75rem;
    letter-spacing: .19em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--awb-color5);
    margin: 0 0 14px;
}

/* Measure + spacing only; the type itself inherits. */
.lw .lead {
    max-width: 58ch;
    margin: 18px 0 0;
}

/* -------------------------------------------------------------------- hero */
/* RULE 1. .phero is the PARENT and paints the navy band edge-to-edge; the
      .wrap child inside it holds the site-width content. No 100vw ::before.
      RULE 6: the side gutter is the parent's, and it is Avada's own
      --hundredp_padding (30px) — the exact variable the header and footer
      containers use — never a clamp. */

.lw .phero {
    padding-top: clamp(54px, 7vw, 96px);
    padding-bottom: clamp(54px, 7vw, 96px);
    padding-left: var(--hundredp_padding, 30px);
    padding-right: var(--hundredp_padding, 30px);
    background:
        radial-gradient(55% 60% at 90% 6%, var(--awb-custom_color_10), transparent 60%),
        radial-gradient(40% 40% at 2% 96%, var(--awb-custom_color_11), transparent 60%),
        var(--awb-custom_color_1);
}

/* About's hero is two columns; FAQ and Contact use the same band with one. */
.lw .phero .split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}

.lw .phero .acts {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 28px;
}

/* Copy sits on navy, so these three do carry a colour. */
.lw .phero .h1 {
    color: var(--awb-color1);
}

.lw .phero .lead {
    color: hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), .86);
}

.lw .phero .eyebrow {
    color: var(--awb-color5);
}

.lw .himg {
    position: relative;
}

.lw .himg .ring {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 84px;
    height: 84px;
    border: 5px solid var(--awb-color4);
    border-radius: 50%;
    z-index: -1;
    opacity: .5;
}

.lw .frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 6px solid var(--awb-color1);
    aspect-ratio: 4/3.1;
}

.lw .frame .pic {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.lw .frame .badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: var(--awb-custom_color_4);
    color: var(--awb-color1);
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lw .frame .badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--awb-color4);
}

/* ---------------------------------------------------------------- sections */

/* Vertical rhythm stays fluid; the side gutter is Avada's 30px (RULE 6). */
.lw .sec {
    padding: clamp(52px, 7vw, 92px) var(--hundredp_padding, 30px);
}

.lw .s-white {
    background: var(--awb-color1);
}

.lw .s-beige {
    background: var(--awb-custom_color_8);
}

.lw .sec-head {
    max-width: 640px;
}

.lw .sec-head.center {
    margin: 0 auto;
    text-align: center;
}

.lw .sec-head.center .lead {
    margin-left: auto;
    margin-right: auto;
}

.lw .prose2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 54px);
    margin-top: 8px;
}

.lw .prose2 p {
    margin: 0 0 1em;
}

.lw .prose2 p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------- feature cards */

.lw .feats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.lw .feat {
    background: var(--awb-color1);
    border: 1px solid var(--awb-color3);
    border-radius: 16px;
    padding: 26px 22px;
    transition: transform .3s, box-shadow .3s;
}

.lw .feat:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.lw .feat .ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--awb-custom_color_10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* Icon colour lives here, not in a stroke="#hex" attribute on the SVG. */
.lw .feat .ico svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--awb-color5);
    color: var(--awb-color5);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lw .feat:nth-child(2) .ico,
.lw .feat:nth-child(4) .ico {
    background: var(--awb-custom_color_11);
}

.lw .feat:nth-child(2) .ico svg,
.lw .feat:nth-child(4) .ico svg {
    stroke: var(--awb-color4);
    color: var(--awb-color4);
}

.lw .feat h5 {
    margin-bottom: 7px;
}

.lw .feat p {
    margin: 0;
}

/* ------------------------------------------------------------- stats strip */
/* Ben 2026-08-05: the four boxes sit on light beige, on a white section. */

.lw .statgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--awb-custom_color_10);
    border-radius: 20px;
    overflow: hidden;
    /* Ben wanted it lighter than the #fbf7ef beige but still beige — so it is that
          global with 2% more lightness, not a new colour. */
    background: hsl(var(--awb-custom_color_8-h), var(--awb-custom_color_8-s), calc(var(--awb-custom_color_8-l) + 2%));
    margin-top: 30px;
}

.lw .statgrid .c {
    padding: 30px 22px;
    text-align: center;
    position: relative;
}

.lw .statgrid .c + .c::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    height: 56%;
    width: 1px;
    background: var(--awb-custom_color_10);
}

.lw .statgrid .n {
    font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--awb-custom_color_1);
}

.lw .statgrid .c:first-child .n {
    color: var(--awb-color4);
}

.lw .statgrid .l {
    margin-top: 9px;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--awb-custom_color_12);
}

/* ----------------------------------------------------------------- founder */

.lw .founder {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(30px, 5vw, 60px);
    /* stretch, not center: the photo fills the row so the two columns end level.
          Centring left a ~380px photo floating beside an ~800px text column. */
    align-items: stretch;
}

.lw .founder .fpic {
    /* No aspect-ratio and no fixed height — as a stretched grid item it takes the
          row's height, which is what makes the two columns match. .pic inside is
          absolutely positioned, so .fpic needs that stretch to have any height at all. */
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid var(--awb-color1);
    box-shadow: var(--shadow);
    position: relative;
}

.lw .founder .fpic .pic {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50% 15%;
}

.lw .founder blockquote {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--awb-custom_color_1);
}

/* The quote is an ACF wysiwyg now, so it arrives wrapped in <p>. Margin only —
      the type still inherits. */
.lw .founder blockquote p {
    margin: 0 0 1em;
}

.lw .founder blockquote p:last-child {
    margin-bottom: 0;
}

.lw .founder blockquote strong {
    font-weight: 600;
    color: var(--awb-custom_color_1);
}

.lw .founder .sig {
    margin-top: 20px;
    font-weight: 700;
    color: var(--awb-custom_color_1);
}

.lw .founder .sig span {
    display: block;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--awb-custom_color_12);
    margin-top: 3px;
}

.lw .teachrow {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--awb-custom_color_10);
}

.lw .teachrow-in {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lw .teachrow-sub {
    margin: 3px 0 0;
    font-size: .92rem;
}

.lw .avs {
    display: flex;
}

.lw .avs .av {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 4px solid var(--awb-custom_color_8);
    margin-left: -18px;
    background-size: cover;
    /* The headshots are 464x592 portraits. A circle crops top and bottom, so bias the
          window upward to keep the face centred instead of chinning everyone. */
    background-position: 50% 25%;
    box-shadow: 0 8px 18px -8px hsla(var(--awb-custom_color_1-h), var(--awb-custom_color_1-s), var(--awb-custom_color_1-l), .5);
    transition: transform .3s;
}

.lw .avs .av:first-child {
    margin-left: 0;
}

.lw .avs .av:hover {
    transform: scale(1.12) translateY(-3px);
    z-index: 2;
}

/* ---------------------------------------------------------------- CTA band */
/* Avada global jade over the family photo. */

.lw .ctaband {
    background: linear-gradient(var(--awb-custom_color_3), var(--awb-custom_color_3)),
        url(/wp-content/uploads/2026/07/lighthouse-cta-family.webp) center/cover;
    text-align: center;
}

.lw .ctaband .lead {
    margin-left: auto;
    margin-right: auto;
    color: var(--awb-custom_color_1);
}

.lw .ctaband .acts {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
}

/* ====================================================================
      RESPONSIVE
      ==================================================================== */

@media (max-width: 900px) {

    .lw .phero .split,
    .lw .founder,
    .lw .prose2 {
        grid-template-columns: 1fr;
    }

    .lw .phero .himg {
        order: -1;
        max-width: 520px;
    }

    /* Stacked now, so there is no taller sibling to match — and `stretch` here is
          actively harmful: it hands .fpic the row height, the row height comes from
          .fpic's content (0, since .pic is absolutely positioned), and aspect-ratio
          then derives the WIDTH from that zero height. The photo collapses to its
          6px borders. `start` breaks the loop: width fills the column, aspect-ratio
          gives it a height. */
    .lw .founder {
        align-items: start;
    }

    /* WIDTH must be explicit, not inherited from `stretch`. `margin: 0 auto` on a
          grid item cancels stretch and switches it to shrink-to-fit — and the only
          child is absolutely positioned, so shrink-to-fit is 0, and aspect-ratio then
          produced a 0-height photo. A real width gives aspect-ratio something to work
          from; max-width keeps it inside a 320px screen. */
    .lw .founder .fpic {
        width: 300px;
        max-width: 100%;
        margin: 0 auto;
        aspect-ratio: 4/4.5;
    }

    .lw .feats {
        grid-template-columns: 1fr 1fr;
    }

    .lw .statgrid {
        grid-template-columns: 1fr 1fr;
    }

    .lw .statgrid .c:nth-child(3)::before {
        display: none;
    }
}

@media (max-width: 782px) {

    /* No .wrap padding override here any more. The parent's 30px gutter applies at
          every width, which is exactly what the header and footer do — Avada's own
          --awb-padding-left/right-medium on those containers is also 30px. */

    .lw .teachrow {
        gap: 18px;
    }

    .lw .avs .av {
        width: 64px;
        height: 64px;
        margin-left: -14px;
    }
}

@media (max-width: 560px) {

    .lw .feats,
    .lw .statgrid {
        grid-template-columns: 1fr;
    }

    .lw .statgrid .c + .c::before {
        display: none;
    }

    /* .teachrow has a single child, so stacking it does nothing — it's .teachrow-in
          (avatars + copy) that has to break, otherwise the heading wraps to three
          words-per-line beside the faces. */
    .lw .teachrow,
    .lw .teachrow-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* Stacked, full-width buttons — no half-width orphan on a phone. */
    .lw .acts,
    .lw .ctaband .acts {
        flex-direction: column;
        align-items: stretch;
    }

    .lw .acts .fusion-button-wrapper,
    .lw .acts .fusion-button {
        width: 100%;
    }

    .lw .founder .fpic {
        max-width: 100%;
    }

    .lw .frame {
        aspect-ratio: 4/3;
    }
}