/* ─────────────────────────────────────────────────────────────────
   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');

/* ─── 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. */
:root {
    --peach: #7CC4F0;
    --peach-soft: #c5e4f7;
    --peach-glow: rgba(124, 196, 240, 0.12);
}

/* ─── 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: var(--cream-deep, #f3ecdf);
}
::-webkit-scrollbar-thumb {
    background: var(--blue-anchor, #1a3d52);
    border-radius: 6px;
    border: 2px solid var(--cream-deep, #f3ecdf);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--blue-deep, #2f5d7a);
}
::-webkit-scrollbar-corner {
    background: var(--cream-deep, #f3ecdf);
}

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

/* ─── 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 ───────────────────────────────
   Drop the font files into /plugins/fonts/ and they'll load here.
   .woff2 is preferred (smaller, faster); .ttf is the fallback for
   ancient browsers. Convert .ttf → .woff2 once at transfonter.org. */
@font-face {
    font-family: 'RR Beaver';
    src: url('/plugins/fonts/rr-beaver.woff2') format('woff2'),
         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 with white strips/gradients ─── */
body.program-childcare .subpage-hero-childcare .subpage-hero-image {
    background-image:
        /* Several white radial fades — the "more white color gradients" you asked for */
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 75%, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
        radial-gradient(ellipse at 100% 30%, rgba(124, 196, 240, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 95%, rgba(255, 255, 255, 0.10) 0%, transparent 40%),
        /* Vertical "strips" gradient — original Academy feel */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.32) 25%,
            rgba(0, 0, 0, 0.55) 65%,
            rgba(0, 0, 0, 0.70) 100%),
        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 {
    background: rgba(251, 246, 238, 0.95) !important;     /* cream, slight translucency */
    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 — cream like everywhere else.
   The universal `nav.nav { background: cream }` rule above already
   handles this; explicitly re-stating to override any old sage
   value still cached in the file. */
body.program-academy nav.nav,
body.program-academy nav.nav.scrolled,
body.program-academy #nav,
body.program-academy #nav.scrolled {
    background: rgba(251, 246, 238, 0.95) !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. */
body.program-academy {
    /* Replace the (already-light-blue-redefined) peach with sage */
    --peach: #7A9573;                                  /* sage */
    --peach-soft: #C4D2BC;                             /* light sage */
    --peach-glow: rgba(122, 149, 115, 0.18);

    /* Replace the brand blues with sage variants — turns every
       dark-blue element on the academy page (CTAs, banners, hover
       accents, italic accents, scrollbar, etc.) into sage. */
    --blue: #7A9573;                                   /* light blue → sage */
    --blue-warm: #5F7A58;                              /* warm blue → sage-deep */
    --blue-deep: #5F7A58;                              /* deep blue → sage-deep */
    --blue-anchor: #4A6042;                            /* dark blue → sage-deeper */

    /* Reusable sage scale */
    --sage: #7A9573;
    --sage-deep: #5F7A58;
    --sage-deeper: #4A6042;
    --sage-darkest: #2F3F2A;
}

/* ─── Buttons: sage primary, sage-tinted secondary ─────────────
   The subpage-hero-cta on Academy was previously blue-anchor.
   Now it's solid deep-sage with a deeper-sage hover state. */
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, #5F7A58) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px -8px rgba(75, 100, 70, 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, #4A6042) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px -8px rgba(75, 100, 70, 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, #5F7A58) !important;
    border: 1px solid var(--sage, #7A9573) !important;
}
body.program-academy .btn-secondary:hover,
body.program-academy a.btn-secondary:hover,
body.program-academy button.secondary:hover {
    background: rgba(122, 149, 115, 0.12) !important;
    color: var(--sage-deeper, #4A6042) !important;
    border-color: var(--sage-deep, #5F7A58) !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(75, 100, 70, 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, #5F7A58) !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, #5F7A58);
}
body.program-academy::-webkit-scrollbar-thumb:hover {
    background: var(--sage-deeper, #4A6042);
}


/* ═══════════════════════════════════════════════════════════════
   "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, #5F7A58) 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, #5F7A58) 0%,
            var(--sage-deeper, #4A6042) 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: #C4D2BC !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, #4A6042) !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, #2F3F2A) !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;

    /* No box-shadow halo — the soft glow was cohesive with a
       fully rounded shape but reads inconsistent on a flat-bottom
       silhouette. Easy to add back later if wanted. */
    box-shadow: none !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;

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

/* Hide the legacy .brand-badge-wing element that astro.js still
   injects. With the wing now serving as the badge's background-
   image directly, that secondary wing element is redundant — would
   read as wing-on-wing visual noise if left visible. The injection
   IIFE could be removed from astro.js entirely as a cleanup, but
   hiding it via CSS is safe and reversible. */
.brand-badge-wing {
    display: none !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 !important;
    overflow: hidden !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: 0 !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;
}

/* Make sure the actual nav content sits ABOVE the decorative wing */
nav.nav .nav-inner,
#nav .nav-inner {
    position: relative !important;
    z-index: 1 !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;
    }
}
