@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
/* =====================================================================
   school-pd-v1.css
   Overlay restyle for the #/school-pd route (pageSchoolPD) so it matches
   the v8 cinematic look already used on the courses, professor-training,
   state-approvals and about overlays — near-black canvas, antique gold
   accents, cream serif text, glass tier cards.

   WHY: pageSchoolPD reuses the shared "home-v2" component system, whose
   DEFAULT section surface is LIGHT CREAM paper (--hv2-paper #faf5ee with
   burgundy text). The result was a jarring light-cream "sandwich" — the
   hero, coverage banner and final CTA render dark, but the five middle
   sections (what-is-included, how-it-works, founder, pricing, FAQ) render
   on light cream. Every sibling tab is now dark cinematic, so School PD
   read as the inconsistent, unfinished one. This overlay repaints those
   middle surfaces to the same cinematic canvas and flips the burgundy-on
   -light text to gold + cream.

   ROUTE ANCHOR: pageSchoolPD sets container.className to include the class
   "school-pd-v2" (verified SINGLE occurrence in the bundle). The SPA
   renders one route at a time, so body:has(.school-pd-v2) and the
   .school-pd-v2 prefix gate EVERY rule below to this route only. The home
   route shares "home-v2" but never "school-pd-v2", so it is untouched.

   IMPORTANT: this file NEVER redefines the global --hv2- brand variables.
   It only repaints surfaces and recolors text on this one route, so the
   dark cards that were already correct (path cards, pricing cards) keep
   their cream text and just gain a consistent glass frame.

   SAFE: linked LAST so it overrides style.css by source order. Rollback =
   remove the one link line. No other SPA route changes.
   ===================================================================== */

:root{
  --spd-bg:#0a0508;
  --spd-bg2:#150810;
  --spd-bg3:#1d0c16;
  --spd-burg:#4A1F2E;
  --spd-bord:#620303;
  --spd-gold:#C4A35A;
  --spd-gold-light:#d4be7c;
  --spd-gold-glow:rgba(196,163,90,.3);
  --spd-cream:#FDF6F0;
  --spd-cream-soft:rgba(253,246,240,.82);
  --spd-cream-mute:rgba(253,246,240,.6);
  --spd-line:rgba(196,163,90,.18);
  --spd-line-strong:rgba(196,163,90,.4);
  --spd-serif-body:'Source Serif 4', Georgia, serif;
}

/* ---------------------------------------------------------------
   1. Page canvas — repaint the home-v2 light-paper container to the
   v8 cinematic near-black with burgundy + bordeaux glows. Route-scoped.
   --------------------------------------------------------------- */
body:has(.school-pd-v2){
  background:
    radial-gradient(900px 620px at 28% 12%, rgba(74,31,46,.5) 0%, transparent 60%),
    radial-gradient(820px 600px at 86% 26%, rgba(98,3,3,.26) 0%, transparent 55%),
    linear-gradient(180deg, var(--spd-bg) 0%, var(--spd-bg2) 58%, var(--spd-bg3) 100%) !important;
  background-attachment:fixed;
}
.school-pd-v2{ background:transparent !important; }

/* header accents -> gold, ONLY while on this route */
body:has(.school-pd-v2) .site-header{
  background:rgba(10,5,8,.84);
  border-bottom:1px solid var(--spd-line);
}
body:has(.school-pd-v2) .site-header .logo span{ color:var(--spd-gold); }
body:has(.school-pd-v2) .site-header nav a:hover,
body:has(.school-pd-v2) .site-header nav a.active{ color:var(--spd-gold); }
body:has(.school-pd-v2) .site-header nav a::after{ background:var(--spd-gold); }
body:has(.school-pd-v2) .site-header .header-cta,
body:has(.school-pd-v2) .site-header nav a.header-cta{
  background:linear-gradient(135deg,var(--spd-gold) 0%,#b08d3f 100%);
  color:#1a0a10 !important;
  border:1px solid transparent;
}

/* ---------------------------------------------------------------
   2. The five formerly-light sections -> transparent, so the single
   cinematic canvas flows through. Their own subtle radial ::before
   accents (gold on pricing, rose on faq) survive and read fine on dark.
   --------------------------------------------------------------- */
.school-pd-v2 .hv2-section.hv2-paths,
.school-pd-v2 .hv2-section.hv2-how,
.school-pd-v2 .hv2-section.hv2-founder,
.school-pd-v2 .spdv2-founder-mini,
.school-pd-v2 .spdv2-pricing,
.school-pd-v2 .spdv2-faq-section{
  background:transparent !important;
}

/* section titles -> cream */
.school-pd-v2 .hv2-h2{ color:var(--spd-cream) !important; }

/* dark eyebrows (were burgundy-on-light) -> gold glass pill */
.school-pd-v2 .hv2-eyebrow-dark{
  color:var(--spd-gold) !important;
  background:rgba(196,163,90,.10) !important;
  border:1px solid var(--spd-line-strong) !important;
}

/* ---------------------------------------------------------------
   3. WHAT IS INCLUDED + PRICING cards -> consistent glass tier cards
   (the cards were already dark burgundy; give them a gold-hairline
   glass frame so they read as cards on the near-black canvas).

   SPECIFICITY NOTE: style.css late block (lines 14367 + 14537) paints
   EVERY card in a .hv2-paths-grid solid bordeaux w/ a blush border via
   `.home-v2 .hv2-paths-grid .hv2-path` (0,3,0 !important). BOTH the
   "included" grid AND the pricing grid carry .hv2-paths-grid, so we
   anchor on that same selector at 0,3,0 — it ties and then wins by
   source order (this overlay loads last). A .spdv2-pkg-only selector
   would be 0,2,0 and LOSE, leaving plain pricing cards bordeaux+blush.
   --------------------------------------------------------------- */
.school-pd-v2 .hv2-paths-grid .hv2-path{
  background:linear-gradient(180deg, rgba(74,31,46,.42) 0%, rgba(29,12,22,.64) 100%) !important;
  border:1px solid var(--spd-line) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.school-pd-v2 .hv2-paths-grid .hv2-path-featured{
  background:linear-gradient(180deg, rgba(98,3,3,.40) 0%, rgba(29,12,22,.74) 100%) !important;
  border-color:var(--spd-line-strong) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
}
.school-pd-v2 .hv2-paths-grid .hv2-path:hover{
  border-color:var(--spd-line-strong) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
}

/* ---------------------------------------------------------------
   4. HOW IT WORKS — step numbers to gold, text to cream.
   --------------------------------------------------------------- */
.school-pd-v2 .hv2-how .hv2-step-num,
.school-pd-v2 .hv2-steps .hv2-step-num{ color:var(--spd-gold) !important; }
.school-pd-v2 .hv2-step-title{ color:var(--spd-cream) !important; }
.school-pd-v2 .hv2-step-desc{ color:var(--spd-cream-soft) !important; }

/* ---------------------------------------------------------------
   5. FOUNDER MINI — quote to cream, cite + link to gold, creds muted.
   The creds divider ::before is already gold from the base theme.
   --------------------------------------------------------------- */
.school-pd-v2 .spdv2-founder-body .hv2-founder-quote p,
.school-pd-v2 .hv2-founder-quote p{ color:var(--spd-cream) !important; }
.school-pd-v2 .hv2-founder-cite{ color:var(--spd-gold) !important; }
.school-pd-v2 .hv2-founder-creds{ color:var(--spd-cream-mute) !important; }
.school-pd-v2 .hv2-creds-link{ color:var(--spd-gold-light) !important; }

/* ---------------------------------------------------------------
   6. PRICING text — lede + the plain-card name/price/features that were
   burgundy-on-light. (Featured-card text was already cream.)
   --------------------------------------------------------------- */
.school-pd-v2 .spdv2-pricing-lede{ color:var(--spd-cream-soft) !important; }
.school-pd-v2 .spdv2-pkg-name{ color:var(--spd-cream) !important; }
.school-pd-v2 .spdv2-pkg-price{
  color:var(--spd-gold) !important;
  border-bottom-color:rgba(196,163,90,.30) !important;
}
.school-pd-v2 .spdv2-pkg-features li{ color:var(--spd-cream-soft) !important; }

/* ---------------------------------------------------------------
   7. FAQ — question + answer text to cream, hairline dividers to gold.
   The plus/minus icon is already gold from the base theme.
   --------------------------------------------------------------- */
.school-pd-v2 .spdv2-faq-q{ color:var(--spd-cream) !important; }
.school-pd-v2 .spdv2-faq-a{ color:var(--spd-cream-soft) !important; }
.school-pd-v2 .spdv2-faq-item{ border-bottom:1px solid var(--spd-line) !important; }
.school-pd-v2 .spdv2-faq-item:first-child{ border-top:1px solid var(--spd-line) !important; }
@media (hover: hover) and (pointer: fine){
  .school-pd-v2 .spdv2-faq-q:hover{ color:var(--spd-gold-light) !important; }
}

/* ---------------------------------------------------------------
   8. PRIMARY BUTTONS -> gold pill (override flat burgundy) so the
   "Request a quote" CTAs pop on the dark canvas, matching the family.
   Ghost buttons already read as gold-tinted glass on dark — left alone.
   --------------------------------------------------------------- */
.school-pd-v2 .hv2-btn-primary{
  background:linear-gradient(135deg, var(--spd-gold) 0%, #b08d3f 100%) !important;
  color:#1a0a10 !important;
  border:1px solid transparent !important;
  box-shadow:0 8px 28px var(--spd-gold-glow) !important;
}
.school-pd-v2 .hv2-btn-primary:hover{
  background:linear-gradient(135deg, var(--spd-gold-light) 0%, var(--spd-gold) 100%) !important;
  color:#1a0a10 !important;
  box-shadow:0 14px 36px rgba(196,163,90,.5) !important;
}

/* ---------------------------------------------------------------
   9. CLOSING CTA -> cinematic radial band (override the flat burgundy).
   --------------------------------------------------------------- */
.school-pd-v2 .hv2-final{
  background:
    radial-gradient(ellipse at center, rgba(196,163,90,.15) 0%, transparent 60%),
    radial-gradient(700px 420px at 50% 0%, rgba(74,31,46,.5) 0%, transparent 65%),
    linear-gradient(180deg, #1a0a10 0%, var(--spd-bg) 100%) !important;
}

/* ---------------------------------------------------------------
   10. v8 GLOW ALIGNMENT — "no glow in the dark."
   The shared home-v2 layer paints saturated GARNET/ROSE luminous
   halos that diverge from the v8 desktop mockup: the hero orb halo
   (rgba(173,101,101,.18) over a big 40px blur), a PULSING eyebrow
   dot (opacity blinks 1->.6), and rose card glows. The v8 landing
   uses GOLD glows only, rose just at .06-.08, and calm (non-blinking)
   accents. Re-tune these three luminous/animated elements to
   champagne-gold + low alpha + no pulse so School PD reads identical
   in vibe to v8. The button + final-CTA gold glows already match v8,
   so they are intentionally left alone. Route-scoped: the home route
   (home-v2 WITHOUT school-pd-v2) is untouched. These selectors tie
   the home-v2 rules on specificity and win by source order (overlay
   loads last); !important is belt-and-suspenders.
   --------------------------------------------------------------- */

/* a. Hero orb halo: garnet+rose big-blur halo -> soft champagne-gold */
.school-pd-v2 .hv2-orb-glow{
  inset:-30% !important;
  background:radial-gradient(circle at center,
    rgba(196,163,90,.20) 0%,
    rgba(222,191,143,.07) 42%,
    transparent 70%) !important;
  filter:blur(26px) !important;
}

/* b. Eyebrow dot: stop the pulse/blink; settle to a calm gold dot */
.school-pd-v2 .hv2-hero .hv2-eyebrow-dot{
  background:var(--spd-gold) !important;
  box-shadow:0 0 8px rgba(196,163,90,.45) !important;
  opacity:1 !important;
  animation:none !important;
}

/* c. Card depth glows: drop the rose, keep a faint champagne-gold lift */
.school-pd-v2 .hv2-paths-grid .hv2-path .hv2-path-glow,
.school-pd-v2 .hv2-path-featured .hv2-path-glow{
  background:
    radial-gradient(circle at 80% 20%, rgba(222,191,143,.14) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(196,163,90,.08) 0%, transparent 55%) !important;
}

/* ---------------------------------------------------------------
   11. CONSISTENCY PASS (Janette feedback 2026-05-28):
   "the banner looks weird; buttons are not yellow; boxes are not
   same colors." Three targeted fixes, route-scoped to .school-pd-v2:

   (a) COVERAGE BANNER — it was the lone burgundy strip and, after the
       de-glow pass, the ONLY element still carrying a rose wash, so it
       stuck out as a weird reddish band. Blend it into the dark canvas
       (transparent) so the page reads as one continuous surface. Its
       text is already cream, so it stays fully legible.
   (b) BOXES SAME COLOR — the "featured" cards rendered bordeaux-RED
       (rgba(98,3,3,.4)) while their siblings were burgundy. Unify the
       featured fill to the SAME burgundy glass so each grid reads as
       one matched set. (Featured keeps only a slightly stronger border
       from Section 3 for a whisper of hierarchy — same color.)
   (c) BUTTONS YELLOW — the School + Custom PD Day quote CTAs were
       burgundy-text ghost buttons (not yellow, low contrast on dark).
       Make all three package quote buttons the same gold pill.
   --------------------------------------------------------------- */

/* a. Coverage banner -> blend into the canvas (no burgundy strip, no rose) */
.school-pd-v2 .hv2-proof{
  background:transparent !important;
}

/* b. Featured cards -> same burgundy glass fill as the regular cards */
.school-pd-v2 .hv2-paths-grid .hv2-path-featured{
  background:linear-gradient(180deg, rgba(74,31,46,.42) 0%, rgba(29,12,22,.64) 100%) !important;
}

/* c. All three package quote buttons -> the same gold pill as District */
.school-pd-v2 .spdv2-pkg-cta{
  background:linear-gradient(135deg, var(--spd-gold) 0%, #b08d3f 100%) !important;
  color:#1a0a10 !important;
  border:1px solid transparent !important;
  box-shadow:0 8px 28px var(--spd-gold-glow) !important;
}
.school-pd-v2 .spdv2-pkg-cta:hover{
  background:linear-gradient(135deg, var(--spd-gold-light) 0%, var(--spd-gold) 100%) !important;
  color:#1a0a10 !important;
  box-shadow:0 14px 36px rgba(196,163,90,.5) !important;
}