/* ============================================================================
 * Heliomath — "for kids with learning differences" hero + Sunset sections.
 *
 * Page CSS for the Heliomath learning-differences page
 * (templates/brands/heliomath/site_pages/learning_differences.html). Loaded ONLY
 * by that page, alongside heliomath_tokens.css — the canonical foundation, whose
 * :root colour / type / structure tokens this file consumes via var(). There are
 * no local colour re-declarations any more: :root IS the Sunset palette.
 *
 * Only the TOP of the page is Heliomath (this hero + the stats / neuroplasticity
 * sections). The sections lower down are inherited Grokkoli content still on the
 * legacy --helio-* styles; the rules at the bottom of this file only reskin their
 * backgrounds / CTA. Muted tones the palette has no token for are page-local
 * custom properties (--hm-*). base.css is intentionally NOT loaded here — its bare
 * element selectors would bleed into that inherited legacy content — until the
 * whole page is migrated.
 * ========================================================================== */

/* The top-nav pill AND the header chrome (vertical centring, pill gap) live in
 * heliomath_nav.css — the single source of truth shared with the account-access
 * pages, loaded on this page via extra_head. The one page-specific piece: this page
 * moves the wordmark OUT of the nav and INTO the hero (below), so hide the now-empty
 * nav brand. The nav then shows just the Learning Plans + Login pills. (This file
 * loads after heliomath_nav.css, so it wins the equal-specificity .navbar-brand rule.) */
.header .navbar-brand {
    display: none;
}

.mp-ld-hero {
    /* Page-local muted tones the palette has no token for. */
    --hm-hero-support: var(--cornflower-pale);  /* muted blue-grey — supporting sentence (now the shared --cornflower-pale token) */
    --hm-hero-footnote: #6B7398;    /* footnote text */
    --hm-hero-rule: #1D2748;        /* footnote top divider rule */
    --hm-hero-sup: #8B93B8;         /* superscript footnote marker */

    background: var(--surface-dark);
    font-family: var(--font-family-base);
    /* Full-bleed dark band. Top padding matches the About hero EXACTLY — the same
       calc(5rem + 2vw) as heliomath_about.css's `#about-us .light-hero` — so the
       nav→wordmark gap is identical on both pages (~38px below the nav pills, scaling
       with the viewport). Left/right + bottom keep this page's own fluid values. */
    padding: calc(5rem + 2vw) var(--space-gutter) clamp(64px, 9vh, 120px);
}

/* Confine the hero content to the SAME centred column as the body sections below
   (.mp-section__inner / .mp-ld-np / .mp-ld-stats), so the hero's left edge lines up
   with the stats, neuroplasticity, testimonials and success-stories bands. The gutter
   above matches too. The individual hero elements keep their own ch-based reading
   measures (eyebrow / headline / support / footnote), so only their left edge shifts
   into alignment — the text block itself stays a comfortable width, flush left. */
.mp-ld-hero__inner {
    max-width: var(--mp-content-max);   /* 68rem (~1088px) — same as .mp-section__inner */
    margin: 0 auto;
}

/* ---- Wordmark ---------------------------------------------------------- *
 * The Heliomath wordmark, moved here from the nav. Keeps the nav's 36px size (the
 * .logo default --logo-height) + the on-dark artwork; sits on its own line above the
 * eyebrow. */
.mp-ld-hero__logo {
    display: block;
    margin-bottom: 24px;
}

/* ---- Eyebrow ----------------------------------------------------------- */
.mp-ld-hero__eyebrow {
    margin: 0 0 22px;
    max-width: 46ch;
    font-size: var(--type-caption-size);   /* 14px — the style-guide text floor */
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--flare-on-dark);      /* on-dark warm accent */
}

/* ---- Headline ---------------------------------------------------------- *
 * Prefixed with #learning-disabilities (the inherited wrapper this hero renders
 * inside) so it out-specifies grokkoli_learning_diffs.css's `#learning-disabilities
 * h1` rule, which would otherwise override the headline's font-size and margin. */
#learning-disabilities .mp-ld-hero__headline {
    margin: 0 0 1.25rem;   /* 36px */
    max-width: 25ch;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-on-dark);
}

/* Footnote marker: noticeably smaller than the headline, muted. */
.mp-ld-hero__sup {
    font-size: 0.5em;
    font-weight: 500;
    vertical-align: super;
    line-height: 0;
    margin-left: 0.12em;
    color: var(--hm-hero-sup);
}
.mp-ld-hero__sup a {
    color: inherit;
    text-decoration: none;
}
.mp-ld-hero__sup a:hover,
.mp-ld-hero__sup a:focus-visible {
    text-decoration: underline;
}

/* ---- Supporting sentence ----------------------------------------------- */
.mp-ld-hero__support {
    margin: 0 0 30px;
    max-width: 52ch;
    font-size: 1.25rem;             /* 20px */
    font-weight: var(--font-weight-regular);
    line-height: 1.55;
    color: var(--hm-hero-support);
}
.mp-ld-hero__support em {
    font-style: italic;
}

/* ---- CTA — the hero is a dark surface -----------------------------------
 * The hero CTA and the "See Learning Plans" button both use the canonical
 * .btn--flare component (see heliomath_components.css). That variant paints
 * peach on dark bands via the --flare-* context tokens; .mp-section--dark
 * sets that context for the pricing CTA, so here we re-point the same tokens
 * on the hero band so its button matches (peach, not the light-surface coral). */
.mp-ld-hero {
    --flare-paint:        var(--flare-on-dark);
    --flare-paint-hover:  var(--flare-on-dark-hover);
    --flare-paint-active: var(--flare-on-dark-active);
    --flare-label:        var(--text-on-light-fill);
    --flare-ring:         var(--focus-ring-flare-on-dark);
}

/* Narrow phones: the hero CTA ("See how <brand> helps ➔") is white-space:nowrap, so it
 * can't wrap — and its label barely shrinks with viewport (--type-control-size floors at
 * ~18px) while the gutter keeps eating width, so below ~406px the button outgrows the
 * column and clips off-screen (the body overflow-x guard hides it). Fix without wrapping or
 * dropping the arrow: below 420px, shrink the LABEL harder with viewport width. The box is
 * em-padded, so the whole button (arrow included) scales down with the font. The ramp is
 * continuous with --type-control-size at 420px (~19.57px) and reaches exactly 15px at 320px,
 * the largest label that still fits there. Scoped to this page's hero button; the #id keeps
 * it above the base .btn font-size rule. */
@media (max-width: 420px) {
    #learning-disabilities .mp-ld-hero .btn--flare {
        font-size: calc(4.57vw + 0.38px);
    }
}

/* ---- Footnote ---------------------------------------------------------- */
.mp-ld-hero__footnote {
    margin: 44px 0 0;
    padding-top: 12px;
    max-width: 60ch;
    border-top: 1px solid var(--hm-hero-rule);
    font-size: var(--type-caption-size);   /* 14px — the style-guide text floor */
    font-weight: var(--font-weight-light);  /* 300 */
    line-height: 1.5;
    color: var(--hm-hero-footnote);
}

/* Hero CTA jump target — offset so the fixed nav doesn't cover the section top. */
#how-heliomath-helps {
    scroll-margin-top: 90px;
}

/* ============================================================================
 * Sections 2 & 3 — Sunset palette. Same reconciliations as the hero: on-dark
 * light text uses --text-on-dark, the on-dark warm accent uses --flare-on-dark,
 * and no text drops below the 14px floor.
 * ========================================================================== */
.mp-ld-stats,
.mp-ld-np {
    /* Page-local tones the palette has no token for. */
    --hm-stat-label: #2A2F45;       /* dark navy-grey — stat labels on paper */
    --hm-np-body: #C3CBE8;          /* muted lavender — neuroplasticity body copy */

    font-family: var(--font-family-base);
}

/* ---- Section 2: stats band --------------------------------------------- */
.mp-ld-stats {
    background: var(--surface-default);
    padding: clamp(24px, 4vw, 34px) clamp(24px, 7vw, 112px);
}
.mp-ld-stats__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 3vw, 24px);
    text-align: center;
}
.mp-ld-stat__num {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    margin-bottom: 8px;
}
.mp-ld-stat__num--blue { color: var(--accent-primary); }
.mp-ld-stat__num--peach { color: var(--flare); }
.mp-ld-stat__label {
    margin: 0 auto;
    max-width: 19ch;
    font-size: var(--type-body-size);   /* regular body copy (~17px), matching <p> */
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    color: var(--hm-stat-label);
}
@media (max-width: 620px) {
    .mp-ld-stats__inner { grid-template-columns: 1fr; }
}

/* ---- Section 3: neuroplasticity ---------------------------------------- */
.mp-ld-np {
    background: var(--surface-dark-alt);
    /* Horizontal gutter + inner cap match the .mp-section system used by the
       testimonials / success-stories bands below, so this section's content column is
       exactly the same width as theirs. Vertical padding stays this section's own. */
    padding: clamp(30px, 5vw, 56px) var(--space-gutter);
}
.mp-ld-np__inner {
    max-width: var(--mp-content-max);   /* 68rem (~1088px) — same as .mp-section__inner */
    margin: 0 auto;
    display: grid;
    /* Text and chart columns kept close to equal. The chart carries internal
       whitespace (the y-axis gutter + the curve easing off before the right edge),
       so a touch of extra column width would read as equal — but at full parity the
       chart looked a hair too large, so the chart column is trimmed slightly below
       the text column (~10% off its rendered width). */
    grid-template-columns: 1fr 0.93fr;
    align-items: center;
    gap: 52px;
}
.mp-ld-np__eyebrow {
    margin: 0 0 12px;
    font-size: var(--type-caption-size);   /* 14px — the style-guide text floor */
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--flare-on-dark);      /* on-dark warm accent */
}
/* Prefixed with #learning-disabilities so it out-specifies the inherited
   `#learning-disabilities h2` rule (font-size / margin). */
#learning-disabilities .mp-ld-np__title {
    margin: 0 0 16px;
    max-width: 30ch;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-on-dark);
}
.mp-ld-np__body {
    margin: 0 0 20px;
    font-size: var(--type-body-size);   /* regular body copy (~17px), matching <p> */
    font-weight: var(--font-weight-light);
    line-height: 1.6;
    color: var(--hm-np-body);
}
.mp-ld-np__body strong {
    color: var(--text-on-dark);
    font-weight: 500;
}
.mp-ld-np__conclusion {
    margin: 0;
    max-width: 42ch;
    font-size: 1.125rem;            /* 18px */
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-on-dark);
}
.mp-ld-np__chart {
    display: block;
}
.mp-ld-np__chart svg {
    display: block;
    width: 100%;
    height: auto;
}
/* Use the brand font for the illustrative chart's labels, and keep them at the
   14px floor. (A CSS rule overrides the SVG's inline font-size attributes; the
   value is in user units, so it scales up with the chart on wider screens.) */
.mp-ld-np__chart svg text {
    font-family: var(--font-family-base);
    font-size: 11.9px;   /* was 14px, cut 15% — smaller labels on the (also slightly smaller) chart */
}
@media (max-width: 900px) {
    /* Stacked. The 52px `gap` above is a COLUMN gap for the two-column layout; when
       stacked it also becomes the row gap, which (plus the chart margin) left too much
       space between the copy and the chart — so pin the row gap to a smaller value. */
    .mp-ld-np__inner {
        grid-template-columns: 1fr;
        row-gap: 5px;
    }
    /* Cap the chart's overall size so it doesn't stretch the full column width and dwarf
       the copy. The SVG keeps its viewBox aspect ratio (height: auto), so this scales the
       whole graphic down proportionally. Left-aligned to the text's left edge. */
    .mp-ld-np__chart {
        max-width: 400px;
    }
}

/* ============================================================================
 * Inherited sections below the new ones — background overrides only. Page-scoped
 * (this file loads only on the Heliomath page), so Grokkoli is untouched.
 * ========================================================================== */

/* Testimonials band → the DEFAULT beige surface (not the shared .mp-section--sunken
   sand), so it reads distinctly from the SAND success-stories band immediately below it
   — two adjacent recessed sand bands would blur together. Scoped to #learning-disabilities
   (and this file only loads on the LD page), so .mp-section--sunken testimonials on every
   other page keep their sand background. Out-specifies the single-class --sunken rule. */
#learning-disabilities #testimonials.mp-section--sunken {
    background-color: var(--surface-default);   /* #F7F4F2 — regular beige field */
}

/* Success-stories band → the sunken beige surface, with the story rows as white
   cards that pop against it. The double #id prefix matches the specificity of
   heliomath.css's `#learning-disabilities #success-story-sample` rule (which
   sets the band white); this file loads later, so equal specificity wins. */
#learning-disabilities #success-story-sample {
    background-color: var(--surface-sunken);   /* #EDEAE0 — recessed section band */
}
/* The story rows carry `.success-story-list-item card` in the markup, so the card shell
   (white surface, deep-sand border, radius, shadow, padding) comes from .card — matching
   the main success-stories page. Their flex layout + the transparent image mat come from
   heliomath_marketing's #success-story-sample rules. Only the band background above is
   LD-specific. */

/* Individual-learning-differences (the long details section) → beige. */
#learning-disabilities .learning-disability-details {
    background-color: var(--surface-default);   /* beige #F7F4F2 */
}


/* ============================================================================
 * DETAIL BAND LAYOUT — the per-difference section (dyscalculia / dyslexia / ADHD /
 * autism / math-anxiety / cognitive), below the success-stories sample.
 *
 * Ported from grokkoli_learning_diffs.css onto Sunset tokens and RE-SCOPED to
 * .learning-disability-details: the legacy layout keyed on .landing-page-module-container,
 * which the Heliomath markup swapped for .mp-section — so those rules stopped matching. The
 * mp-section wrapper supplies the band padding; these rules lay out the inner content.
 * ========================================================================== */

/* Inner content column — capped + centred within the band. */
#learning-disabilities .learning-disability-details .landing-page-module {
    display: block;
    width: 80vw;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Filter chips (Dyscalculia / Dyslexia / …). (.btn base is guarded off .filter in components.) */
#learning-disabilities .learning-disability-details .filters {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}
#learning-disabilities .learning-disability-details .filter {
    height: fit-content;
    padding: 3px 20px;
    margin: 0 13px 10px 0;
    border-radius: var(--radius-pill);
    background-color: var(--accent-primary);
    color: var(--text-on-dark-fill);
    font-size: calc(10px + 0.5vw);
    font-weight: var(--font-weight-semibold);
}
#learning-disabilities .learning-disability-details .filter:hover {
    background-color: var(--accent-primary-hover);
    color: var(--text-on-dark-fill);
}

/* Each chip is a <div class="filter btn"> WRAPPED in an <a>. On press/focus the
 * anchor would draw base.css's azure link focus ring (--focus-ring-link) — a loose
 * pill floating around the chip that doesn't hug it, so it reads as broken. It would
 * ALSO get the inline-link pill FILL (base.css's a:focus:not(.btn)…), which shows as a
 * light-blue pill in the chip's own margins and breaks the button look. Suppress the
 * anchor's ring, fill AND its focus-pill padding/negative margins (so nothing shifts),
 * then surface the CHIP's ring instead — the same treatment a.main-cta gets for the
 * hero CTA (a button wrapped by an <a> should never show link chrome). */
#learning-disabilities .learning-disability-details .filters a:focus,
#learning-disabilities .learning-disability-details .filters a:active {
    outline: none;
    box-shadow: none;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* The chip's pressed/focus ring — the detached full-opacity accent outline held 3px
 * off the edge, exactly the chip's fill colour, matching the other Heliomath buttons.
 * The chip is a non-focusable <div>, so keyboard focus lands on the <a> (ring
 * forwarded here); a pointer press also fires :active on the chip directly. */
#learning-disabilities .learning-disability-details .filters a:focus .filter,
#learning-disabilities .learning-disability-details .filters a:active .filter,
#learning-disabilities .learning-disability-details .filter:active {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}
/* Same downward nudge on press as the other buttons (press only, not keyboard focus). */
#learning-disabilities .learning-disability-details .filter:active {
    transform: translateY(1px);
}

/* Per-difference heading + copy spacing. */
#learning-disabilities .learning-disability-details h2 {
    margin-top: 25px;
    margin-bottom: 10px;
}
#learning-disabilities .learning-disability-details h3 {
    font-size: var(--type-h3-size);
    font-weight: var(--font-weight-bold);
    margin: 0;
}
#learning-disabilities .learning-disability-details ul {
    padding-left: 25px;
}
#learning-disabilities .learning-disability-details .copy-block {
    width: unset;
    max-width: unset;
    margin: 0;
}
#learning-disabilities .learning-disability-details .copy-block li {
    margin-top: 15px;
}

/* Condition illustration — a white-framed image floated to the right of the copy. */
#learning-disabilities .learning-disability-details .image-block {
    float: right;
    min-width: 240px;
    margin: 0 0 30px 30px;
    padding: 10px;
    background-color: var(--surface-elevated);
    border-radius: 13px;
    box-shadow: var(--shadow-elevated-hover);
}
#learning-disabilities .learning-disability-details .image-block img {
    height: 250px;
    width: 220px;
    max-width: 220px;
    border-radius: 4px;
}
@media screen and (max-width: 560px) {
    #learning-disabilities .learning-disability-details .image-block {
        float: none;
        margin-left: 0;
    }
}

/* Bubble callout (and the embedded intro video in the dyscalculia bubble). */
#learning-disabilities .learning-disability-details .bubble-block {
    margin: 30px 0 50px;
    padding: 30px 40px 20px;
    border-radius: 0 50px 50px 50px;
    background-color: var(--surface-elevated);
    color: var(--accent-secondary);   /* winter-green callout text */
    box-shadow: var(--shadow-elevated);
}
/* The bubble's "How <brand> can help" heading. base sets ALL headings to --text-primary
 * (midnight), which out-specifies the winter-green the .bubble-block sets on its text via
 * inheritance — so restate winter-green on the heading itself. Scoped to the bubble so the
 * other detail headings (copy-block h3s) keep the default dark ink. */
#learning-disabilities .learning-disability-details .bubble-block h3 {
    color: var(--accent-secondary);   /* winter-green — match the callout text */
}
#learning-disabilities .learning-disability-details .bubble-block iframe {
    height: 50.6vw;
    max-height: 420px;
    width: calc(80vw - 80px);
    max-width: 720px;
    margin-bottom: 20px;
}