/* ============================================================================
   The TWINKLE TEACHERS block that used to open this file was removed 2026-08-06.
   The teachers page is now built by inc/teachers.php and styled in style.css,
   to docs/page-build-rules.md. The old block hardcoded #ffffff / #1a2e44 /
   #4a5568 / #e8f5e9 / #2e7d32, used rgba() shadows, set font-size + weight +
   colour on the card heading, and carried its own max-width:1100px gutter.
   ============================================================================ */

/* ============================================================================
   Homepage product cards (.home-cards-products) — lift the WHOLE card as one on
   hover: background image + title + the .tw-card-excerpt description, together.
   WHY: Avada's column "liftup" only transforms the background-image layer
   (.fusion-column-inner-bg-image), so the title and the description Ben added were
   left behind. So instead we move the entire <li.post-card> (it has overflow:visible,
   so nothing is clipped) and neutralise Avada's independent bg lift so nothing
   double-moves. main-style.css loads after fusion-dynamic-css → this wins.
   Added 2026-07-17 (Ben). ============================================================ */
.home-cards-products li.post-card {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
    border-radius: 8px;
    /* Resting shadow — on BOTH states now (Ben). NOTE: Woo/Avada force box-shadow:none on .product
       grid items and drive column shadow via a var-based filter, so a plain box-shadow is ignored;
       drop-shadow(!important) wins and shadows the whole card silhouette (image + overhanging box). */
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .42)) !important;
}

.home-cards-products li.post-card:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 26px 32px rgba(0, 0, 0, .5)) !important;
    z-index: 2;
}

/* stop Avada's built-in liftup from moving the background image on its own */
.home-cards-products li.post-card .fusion-column-inner-bg-image,
.home-cards-products li.post-card .fusion-column-inner-bg.hover-type-liftup {
    transform: none !important;
}

/* Remove Avada's "liftup with border" artifacts: the border FRAME drawn via ::before (the ghost
   "parent div" Ben saw sitting behind the card on hover) and the border that appeared on the image. */
.home-cards-products li.post-card .fusion-column-inner-bg.hover-type-liftup::before {
    display: none !important;
}

.home-cards-products li.post-card .fusion-column-inner-bg-image {
    border-color: transparent !important;
}

/* Ben: a subtle border on the card, shown on both states (Avada locks border-color to #444 here, so
   the extra .fusion-column-liftup-border class + !important are needed to win). */
.home-cards-products li.post-card.fusion-column-liftup-border .fusion-column-inner-bg {
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 8px !important;
}

/* ============================================================================
   "Why families stay" section — image column (.lh-image-col-2). Added 2026-07-17.
   (1) The .chip (Live) + .quote badges are position:absolute and were anchored to
   the COLUMN. That column is align-self:stretch, so it grows to match the tall left
   boxes column while the image stays short — leaving a gap the quote floated in, and
   drifting as the screen resized. Fix: make the column-WRAPPER the positioning context
   AND stop it stretching (align-self:flex-start) so it hugs the image. The badges now
   overhang the IMAGE's corners (chip top:18 right:-12, quote bottom:-14 left:-14)
   consistently at every width — verified at 1280 and 900.
   (2) Tablet 768–1024px: make the image taller (aspect-ratio 30/50, Ben) so it better
   matches the height of the boxes column on the left.
   ============================================================================ */
.lh-image-col-2 .fusion-column-wrapper {
    position: relative;
    align-self: flex-start;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .lh-image-col-2 img {
        aspect-ratio: 30 / 50 !important;
    }
}

/* ============================================================================
   "From our founder" section — match the founder-photo column to the text height.
   The photo is a column BACKGROUND image; Avada sizes that column from an empty-image
   placeholder (452×680 SVG → ~608px tall), so on desktop the image ran much taller than
   the text (385px). ≥1025px ONLY: zero the placeholder so the column stretches to the TEXT
   column's height (align-self:stretch) and the cover bg fills it — verified 608→385 = match.
   ≤1024px is left alone (Ben's padding approach works there). Keyed to the founder image
   (aria-label / data-bg-url), NOT the volatile per-page column index. Added 2026-07-17. */
@media (min-width: 1025px) {
    .fusion-empty-dims-img-placeholder[aria-label="lighthouse-founder-brian"] {
        height: 0 !important;
    }

    /* the shorter column now crops the portrait (cover) — keep Brian's face in frame */
    .fusion-column-wrapper[data-bg-url*="lighthouse-founder-brian"] {
        background-position: center top !important;
    }
}

/* ============================================================================
   Homepage product cards — MOBILE (<=767px) flush "stacked" layout.  Added 2026-07-22 (Ben).
   Target: image on top, white text area flush beneath it, squared seam corners,
   rounded outer corners — i.e. one unified card (Ben's mockup). Desktop (>=768px)
   is deliberately LEFT ALONE (the floating-white-box liftup style stays).

   The cards are built as an Avada bg-image column: the photo is an absolute
   background layer (.fusion-column-inner-bg) filling the card, and the white
   content row (.fusion-builder-row) FLOATS over the lower half via an inline
   `position:relative; top:130px`. That `top:130px` is the whole reason it floats
   — zeroing it is what drops the white flush under the image. (Chasing padding /
   flex / height was a red herring; the offset was a positional `top`.)

   Mechanism here:
   - card: strip its 20px inner frame so image + white reach the edges; overflow
     hidden clips both to the rounded card corners AND clips the inner row's
     built-in 104%/-2% horizontal bleed.
   - image bg layer: pin it to a fixed 300px TOP band (top:0; bottom:auto) so the
     card height stops being driven by the tall image and becomes content-driven;
     square its bottom corners (8px 8px 0 0).
   - outer wrapper: padding 300px 0 0 0 — reserves the image band, zero sides/bottom.
   - white row: top:0 (kills the float), margin:0, radius 0 0 8px 8px (square top to
     meet the image flush, rounded bottom to match the card). Row now grows to its
     content, so the full description shows (previously the fixed image-driven height
     + overflow:hidden clipped the last line and the next card overlapped).
   ============================================================================ */
@media (max-width: 767px) {
    .home-cards-products li.post-card {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .home-cards-products li.post-card .fusion-column-inner-bg {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: 300px !important;
        margin: 0 !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .home-cards-products li.post-card .fusion-column-inner-bg-image {
        height: 300px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .home-cards-products li.post-card>div.fusion-column-wrapper {
        padding: 300px 0 0 0 !important;
    }

    .home-cards-products li.post-card>div.fusion-column-wrapper>.fusion-builder-row {
        top: 0 !important;
        /* was position:relative; top:130px — the float offset */
        margin: 0 !important;
        border-radius: 0 0 8px 8px !important;
    }
}

/* ============================================================================
   Mobile home hero (.hero-home-mobile) — style Ben's mobile-only Avada container
   as a pathway-style card. Added 2026-07-22 (Ben). Desktop is unaffected (the
   container is set mobile-only in Avada AND this is scoped to <=767px).

   Two problems it fixes:
   (1) The description (.fusion-text-1) carried an Avada element width of
       --awb-width:600px, so it overflowed the ~315px card and got cut off. Forced
       to 100%.
   (2) The card wrapper had no card styling. Matched the pathway cards: white bg,
       18px radius, 0 4px 10px rgba(0,0,0,.1) shadow, overflow:hidden so the image
       clips to the rounded top corners. Image is flush full-width at the top; the
       title / description / button row get 24px side padding so text is inset while
       the photo stays edge-to-edge.
   NOTE: the > chains target ONLY the outer card wrapper, not the nested
   column-wrapper that holds the See More button.
   ============================================================================ */
@media (max-width: 767px) {
    .hero-home-mobile>.fusion-builder-row>.fusion-layout-column>.fusion-column-wrapper {
        background: #fff !important;
        border-radius: 18px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .1) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .hero-home-mobile .fusion-image-element {
        margin: 0 !important;
    }

    .hero-home-mobile .fusion-image-element img {
        display: block !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    /* kill the 600px Avada width on the description; tighten its loose 1.72 line-height */
    .hero-home-mobile .fusion-text-1 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-home-mobile .fusion-text-1,
    .hero-home-mobile .fusion-text-1 p {
        line-height: 1.3 !important;
    }

    /* pad the text content (title, desc, button row) but NOT the image */
    .hero-home-mobile>.fusion-builder-row>.fusion-layout-column>.fusion-column-wrapper>.fusion-title,
    .hero-home-mobile>.fusion-builder-row>.fusion-layout-column>.fusion-column-wrapper>.fusion-text,
    .hero-home-mobile>.fusion-builder-row>.fusion-layout-column>.fusion-column-wrapper>.fusion-builder-row-inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: auto !important;
    }

    .hero-home-mobile>.fusion-builder-row>.fusion-layout-column>.fusion-column-wrapper>.fusion-title {
        margin-top: 22px !important;
    }

    .hero-home-mobile>.fusion-builder-row>.fusion-layout-column>.fusion-column-wrapper>.fusion-builder-row-inner {
        margin-bottom: 28px !important;
    }
}

/* ============================================================================
   Mobile fixes 2026-07-22 (Ben):
   (A) Product cards were rendering ~355px wide with only a 10px gutter (almost to
       the screen edge). Cause: the card grid (ul.fusion-grid, direct parent of the
       cards) carries Avada's -20px left/right gutter margins, which on a 1-column
       mobile layout just bleed the cards 20px past their 30px-padded container.
       Zeroing that margin lets the cards sit inside the container -> 315px card,
       clean 30px gutters L/R matching the other mobile containers.
   (B) Mobile hero image: 25% shorter (Ben). Was ~359px tall at the card width;
       pinned to 269px with object-fit:cover so it crops centrally, same width.
   ============================================================================ */
@media (max-width: 767px) {

    /* (A) remove the grid's negative gutter margins so cards respect the 30px-padded container */
    .home-cards-products.fusion-grid,
    .home-cards-products .fusion-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* (B) mobile hero image 25% shorter */
    .hero-home-mobile .fusion-image-element img {
        height: 269px !important;
        object-fit: cover !important;
    }
}

/* ============================================================================
   STUDENT DASHBOARD  (/student-dashboard/, page 12665)
   Combined "lighthouse hero + progress modules". Markup: inc/lighthouse-dashboard.php.
   Brand palette is defined ONCE as scoped vars on .lh-dash (retarget to Avada
   globals in one place if brand colors change). Breakpoints per Ben:
   mobile <=767 · tablet 768-1024 · desktop >=1025. White page background.
   ============================================================================ */
.lh-dash {
    --navy: #012F46;
    --navy-2: #0A3E58;
    --amber: #FFB710;
    --amber-2: #FFC845;
    --jade: #72C9C1;
    --jade-2: #A7DED8;
    --card: #FFFFFF;
    --ink: #0C2632;
    --muted: #5B7480;
    --line: #E4DFD2;
    --mist: #EEF5F3;
    --pass: #2FA36B;
    --soft: #FF8FA3;
    --lh-shadow: 0 10px 30px -14px rgba(1, 47, 69, .35);
    --lh-r: 18px;
    --lh-sans: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-family: var(--lh-sans);
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.lh-dash * {
    box-sizing: border-box
}

.lh-max {
    max-width: 1160px;
    margin: 0 auto
}

.lh-dash h1,
.lh-dash h2,
.lh-dash h3 {
    margin: 0;
    text-wrap: balance;
    letter-spacing: -.01em;
    font-weight: 800
}

.lh-dash .tabular {
    font-variant-numeric: tabular-nums
}

.lh-login {
    padding: 24px;
    text-align: center;
    color: var(--muted)
}

.lh-empty {
    color: var(--muted);
    font-size: .86rem;
    margin: 0
}

/* top bar + greeting */
.lh-dash .top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px
}

.lh-dash .top .mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto
}

.lh-dash .top b {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.02em;
    display: block
}

.lh-dash .top span {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase
}

.lh-dash .hello {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px
}

.lh-dash .avatar,
.lh-dash .avatar-img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: var(--lh-shadow)
}

.lh-dash .avatar {
    background: linear-gradient(135deg, var(--jade), var(--navy));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.4rem
}

.lh-dash .avatar-img {
    object-fit: cover
}

.lh-dash .hello>div {
    min-width: 0
}

.lh-dash .hello h1 {
    font-size: 1.5rem
}

.lh-dash .hello p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 500
}

.lh-dash .hello .grade {
    color: var(--navy);
    font-weight: 700
}

.lh-dash .wave {
    font-size: 1.3rem
}

/* shared card + chips */
.lh-dash .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--lh-r);
    box-shadow: var(--lh-shadow)
}

.lh-dash .card h3 {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted)
}

/* .lh-chip, NOT .chip — Avada has a global .chip (position:absolute + amber bg) that collides. */
.lh-dash .lh-chip {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    margin: 0;
    float: none;
    inset: auto
}

.lh-dash .lh-chip.setup {
    background: rgba(255, 143, 163, .16);
    color: #c8546c;
    border: 1px solid rgba(255, 143, 163, .4)
}

.lh-dash .lh-chip.live {
    background: rgba(47, 163, 107, .14);
    color: var(--pass);
    border: 1px solid rgba(47, 163, 107, .35)
}

/* HERO */
.lh-dash .hero {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 0;
    margin-bottom: 16px;
    background: radial-gradient(130% 100% at 15% 0%, #0A3E58 0%, var(--navy) 62%);
    color: #EAF3F2
}

.lh-dash .hero .beacon {
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border-right: 1px solid rgba(255, 255, 255, .08)
}

.lh-dash .hero .beacon h3 {
    color: rgba(234, 243, 242, .66);
    align-self: flex-start
}

.lh-dash .hero .lh {
    display: block;
    width: 180px;
    height: 270px;
    margin: 6px auto
}

/* brand lighthouse that fills with colour bottom-up by level (real logo icon) */
/* Both layers are the brand TRANSPARENT PNGs at the same crop, so they align pixel-for-pixel:
   base = 14943 (navy drawn grey = unlit), fill = 15090 (full colour = lit). Transparency means
   this sits straight on the navy hero — no white card, and no CSS grayscale needed. */
.lh-dash .lh-beacon {
    position: relative;
    width: 100%;
    max-width: 190px;
    margin: 6px auto 0;
    aspect-ratio: 878 / 1063
}

/* No halo, no card, no panel — the transparent PNG sits directly on whatever the hero
   background is, so the lighthouse never renders inside a visible box. */
.lh-dash .lh-beacon img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    display: block
}

.lh-dash .lh-beacon-base {
    opacity: .6
}

/* ===== Utility: .lh-card-dash =====
   Add `lh-card-dash` to an Avada COLUMN's CSS Class field to give it the same card look as the
   dashboard modules. Standalone on purpose — it does NOT rely on being inside .lh-dash, and
   it works on an outer column that contains nested columns. Add `lh-card-dash-title` to a Title
   element inside for the small uppercase module heading. Colours are Global-Colour vars. */
.lh-card-dash>div {
    background: var(--awb-color1) !important;
    border: 1px solid var(--awb-color3) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px -14px rgba(1, 47, 70, .28) !important;
    margin-bottom: 30px;
}

.lh-card-dash>.fusion-column-wrapper {
    /* border-radius: 16px */
}

/* nested columns inside a .lh-card-dash stay transparent so they don't draw a card-in-a-card */
.lh-card-dash .fusion-layout-column>.fusion-column-wrapper {
    background: transparent
}

.lh-card-dash-title h1,
.lh-card-dash-title h2,
.lh-card-dash-title h3,
.lh-card-dash-title h4,
.lh-card-dash-title h5,
.lh-card-dash-title h6 {
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--awb-color6) !important;
    margin: 0 0 12px !important
}

/* ===== Activity card: Week / Month toggle + month grid ===== */
.lh-dash .lh-seg {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--awb-color2);
    border: 1px solid var(--awb-color3)
}

.lh-dash .lh-seg-btn {
    border: 0;
    background: transparent;
    color: var(--awb-color6);
    font-family: inherit;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.4;
    transition: all .15s ease
}

.lh-dash .lh-seg-btn:hover {
    color: var(--awb-custom_color_1)
}

.lh-dash .lh-seg-btn.is-on {
    background: var(--awb-custom_color_1);
    color: #fff
}

.lh-dash .lh-view[hidden] {
    display: none
}

.lh-dash .lh-streak-note {
    margin: 10px 0 0;
    font-size: .78rem;
    color: var(--awb-color6)
}

.lh-dash .lh-streak-note b {
    color: var(--awb-custom_color_1);
    font-weight: 700
}

.lh-dash .lh-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px
}

.lh-dash .lh-month-lbl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--awb-color6);
    text-align: center;
    padding-bottom: 2px
}

.lh-dash .lh-month-pad {
    aspect-ratio: 1
}

.lh-dash .lh-month-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--awb-color2);
    border: 1px solid var(--awb-color3);
    font-size: .66rem;
    font-weight: 600;
    color: var(--awb-color6)
}

.lh-dash .lh-month-day.hit {
    background: var(--awb-custom_color_3);
    border-color: var(--awb-color5);
    color: var(--awb-custom_color_1);
    font-weight: 700
}

.lh-dash .lh-month-day.today {
    box-shadow: 0 0 0 2px var(--awb-color4)
}

.lh-dash .lh-beacon-fill {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--lh-fill, 0%);
    overflow: hidden;
    transition: height .7s ease
}

/* ===== native hero (Fusion container + real elements) =====
   The hero background is set on the CONTAINER in the builder — change it to anything.
   Text/panel colours read from these vars, whose defaults suit a LIGHT background.
   For a dark hero, add the class `lh-hero-dark` to the container (Design → CSS Class)
   and the text flips automatically. No background or border is drawn around the
   lighthouse — it must never render inside a visible box. */
.lh-hero-native {
    --lh-ink: var(--awb-custom_color_1);
    --lh-ink-soft: var(--awb-color6);
    --lh-panel: var(--awb-color2);
    --lh-panel-line: var(--awb-color3);
}

.lh-hero-native.lh-hero-dark {
    --lh-ink: #EAF3F2;
    --lh-ink-soft: rgba(234, 243, 242, .74);
    --lh-panel: rgba(255, 255, 255, .07);
    --lh-panel-line: rgba(255, 255, 255, .09);
}

.lh-hero-native .lh-beacon {
    margin: 0 auto
}

/* level heading */
.lh-hero-native .lh-h-level h1,
.lh-hero-native .lh-h-level h2,
.lh-hero-native .lh-h-level .title-heading-left {
    color: var(--lh-ink) !important;
    font-weight: 800;
    letter-spacing: -.02em
}

/* rank line */
.lh-hero-native .lh-h-rank,
.lh-hero-native .lh-h-rank p {
    color: var(--lh-ink-soft);
    font-weight: 600;
    margin: 0 0 16px;
    font-size: .95rem
}

/* stat boxes */
.lh-hero-native .lh-stat {
    background: var(--lh-panel);
    border: 1px solid var(--lh-panel-line);
    border-radius: 14px;
    padding: 12px 14px !important
}

.lh-hero-native .lh-stat-n h1,
.lh-hero-native .lh-stat-n h2,
.lh-hero-native .lh-stat-n h3,
.lh-hero-native .lh-stat-n .title-heading-left {
    color: var(--lh-ink) !important;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em
}

.lh-hero-native .lh-stat-u,
.lh-hero-native .lh-stat-u p {
    color: var(--lh-ink-soft) !important;
    font-size: .72rem;
    font-weight: 700;
    margin: 5px 0 0;
    text-transform: none
}

/* progress bar label + bar */
.lh-hero-native .lh-h-barlabel,
.lh-hero-native .lh-h-barlabel p {
    color: var(--lh-ink-soft);
    font-size: .82rem;
    font-weight: 600;
    margin: 16px 0 6px
}

/* colours come from the element (filledcolor amber / unfilledcolor track); CSS rounds, sets a real
   height (Avada's unitless --awb-height:12 resolves to 0 here), and hides the on-bar text. */
.lh-hero-native .lh-h-bar .fusion-progressbar-bar {
    border-radius: 999px !important;
    overflow: hidden;
    height: 12px !important
}

.lh-hero-native .lh-h-bar .progress-bar-content {
    border-radius: 999px !important;
    height: 100% !important
}

.lh-hero-native .lh-h-bar .progress-title,
.lh-hero-native .lh-h-bar .fusion-progressbar-text {
    display: none !important
}

.lh-dash .hero .info {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px
}

.lh-dash .lvlhead .n {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em
}

.lh-dash .lvlhead .n small {
    font-size: 1rem;
    color: var(--amber);
    font-weight: 800
}

.lh-dash .lvlhead .t {
    color: rgba(234, 243, 242, .72);
    font-size: .92rem;
    font-weight: 600;
    margin-top: 4px
}

.lh-dash .herostats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.lh-dash .hs {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    padding: 14px;
    min-width: 0
}

.lh-dash .hs .k {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1
}

.lh-dash .hs .k svg {
    width: 22px;
    height: 22px
}

.lh-dash .hs .k .of {
    font-size: 1rem;
    opacity: .6;
    font-weight: 800
}

.lh-dash .hs .u {
    font-size: .74rem;
    color: rgba(234, 243, 242, .66);
    font-weight: 700;
    margin-top: 5px
}

.lh-dash .nextbar .lab {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
    color: rgba(234, 243, 242, .78);
    font-weight: 600;
    margin-bottom: 6px
}

.lh-dash .track {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden
}

.lh-dash .track>i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--amber), var(--amber-2))
}

/* MODULES grid */
.lh-dash .mods {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px
}

.lh-dash .mods>* {
    grid-column: span 12
}

.lh-dash .mod {
    padding: 18px
}

.lh-dash .mod .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px
}

/* badges — auto-fill so the wall flows to fill whatever width the card has */
.lh-dash .badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 12px
}

.lh-dash .badge {
    text-align: center
}

.lh-dash .badge img,
.lh-dash .badge-ph {
    width: 100%;
    aspect-ratio: 1;
    display: block
}

.lh-dash .badge img {
    object-fit: contain
}

.lh-dash .badge-ph {
    border-radius: 50%;
    background: var(--mist);
    border: 1px dashed var(--line)
}

.lh-dash .badge.locked img {
    filter: grayscale(1);
    opacity: .32
}

.lh-dash .badge .bn {
    font-size: .66rem;
    font-weight: 700;
    color: var(--muted);
    margin-top: 5px;
    line-height: 1.2
}

/* quizzes */
.lh-dash .quiz {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.lh-dash .qr {
    display: flex;
    align-items: center;
    gap: 12px
}

.lh-dash .qr .qn {
    font-size: .86rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.lh-dash .qr .qs {
    font-weight: 800;
    font-size: .92rem;
    padding: 3px 10px;
    border-radius: 999px;
    flex: 0 0 auto
}

.lh-dash .qr .qs.p {
    background: rgba(47, 163, 107, .14);
    color: var(--pass)
}

.lh-dash .qr .qs.m {
    background: rgba(255, 183, 16, .18);
    color: #b4790a
}

/* streak week */
.lh-dash .week {
    display: flex;
    gap: 7px;
    justify-content: space-between
}

.lh-dash .day {
    flex: 1;
    text-align: center
}

.lh-dash .day .box {
    height: 42px;
    border-radius: 11px;
    background: var(--mist);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--muted);
    font-size: .9rem
}

.lh-dash .day.hit .box {
    background: linear-gradient(160deg, var(--jade-2), var(--jade));
    color: var(--navy);
    border-color: transparent
}

.lh-dash .day.today .box {
    outline: 2px solid var(--amber);
    outline-offset: 1px
}

.lh-dash .day .dl {
    font-size: .66rem;
    color: var(--muted);
    font-weight: 700;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: .05em
}

/* next class */
.lh-dash .next-cls {
    display: flex;
    align-items: center;
    gap: 14px
}

.lh-dash .next-cls .cal {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    flex: 0 0 auto;
    line-height: 1
}

.lh-dash .next-cls .cal b {
    display: block;
    font-size: 1.3rem;
    font-weight: 800
}

.lh-dash .next-cls .cal span {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8
}

.lh-dash .next-cls .ci b {
    font-size: .96rem;
    font-weight: 700
}

.lh-dash .next-cls .ci p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 600
}

/* course progress */
.lh-dash .cbar {
    margin-bottom: 12px
}

.lh-dash .cbar:last-child {
    margin-bottom: 0
}

.lh-dash .cbar .cl {
    display: flex;
    justify-content: space-between;
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: 5px;
    gap: 8px
}

.lh-dash .cbar .cl span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.lh-dash .cbar .cl span:last-child {
    color: var(--muted);
    font-weight: 700;
    flex: 0 0 auto
}

.lh-dash .cbar .ct {
    height: 9px;
    border-radius: 999px;
    background: var(--mist);
    overflow: hidden
}

.lh-dash .cbar .ct>i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jade), var(--jade-2))
}

/* level ladder */
.lh-dash .rungs {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.lh-dash .rung {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px
}

.lh-dash .rung .dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 800;
    color: #fff
}

.lh-dash .rung .nm {
    font-weight: 700;
    font-size: .9rem
}

.lh-dash .rung .pt {
    margin-left: auto;
    font-size: .8rem;
    color: var(--muted);
    font-weight: 700
}

.lh-dash .rung.done {
    background: var(--mist)
}

.lh-dash .rung.now {
    background: rgba(255, 183, 16, .14);
    outline: 1.5px solid rgba(255, 183, 16, .5)
}

.lh-dash .rung.locked {
    opacity: .5
}

/* TABLET 768-1024 */
@media (min-width:768px) and (max-width:1024px) {
    .lh-dash .hero {
        grid-template-columns: 230px 1fr
    }

    .lh-dash .hero .lh {
        width: 160px;
        height: 240px
    }

    .lh-dash .lvlhead .n {
        font-size: 2.1rem
    }

    .lh-dash .mods>* {
        grid-column: span 6
    }

    .lh-dash .m-badges {
        grid-column: span 12
    }

    .lh-dash .m-ladder {
        grid-column: span 12
    }
}

/* DESKTOP >=1025 : badge wall full-width (a 2-row banner), balanced grid below */
@media (min-width:1025px) {
    .lh-dash .hero {
        grid-template-columns: 300px 1fr
    }

    .lh-dash .m-badges {
        grid-column: span 12
    }

    .lh-dash .m-quiz {
        grid-column: span 4
    }

    .lh-dash .m-streak {
        grid-column: span 4
    }

    .lh-dash .m-next {
        grid-column: span 4
    }

    .lh-dash .m-course {
        grid-column: span 6
    }

    .lh-dash .m-ladder {
        grid-column: span 6
    }
}

/* MOBILE <=767 */
@media (max-width:767px) {
    .lh-dash .hero {
        grid-template-columns: 1fr
    }

    .lh-dash .hero .beacon {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .lh-dash .hero .lh {
        width: 150px;
        height: 225px
    }

    .lh-dash .lvlhead .n {
        font-size: 2.1rem
    }

    .lh-dash .hero .info {
        padding: 16px;
        gap: 14px
    }

    .lh-dash .herostats {
        gap: 8px
    }

    .lh-dash .hs {
        padding: 11px
    }

    .lh-dash .hs .k {
        font-size: 1.4rem
    }

    .lh-dash .badges {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

/* ===== Curriculum book cards — native Avada Post Cards (#22). Global-colour vars only. ===== */
.curric-cards-el .fusion-post-cards-post {
    height: 100%
}

.curric-book-card {
    height: 100%
}

.curric-series,
.curric-series p {
    margin: 0 0 2px;
    color: var(--awb-color5);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3
}

.curric-badge {
    display: inline-block !important;
    margin: 0 6px 10px 0;
    padding: 3px 10px;
    border-radius: 22px;
    font-size: .72rem;
    /* font-weight: 600; */
    line-height: 1.5
}

.curric-badge p {
    margin: 0;
    display: inline;
    font-size: inherit;
    font-weight: inherit
}

.curric-grade {
    background: var(--awb-custom_color_3)
}

.curric-lessons {
    background: var(--awb-custom_color_2)
}

.curric-grade p,
.curric-lessons p {
    color: var(--awb-custom_color_1)
}

.curric-excerpt,
.curric-excerpt p {
    /* margin: 0; */
    color: var(--awb-color6);
    font-size: .85rem;
    line-height: 1.55
}

/* multi-filter chips (grade + subject) — replaces the old #4cb5e0/#8bc53f palette with brand navy/jade */
.lhf {
    background: var(--awb-color1);
    border: 1px solid var(--awb-color3);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 0 0 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px
}

.lhf-row {
    flex: 1;
    min-width: 240px
}

.lhf-label {
    margin-bottom: 9px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--awb-color6)
}

.lhf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.lhf-chip {
    border: 1.5px solid var(--awb-color3);
    background: var(--awb-color1);
    color: var(--awb-custom_color_1);
    border-radius: 999px;
    padding: 7px 15px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: all .15s ease
}

.lhf-chip:hover {
    border-color: var(--awb-color5)
}

.lhf-chip.is-active {
    background: var(--awb-custom_color_1);
    border-color: var(--awb-custom_color_1);
    color: var(--awb-color1)
}

.lhf-chip.lhf-sub.is-active {
    background: var(--awb-color5);
    border-color: var(--awb-color5);
    color: var(--awb-custom_color_1)
}

.lhf-count {
    margin: 0 0 18px;
    font-size: .9rem;
    color: var(--awb-color6)
}

.lhf-count b {
    color: var(--awb-custom_color_1);
    font-weight: 600
}

/* ===== Badge wall — native Avada Post Cards (#18). earned/locked set by lh_badge_card_classes() ===== */
.lh-badge-card {
    text-align: center
}

.lh-badge-card .lhb-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    transition: filter .2s ease, opacity .2s ease
}

.lh-badge-card .lhb-name h1,
.lh-badge-card .lhb-name h2,
.lh-badge-card .lhb-name h3,
.lh-badge-card .lhb-name h4,
.lh-badge-card .lhb-name h5,
.lh-badge-card .lhb-name h6 {
    font-weight: 600;
    letter-spacing: 0
}

.lh-badge-card .lhb-pts,
.lh-badge-card .lhb-pts p {
    margin: 2px 0 0;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--awb-color5)
}

/* locked = dimmed + desaturated; earned stays full brand colour */
.lhb-locked .lhb-img img {
    filter: grayscale(1) opacity(.42)
}

.lhb-locked .lhb-name h1,
.lhb-locked .lhb-name h2,
.lhb-locked .lhb-name h3,
.lhb-locked .lhb-name h4,
.lhb-locked .lhb-name h5,
.lhb-locked .lhb-name h6 {
    color: var(--awb-color6) !important
}

.lhb-locked .lhb-pts,
.lhb-locked .lhb-pts p {
    color: var(--awb-color3)
}

.lhb-earned .lhb-img img {
    filter: none
}

/* ===== Level ladder — native Post Cards over lighthouse-ranks. State via lh_rank_card_classes() ===== */
.lh-rank-card {
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: space-between; */
    /* gap: 12px; */
    /* background: var(--awb-color2); */
}

.lh-rank-card .lhr-name {
    flex: 1;
}

.lh-rank-card .lhr-name h1,
.lh-rank-card .lhr-name h2,
.lh-rank-card .lhr-name h3,
.lh-rank-card .lhr-name h4,
.lh-rank-card .lhr-name h5,
.lh-rank-card .lhr-name h6 {
    font-weight: 700;
    letter-spacing: 0
}

.lh-rank-card .lhr-pts,
.lh-rank-card .lhr-pts p {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--awb-color6);
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

/* reached */
.lhr-done>div {
    background: var(--awb-custom_color_5) !important;
}

.lhr-done .lhr-pts,
.lhr-done .lhr-pts p {
    color: var(--awb-custom_color_1)
}

/* current rank — amber highlight */
.lhr-now>div {
    background: var(--awb-custom_color_8) !important;
    box-shadow: inset 0 0 0 1px var(--awb-color4) !important;
}

.lhr-now .lhr-pts,
.lhr-now .lhr-pts p {
    color: var(--awb-custom_color_1)
}

/* not yet reached */
.lhr-locked>div {
    background: var(--awb-color2) !important;
    opacity: .55 !important;
}

/* ===== Course progress — native Post Cards + native Progress Bar (bound to lh_course_pct) ===== */
.lh-course-card .lhc-name {
    position: relative;
    padding-right: 64px
}

.lh-course-card .lhc-frac,
.lh-course-card .lhc-frac p {
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--awb-color6);
    font-variant-numeric: tabular-nums
}

/* jade → navy (more contrast on white) */
.lh-course-card .lhc-bar .progress-bar-content {
    background: linear-gradient(270deg, var(--awb-color5), #c9f8f4) !important;
}

/* Avada 3.14 emits a unitless --awb-height, which resolves to 0 — set a real track height */
.lh-course-card .lhc-bar .fusion-progressbar-bar {
    height: 8px !important;
    border-radius: 999px !important;
    overflow: hidden
}

.lh-course-card .lhc-bar .progress-bar-content {
    height: 100% !important;
    border-radius: 999px !important
}

.lh-course-card .lhc-bar .progress-title,
.lh-course-card .lhc-bar .fusion-progressbar-text {
    display: none !important
}

/* ===== Recent quizzes — native Post Cards. pass/merit class from lh_quiz_card_classes() ===== */
.lh-quiz-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lh-quiz-card .lhq-name {
    flex: 1;
    min-width: 0
}

.lh-quiz-card .lhq-name h1,
.lh-quiz-card .lhq-name h2,
.lh-quiz-card .lhq-name h3,
.lh-quiz-card .lhq-name h4,
.lh-quiz-card .lhq-name h5,
.lh-quiz-card .lhq-name h6 {
    font-weight: 600;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.lh-quiz-card .lhq-score,
.lh-quiz-card .lhq-score p {
    margin: 0;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.lhq-pass .lhq-score p {
    background: var(--awb-custom_color_3);
    color: var(--awb-custom_color_1)
}

.lhq-merit .lhq-score p {
    background: var(--awb-custom_color_2);
    color: var(--awb-custom_color_1)
}

/* ===== Post Cards beyond 6 columns =====
   Avada only ships column widths for .fusion-grid-1..6. These continue its own pattern
   (width on the direct .fusion-grid-column children) for 7..12, and mirror its responsive
   behaviour so wide grids still collapse sensibly on tablet/mobile. Pairs with
   lh_post_cards_more_columns(), which raises the builder slider cap to 12. */
.fusion-post-cards>.fusion-grid-7>.fusion-grid-column {
    width: calc(100% / 7)
}

.fusion-post-cards>.fusion-grid-8>.fusion-grid-column {
    width: calc(100% / 8)
}

.fusion-post-cards>.fusion-grid-9>.fusion-grid-column {
    width: calc(100% / 9)
}

.fusion-post-cards>.fusion-grid-10>.fusion-grid-column {
    width: calc(100% / 10)
}

.fusion-post-cards>.fusion-grid-11>.fusion-grid-column {
    width: calc(100% / 11)
}

.fusion-post-cards>.fusion-grid-12>.fusion-grid-column {
    width: calc(100% / 12)
}

@media (max-width:1024px) {

    .fusion-post-cards>.fusion-grid-7>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-8>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-9>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-10>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-11>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-12>.fusion-grid-column {
        width: var(--awb-columns-medium, 25%) !important
    }
}

@media (max-width:640px) {

    .fusion-post-cards>.fusion-grid-7>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-8>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-9>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-10>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-11>.fusion-grid-column,
    .fusion-post-cards>.fusion-grid-12>.fusion-grid-column {
        width: var(--awb-columns-small, 33.3333%) !important
    }
}

/* =========================================================================
   Level Ladder — rank rows + state markers
   State classes (lhr-done / lhr-now / lhr-locked) land on the PARENT column,
   so row styling targets the column's first div child.
   ========================================================================= */
.lh-ranks-el {
    --lhr-bronze: #b87333;
    --lhr-silver: #9aa7b0;
    --lhr-gold: var(--awb-color4);
    --lhr-diamond: #a7dde8;
    --lhr-rainbow: #c9b3ff;
}

/* ---- the row ---- */
.lh-rank-card>div {
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
}

.lhr-done>div {
    background: var(--awb-color2);
}

.lhr-now>div {
    background: hsla(var(--awb-color4-h), var(--awb-color4-s), var(--awb-color4-l), 0.14);
    /* Single amber ring, no grey bleed.
       An outline draws OUTSIDE the border box, so Avada's 1px --awb-color2 (#f2f2f2)
       column border showed as a pale line between the amber ring and the fill.
       Removing the border leaves the amber `box-shadow: inset 0 0 0 1px` set above
       as the only ring — and inset box-shadow follows border-radius exactly, so the
       12px corners stay clean. (border-color can't be overridden here: Avada
       transitions it, so it keeps reporting the old value — border-width does work.) */
    outline: none;
    border-width: 0 !important;
}

.lhr-locked>div {
    opacity: 0.5;
}

/* ---- the marker dot ---- */
.lh-rank-card .lhr-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--awb-color1);
    font-weight: 800;
    line-height: 1;
}

/* per-tier dot colour, in ladder order */
.lh-ranks-el li:nth-child(1) .lhr-mark {
    background: var(--lhr-bronze);
}

.lh-ranks-el li:nth-child(2) .lhr-mark {
    background: var(--lhr-silver);
}

.lh-ranks-el li:nth-child(3) .lhr-mark {
    background: var(--lhr-gold);
}

.lh-ranks-el li:nth-child(4) .lhr-mark {
    background: var(--lhr-diamond);
}

.lh-ranks-el li:nth-child(5) .lhr-mark {
    background: var(--lhr-rainbow);
}

/* points pushed to the right edge */
.lh-rank-card .lhr-pts {
    margin-left: auto;
}