/* ─────────────────────────────────────────────────────────────────
   In Space Universe — Site overrides
   ─────────────────────────────────────────────────────────────────
   Loaded after each page's embedded <style> block, so these rules
   win the cascade. Add site-wide tweaks here instead of editing
   the embedded styles in 13 different HTML files.

   Use CSS variables (--blue-anchor, etc.) where possible so the
   overrides automatically follow any future design-token changes.
   Fallback hex values are provided in case a page hasn't set the
   variable yet.
   ───────────────────────────────────────────────────────────── */

/* Pulls in Playfair Display (used by division logo lockups) site-wide
   without editing each page's <head>. @import in CSS is parsed before
   the rest of this file, so it Just Works. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&display=swap');

/* ─── React variant-A palette lock ──────────────────────────────
   Bring the HTML site's accent colors into alignment with the
   React variant A palette. The React app uses:

     #42A5F5  In Space Blue       — primary accent (used 114 places)
     #1565C0  Academy Blue        — deeper accent / gradient stop
     #0A1628  Deep Navy           — anchor / "almost black" backgrounds
     #1A1A1A  Cosmic Ink          — body text
     #FFFFFF  Orbit White         — pure white surfaces

   Each HTML page has an inline <style> block that defines these
   vars earlier (e.g. --blue: #7CC4F0). This :root override is
   loaded after those inline blocks, so it wins on source order
   without us having to touch every page.

   The Academy compromise palette in academy.html lives further
   below the site-overrides.css link, with higher specificity
   (body.program-academy), so it correctly wins on academy pages
   only — same mechanism, opposite direction.
   ─────────────────────────────────────────────────────────── */
:root {
    --blue: #42A5F5;              /* In Space Blue — primary accent */
    --blue-deep: #1565C0;         /* Academy Blue — deeper accent */
    --blue-anchor: #0A1628;       /* Deep Navy — anchor / deep-bg surface */
    --ink: #1A1A1A;               /* Cosmic Ink — body text */
    /* --cream and --blue-warm intentionally left as-is — they're
       warm-tone tokens specific to the HTML site's surface design
       and don't have direct React equivalents. */
}

/* ─── Replace peach accent with light blue ─────────────────────
   Was: --peach #ff9166 (sunset orange) used across the site for
   button hover backgrounds, link underlines, eyebrow accents,
   focus borders, etc. The page CSS uses var(--peach) tokens
   everywhere, so this single redefinition cascades to all
   30+ usages per page automatically.

   To revert: comment out the three lines below. */
/* ─── Replace peach accent with In Space Blue ──────────────────
   The original page CSS uses --peach (#ff9166 sunset orange) for
   button hover backgrounds, link underlines, eyebrow accents,
   etc. Redefining it once cascades through all 30+ usages per
   page automatically.

   Updated 2026-05: was light-blue #7CC4F0, now React's exact
   In Space Blue #42A5F5 so peach-tinted elements match the
   primary brand accent throughout. */
:root {
    --peach: #42A5F5;                    /* In Space Blue */
    --peach-soft: rgba(66, 165, 245, 0.18);
    --peach-glow: rgba(66, 165, 245, 0.12);
}

/* ─── Founder portrait — always Matthew ─────────────────────────
   Every page's inline <style> defines --bg-founder as an SVG
   gradient placeholder (the old "waiting for a real photo" state).
   Override it once here to point at the actual Matthew portrait
   in plugins/, so the home page's founder card AND the founder
   detail page both show the real photo.

   Path is relative to this CSS file (plugins/site-overrides.css),
   so url("./founder-portrait.jpg") → plugins/founder-portrait.jpg
   resolves correctly from every subfolder.

   The .founder-portrait CSS in each page layers a blue gradient
   on top of var(--bg-founder) — that overlay made sense for an
   abstract placeholder but obscures a real photo, so we strip it
   to just show the photo cleanly (matching React's Founder.tsx
   treatment, which renders the image with no overlay at all).
   ───────────────────────────────────────────────────────── */
:root {
    --bg-founder: url("./founder-portrait.jpg");
}
.founder-portrait {
    /* Override the gradient-on-top-of-placeholder treatment with
       just the photo, full bleed, no tint. */
    background: var(--bg-founder) center / cover no-repeat !important;
}
.founder-portrait::after {
    /* The original ::after radial overlay was meant to add depth
       to the flat placeholder. With a real photo it muddies the
       face, so suppress it. */
    display: none !important;
}

/* ─── Logo: black circle (header + footer) ─────────────────────
   Was: --blue-anchor (dark blue) in header, --peach (orange) in
   footer (set via inline style). The !important is required to
   beat the footer's inline style.
   The <img> inside .brand-mark uses mix-blend-mode: screen which
   masks black backgrounds — works correctly against any color. */
/* ─── Logo mark: always black circle ──────────────────────────
   Header AND footer brand-mark stay black on every page, regardless
   of the page's own --peach value or any inline style. Multiple
   selectors raise specificity high enough to win against anything
   short of an inline !important.
   The <img> inside .brand-mark uses mix-blend-mode: screen which
   masks black backgrounds — works correctly against any color. */
.brand-mark,
header .brand-mark,
nav .brand-mark,
footer .brand-mark,
.footer-brand .brand-mark,
.nav-inner .brand-mark,
a.brand .brand-mark,
[class*="brand"] .brand-mark {
    background: #000 !important;
    background-color: #000 !important;
}

/* ─── Scrollbar: dark blue ─────────────────────────────────────
   Webkit (Chrome, Safari, Edge) + Firefox.
   Track stays cream so it blends with the page background; the
   thumb is the dark blue (--blue-anchor). */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: #ececec;
}
::-webkit-scrollbar-thumb {
    background: var(--blue-anchor, #1a3d52);
    border-radius: 6px;
    border: 2px solid #ececec;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--blue-deep, #2f5d7a);
}
::-webkit-scrollbar-corner {
    background: #ececec;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--blue-anchor, #1a3d52) #ececec;
}

/* ─── Text selection highlight: lighter blue ───────────────────
   Uses the brand --blue token (#7CC4F0). Ink-colored text reads
   cleanly against the light blue background. */
::selection {
    background: var(--blue, #7CC4F0);
    color: var(--ink, #1f2f26);
}
::-moz-selection {
    background: var(--blue, #7CC4F0);
    color: var(--ink, #1f2f26);
}

/* ─── RR Beaver self-hosted font ───────────────────────────────
   Path resolution mirrors the resource-image system: try a
   relative URL (works on every domain because it's relative to
   this CSS file's location), then absolute fallbacks for both
   production (/inspace/plugins/...) and the remote dev mirror
   (/plugins/...). The browser tries each src in order until
   one loads successfully. */
@font-face {
    font-family: 'RR Beaver';
    src: url('fonts/rr-beaver.woff2') format('woff2'),
         url('/inspace/plugins/fonts/rr-beaver.woff2') format('woff2'),
         url('/plugins/fonts/rr-beaver.woff2') format('woff2'),
         url('fonts/rr-beaver.ttf') format('truetype'),
         url('/inspace/plugins/fonts/rr-beaver.ttf') format('truetype'),
         url('/plugins/fonts/rr-beaver.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Division logo lockup (Academy / Childcare / Aquatics) ────
   Reusable component. Same HTML structure on each program page,
   only the division word changes ("ACADEMY" / "CHILDCARE" / etc.).
   Per-division accent overrides are in the next block. */
.division-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto 32px;
    max-width: 480px;
}
.division-wing {
    width: 96px;
    height: auto;
    margin-bottom: 12px;
    /* mix-blend-mode: screen masks the black PNG background — works
       on both light and dark hero backgrounds. */
    mix-blend-mode: screen;
}
.division-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(40px, 7vw, 72px);
    letter-spacing: 0.04em;
    line-height: 0.95;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.division-subtitle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.division-line {
    flex: 1;
    max-width: 100px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.division-line.is-angled {
    /* Subtle angled bracket on one end, like the source image */
    height: 8px;
    background: none;
    border-bottom: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: skewX(-30deg);
    transform-origin: bottom right;
    max-width: 80px;
    opacity: 0.6;
}
.division-subtitle {
    font-family: 'RR Beaver', 'Bungee', monospace;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ─── HERO IDENTITY SWAP — Academy LIGHT, Childcare DARK ──────
   The original page CSS had:
     • Academy   = dark vertical gradient (dark with white strips)
     • Childcare = layered cream/white gradient (white bubble feel)
   We now invert the previous approach and let Academy shine as
   the LIGHT/white-bubble division and Childcare as the DARK
   atmospheric division with extra white color gradients on top.

   These rules override .subpage-hero-image, which is the absolute
   z-index: -1 layer that carries the actual visual gradient. */

/* ─── Academy HERO: blown-soap-bubble orbs ───
   Each bubble is built from 3 layers stacked in this order
   (top first, bottom last, since earlier `background-image`
   layers paint on top in CSS):
     1. HIGHLIGHT — small bright spot offset toward top-left,
        the reflection of "the light source"
     2. RIM — a thin bright ring near the outer edge of the
        bubble (the soap-film catching light at the rim)
     3. BODY — a soft iridescent fill, slightly tinted
        differently on each bubble (lavender, sage, peach,
        ice-blue, blush) for the rainbow-shimmer feel
   The base linear-gradient at the bottom is the cream wash.
   Five bubbles × 3 layers + 1 base = 16 background layers. */

body.program-academy .subpage-hero-academy .subpage-hero-image {
    background-image:

        /* ━━━ BUBBLE 1 — top-left, biggest, lavender shimmer ━━━ */
        /* Highlight (small bright dot) */
        radial-gradient(circle 6vw at 7% 14%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.55) 35%,
            transparent 75%),
        /* Rim (thin bright ring at the edge) */
        radial-gradient(circle 36vw at 12% 22%,
            transparent 0%,
            transparent 78%,
            rgba(255, 255, 255, 0.45) 84%,
            rgba(196, 210, 188, 0.28) 90%,
            transparent 100%),
        /* Body (iridescent fill, subtle lavender) */
        radial-gradient(ellipse 32vw 30vw at 13% 23%,
            rgba(220, 215, 235, 0.30) 0%,
            rgba(196, 210, 188, 0.22) 35%,
            rgba(220, 215, 235, 0.12) 65%,
            transparent 88%),

        /* ━━━ BUBBLE 2 — bottom-right, biggest, ice-blue shimmer ━━━ */
        radial-gradient(circle 7vw at 78% 70%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.55) 35%,
            transparent 75%),
        radial-gradient(circle 42vw at 85% 78%,
            transparent 0%,
            transparent 78%,
            rgba(255, 255, 255, 0.40) 84%,
            rgba(196, 210, 188, 0.26) 90%,
            transparent 100%),
        radial-gradient(ellipse 38vw 36vw at 86% 79%,
            rgba(215, 230, 240, 0.30) 0%,
            rgba(196, 210, 188, 0.22) 35%,
            rgba(215, 230, 240, 0.10) 65%,
            transparent 88%),

        /* ━━━ BUBBLE 3 — top-right, peach shimmer ━━━ */
        radial-gradient(circle 4vw at 92% 6%,
            rgba(255, 255, 255, 0.90) 0%,
            rgba(255, 255, 255, 0.45) 40%,
            transparent 75%),
        radial-gradient(circle 26vw at 95% 12%,
            transparent 0%,
            transparent 78%,
            rgba(255, 255, 255, 0.38) 84%,
            rgba(196, 210, 188, 0.22) 90%,
            transparent 100%),
        radial-gradient(ellipse 24vw 22vw at 95% 13%,
            rgba(235, 220, 215, 0.28) 0%,
            rgba(196, 210, 188, 0.18) 40%,
            rgba(235, 220, 215, 0.08) 65%,
            transparent 88%),

        /* ━━━ BUBBLE 4 — bottom-left, sage shimmer ━━━ */
        radial-gradient(circle 4vw at 4% 79%,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.45) 40%,
            transparent 75%),
        radial-gradient(circle 22vw at 6% 85%,
            transparent 0%,
            transparent 76%,
            rgba(255, 255, 255, 0.38) 84%,
            rgba(196, 210, 188, 0.26) 90%,
            transparent 100%),
        radial-gradient(ellipse 20vw 18vw at 7% 86%,
            rgba(196, 210, 188, 0.32) 0%,
            rgba(220, 230, 215, 0.20) 40%,
            transparent 85%),

        /* ━━━ BUBBLE 5 — center, smaller, blush shimmer ━━━ */
        radial-gradient(circle 2.5vw at 53% 45%,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 80%),
        radial-gradient(circle 18vw at 55% 50%,
            transparent 0%,
            transparent 78%,
            rgba(255, 255, 255, 0.32) 86%,
            rgba(196, 210, 188, 0.22) 92%,
            transparent 100%),
        radial-gradient(ellipse 16vw 14vw at 56% 51%,
            rgba(225, 215, 230, 0.22) 0%,
            rgba(196, 210, 188, 0.12) 50%,
            transparent 85%),

        /* ━━━ Cream → white → cream-deep base wash ━━━ */
        linear-gradient(135deg,
            var(--cream, #fbf6ee) 0%,
            #ffffff 45%,
            var(--cream-deep, #f3ecdf) 100%) !important;
}
body.program-academy .subpage-hero-academy {
    color: var(--ink, #1f2f26) !important;
}
body.program-academy .subpage-hero-eyebrow,
body.program-academy .subpage-hero-title,
body.program-academy .subpage-hero-tagline {
    color: var(--ink, #1f2f26) !important;
}
/* Remove text-shadow that was added for legibility on dark hero */
body.program-academy .subpage-hero-academy .subpage-hero-title,
body.program-academy .subpage-hero-academy .subpage-hero-tagline {
    text-shadow: none !important;
}

/* ─── Childcare HERO: dark base softened by spread white gradients ─
   Multiple white radial fades positioned across the surface so the
   black isn't an unbroken block — each one is a soft luminous patch
   that fades to transparent. The dark layers underneath keep the
   overall feel dark, but the white overlays add atmospheric depth
   and stop the background from reading as overwhelming.

   Stacking order in CSS shorthand `background:` is FRONT-TO-BACK
   (first listed sits on top). So the white radials are on top of
   the darkening linear gradient, which sits on top of the solid
   ink-to-near-black diagonal base. */
body.program-childcare .subpage-hero-childcare .subpage-hero-image {
    background-image:
        /* White luminous patches — spread across the surface to
           break up the black. Higher alphas than before so each
           one actually reads. */
        radial-gradient(ellipse 60% 50% at 25% 20%, rgba(255, 255, 255, 0.38) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 80% 35%, rgba(255, 255, 255, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 65% 55% at 50% 75%, rgba(255, 255, 255, 0.28) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 15% 85%, rgba(255, 255, 255, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 90% 90%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
        /* Subtle blue accent — ties to the brand palette */
        radial-gradient(ellipse 40% 35% at 100% 15%, rgba(124, 196, 240, 0.30) 0%, transparent 50%),
        /* Vertical darkening strip — keeps the overall dark feel
           and gives the bottom of the hero more weight for type
           legibility. Lighter at top so the white patches up there
           read more brightly. */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.25) 35%,
            rgba(0, 0, 0, 0.45) 70%,
            rgba(0, 0, 0, 0.60) 100%),
        /* Solid dark base — diagonal so it doesn't read as flat */
        linear-gradient(135deg, var(--ink, #1f2f26) 0%, #0a1410 100%) !important;
}
body.program-childcare .subpage-hero-childcare {
    color: #fff !important;
}
body.program-childcare .subpage-hero-eyebrow,
body.program-childcare .subpage-hero-title,
body.program-childcare .subpage-hero-tagline {
    color: #fff !important;
}
body.program-childcare .subpage-hero-childcare .subpage-hero-title,
body.program-childcare .subpage-hero-childcare .subpage-hero-tagline {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

/* ─── Status label: remove the white block ───
   Keep just the pulsing dot + text. No background, no border, no
   chip-style box around the words. */
body.program-academy .subpage-hero-status,
body.program-childcare .subpage-hero-status,
body.program-aquatics .subpage-hero-status {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}
/* The pulsing dot ::before retains its blue + glow */
body.program-academy .subpage-hero-status::before {
    background: var(--blue, #7CC4F0) !important;
    box-shadow: 0 0 0 4px rgba(124, 196, 240, 0.30) !important;
}
body.program-childcare .subpage-hero-status::before {
    background: var(--blue, #7CC4F0) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) !important;
}

/* ─── CTAs adapted to the swapped backgrounds ─── */
body.program-academy .subpage-hero-cta {
    background: var(--blue-anchor, #1a3d52) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px -8px rgba(26, 61, 82, 0.45);
}
body.program-academy .subpage-hero-cta:hover {
    background: var(--ink, #1f2f26) !important;
}
body.program-childcare .subpage-hero-cta {
    background: #fff !important;
    color: var(--ink, #1f2f26) !important;
}
body.program-childcare .subpage-hero-cta:hover {
    background: var(--blue, #7CC4F0) !important;
}

/* ─── Aquatics: stays cohesive with overall site, blue accent ──
   Subtle blue underglow on the wing to reinforce the aquatic theme. */
body.program-aquatics .division-wing {
    filter: drop-shadow(0 4px 12px rgba(124, 196, 240, 0.45));
}
body.program-aquatics .division-name {
    color: var(--blue-anchor, #1a3d52);
}
body.program-aquatics .division-subtitle {
    color: var(--blue-anchor, #1a3d52);
    opacity: 0.85;
}

/* ─── Nav: always visible, always defined ────────────────────
   Override the page's own .nav rule so the background and a
   horizontal line are present at every scroll position, not
   only when .scrolled is added. The header should never feel
   undefined or floating — it always sits as a solid bar at the
   top of the viewport.

   This selector list intentionally targets BOTH the default state
   AND .scrolled state with the same rule, so the nav looks
   identical whether the user is at the top or has scrolled. */

nav.nav,
nav.nav.scrolled,
#nav,
#nav.scrolled {
    /* Always-visible: locked to top of viewport regardless of scroll
       position. position:fixed is set in astro.css already, but this
       reinforcement guarantees it survives any cascade collisions
       (especially on dark-hero pages where some browsers were
       behaving oddly). z-index above 999 keeps it above any hero
       backgrounds, modal overlays, or floating UI. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;

    background: rgba(236, 236, 236, 0.92) !important;     /* light grey, matches handbook header */
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(31, 47, 38, 0.10) !important;
    box-shadow: 0 1px 0 rgba(31, 47, 38, 0.04) !important;
}

/* ─── Academy nav: REVERTED to original cream + blue treatment ──
   The academy nav now matches the homepage and other program
   pages: cream background, dark ink links, blue-anchor on hover.
   The body still uses the sage palette, but the nav is unified
   with the rest of the site for consistent navigation feel.

   Note: --blue-anchor is redefined to sage-deeper on academy via
   the body variable redefines, so we hardcode the original
   #1a3d52 / #7CC4F0 here for nav-only elements. */

/* Academy nav background — light grey like everywhere else now. */
body.program-academy nav.nav,
body.program-academy nav.nav.scrolled,
body.program-academy #nav,
body.program-academy #nav.scrolled {
    background: rgba(236, 236, 236, 0.92) !important;
    border-bottom: 1px solid rgba(31, 47, 38, 0.10) !important;
    box-shadow: 0 1px 0 rgba(31, 47, 38, 0.04) !important;
}

/* Subtle blue border-bottom for Aquatics — ties the coastal accent */
body.program-aquatics nav.nav,
body.program-aquatics nav.nav.scrolled,
body.program-aquatics #nav,
body.program-aquatics #nav.scrolled {
    border-bottom: 1px solid rgba(124, 196, 240, 0.35) !important;
}

/* ─── Default nav text: ALWAYS dark on ALL pages now ──
   No more academy exception — nav-links + brand stay var(--ink)
   on every page including academy. */
.nav-links a,
.nav-dropdown-trigger,
nav.nav .brand,
nav.nav .brand > span,
nav.nav .brand > span > span:not(.brand-text-sub),
#nav .brand,
#nav .brand > span,
#nav .brand > span > span:not(.brand-text-sub) {
    color: var(--ink, #1f2f26) !important;
}
.nav-links a:hover,
.nav-dropdown-trigger:hover {
    /* Hardcoded original blue-anchor — bypasses the academy
       variable redefine that would otherwise return sage. */
    color: #1a3d52 !important;
}
/* Hover underline (existing ::after) — original light blue */
.nav-links a::after {
    background: #7CC4F0 !important;
}

/* Dropdown ("More") menu items — original light blue tint */
.nav-dropdown-menu > li > a,
.nav-dropdown-menu a {
    color: var(--ink, #1f2f26) !important;
}
.nav-dropdown-menu > li > a:hover,
.nav-dropdown-menu a:hover {
    background: rgba(124, 196, 240, 0.15) !important;
    color: #1a3d52 !important;
}

/* "Get in touch" nav CTA — original blue-anchor button */
body.program-academy .nav-cta,
body.program-academy a.nav-cta {
    background: #1a3d52 !important;
    color: var(--cream, #fbf6ee) !important;
    border-color: transparent !important;
}
body.program-academy .nav-cta:hover,
body.program-academy a.nav-cta:hover {
    background: #7CC4F0 !important;
    color: var(--ink, #1f2f26) !important;
}

/* ─── Division-aware header brand: full lockup ──────────────────
   astro.js rewrites the brand text into:
     <span class="brand-division-name brand-division-{name}">Academy</span>
     <span class="brand-division-tagline">In Space Universe</span>
   Below we style this as a mini-lockup mirroring the reference design:
   prominent wordmark on top, small all-caps tagline below. */

[data-division] > span:not(.brand-mark) {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
    gap: 4px;
}

/* DIVISION WORDMARK — same prominence across all three divisions */
.brand-division-name {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: 0.04em !important;
    line-height: 0.95 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* "In Space Universe" tagline — small all-caps below the wordmark */
.brand-division-tagline {
    font-family: 'RR Beaver', 'Inter', system-ui, sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    opacity: 0.7 !important;
    line-height: 1 !important;
    /* Decorative line before the tagline, like the reference logo */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.brand-division-tagline::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* ─── Per-division color treatment ─── */

/* ─── Per-division wordmark colors (matches nav background) ─── */

/* Academy wordmark: simple dark ink on cream nav — matching the
   homepage and other program pages. The "ACADEMY" Playfair Display
   wordmark stays distinctive but uses the same color treatment as
   the rest of the brand text, so the nav is unified across pages. */
body.program-academy .brand-division-name {
    color: var(--ink, #1f2f26) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}
body.program-academy .brand-division-tagline {
    color: var(--ink-soft, rgba(31, 47, 38, 0.6)) !important;
    opacity: 1 !important;
    -webkit-text-stroke: 0;
}

/* Childcare: dark ink — sits on cream nav matching the rest */
body.program-childcare .brand-division-name {
    color: var(--ink, #1f2f26) !important;
}
body.program-childcare .brand-division-tagline {
    color: var(--ink-soft, rgba(31, 47, 38, 0.6)) !important;
}

/* Aquatics: blue-anchor — keeps coastal accent */
body.program-aquatics .brand-division-name {
    color: var(--blue-anchor, #1a3d52) !important;
}
body.program-aquatics .brand-division-tagline {
    color: var(--blue-anchor, #1a3d52) !important;
    opacity: 0.65 !important;
}

/* ─── Per-division wing treatment ───
   Subtle changes to the header's wing logo so it feels merged with
   the division identity, not just a static parent-brand mark. */

/* ─── Per-division wing treatment ───
   Subtle changes to the nav's wing logo so it feels merged with
   the division identity, not just a static parent-brand mark.
   Note: the brand is inside <nav class="nav">, NOT inside <header>
   (the page's <header> elements are the hero sections). */

body.program-academy nav .brand-mark,
body.program-academy .nav .brand-mark,
body.program-academy .nav-inner .brand-mark {
    /* Default black circle, no glow — same as other program pages */
    background: #000 !important;
    box-shadow: none !important;
}
body.program-childcare nav .brand-mark,
body.program-childcare .nav .brand-mark,
body.program-childcare .nav-inner .brand-mark {
    /* Subtle ink shadow — clean look on the light cream nav */
    background: #000 !important;
    box-shadow: 0 2px 8px rgba(31, 47, 38, 0.18);
}
body.program-aquatics nav .brand-mark,
body.program-aquatics .nav .brand-mark,
body.program-aquatics .nav-inner .brand-mark {
    /* Blue underglow — aquatic theme */
    background: #000 !important;
    box-shadow: 0 4px 14px rgba(124, 196, 240, 0.4);
}

/* ─── Subpage "back" buttons: small black circle ────────────────
   Two class names exist (program pages use .subpage-back, info
   pages use .info-hero-back). Both render as a 36px black circle
   with a centered chevron icon. The link's existing href stays
   intact (typically ../index.html). */
.subpage-back,
.info-hero-back {
    width: 22px;
    height: 22px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0;        /* Belt-and-suspenders: hides any text the HTML still has */
    line-height: 0;
    flex-shrink: 0;
    overflow: hidden;
    transition: background 0.2s, transform 0.2s;
    /* Sit on its own line (display:flex), left-aligned (no margin-left auto). */
    margin: 0 0 16px 0;
}
.subpage-back:hover,
.info-hero-back:hover {
    background: var(--blue-anchor, #1a3d52);
    transform: translateX(-3px);   /* slide left on hover (same direction the chevron points) */
}
.subpage-back:focus-visible,
.info-hero-back:focus-visible {
    outline: 2px solid var(--blue, #7CC4F0);
    outline-offset: 3px;
}
.subpage-back > svg,
.info-hero-back > svg {
    width: 10px;
    height: 10px;
    color: #fff;
    stroke: #fff;
    stroke-width: 2.5;
    flex-shrink: 0;
    display: block;
    vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════
   ACADEMY-ONLY THEME EXTENSIONS
   ═══════════════════════════════════════════════════════════════
   Beyond the sage nav and white-bubble hero, the rest of the
   Academy page also gets sage-coordinated identity:
     • Accent palette: sage replaces the (already-light-blue)
       --peach so var(--peach) usages become sage on Academy
     • Buttons: solid deep-sage with deeper hover
     • Footer: deep sage gradient with white text
     • Header brand text: stronger white + subtle shadow
   Other pages are unaffected; these rules all key on
   body.program-academy.
   ═══════════════════════════════════════════════════════════════ */


/* ─── Sage palette (academy only) ──────────────────────────────
   Redefining accent variables ONLY on academy. Two groups:
     1. --peach* (was redefined to light blue site-wide) → sage
     2. --blue* (the original brand blues) → sage variants
   This means EVERY element on the academy page that references
   var(--peach), var(--blue), or var(--blue-anchor) automatically
   picks up the sage palette without needing per-element rules. */
/* ─── Academy sage palette — RETIRED ────────────────────────────
   Previously this block redefined the academy page in sage greens
   as an early design experiment. Retired in favor of the Academy
   Blue + Institutional Blue compromise palette which lives inline
   in academy/academy.html under body.program-academy {}. Kept
   commented for reference in case we ever want to roll back.
   ──────────────────────────────────────────────────────────── */
/*
body.program-academy {
    --peach: #1565C0;
    --peach-soft: #DCE7F0;
    --peach-glow: rgba(21, 101, 192, 0.18);
    --blue: #1565C0;
    --blue-warm: #2B5073;
    --blue-deep: #2B5073;
    --blue-anchor: #1A3A52;
    --sage: #1565C0;
    --sage-deep: #2B5073;
    --sage-deeper: #1A3A52;
    --sage-darkest: #0A1628;
}
body.program-academy .subpage-hero-cta,
body.program-academy .btn-primary,
body.program-academy a.btn-primary,
body.program-academy button.primary {
    background: var(--sage-deep, #2B5073) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px -8px rgba(43, 80, 115, 0.45);
}
body.program-academy .subpage-hero-cta:hover,
body.program-academy .btn-primary:hover,
body.program-academy a.btn-primary:hover,
body.program-academy button.primary:hover {
    background: var(--sage-deeper, #1A3A52) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px -8px rgba(43, 80, 115, 0.6);
}
*/

/* Secondary / ghost buttons — outlined sage */
body.program-academy .btn-secondary,
body.program-academy a.btn-secondary,
body.program-academy button.secondary {
    background: transparent !important;
    color: var(--sage-deep, #2B5073) !important;
    border: 1px solid var(--sage, #1565C0) !important;
}
body.program-academy .btn-secondary:hover,
body.program-academy a.btn-secondary:hover,
body.program-academy button.secondary:hover {
    background: rgba(21, 101, 192, 0.12) !important;
    color: var(--sage-deeper, #1A3A52) !important;
    border-color: var(--sage-deep, #2B5073) !important;
}

/* The back-button circle keeps black bg + white chevron, but on
   academy it gets a subtle sage glow instead of the default */
body.program-academy .subpage-back,
body.program-academy .info-hero-back {
    box-shadow: 0 2px 8px rgba(43, 80, 115, 0.25);
}

/* ─── Italic accent inside titles ───
   <span class="serif-italic"> usually carries an inline style
   "color: var(--blue)". On academy we want sage-deep instead so
   the italic phrase ties into the theme. */
body.program-academy .serif-italic {
    color: var(--sage-deep, #2B5073) !important;
}

/* ─── Footer: matches the homepage exactly ───
   IMPORTANT: --blue-anchor is redefined to sage on academy
   (see palette block above), so just using var(--blue-anchor)
   would render as sage. Hardcoding the original homepage blue
   #1a3d52 here ensures the footer looks identical to the
   homepage footer. */
body.program-academy footer {
    background: #1a3d52 !important;
    color: rgba(251, 246, 238, 0.75) !important;
}
body.program-academy footer a {
    color: rgba(251, 246, 238, 0.85) !important;
}
body.program-academy footer a:hover {
    color: var(--cream, #fbf6ee) !important;
}
body.program-academy .footer-blurb,
body.program-academy footer p {
    color: rgba(251, 246, 238, 0.55) !important;
}
body.program-academy .footer-brand .brand,
body.program-academy footer .brand {
    color: var(--cream, #fbf6ee) !important;
}
body.program-academy .footer-brand .brand-text-sub,
body.program-academy footer .brand-text-sub {
    color: rgba(251, 246, 238, 0.45) !important;
}
body.program-academy .footer-col h4 {
    color: var(--cream, #fbf6ee) !important;
}
body.program-academy footer .brand-mark,
body.program-academy .footer-brand .brand-mark {
    background: #000 !important;
    box-shadow: none !important;
}

/* ─── Header logo text styling for academy ───
   Wordmark color is set in the "Per-division wordmark colors"
   block above. Wing accent is set in the "Per-division wing
   treatment" block. No need to redeclare here. */

/* ─── Body background — keep cream (warm contrast to sage) ───
   No body-bg override needed; the page's own `--cream` is the
   right neutral that lets sage sing without competing. We only
   make sure scrollbar tone matches the theme. */
body.program-academy::-webkit-scrollbar-thumb {
    background: var(--sage-deep, #2B5073);
}
body.program-academy::-webkit-scrollbar-thumb:hover {
    background: var(--sage-deeper, #1A3A52);
}


/* ═══════════════════════════════════════════════════════════════
   "JOIN THE WAITLIST" ENROL SECTION (Academy only)
   ═══════════════════════════════════════════════════════════════
   The #enrol section sits directly above the dark-blue footer.
   Using a sage→blue gradient here creates a visual bridge: the
   page transitions from sage (academy identity) into blue
   (parent brand) gracefully, so the section blends with the
   footer without a hard color break.
   ═══════════════════════════════════════════════════════════════ */

body.program-academy section.subpage-cta,
body.program-academy #enrol {
    background:
        /* Subtle horizontal blur emphasis — sage glow on left edge,
           blue glow on right edge, layered over the main blend. */
        linear-gradient(90deg,
            var(--sage-deep, #2B5073) 0%,
            transparent 35%),
        linear-gradient(270deg,
            #1a3d52 0%,
            transparent 35%),
        /* Base horizontal blend with very wide transition zone in
           the middle so sage fades softly into blue over half the
           width — feels blurred rather than a hard hand-off. */
        linear-gradient(90deg,
            var(--sage-deep, #2B5073) 0%,
            var(--sage-deeper, #1A3A52) 25%,
            #2a4a55 50%,
            #1a3d52 75%,
            #1a3d52 100%) !important;
    color: #ffffff !important;
}
/* The decorative .subpage-cta-image div should not paint over
   the gradient — neutralize any background-image it might have */
body.program-academy section.subpage-cta .subpage-cta-image,
body.program-academy #enrol .subpage-cta-image {
    background-image: none !important;
    opacity: 0 !important;
}

/* Eyebrow ("Enrolment · 2026–27") — has inline style="color: var(--peach)"
   which would normally render sage now. Override to readable cream. */
body.program-academy #enrol .eyebrow,
body.program-academy section.subpage-cta .eyebrow {
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.12em;
}

/* Heading "Join the waitlist today." — white */
body.program-academy #enrol h2,
body.program-academy section.subpage-cta h2 {
    color: #ffffff !important;
}
/* The italic accent "today." — light sage to pop without breaking theme */
body.program-academy #enrol h2 .serif-italic,
body.program-academy section.subpage-cta h2 .serif-italic {
    color: #DCE7F0 !important;        /* light sage --peach-soft */
}

/* Body paragraph — readable on the gradient */
body.program-academy #enrol p,
body.program-academy section.subpage-cta p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Primary "Start your application" button — white with sage text
   so it pops cleanly on either half of the gradient */
body.program-academy #enrol .btn-primary,
body.program-academy section.subpage-cta .btn-primary,
body.program-academy #enrol a.btn-primary {
    background: #ffffff !important;
    color: var(--sage-deeper, #1A3A52) !important;
    border-color: transparent !important;
}
body.program-academy #enrol .btn-primary:hover,
body.program-academy section.subpage-cta .btn-primary:hover {
    background: var(--cream, #fbf6ee) !important;
    color: var(--sage-darkest, #0A1628) !important;
}

/* Secondary "Book a tour" ghost button — white outline */
body.program-academy #enrol .btn-ghost-light,
body.program-academy section.subpage-cta .btn-ghost-light {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
body.program-academy #enrol .btn-ghost-light:hover,
body.program-academy section.subpage-cta .btn-ghost-light:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════════════
   "IN SPACE UNIVERSE" WORDMARK — RR Beaver bold uppercase
   ═══════════════════════════════════════════════════════════════
   Non-program pages (homepage, info pages, store) show the brand
   text "In Space Universe" + a sub-line "Rising Stars". We want
   "In Space Universe" rendered in RR Beaver bold all-caps, while
   "Rising Stars" stays in its original Fraunces.

   Program pages are excluded via :not() selectors — they have a
   different brand structure (division wordmark + tagline) handled
   by astro.js + the .brand-division-* CSS rules above.

   IMPORTANT: This rule only takes effect once the font file
   /plugins/fonts/rr-beaver.woff2 exists on disk. Until then the
   fallback Fraunces will render the uppercase styling.
   ═══════════════════════════════════════════════════════════════ */

/* "In Space Universe" wordmark — RR Beaver bold uppercase on
   ALL pages including program pages. The brand structure is
   identical everywhere now: wing + "In Space Universe" text +
   .brand-text-sub. astro.js just swaps the .brand-text-sub text
   from "Rising Stars" to "Academy" / "Childcare" / "Aquatics"
   on program pages — all CSS styling is shared. */
.brand > span:not(.brand-mark) {
    font-family: 'RR Beaver', 'Fraunces', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    /* Keep "IN SPACE UNIVERSE®" on a single line so the trademark
       doesn't wrap. The .brand-text-sub child stays on its own
       line because it's display: block. */
    white-space: nowrap !important;
}
/* Trademark (®) — slightly smaller and tucked inline so it
   doesn't take up extra horizontal space */
.brand sup {
    white-space: nowrap !important;
    font-size: 0.45em !important;
    margin-left: 0.05em !important;
}

/* "Rising Stars" sub-text — white with 1px black outline. Applied
   universally (not just non-program pages) and with multiple
   ancestor selectors so the specificity beats anything else
   targeting .brand-text-sub. The footer's inline style="color:..."
   has only specificity (1,0,0,0) for inline; CSS !important from
   external stylesheet beats inline styles without !important. */
body .brand-text-sub,
nav .brand-text-sub,
footer .brand-text-sub,
header .brand-text-sub,
.brand .brand-text-sub,
.footer-brand .brand-text-sub,
.brand-text-sub {
    font-family: 'RR Beaver', 'Fraunces', Georgia, serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0   -1px 0 #000,
         0    1px 0 #000,
        -1px  0   0 #000,
         1px  0   0 #000 !important;
    opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER WORDMARK BADGE — black rounded pill containing
   "IN SPACE UNIVERSE / RISING STARS / ACADEMY / CHILDCARE"
   ═══════════════════════════════════════════════════════════════
   Wraps the wordmark span (everything inside .brand except the
   wing logo) in a black rounded rectangle with white text.
   Applies to nav/header brands only — the footer brand keeps
   its existing styling.
   ═══════════════════════════════════════════════════════════════ */

/* Black rounded badge around the wordmark — header only.
   Uses inline-block + text-align: center + white-space: nowrap.
   Why not flex column? In flex, the <sup> element becomes its OWN
   flex item separate from "In Space Universe", which forces it to
   its own row in flex-direction: column. inline-block treats the
   inline run as a single line that white-space: nowrap can pin
   together, while .brand-text-sub (display: block) drops to its
   own line naturally. */
nav.nav .brand > span:not(.brand-mark),
#nav .brand > span:not(.brand-mark),
header .brand > span:not(.brand-mark) {
    /* Rounded rectangle black pill — but with the BOTTOM edges
       squared off and replaced by a 2px white horizontal line.
       Top corners stay rounded, sides are straight, bottom is a
       flat white rule. Reads like a tab or banner shape. */
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    padding: 0.55em 1em !important;

    /* border-radius syntax: top-left, top-right, bottom-right,
       bottom-left. Round only the top corners; bottom corners
       stay square (0). */
    border-radius: 14px 14px 0 0 !important;
    border: 0 !important;
    border-bottom: 2px solid #ffffff !important;

    /* Soft white inner glow — fades inward from all four edges of
       the badge (the rounded-top / flat-bottom border-radius is
       respected automatically). The two stacked inset shadows
       produce a gentle gradient: the first is tighter and slightly
       brighter near the edge, the second softer and broader behind
       it. Tuning is on `blur-radius` and `rgba alpha` if it ever
       wants to feel stronger or more subtle. */
    box-shadow:
        inset 0 0 7px rgba(255, 255, 255, 0.5),
        inset 0 0 18px rgba(255, 255, 255, 0.22) !important;

    /* Clear the clip-path / mask attempts from previous iterations
       so they don't conflict with the simple rounded rectangle. */
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;

    /* Layout */
    display: inline-block !important;
    text-align: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;

    /* Lock line 1's line-box height. The wordmark text on line 1
       inherits line-height from the cascade, and that inherited
       value can land slightly differently on the homepage vs the
       program pages depending on intermediate stylesheets. With
       line-height: 1 here, line 1 is exactly font-size tall — no
       descent space below the wordmark. The gap between line 1
       and line 2 is now driven entirely by the 2px margin-top on
       .brand-text-sub, which is identical on every page. Combined
       with .brand-text-sub's own line-height: 1 + height: 1em,
       this means every contributor to the badge's internal
       vertical rhythm is now an explicit fixed value, not an
       inherited one. */
    line-height: 1 !important;

    /* Stacking context */
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

/* The wing image astro.js injects into the badge — styled here as
   a faint white watermark sitting behind the wordmark text.

   Mechanics:
   - The injected <img> is cloned from .brand-mark, which is a base64
     JPEG of a black wing on a cream/white background.
   - filter: invert(1) flips that to white-wing-on-black.
   - The black background of the inverted image blends seamlessly
     into the badge's own black fill, so only the white wing reads.
   - opacity: 0.08 keeps it as a subtle watermark — visible enough
     to add depth, faint enough that it never competes with the
     wordmark for attention.
   - position: absolute + center transforms places it behind the
     text. Lower z-index than text content keeps the wordmark on
     top regardless of cascade or paint order.

   To intensify: raise opacity (try 0.12 or 0.15).
   To make subtler: lower it (try 0.05).
   To rotate or shift: adjust the transform. */
.brand-badge-wing {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 85% !important;
    height: auto !important;
    max-height: 90% !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.08 !important;
    filter: invert(1) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Star accent in the top-right corner of the badge.

   A 5-point star shape carved out of a white div via clip-path. More
   visible than the wing watermark (opacity 0.55 vs 0.08) so it reads
   as an actual decoration rather than a subliminal background.

   Positioning: top-right inside the rounded corner area. Slightly
   inset so it doesn't kiss the border-radius edge. The wordmark text
   is centered inside the badge with horizontal padding around it,
   so a 14px star at top:6px / right:10px sits in the corner without
   colliding with "In Space Universe®". 

   The star uses position:absolute so it doesn't affect the badge's
   inline content flow at all. z-index:2 puts it above the wing
   watermark (z-index:0) and the text (which paints in flow with no
   explicit z-index, effectively above z-index:0 but below z-index:2).

   Tuning:
     - opacity: lower for subtler (0.35), higher for crisper (0.7+)
     - width/height: scale the star up or down
     - top/right: move further from the corner */
nav.nav .brand > span:not(.brand-mark)::before,
#nav .brand > span:not(.brand-mark)::before,
header .brand > span:not(.brand-mark)::before {
    content: '';
    position: absolute !important;
    top: 24px !important;
    right: 6px !important;
    width: 20px !important;
    height: 20px !important;
    background: #ffffff !important;
    /* 5-point star polygon — outer radius at 50%, inner radius at
       ~21% creates the classic proportional star. Coordinates are
       traversed clockwise starting at the top point. */
    clip-path: polygon(
        50% 0%,    61% 35%,    98% 35%,    68% 57%,    79% 91%,
        50% 70%,   21% 91%,    32% 57%,    2% 35%,     39% 35%
    ) !important;
    -webkit-clip-path: polygon(
        50% 0%,    61% 35%,    98% 35%,    68% 57%,    79% 91%,
        50% 70%,   21% 91%,    32% 57%,    2% 35%,     39% 35%
    ) !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    /* Soft glow around the star for a gentle twinkle. Stays subtle
       so it doesn't compete with the wordmark. */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)) !important;
}

/* All text inside the header badge — white. Overrides the
   "always dark nav text" rule for the wordmark + sub-text + sup. */
nav.nav .brand > span:not(.brand-mark),
nav.nav .brand > span:not(.brand-mark) sup,
nav.nav .brand > span:not(.brand-mark) span,
#nav .brand > span:not(.brand-mark),
#nav .brand > span:not(.brand-mark) sup,
#nav .brand > span:not(.brand-mark) span,
header .brand > span:not(.brand-mark),
header .brand > span:not(.brand-mark) sup,
header .brand > span:not(.brand-mark) span {
    color: #ffffff !important;
}

/* Remove the black-outline treatment from .brand-text-sub when
   it's inside a header (the parent badge already has a black
   background, the outline becomes redundant). Footer's
   .brand-text-sub keeps its white-with-outline treatment.

   ALSO: left-align the second row inside the pill (overriding
   the parent's text-align: center). The trailing-letter
   underline is applied to a child span (.brand-text-sub-tail)
   that astro.js wraps around the last 3 characters of the
   word — see the brandTailUnderline IIFE in astro.js.

   white-space: nowrap is set explicitly here (not just inherited
   from the parent badge) so multi-word values like "Rising Stars"
   don't break across two lines on the homepage.

   height: 1em forces the block to be exactly font-size tall,
   regardless of any line-box extensions the browser might
   compute from the underlined .brand-text-sub-tail span. Without
   this, "Rising Stars" (longer text + the underlined tail span)
   was rendering taller than the single-word divisions on the
   homepage. The underline still draws below the box (overflow:
   visible by default for non-positioned blocks), but the block's
   layout height is fixed regardless of where the underline sits. */
nav.nav .brand-text-sub,
#nav .brand-text-sub,
header .brand-text-sub {
    color: #ffffff !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    background-color: transparent !important;
    line-height: 1 !important;
    height: 1em !important;
    margin-top: 2px !important;
    text-align: left !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Hairline underline on the trailing characters. The wrapping
   span is added by JS at runtime (see brandTailUnderline in
   astro.js) so the underline lands on actual letters with native
   text-decoration — no box-sizing tricks, no layout side-effects
   on multi-word values like "Rising Stars". */
nav.nav .brand-text-sub-tail,
#nav .brand-text-sub-tail,
header .brand-text-sub-tail {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 3px !important;
}

/* ─── Wing logo glow — header only ─── */
nav .brand-mark,
.nav-inner .brand-mark,
header .brand .brand-mark,
#nav .brand-mark {
    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.18),
        0 0 36px -4px rgba(124, 196, 240, 0.35) !important;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER WING BACKDROP — single oversized wing accent
   ═══════════════════════════════════════════════════════════════
   The wing image is the same base64-encoded JPEG used by the
   homepage's .hero-bg-wing and .locations-bg-wing, and by the
   nav's own .brand-mark img. Rather than referencing a separate
   PNG file (which would need a real asset on disk), astro.js
   reads the src off the existing brand-mark <img> at runtime
   and clones it into a single <img class="nav-bg-wing"> inserted
   as the first child of the nav.

   The wing is sized larger than the nav and anchored at roughly
   25% from the left so its center sits behind the brand/logo
   area and extends toward the middle of the header. The portion
   that overflows the nav box is cropped by overflow: hidden,
   so what remains visible reads as a single decorative accent
   ghosting behind the wordmark.

   The JPEG has white wings on a black background. We invert it
   (so wings become black on white), then multiply-blend onto the
   cream nav background — multiply makes the resulting white
   areas transparent, leaving only the dark wing silhouettes
   visible at low opacity. Same trick the homepage uses. */

nav.nav,
#nav {
    /* position:relative is required for the absolutely-positioned
       .nav-bg-wing-frame to anchor against the nav. The actual
       fixed-positioning + z-index for sticky-nav behavior is set
       in the rule earlier in this file (search for "Always-visible:
       locked to top of viewport"). overflow is intentionally
       visible (default) so .nav-dropdown-menu inside the nav can
       extend below the nav's box without being clipped. The wing
       backdrop is contained by its own .nav-bg-wing-frame wrapper
       with overflow:hidden, see below. */
    position: relative !important;
}

/* Wing backdrop frame — clips the oversized wing image to the
   bounds of the nav. The nav's overflow stays visible (so
   dropdown menus aren't clipped); this frame is what crops the
   wing without affecting siblings. */
.nav-bg-wing-frame {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.nav-bg-wing {
    position: absolute !important;
    top: 50% !important;
    left: 25% !important;
    width: 520px !important;
    height: auto !important;
    /* translate by -50% on both axes to center the wing on the
       (left: 25%, top: 50%) anchor point — places the wing's
       midpoint at roughly 25% from the left of the nav, behind
       the brand area and extending toward the center */
    transform: translate(-50%, -50%) rotate(6deg) !important;
    pointer-events: none !important;
    /* z-index: -1 paints the wing BEHIND all normal-flow content
       in the nav's stacking context. This is what lets us drop the
       z-index: 1 trap on .nav-inner — without that trap, the
       .nav-dropdown-menu inside nav-inner can paint above hero
       content as expected (the entire nav stacking context is at
       1000, so any descendant position:absolute extending visually
       past the nav element still renders above page content). */
    z-index: -1 !important;
    opacity: 0.06 !important;
    /* Invert white-wings-on-black to black-wings-on-white,
       then multiply-blend so the white background drops out
       and only the wings remain as a subtle dark shape. */
    filter: invert(1) !important;
    mix-blend-mode: multiply !important;
}

/* The .nav-inner used to need position:relative + z-index:1 to sit
   above the wing backdrop. With the wing now at z-index:-1, it's
   below in-flow content automatically — and removing the
   stacking-context-creating z-index here is what lets dropdown
   menus inside the nav appear above hero/page content. Keep
   position:relative for any absolute children that anchor to it,
   but explicitly clear z-index so this isn't a stacking context. */
nav.nav .nav-inner,
#nav .nav-inner {
    position: relative !important;
    z-index: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE ADJUSTMENTS — drawer sizing, brand badge scaling,
   and hiding the wing backdrop on narrow screens
   ═══════════════════════════════════════════════════════════════
   Triggered at the same breakpoint the page CSS uses for mobile
   nav (max-width: 880px). At that width the .nav-toggle button
   appears and the .nav-drawer aside takes over for navigation.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
    /* Hide the decorative wing on mobile — it crowds the
       narrow header and can interfere with the brand+toggle
       layout when space is tight. */
    .nav-bg-wing {
        display: none !important;
    }

    /* Mobile drawer — reduce link size and width.
       The page CSS sets .nav-drawer a to 1.6rem which feels
       large on small screens. Bring it down to 1.15rem. */
    .nav-drawer {
        width: min(80vw, 320px) !important;
        padding: 4rem 1.5rem 1.5rem !important;
    }
    .nav-drawer a {
        font-size: 1.15rem !important;
        padding: 0.7rem 0 !important;
    }
    .nav-drawer-section {
        font-size: 0.7rem !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }
    .nav-drawer-cta {
        font-size: 1rem !important;
        padding: 0.85rem !important;
        margin-top: 1.25rem !important;
    }

    /* Reduce brand badge font on mobile so it doesn't overflow
       and push the .nav-toggle off the screen. The page CSS uses
       .brand at font-size 1.25rem; bring it down to 0.95rem on
       mobile so "IN SPACE UNIVERSE" + the trademark + the wing
       all fit in the narrow viewport beside the hamburger. */
    .brand {
        font-size: 0.95rem !important;
    }
    nav.nav .brand > span:not(.brand-mark),
    #nav .brand > span:not(.brand-mark),
    header .brand > span:not(.brand-mark) {
        padding: 0.4em 0.75em !important;
        border-radius: 11px !important;
    }
    /* The wing logo gets slightly smaller too */
    .brand-mark {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Even tighter scaling for very small phones */
@media (max-width: 380px) {
    .brand {
        font-size: 0.82rem !important;
    }
    nav.nav .brand > span:not(.brand-mark),
    #nav .brand > span:not(.brand-mark),
    header .brand > span:not(.brand-mark) {
        padding: 0.35em 0.65em !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESOURCE IMAGE LOADER — styling for swapped-in images
   ═══════════════════════════════════════════════════════════════
   When astro.js's resourceImages IIFE successfully preloads an
   image and swaps it in for a placeholder's <svg>, the new <img>
   element gets the .resource-loaded class. These rules make the
   image fill the placeholder container the same way the SVG did,
   so layout doesn't shift when the swap happens.

   The placeholder container is expected to already have explicit
   sizing (width / aspect-ratio / etc.) — that's what makes it a
   placeholder in the first place. We just stretch the img to fill. */
img.resource-loaded {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Fade in to mask the SVG-to-image transition. The 200ms
       timing matches the rest of the site's micro-interactions. */
    animation: resource-image-fade-in 200ms ease-out;
}

@keyframes resource-image-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Once the swap has happened, mark the parent so any future CSS
   can target the post-swap state explicitly without relying on
   the .resource-loaded class on the child. Useful for things like
   adjusting overlay treatments that look different on photos vs
   on the abstract SVG placeholders. */
[data-resource-loaded="1"] {
    /* No default visual change — this is just a hook for future
       per-page styling. */
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER "RISING STARS" — plain white across all pages
   ═══════════════════════════════════════════════════════════════
   The universal .brand-text-sub rule (earlier in this file) gives
   the text a white-with-black-outline treatment via 8-direction
   text-shadow, which makes sense for headers where the badge has
   its own dark fill but reads heavy and busy in the footer where
   the text is already against a dark background.

   The academy page also sets footer .brand-text-sub to a faded
   cream color (rgba(251,246,238,0.45)) for its dark theme. Both
   of those treatments are now superseded by this rule: footer
   "Rising Stars" is always plain pure white, no outline, full
   opacity, on every page.

   Specificity is matched against the academy override
   (body.program-academy .footer-brand .brand-text-sub = 0,3,1)
   by including that exact selector here too. Source order favors
   this rule (it's later in the file), so it wins. For non-academy
   pages, the looser footer/.footer-brand selectors beat the
   universal rule via source order. */
footer .brand-text-sub,
.footer-brand .brand-text-sub,
body.program-academy footer .brand-text-sub,
body.program-academy .footer-brand .brand-text-sub,
body.program-childcare footer .brand-text-sub,
body.program-childcare .footer-brand .brand-text-sub,
body.program-aquatics footer .brand-text-sub,
body.program-aquatics .footer-brand .brand-text-sub {
    color: #ffffff !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════
   HERO TOP SPACING — halved across all pages
   ═══════════════════════════════════════════════════════════════
   The homepage .hero originally has padding-top: var(--sp-10) (9rem)
   to push content down below the fixed nav. Subpage hero classes
   in info.css/program.css use similarly large values. The result
   is too much breathing room above hero content — the nav and the
   start of the hero feel unrelated.

   Halving the padding-top brings the hero content closer to the
   nav without any layout collision: the nav is position:fixed and
   doesn't take space in the document flow, so the hero element
   itself still starts at viewport y=0; only the content inside the
   hero shifts upward.

   Padding-bottom is intentionally left alone so the hero's
   internal balance (more space at bottom than top) reads as a
   deliberate composition rather than an accident. */
.hero,
header.hero,
.subpage-hero,
header.subpage-hero,
body.program-academy .subpage-hero,
body.program-childcare .subpage-hero,
body.program-aquatics .subpage-hero {
    padding-top: 0.5rem !important;
}


/* ──────────────────────────────────────────────────────────────
 * WHITE-BODY TREATMENT
 *
 * Body background is forced to white across all pages. This
 * matches the handbook treatment (white pages, light grey
 * header). The nav above is the only "header" element and
 * uses #ececec; the rest of the page reads as clean white.
 *
 * Each page's inline CSS sets `body { background: var(--cream); }`
 * without !important, so this rule wins by force.
 *
 * Hero sections keep their per-page themes (academy bubbles,
 * childcare strips, aquatics blue) — those are background-image
 * layers on the .hero / .subpage-hero elements, not on body.
 * ────────────────────────────────────────────────────────────── */

body,
body.program-academy,
body.program-childcare,
body.program-aquatics {
    background: #ffffff !important;
}


/* ──────────────────────────────────────────────────────────────
 * BRAND BANNER + HORIZONTAL-LINE HERO TREATMENT (program pages
 * and homepage)
 *
 * Replaces the earlier "tabbed index divider" idea with a simpler
 * banner-style treatment: the relocated brand text-badge sits
 * inline at the top-left of the target content area, displayed
 * as large prominent words, with a horizontal line above and
 * below the whole content area instead of a full bordered box.
 *
 * No tab, no rounded corners, no black box. Just two horizontal
 * rules framing the content, with the wordmark animating in via
 * a zoom-in effect on page load.
 * ────────────────────────────────────────────────────────────── */

/* Content area gets two horizontal lines (top + bottom) instead
   of a full border. Background + corners reset to transparent /
   square. */
/* Content area gets a single horizontal line at the bottom only.
   The top line was removed to bring the hero closer to the header. */
.has-brand-tab {
    border: none !important;
    border-top: none !important;
    border-bottom: 3px solid var(--ink, #1f2f26) !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 1.5rem 2.5rem 1.5rem !important;
    position: relative !important;
    overflow: visible !important;
    margin-top: 0 !important;
}

/* The relocated text badge becomes plain inline text, large and
   prominent, sitting at the top-left of the content area. All
   the previous tab-shape styling (black bg, rounded corners,
   tab borders, inset glow, wing watermark, star accent) is
   stripped away. */
.has-brand-tab .brand-tab-badge {
    /* Reset positioning back to normal flow */
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 0 1.25rem 0 !important;

    /* Layout: badge spans the full width of the hero content
       row so the black band runs the entire way across. The
       grid-column / flex-basis / width: 100% trio handles
       grid, flex, and block parents respectively. */
    grid-column: 1 / -1 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;

    /* Solid black band behind the text. Padding gives the words
       a little breathing room inside the band so the band isn't
       tight against the letters. */
    background: var(--ink, #1f2f26) !important;
    background-color: var(--ink, #1f2f26) !important;
    background-image: none !important;
    color: #ffffff !important;
    padding: 0.35em 0.9em !important;

    /* Rounded top-left corner only — gives the band a soft
       leading edge that feels like a tab-corner without the
       full tab-shape commitment. Syntax: top-left top-right
       bottom-right bottom-left. */
    border: none !important;
    border-radius: 16px 0 0 0 !important;
    box-shadow: none !important;

    /* Re-apply the wordmark typography. The original rule
       `.brand > span:not(.brand-mark)` no longer matches once
       the span has been moved out of .brand, so we restate
       font + weight + transform + letter-spacing here. */
    font-family: 'RR Beaver', 'Fraunces', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;

    /* Larger words */
    font-size: 2rem !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: normal !important;

    /* Multi-stage zoom-in: starts tiny, blurred, with wide
       letter-spacing — converges to crisp final state. */
    transform-origin: left center;
    animation: brandBadgeZoomIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Drop the wing watermark and star accent — they were sized for
   the standalone badge and read as noise inline. */
.has-brand-tab .brand-tab-badge .brand-badge-wing,
.has-brand-tab .brand-tab-badge::before {
    display: none !important;
}

/* The .brand-text-sub (Rising Stars / Childcare / etc.) inside
   the badge — white now (was --ink) since it sits inside the
   solid black band. Slightly dimmer than the main wordmark so
   the hierarchy reads cleanly. */
.has-brand-tab .brand-tab-badge .brand-text-sub {
    font-size: 0.55em !important;
    color: #ffffff !important;
    margin-top: 0.25em !important;
    opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────────
 * BANNER MODE (homepage variant)
 *
 * On the homepage, the brandBannerCycle IIFE in astro.js adds
 * the .banner-mode class to .brand-tab-badge and replaces its
 * text content with an <img> showing one of the random main
 * banner variants. The CSS below strips the black-band styling
 * (background, padding, border-radius, font sizing) so the image
 * sits clean in the same area, sized proportionally to its own
 * aspect ratio.
 * ────────────────────────────────────────────────────────────── */
.has-brand-tab .brand-tab-badge.banner-mode {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 720px !important;     /* cap how big the banner gets */
    line-height: 0 !important;        /* kill the text-line gap */
    font-size: 0 !important;          /* hide any leftover text */
}

.has-brand-tab .brand-tab-badge.banner-mode img {
    width: 100% !important;
    height: auto !important;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes brandBadgeZoomIn {
    /* Three-stage entrance:
       0%   — tiny + blurred + letter-spacing wide apart + invisible
       60%  — opacity reached, blur clearing, still scaling/tightening
       100% — final crisp state at full scale and tight letter-spacing
       The combination of scale + letter-spacing collapse + blur
       defocus → focus reads as a "zooming and snapping into place"
       reveal, much more dramatic than scale alone. */
    0% {
        transform: scale(0.4);
        opacity: 0;
        letter-spacing: 0.5em;
        filter: blur(4px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        letter-spacing: 0.05em;
        filter: blur(0);
    }
}

/* Mobile tightening */
@media (max-width: 600px) {
    .has-brand-tab {
        padding: 0 1rem 2rem 1rem !important;
        margin-top: 0 !important;
    }
    .has-brand-tab .brand-tab-badge {
        font-size: 1.5rem !important;
    }
}


/* ──────────────────────────────────────────────────────────────
 * SLIM NAV HEADER
 *
 * Tightens the nav vertical footprint after the brand text-badge
 * was relocated to the hero. With only the wings logo + nav links
 * + CTA remaining in the nav, the header has more breathing room
 * than it needs — this block slims down the wings circle, the
 * "Get in touch" CTA pill, and the overall vertical padding.
 *
 * Sizes (was → now):
 *   .nav padding:    1.5rem 0    →   0.5rem 0
 *   .brand-mark:     56×56 px    →   38×38 px
 *   .nav-cta:        0.7em 1.4em →   0.45em 1.05em
 *   .nav-cta font:   0.9rem      →   0.82rem
 * ────────────────────────────────────────────────────────────── */

nav.nav,
#nav {
    padding: 0.5rem 0 !important;
}
nav.nav.scrolled,
#nav.scrolled {
    padding: 0.4rem 0 !important;
}

.nav-inner {
    gap: 1.25rem !important;
}

nav.nav .brand-mark,
#nav .brand-mark,
.nav-inner .brand-mark {
    width: 38px !important;
    height: 38px !important;
}

nav.nav .nav-cta,
#nav .nav-cta,
nav.nav a.nav-cta,
#nav a.nav-cta {
    padding: 0.45em 1.05em !important;
    font-size: 0.82rem !important;
}
nav.nav .nav-cta svg,
#nav .nav-cta svg {
    width: 12px !important;
    height: 12px !important;
}

/* Nav-link sizing tightens up too so the row reads consistently */
nav.nav .nav-links a,
#nav .nav-links a,
nav.nav .nav-dropdown-trigger,
#nav .nav-dropdown-trigger {
    font-size: 0.88rem !important;
}


/* ──────────────────────────────────────────────────────────────
 * HERO TOP-ALIGN OVERRIDE
 *
 * The homepage's .hero-grid is a CSS grid with content centered
 * vertically (align-items: center / align-content: center) so
 * the hero "feels balanced" with whitespace above and below.
 * That's exactly what was pushing the brand-tab-badge halfway
 * down the hero — even with all padding/margin zeroed out, the
 * grid's vertical-center alignment still positioned the rows
 * mid-hero.
 *
 * Forcing align-* to start makes the grid stack its rows from
 * the top of the hero. Combined with the zeroed padding/margin
 * elsewhere, the badge now sits as close to the nav as the
 * minimal hero clearance allows.
 *
 * Also zeroing top padding/margin on .hero-grid itself, on .hero
 * and any wrapping <header>, in case the page's own CSS adds
 * spacing somewhere we haven't touched yet.
 * ────────────────────────────────────────────────────────────── */

.hero-grid {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;
    align-content: start !important;
    align-items: start !important;
}

.hero,
header.hero,
.subpage-hero,
header.subpage-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;       /* was 92vh — let it size to content */
    padding-bottom: 1rem !important;   /* keep a small bit of bottom breathing room */
}

/* If the hero is wrapped in a <header>, that wrapper's padding
   might also be contributing. Zeroing its top spacing too. */
header > .hero,
header > .hero-grid,
header > .subpage-hero {
    margin-top: 0 !important;
}


/* ──────────────────────────────────────────────────────────────
 * MARQUEE BAR (test pass)
 *
 * Horizontal scrolling image bar between the nav and the hero.
 * The DOM is built and injected by astro.js's marqueeBar IIFE;
 * this block defines the visual + animation.
 *
 * Structure:
 *   .marquee-bar     — outer clip, full width, fixed height
 *   .marquee-track   — inner row of 2× duplicated items, animates
 *                      translateX(0) → translateX(-50%) for a
 *                      seamless infinite scroll
 *   .marquee-item    — individual image cell
 *
 * The 2× duplication means after the track has shifted by half
 * its width, the second copy of items occupies the position the
 * first copy started in, so the animation can restart with no
 * visible jump.
 * ────────────────────────────────────────────────────────────── */

.marquee-bar {
    width: 100%;
    overflow-x: auto;                /* native horizontal scroll */
    overflow-y: hidden;
    background: #ffffff;             /* white, matches body */
    border-top: 1px solid rgba(31, 47, 38, 0.10);
    border-bottom: 1px solid rgba(31, 47, 38, 0.10);
    padding: 4px 0;
    margin-top: 1.5rem !important;   /* one line of space above (between nav and bar) */
    margin-bottom: 1.5rem !important;/* one line of space below (between bar and hero) */
    position: relative;
    z-index: 1;
    cursor: grab;                    /* hint that the strip is draggable */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox: hide scrollbar */
    -ms-overflow-style: none;        /* IE/Edge: hide scrollbar */
}
.marquee-bar::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari/Webkit: hide scrollbar */
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 32px;
    width: max-content;
    /* No CSS animation any more — JS drives bar.scrollLeft via
       requestAnimationFrame so the auto-scroll coexists cleanly
       with native mouse-drag/wheel/trackpad scrolling. */
}

/* Each item is now a link: image stacked above a text label.
   Removed the underline + inherits ink color so the link looks
   like a discrete card rather than a styled hyperlink. */
.marquee-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;          /* centers image + label horizontally */
    justify-content: center !important;
    text-align: center !important;
    gap: 6px;
    flex: none;
    overflow: visible;                       /* let the hover-zoom escape the cell */
    text-decoration: none !important;
    color: var(--ink, #1f2f26);
}

.marquee-item img {
    height: 88px;
    width: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
    margin: 0 auto !important;               /* belt + suspenders */
}

/* Zoom-in on hover. The smooth ease-out cubic bezier matches
   the brand-tab-badge animation curve for visual consistency. */
.marquee-item:hover img {
    transform: scale(1.18);
}

/* Text label below each image — small, centered, capitalized */
.marquee-label {
    display: block !important;
    width: auto !important;
    margin: 0 auto !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-align: center !important;
    color: var(--ink, #1f2f26);
    transition: color 0.2s ease;
    white-space: nowrap;
}
.marquee-item:hover .marquee-label {
    color: var(--blue-anchor, #1a3d52);
}

@keyframes marqueeScroll { /* deprecated, kept for backward-compat */
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Mobile: shrink image height + tighten gap */
@media (max-width: 600px) {
    .marquee-bar {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding: 3px 0;
    }
    .marquee-track { gap: 20px; }
    .marquee-item img { height: 64px; }
    .marquee-item:hover img { transform: scale(1.12); }
    .marquee-label { font-size: 0.72rem; }
}


/* ──────────────────────────────────────────────────────────────
 * NAV LAYOUT: BRAND + LINKS LEFT, CTA RIGHT
 *
 * The page's inline CSS has `.nav-inner { justify-content:
 * space-between }` which spreads brand / nav-links / CTA into
 * three columns across the row. Switching to flex-start groups
 * brand + nav-links flush left next to each other; margin-left:
 * auto on the CTA breaks it free and pushes it to the far right.
 * ────────────────────────────────────────────────────────────── */

.nav-inner,
nav.nav .nav-inner,
#nav .nav-inner {
    justify-content: flex-start !important;
    gap: 1.25rem !important;
}

.nav-inner .nav-cta,
nav.nav .nav-inner .nav-cta,
#nav .nav-inner .nav-cta,
.nav-inner > a.nav-cta {
    margin-left: auto !important;
}

/* The mobile nav-toggle hamburger button (visible only on mobile)
   should also stay anchored to the right next to the CTA. */
.nav-inner .nav-toggle,
nav.nav .nav-inner .nav-toggle {
    margin-left: 0.5rem !important;
}


/* ──────────────────────────────────────────────────────────────
 * DEFENSIVE MARQUEE BAR FIXES (cross-page consistency)
 *
 * Reinforce the marquee bar styles with !important on properties
 * that program-page CSS sometimes overrides, and bump z-index so
 * the bar isn't painted behind any program-specific decorative
 * layers (academy bubbles, childcare strips, aquatics gradients).
 * ────────────────────────────────────────────────────────────── */

.marquee-bar {
    background: #ffffff !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 0 !important;
    z-index: 5 !important;
    isolation: isolate;     /* establish own stacking context */
}
.marquee-track {
    display: flex !important;
    width: max-content !important;
    margin: 0 auto !important;          /* centers track when content fits inside the bar */
}
.marquee-item {
    flex: none !important;
    overflow: visible !important;
}

/* Synthetic banner wrapper for pages without a hero structure
   (info pages, etc.). brandTabRelocate creates this <div> at
   the top of <main> if no other suitable target was found, then
   adds .has-brand-tab to it — so the banner gets the same
   bottom-horizontal-line treatment as on other pages, with a
   sensible top placement just under the nav.
   The padding-top defends against the nav covering the banner
   when the page has no built-in body padding for nav clearance. */
.synthetic-banner-wrap {
    margin: 0 auto;
    max-width: 100%;
    padding-top: 5rem;          /* clear the fixed nav */
}
@media (max-width: 700px) {
    .synthetic-banner-wrap { padding-top: 4rem; }
}

/* Hide the More dropdown immediately so there's no flash before
   navMenuRestructure flattens it into top-level links. */
.nav-links .nav-dropdown {
    display: none !important;
}


/* ──────────────────────────────────────────────────────────────
 * PEACH / CREAM BACKGROUNDS → WHITE
 *
 * Info pages and a few homepage/program containers use
 * `background: var(--cream)` (#faf6ee) and `var(--cream-deep)`
 * for warm beige page backgrounds. Override these to white for
 * a cleaner, more neutral look. Program-page hero backgrounds
 * (which are themed sage/blue/etc.) are NOT touched — only the
 * cream-coloured neutral surfaces.
 * ────────────────────────────────────────────────────────────── */

body,
body.info-page,
.info-hero,
.info-section,
section.info-section,
.info-cta,
header.info-hero,
[class*="info-cta"],
[class*="-cream"],
.cream,
.bg-cream {
    background: #ffffff !important;
    background-color: #ffffff !important;
}


/* ──────────────────────────────────────────────────────────────
 * INFO PAGE HERO — TIGHTEN TOP PADDING
 *
 * info.css ships with `.info-hero { padding: 140px 0 var(--sp-7) }`
 * (110px on mobile) — that's the original generous nav clearance.
 * The slim nav is now ~54px tall, so 140px leaves a giant gap.
 * Override to a tight value that just clears the slim nav, with
 * a small breathing margin — matching the homepage's compact
 * nav-to-content spacing.
 * ────────────────────────────────────────────────────────────── */

.info-hero,
header.info-hero {
    padding-top: 4rem !important;        /* ~64px — slim nav + small margin */
    padding-bottom: 1.5rem !important;
}
@media (max-width: 700px) {
    .info-hero,
    header.info-hero {
        padding-top: 3.5rem !important;
        padding-bottom: 1rem !important;
    }
}


/* ──────────────────────────────────────────────────────────────
 * INFO HERO SECTION — for pages where the hero IS a content
 * section (no separate marketing header). Currently used by
 * info/founder.html — the portrait + quote band replaces the
 * old "next-generation family ecosystem" hero, matching React's
 * Founder.tsx which has no separate header above the portrait.
 * Uses the same tight top padding as .info-hero so the page
 * starts just below the slim nav.
 * ────────────────────────────────────────────────────────────── */
.info-section.info-hero-section {
    padding-top: 4rem !important;
    padding-bottom: var(--sp-7, 4rem) !important;
}
@media (max-width: 700px) {
    .info-section.info-hero-section {
        padding-top: 3.5rem !important;
    }
}


/* ──────────────────────────────────────────────────────────────
 * NAV — KILL ANY BLACK/DARK IN-SPACE-UNIVERSE BACKDROP
 *
 * Defensive rules: regardless of what other CSS or JS leaves
 * in the nav, anything inside the nav's .brand element OTHER
 * than the wings logo (.brand-mark) is hidden. Catches the
 * wordmark span, any leftover .brand-tab-badge, wing watermark
 * backdrops, .brand-text-sub, and any other variant we tried
 * earlier. Prevents the black "In Space Universe" band from
 * reappearing in the nav on any non-homepage page.
 *
 * On the homepage, brandTabRelocate moves the wordmark span
 * out of .brand entirely before this rule has anything to hide,
 * so it doesn't affect the homepage banner placement.
 * ────────────────────────────────────────────────────────────── */

.nav .brand > *:not(.brand-mark),
nav.nav .brand > *:not(.brand-mark),
#nav .brand > *:not(.brand-mark) {
    display: none !important;
}

/* Catch any lingering decorative backdrops */
.nav .wing-watermark,
.nav .brand-badge-wing,
.nav .brand-tab-badge,
nav.nav .wing-watermark,
nav.nav .brand-badge-wing,
nav.nav .brand-tab-badge {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
}


/* ──────────────────────────────────────────────────────────────
 * NAV — KILL LEGACY BRAND BADGE (WIDER NET)
 *
 * The original page HTML wraps the wordmark, registered-tm sup,
 * faded-wings backdrop image (.brand-badge-wing), faded-star
 * accent (.brand-badge-star), and the subtitle text-sub
 * (.brand-text-sub / .brand-text-sub-tail) inside a single
 * unnamed <span> child of .brand. Any of these can leak through
 * if the wrapping span itself isn't display:none-d (e.g. CSS
 * specificity edge case, hydration order, page-specific rule).
 *
 * This rule hides every brand-badge-* and brand-text-* element
 * anywhere inside the nav, regardless of nesting depth, AND
 * also hides any direct child of .brand that isn't the wings.
 * Together that catches every variant we've shipped or that
 * could surface from leftover original CSS.
 *
 * Scoped to .nav so the relocated banner on the homepage (which
 * lives in the hero, not the nav) is unaffected.
 * ────────────────────────────────────────────────────────────── */

.nav [class*="brand-badge"],
.nav [class*="brand-text"],
nav.nav [class*="brand-badge"],
nav.nav [class*="brand-text"],
#nav [class*="brand-badge"],
#nav [class*="brand-text"] {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    visibility: hidden !important;
}

/* Catch the unnamed wrapper span that sits inside .brand and
   contains all the badge bits — hide it directly so even the
   text node "In Space Universe" inside it doesn't render. */
.nav .brand > span:not(.brand-mark),
.nav .brand > a:not(.brand-mark),
nav.nav .brand > span:not(.brand-mark),
nav.nav .brand > a:not(.brand-mark) {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}


/* ──────────────────────────────────────────────────────────────
 * MOBILE — TOUCH SCROLL, HAMBURGER RIGHT-ALIGN, BANNER SHRINK
 *
 * Three coordinated mobile tweaks:
 *
 * 1. .marquee-bar gets `touch-action: pan-x` so touch swipes
 *    are interpreted as horizontal pans (not vertical page
 *    scroll), with iOS momentum scrolling enabled.
 *
 * 2. .nav-toggle (hamburger button) gets margin-left: auto on
 *    mobile so it pushes itself to the far right of the nav,
 *    even when .nav-cta is hidden on small screens. On desktop
 *    the .nav-cta keeps its margin-left: auto and the toggle
 *    sits beside it (the toggle is usually display: none on
 *    desktop anyway).
 *
 * 3. The homepage banner image (.brand-tab-badge.banner-mode)
 *    gets a smaller max-width on mobile so it doesn't dominate
 *    the small viewport. The img inside has width: 100% +
 *    height: auto already, so it shrinks proportionally.
 * ────────────────────────────────────────────────────────────── */

.marquee-bar {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (max-width: 700px) {
    /* Hamburger pushes itself to the right edge */
    .nav-inner .nav-toggle,
    nav.nav .nav-inner .nav-toggle,
    #nav .nav-inner .nav-toggle {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* Banner shrunk proportionally and LEFT-ALIGNED on mobile.
       margin-left: 0 anchors it to the left of its container,
       margin-right: auto absorbs the leftover space on the right. */
    .has-brand-tab .brand-tab-badge.banner-mode {
        max-width: 360px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Mobile content-fit: prevent horizontal scroll on the page,
       tighten the banner-wrapper horizontal padding, and ensure
       common content containers respect the viewport width. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .has-brand-tab {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box;
    }
    .container,
    .hero-grid,
    .hero,
    .subpage-hero,
    .info-hero,
    .info-section,
    main,
    section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 420px) {
    .has-brand-tab .brand-tab-badge.banner-mode {
        max-width: 300px !important;
    }
}
