/* ============================================================================
 * Heliomath ABOUT — the /about page (+ the scholarship / reports pages that share
 * the same markup). The on-brand port of grokkoli_about.css onto the Sunset
 * design system.
 *
 * WHAT CHANGED FROM grokkoli_about.css:
 *   - No Avenir. Heliomath uses Nunito (from heliomath_base), so the per-block
 *     `font-family: avenir` overrides are simply dropped — the page inherits the
 *     brand font.
 *   - Colours come from Sunset tokens via var() — never a hard-coded hex and never
 *     the legacy --main-* palette (which isn't even defined on Heliomath pages, so
 *     those rules were dead here). Green/"winter-green" accents map to the
 *     cornflower primary; the warm "gold" accent on the dark band maps to peach.
 *   - The founder-photo backdrop (was a teal gradient) is a cornflower gradient.
 *   - Heading weights step down from the legacy 900 to the brand bold (700).
 *   - Layout / structure is preserved.
 *
 * SELF-CONTAINED: this file states the full section theme, so it can be the single
 * source once the legacy #about-us block is removed from brands/heliomath.css.
 * It's loaded AFTER the foundation on the external_base pages, so it wins.
 * ========================================================================== */

/* Page field — the recessed sand band; white/cloud sections sit on top. */
#about-us { background-color: var(--surface-sunken); }

/* ============================================================================
 * HERO — the .light-hero splash on the cream field: a sized wordmark (this page's
 * ONLY logo — the nav logo is dropped on About, mirroring the home page), a
 * headline, and supporting copy. The shared markup was built for a dark hero, so
 * out of the box the wordmark is unsized (fills the container width) and the h2 is
 * white; both are corrected here.
 * ========================================================================== */
/* Hero shell — self-sufficient padding (a nav-clearing top + the shared side
 * gutter + a bottom) and a centred content measure, so the hero no longer needs
 * grokkoli_public's .above-the-fold-splash / .splash-container layout. The gutter
 * + measure match the body sections (.mp-section + .about-container) so the hero
 * content lines up with them. */
#about-us .light-hero {
    /* Dark "midnight" hero (like the learning-differences page). The .light-hero class
     * name is legacy — the surface is dark here; the hero text below is coloured for it. */
    background-color: var(--surface-dark);
    padding: calc(5rem + 2vw) var(--space-gutter) var(--space-2xl);
}
#about-us .light-hero .splash-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
}

/* Eyebrow LOCKUP — the word "About" beside the wordmark, small, above the H1. It
 * carries the brand mark (and the home link), which frees the H1 to be the page's
 * message rather than the logo. "About" is set in the wordmark's own family
 * (decorative / Comfortaa-alike) + coral, sized to sit with the logo. Because it's
 * an eyebrow (not a heading), it can be smaller than the H1 with no hierarchy issue. */
#about-us .light-hero .hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin: 0 0 0.9rem;
}
#about-us .light-hero .hero-eyebrow a {
    display: inline-flex;
    text-decoration: none;
}
#about-us .light-hero .hero-eyebrow__word {
    font-family: var(--font-family-decorative);   /* the wordmark's rounded family */
    font-size: calc(1.38rem + 0.84vw);   /* ~20% up from the original 1.15rem/0.7vw */
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--flare-on-dark);                         /* coral */
    position: relative;
    top: -3px;                                     /* nudge the word up to sit level with the wordmark */
}
#about-us .light-hero .hero-eyebrow__logo {
    display: block;
    height: calc(1.3rem + 0.85vw);   /* a touch taller than the word, to match the wordmark's cap height */
    width: auto;
}

/* H1 — the page's message, front and centre: the dominant hero element, comfortably
 * larger than the eyebrow lockup above it. */
#about-us .light-hero h1 {
    margin: 0 0 0.7rem;
    font-size: calc(1.7rem + 1.5vw);
    line-height: 1.15;
    color: var(--text-on-dark);      /* cream — softer than pure white on the dark hero */
}
#about-us .light-hero .text {
    color: var(--text-on-dark-muted);   /* muted light — lower contrast supporting copy */
    max-width: 700px;
}


/* ============================================================================
 * SHARED LAYOUT (structure only — ported verbatim)
 * ========================================================================== */
.about-container {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.about-container p a:hover {
    /* Just the dim on hover. NOT text-decoration:underline — the link is already
     * underlined at rest (base a), so re-asserting it here (at higher specificity than
     * base a:focus) clobbered the pressed state, leaving the underline stuck under the
     * focus pill. Dropping it lets press behave like every other link. */
    opacity: 0.85;
}
.about-container-row {
    display: flex;
    align-items: flex-start;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================================
 * TYPE — sizes preserved from the legacy page; weights → brand bold; colours via
 * the base (light sections inherit --text-primary from heliomath_base).
 * ========================================================================== */
#about-us h1 {
    font-size: calc(2.4rem + 1vw);
    margin-bottom: 20px;
}
#about-us h2 {
    font-size: calc(1.4rem + 0.75vw);
    font-weight: var(--font-weight-bold);
    margin-bottom: 14px;
}
#about-us p, #about-us li {
    font-size: calc(16px + 0.2vw);
}
#about-us h5 {
    font-size: calc(0.7rem + 0.25vw);
    font-weight: var(--font-weight-bold);
    color: var(--text-caption);
}
#about-us .text {
    font-size: calc(1.5rem + 0.5vw);
    margin-bottom: 20px;
}
/* When a .text block is the last thing in its container (the mission line, the hero
 * copy), drop its bottom margin so the band's bottom padding stays even. */
#about-us .text:last-child {
    margin-bottom: 0;
}


/* ============================================================================
 * SECTION SURFACES — warm light fields with a single Midnight anchor.
 * ========================================================================== */
#about-us #about-approach,
#contact-us .steel-grey-background { background-color: var(--surface-default); }   /* beige */
#about-us #about-standard,
#about-us #about-team { background-color: var(--surface-sunken); }                 /* sand — recessed statement / "who we are" bands */
#about-us #about-why,
#about-us #about-mission { background-color: var(--surface-elevated); }            /* white */
#about-us #about-commitment { background-color: var(--surface-dark); }             /* midnight anchor */

/* Set the "our optimism / caution" (AI) band off from the sections above and
 * below it with a warm sand-deep hairline top + bottom. */
#about-us #about-approach {
    border-top: 1px solid var(--border-warm);      /* --border-warm = --sand-deep */
    border-bottom: 1px solid var(--border-warm);
}
/* The mission band is white now, sitting between the sand "who we are" band above and the
 * midnight commitment below — both give it a clear edge, so it needs no hairline of its own. */


/* ============================================================================
 * BULLETED SECTIONS (why we start there / our optimism) — light fields. The body
 * ink comes from heliomath_base (dark on light), so only bullet spacing here.
 * ========================================================================== */
/* Gap only BETWEEN bullets (margin-top), never after the last one — no trailing margin
 * to strip, so the section's bottom stays even with its top. */
#about-us #about-why li,
#about-us #about-approach li {
    margin-top: 20px;
}
#about-why .copy-block {
    min-width: 200px;
    margin-left: 0;
}


/* ============================================================================
 * STANDARD statement + MISSION — the two big single-idea lines.
 * ========================================================================== */
#about-us #about-standard h2 { max-width: 42ch; }
#about-us #about-mission .text {
    font-size: calc(1.9rem + 0.88vw);   /* midpoint of the About H1 (2.4rem+1vw) and H2 (1.4rem+0.75vw) */
    font-weight: var(--font-weight-bold);
    color: var(--flare);   /* coral — WCAG-safe here as large (24px+) bold display text on the light band */
}
#about-us #about-mission strong { color: var(--flare); }


/* ============================================================================
 * WHO WE ARE — light field; portraits on a cornflower backdrop (layout below).
 * Headings/body inherit dark ink from heliomath_base; only the caption tint here.
 * ========================================================================== */
#about-us #about-team h4 .small {
    color: var(--text-primary);              /* midnight ink — reads as regular text, not a caption */
    font-weight: var(--font-weight-light);   /* 300 — lighter than the bold name it follows */
    font-size: 0.8em;                        /* 20% smaller than the name (the all-caps otherwise reads big) */
}

#about-us .copy-block {
    margin-left: 0;
    margin-right: 2vw;
    width: unset;
}
/* Illustration mat — a soft white frame around the photo (pops on the field). */
.image-block {
    margin-top: 14px;
    margin-right: 0;
    margin-left: calc(20px + 2vw);
    background-color: var(--surface-elevated);
    box-shadow: 0 0 0 8px var(--surface-elevated), var(--shadow-elevated);
    border-radius: 3px;
    /* Don't let the flex row (copy | image) squeeze this column — otherwise the
     * photo (a 240x360 with a height attribute but a shrinkable max-width:100%
     * width) gets narrower than its box while staying tall → vertically stretched /
     * horizontally squished. Held at its own width, the photo keeps its 2:3 ratio. */
    flex-shrink: 0;
}
.image-block img {
    display: block;
    /* Ratio-lock: let the height follow the width (overriding the height attribute)
     * so it scales proportionally if the column ever narrows on small screens. */
    height: auto;
    max-width: 100%;
    border-radius: 3px;
}
.founder-profile {
    display: flex;
    justify-content: space-between;
    max-width: 700px;
}
.founder-profile img {
    width: 120px;
    height: 120px;
    border-radius: 3px;
    margin-top: 15px;
    margin-right: calc(20px + 1vw);
    /* Portraits are transparent PNGs; the gradient shows behind them. Cornflower
       (was a teal gradient) to stay on-brand. */
    background-image: linear-gradient(var(--cornflower-soft), var(--cornflower-deeper));
}
/* The portrait column must not shrink in the flex row: otherwise the img's
 * max-width:100% (from base) collapses it horizontally while its fixed height holds,
 * squishing the photo (most visible ~560-888px, before the row wraps to a column).
 * Mirrors the .image-block flex-shrink:0 used for the section photos. */
.founder-pic {
    flex-shrink: 0;
}
.founder-details {
    display: flex;
    flex-direction: column;
    margin-top: 11px;
}
.founder-details h4 {
    font-weight: var(--font-weight-bold);
}
@media screen and (min-width: 889px) {
    .founder-details {
        width: 620px;
    }
}
@media screen and (max-width: 700px) {
    .about-container-row {
        flex-direction: column;
        align-items: left;
    }
    #about-why .copy-block {
        width: 70vw;
    }
    .image-block {
        margin-left: 8px;
    }
}
@media screen and (max-width: 560px) {
    .founder-profile {
        flex-wrap: wrap;
    }
    .founder-details {
        width: 90vw;
    }
}


/* ============================================================================
 * OUR COMMITMENT — the Midnight anchor: light text, warm + link accents on dark.
 * ========================================================================== */
#about-us #about-commitment h2 { color: var(--text-on-dark); }
#about-us #about-commitment p { color: var(--text-on-dark); }
/* The warm emphasis (was "gold") — peach reads on the dark surface. */
#about-us #about-commitment .accent-color-gold { color: var(--flare-on-dark); }
#about-us #about-commitment a {
    color: var(--link-on-dark);
    /* On-dark surface: re-point the link pill fill + ring to the on-dark pair (base.css
     * a:focus reads these). */
    --link-fill: var(--link-fill-on-dark);
    --focus-ring-link: var(--focus-ring-link-on-dark);
}
#about-us #about-commitment a:hover { color: var(--link-on-dark-hover); }


/* ============================================================================
 * CONTACT US — light field: dark heading/labels, white inputs with a cornflower
 * focus ring, cornflower submit (the brand primary button).
 * ========================================================================== */
#contact-us h2 { color: var(--text-primary); font-weight: var(--font-weight-bold); }
#contact-us p { color: var(--text-primary); }
#contact-us .field-group label,
#contact-us .contact-form label { color: var(--text-muted); }

.message-send-success {
    color: var(--accent-primary);
    font-weight: var(--font-weight-bold);
}

.contact-form .field-group {
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
}
.contact-form .field-group input, .contact-form .field-group textarea {
    margin-top: 5px;
    margin-bottom: 10px;
}
.contact-form .entry-fields:last-child {
    display: flex;
}
.contact-form #id_email {
    max-width: 350px;
}
.contact-form #id_captcha_1 {
    display: inline;
    max-width: 100px;
    margin-left: 15px;
}
.contact-form img {
    margin-left: 15px;
    width: 80px;
    height: 37px;
}
.contact-form .btn {
    margin-top: 10px;
}

/* Inputs — white surface, hairline border, cornflower focus ring. */
#contact-us .form-control {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    box-shadow: var(--shadow-elevated);
}
#contact-us .form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}
/* Submit — the brand primary (cornflower, white label). Re-themes the legacy
 * button class in the shared markup, scoped to the form (no gold gradient). */
#contact-us .btn-grokkoli-primary {
    background-color: var(--accent-primary);
    background-image: none;
    color: var(--text-on-dark-fill);
    border: none;
}
#contact-us .btn-grokkoli-primary:hover,
#contact-us .btn-grokkoli-primary:focus,
#contact-us .btn-grokkoli-primary:active {
    background-color: var(--accent-primary-hover);
}


/* ============================================================================
 * REPORTS — the shared reports/scholarship markup (charts + report lists).
 * ========================================================================== */
/* Clear the fixed ~64px solid nav: the .mp-section top padding alone tucks the
 * H1 under it, so add ~48px above the report title. Scoped to the pilot page
 * (matching the .mp-section__inner rule below) so shared .report markup reused
 * elsewhere wouldn't inherit this page-specific clearance. */
.pilot-case-study .report h1 {
    margin-top: 3rem;
}
/* Narrow the whole content column (text + chart): the default .mp-section__inner
 * caps at 1088px, whose long lines read heavier than the rest of the site. Scoped
 * to the pilot page so other .mp-section__inner users are untouched. */
.pilot-case-study .mp-section__inner {
    max-width: 880px;
}
.report h3 {
    font-weight: var(--font-weight-bold);
    font-size: calc(1em + 0.5vw);
    margin-top: 30px;
}
.report li {
    min-width: 200px;
}
.chart {
    float: none;
    border: 15px solid var(--surface-elevated);
    border-radius: 10px;
    margin-left: 0;
    margin-bottom: 20px;
    width: calc(400px + 10vw);
    max-width: 930px;
    box-shadow: 0 0 0 1px var(--border);
}
@media screen and (min-width: 1020px) {
    .chart {
        float: right;
        max-width: 546px;
        margin-left: 40px;
    }
}
@media screen and (max-width: 560px) {
    .chart {
        max-width: 80vw;
    }
}