@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
/* =====================================================================
   state-approvals-v1.css
   Overlay restyle for the #/state-approvals route (pageStateMap) so the
   HERO and closing CTA match the v8 cinematic look used on the courses and
   professor-training overlays — near-black canvas, antique gold, shimmer
   display text — while the state MAP itself KEEPS its existing cute
   bordeaux + rose-pink cartogram palette (per Janette's request).

   ROUTE ANCHOR: the page container gets the classes "home-aivent
   state-map-page" ONLY in pageStateMap (verified single occurrence). The
   SPA renders one route at a time into #app, so body:has(.state-map-page)
   and the .state-map-page prefix gate EVERY rule below to this route only.

   The base "av-" aivent theme is ALREADY the v8 cinematic look; a prior
   in-stylesheet color fix (2026-05-15) had downgraded THIS route to a
   lighter-burgundy hero, cream bands and a flat bordeaux CTA. This overlay
   (linked LAST) restores the cinematic hero + CTA + canvas and frames the
   legend and the tile cartogram as a single luminous champagne paper-map
   panel so the pink tiles stay legible on a light background.

   IMPORTANT: this file NEVER redefines the --hv2- variables, so the map
   tile and legend-dot colors (bordeaux DOE, burgundy district, rose-pink
   available) render exactly as before. Every map tile rule is left alone.

   SAFE: rollback = remove the one link line. No other SPA route changes.
   ===================================================================== */

:root{
  --sa-bg:#0a0508;
  --sa-bg2:#150810;
  --sa-bg3:#1d0c16;
  --sa-gold:#C4A35A;
  --sa-gold-light:#d4be7c;
  --sa-gold-glow:rgba(196,163,90,.3);
  --sa-cream:#FDF6F0;
  --sa-line:rgba(196,163,90,.18);
  --sa-line-strong:rgba(196,163,90,.4);
  --sa-paper-top:#FDF6F0;
  --sa-paper-bot:#f6ece2;
}

/* ---------------------------------------------------------------
   1. Page canvas — restore the cinematic near-black with burgundy +
   gold glows. The base .home-aivent paints a flat #0a0508; we re-add the
   v8 glows so they show behind the legend/map panel. Route-scoped.
   --------------------------------------------------------------- */
body:has(.state-map-page){ background:var(--sa-bg) !important; }
.state-map-page,
.state-map-page.home-aivent{
  background:
    radial-gradient(900px 620px at 26% 10%, rgba(74,31,46,.55) 0%, transparent 60%),
    radial-gradient(820px 600px at 86% 22%, rgba(98,3,3,.26) 0%, transparent 55%),
    radial-gradient(760px 560px at 50% 60%, rgba(196,163,90,.10) 0%, transparent 62%),
    linear-gradient(180deg, var(--sa-bg) 0%, var(--sa-bg2) 58%, var(--sa-bg3) 100%) !important;
}

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

/* ---------------------------------------------------------------
   2. HERO — restore the v8 cinematic gradient (overrides the 2026-05-15
   fix that flattened it to a lighter burgundy). Same selectors as that
   fix so we win by source order. The gold eyebrow, shimmer .av-h1-grad
   accent and gold buttons all come from the base aivent theme already.
   --------------------------------------------------------------- */
.state-map-page .av-hero,
.state-map-page.home-aivent .av-hero{
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(196,163,90,.15) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 20% 80%, rgba(74,31,46,.6) 0%, transparent 50%),
    radial-gradient(ellipse 100% 80% at 80% 20%, rgba(155,86,98,.3) 0%, transparent 50%),
    linear-gradient(180deg, #1a0a10 0%, var(--sa-bg) 100%) !important;
}

/* ---------------------------------------------------------------
   3. LEGEND + MAP -> one luminous champagne paper-map panel, centered on
   the cinematic canvas inside a gold hairline frame. The tile and dot
   colors are NOT touched, so the bordeaux/burgundy/rose-pink cartogram
   stays exactly as before — just sitting on framed cream paper.
   --------------------------------------------------------------- */
.state-map-page .sm-legend,
.state-map-page section.sm-legend{
  max-width:1100px !important;
  margin:clamp(28px,5vh,56px) auto 0 !important;
  padding:clamp(1.5rem,3vh,2rem) clamp(1.25rem,3vw,2.5rem) !important;
  background:linear-gradient(180deg, var(--sa-paper-top) 0%, #f9f1ea 100%) !important;
  border:1px solid var(--sa-line-strong) !important;
  border-bottom:1px solid rgba(196,163,90,.28) !important;
  border-radius:24px 24px 0 0 !important;
}
/* legend text stays brand burgundy on the cream panel (legible) */
.state-map-page .sm-legend-item{
  color:var(--hv2-burgundy, #620303) !important;
}

.state-map-page .sm-section,
.state-map-page section.sm-section{
  max-width:1100px !important;
  margin:0 auto clamp(40px,8vh,72px) !important;
  padding:clamp(1.5rem,4vh,3rem) clamp(1.25rem,3vw,2.5rem) clamp(2rem,5vh,3.25rem) !important;
  background:linear-gradient(180deg, #f9f1ea 0%, var(--sa-paper-bot) 100%) !important;
  border:1px solid var(--sa-line-strong) !important;
  border-top:none !important;
  border-radius:0 0 24px 24px !important;
  box-shadow:0 34px 80px rgba(0,0,0,.5) !important;
}
.state-map-page .sm-section-inner{ background:transparent !important; }
.state-map-page .sm-map{ background:transparent !important; }

/* ---------------------------------------------------------------
   4. FINAL CTA -> restore the v8 cinematic band (overrides the fix's flat
   bordeaux). Heading is cream and the .av-h1-grad accent shimmers gold
   from the base theme, buttons are gold from the base theme.
   --------------------------------------------------------------- */
.state-map-page .av-final,
.state-map-page section.av-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(--sa-bg) 100%) !important;
  color:var(--sa-cream) !important;
}

/* ---------------------------------------------------------------
   5. Mobile — let the paper panel breathe to the edges a touch
   --------------------------------------------------------------- */
@media (max-width:640px){
  .state-map-page .sm-legend,
  .state-map-page section.sm-legend,
  .state-map-page .sm-section,
  .state-map-page section.sm-section{
    margin-left:14px !important;
    margin-right:14px !important;
    width:auto !important;
  }
}