@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
/* =====================================================================
   about-v1.css
   Overlay restyle for the #/about route (pageAbout) so it matches the v8
   cinematic look already used on the courses, professor-training and
   state-approvals overlays — near-black canvas, antique gold accents,
   shimmer display text, glass tier cards — replacing the page's prior
   light theme (page-bg #F8F8F8, brown-rose text, white cards) with the
   same dignified, educator-first cinematic treatment.

   ROUTE ANCHOR: the about page emits a unique top-level section with the
   class "about-hero" ONLY in pageAbout (verified single occurrence in the
   bundle; the contact route uses "contact-hero" instead). Because the SPA
   renders one route at a time into the app container, body:has(.about-hero)
   gates EVERY rule below to this route only — home, courses, certifications,
   professor-training, state-approvals, contact and the rest are never
   touched.

   IMPORTANT: this file NEVER redefines the global brand variables and only
   reskins surfaces on this one route. The global .section-eyebrow and
   .section-title base rules carry their own important flag, so the matching
   overrides here also use important to win by source order plus weight.

   SAFE: linked LAST so it overrides style.css by source order; every rule
   is prefixed with body:has(.about-hero). Rollback = remove the one link
   line. No other SPA route changes.
   ===================================================================== */

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

/* ---------------------------------------------------------------
   1. Page canvas — deep cinematic near-black with burgundy glows
   (about route only, via has). The base body paints a light page-bg;
   we repaint the whole route to the v8 canvas.
   --------------------------------------------------------------- */
body:has(.about-hero){
  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(--ab-bg) 0%, var(--ab-bg2) 58%, var(--ab-bg3) 100%) !important;
  background-attachment:fixed;
}

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

/* ---------------------------------------------------------------
   2. Hero — reskin the purple-burgundy gradient to cinematic black +
   antique gold (overrides the base .about-hero background).
   --------------------------------------------------------------- */
body:has(.about-hero) .about-hero{
  background:
    radial-gradient(ellipse at 20% 30%, var(--ab-gold-glow) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(74,31,46,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 45%, rgba(74,31,46,.5) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,5,8,.55) 0%, var(--ab-bg) 100%) !important;
  color:var(--ab-cream);
}
/* slim gold hairline along the bottom edge of the hero */
body:has(.about-hero) .about-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  background:linear-gradient(to right, transparent, var(--ab-line-strong), transparent);
}
body:has(.about-hero) .about-hero h1{
  color:var(--ab-cream);
  text-shadow:0 2px 20px rgba(0,0,0,.6), 0 4px 60px rgba(0,0,0,.4);
}
body:has(.about-hero) .about-hero p{
  color:var(--ab-cream-soft);
  font-family:var(--ab-serif-body);
}
/* about hero eyebrow -> gold glass pill */
body:has(.about-hero) .about-hero .hero-eyebrow{
  color:var(--ab-gold);
  border:1px solid var(--ab-line-strong);
  background:rgba(196,163,90,.1);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
body:has(.about-hero) .hero-logo-animated{
  filter:drop-shadow(0 6px 22px var(--ab-gold-glow));
}

/* ---------------------------------------------------------------
   3. Section eyebrows + titles -> gold + cream across the route.
   The global base rules use important, so we match it.
   --------------------------------------------------------------- */
body:has(.about-hero) .section-eyebrow{ color:var(--ab-gold) !important; }
body:has(.about-hero) .section-title{ color:var(--ab-cream) !important; }

/* ---------------------------------------------------------------
   4. Mission — text to cream on the dark canvas; stats to gold.
   --------------------------------------------------------------- */
body:has(.about-hero) .about-mission h2{ color:var(--ab-cream); }
body:has(.about-hero) .about-mission p{
  color:var(--ab-cream-soft);
  font-family:var(--ab-serif-body);
}
body:has(.about-hero) .about-mission-stats{ border-top:1px solid var(--ab-line); }
body:has(.about-hero) .about-mission-stat-num{ color:var(--ab-gold); }
body:has(.about-hero) .about-mission-stat-label{ color:var(--ab-cream-mute); }

/* ---------------------------------------------------------------
   5. Values -> glass tier cards w/ gold hover hairline
   (mirrors the courses + professor-training overlays).
   --------------------------------------------------------------- */
body:has(.about-hero) .about-value-card{
  position:relative;
  background:linear-gradient(180deg, rgba(74,31,46,.42) 0%, rgba(29,12,22,.64) 100%);
  border:1px solid var(--ab-line);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
body:has(.about-hero) .about-value-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg, transparent, var(--ab-gold), transparent);
  opacity:0; transition:opacity .4s;
}
body:has(.about-hero) .about-value-card:hover{
  transform:translateY(-6px);
  border-color:var(--ab-line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
body:has(.about-hero) .about-value-card:hover::before{ opacity:1; }
body:has(.about-hero) .about-value-icon{
  background:rgba(196,163,90,.12);
  color:var(--ab-gold);
  border:1px solid var(--ab-line);
}
body:has(.about-hero) .about-value-card h3{ color:var(--ab-cream); }
body:has(.about-hero) .about-value-card p{ color:var(--ab-cream-soft); }

/* ---------------------------------------------------------------
   6. Founder -> glass panel; portrait gets a soft gold ring; the
   founder NAME (its section-title) shimmers gold as the human focal
   point. Stats to gold.
   --------------------------------------------------------------- */
body:has(.about-hero) .about-founder-inner{
  background:linear-gradient(180deg, rgba(74,31,46,.42) 0%, rgba(29,12,22,.64) 100%);
  border:1px solid var(--ab-line);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
body:has(.about-hero) .about-founder-content h2{ color:var(--ab-cream); }
body:has(.about-hero) .about-founder-content .founder-title{ color:var(--ab-gold); }
body:has(.about-hero) .about-founder-content p{
  color:var(--ab-cream-soft);
  font-family:var(--ab-serif-body);
}
/* shimmer gold on the founder name */
body:has(.about-hero) .about-founder-content .section-title{
  background:linear-gradient(135deg, var(--ab-gold) 0%, var(--ab-gold-light) 30%, var(--ab-cream) 50%, var(--ab-gold-light) 70%, var(--ab-gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  color:var(--ab-gold-light) !important;
  animation:abShimmer 5s ease-in-out infinite;
}
@keyframes abShimmer{ 0%{background-position:0% center;} 50%{background-position:100% center;} 100%{background-position:0% center;} }
/* portrait + logo on the dark glass card */
body:has(.about-hero) .about-founder-portrait img{
  border-radius:16px;
  border:1px solid var(--ab-line-strong);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
body:has(.about-hero) .founder-stat{
  background:rgba(196,163,90,.08);
  border:1px solid var(--ab-line);
}
body:has(.about-hero) .founder-stat-number{ color:var(--ab-gold); }
body:has(.about-hero) .founder-stat-label{ color:var(--ab-cream-mute); }

/* ---------------------------------------------------------------
   7. Closing CTA -> cinematic band; gold pill button (override the
   rose gradient on .btn-primary, scoped to this route).
   --------------------------------------------------------------- */
body:has(.about-hero) .about-cta{
  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(--ab-bg) 100%) !important;
  color:var(--ab-cream);
}
body:has(.about-hero) .about-cta h2{ color:var(--ab-cream); }
body:has(.about-hero) .about-cta p{ color:var(--ab-cream-soft); }
body:has(.about-hero) .about-cta .btn-primary{
  background:linear-gradient(135deg, var(--ab-gold) 0%, #b08d3f 100%) !important;
  color:#1a0a10 !important;
  box-shadow:0 8px 28px var(--ab-gold-glow);
}
body:has(.about-hero) .about-cta .btn-primary:hover{
  background:linear-gradient(135deg, var(--ab-gold-light) 0%, var(--ab-gold) 100%) !important;
  color:#1a0a10 !important;
  box-shadow:0 14px 36px rgba(196,163,90,.5);
}

/* ---------------------------------------------------------------
   8. Motion courtesy
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body:has(.about-hero) .about-founder-content .section-title{ animation:none; }
}

/* ---------------------------------------------------------------
   9. LAYOUT — center the stat rows + the founder panel, and drop the
   side logo. Janette: the mission stats (PD Courses / States / PD
   Hours / ISTE Aligned) + the founder writing + the founder stats
   (Course Enrollments / Years in K-12 / States Reached / FETC) should
   all be centered on the page, and the logo on the side "looks weird."
   Pure layout, route-scoped via body:has(.about-hero) like the rest.
   --------------------------------------------------------------- */
/* mission stats row -> centered group, each stat centered */
body:has(.about-hero) .about-mission-stats{
  justify-content:center;
  flex-wrap:wrap;
  text-align:center;
}
body:has(.about-hero) .about-mission-stat{ align-items:center; }

/* founder -> remove the side logo, collapse to one centered column */
body:has(.about-hero) .about-founder-logo{ display:none !important; }
body:has(.about-hero) .about-founder-inner{
  flex-direction:column;
  align-items:center;
  text-align:center;
}
body:has(.about-hero) .about-founder-content{ text-align:center; width:100%; }
body:has(.about-hero) .about-founder-portrait{ display:flex; justify-content:center; }

/* founder stats grid -> centered + width-capped so the 4-up stays tidy */
body:has(.about-hero) .about-founder-stats{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}