@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
/* =====================================================================
   professor-training-v1.css
   Overlay restyle for the #/professor-training route so it matches the
   LIVE iteachaiacademy.org cinematic landing (iTeachAI-landing-mockup-v8)
   and the courses catalog overlay (courses-academy-v2.css) — same v8
   tokens, antique-gold-on-near-black, glass tier cards, shimmer accent.

   ROUTE ANCHOR: .cert-hero is emitted ONLY by pageProfessorTraining in the
   app bundle (verified single occurrence). Because the SPA renders one
   route at a time into #app, body:has(.cert-hero) gates EVERY rule below
   to this route only — the home, certifications and other routes (which
   use different hero classes) are never touched.

   SAFE: linked LAST so it overrides style.css + the academy overlay by
   source order; every rule is prefixed with body:has(.cert-hero) and the
   page reuses .cert- and .course- classes only. Rollback = remove the one
   link line. Cards mirror the academy overlay so the two pages match.
   ===================================================================== */

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

/* ---------------------------------------------------------------
   1. Page canvas — deep cinematic near-black with burgundy glows
   (professor-training route only, via :has)
   --------------------------------------------------------------- */
body:has(.cert-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(--pt-bg) 0%, var(--pt-bg2) 58%, var(--pt-bg3) 100%);
  background-attachment:fixed;
}

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

/* ---------------------------------------------------------------
   2. Hero — reskin navy/rose -> cinematic black + antique gold
   --------------------------------------------------------------- */
body:has(.cert-hero) .cert-hero{
  background:
    radial-gradient(ellipse at 20% 30%, var(--pt-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(--pt-bg) 100%);
  color:var(--pt-cream);
}
/* slim gold hairline along the bottom edge of the hero */
body:has(.cert-hero) .cert-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(to right, transparent, var(--pt-line-strong), transparent);
}
body:has(.cert-hero) .hero-logo-animated{
  filter:drop-shadow(0 6px 22px var(--pt-gold-glow));
}
body:has(.cert-hero) .cert-hero-badge{
  color:var(--pt-gold);
  border:1px solid var(--pt-line-strong);
  background:rgba(196,163,90,.1);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
body:has(.cert-hero) .cert-hero-title{
  color:var(--pt-cream);
  text-shadow:0 2px 20px rgba(0,0,0,.6), 0 4px 60px rgba(0,0,0,.4);
}
/* v8 shimmer gold on the highlighted hero word */
body:has(.cert-hero) .cert-hero .text-accent{
  background:linear-gradient(135deg, var(--pt-gold) 0%, var(--pt-gold-light) 30%, var(--pt-cream) 50%, var(--pt-gold-light) 70%, var(--pt-gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  color:var(--pt-gold-light);
  font-style:italic;
  animation:ptShimmer 5s ease-in-out infinite;
}
@keyframes ptShimmer{ 0%{background-position:0% center;} 50%{background-position:100% center;} 100%{background-position:0% center;} }
body:has(.cert-hero) .cert-hero-sub{
  color:var(--pt-cream-soft);
  font-family:var(--pt-serif-body);
  opacity:1;
}
body:has(.cert-hero) .cert-hero-stats{ border-top:1px solid var(--pt-line); flex-wrap:wrap; }
body:has(.cert-hero) .cert-stat-num{ color:var(--pt-cream); }
body:has(.cert-hero) .cert-stat-label{ color:var(--pt-gold); opacity:1; }

/* ---------------------------------------------------------------
   3. Course cards -> glass "tier" treatment w/ gold hover hairline
   (mirrors courses-academy-v2.css so the two pages match)
   --------------------------------------------------------------- */
body:has(.cert-hero) .course-card{
  position:relative;
  background:linear-gradient(180deg, rgba(74,31,46,.42) 0%, rgba(29,12,22,.64) 100%);
  border:1px solid var(--pt-line);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
body:has(.cert-hero) .course-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg, transparent, var(--pt-gold), transparent);
  opacity:0; transition:opacity .4s;
}
body:has(.cert-hero) .course-card:hover{
  transform:translateY(-6px);
  border-color:var(--pt-line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
body:has(.cert-hero) .course-card:hover::before{ opacity:1; }
body:has(.cert-hero) .course-card-body h3{ color:var(--pt-cream); }
body:has(.cert-hero) .course-card-body p{ color:rgba(253,246,240,.7); }
body:has(.cert-hero) .course-card-meta,
body:has(.cert-hero) .course-card-meta-item{ color:rgba(253,246,240,.6); }
body:has(.cert-hero) .course-card-cta{ border-top:1px solid var(--pt-line); }
body:has(.cert-hero) .course-card-title-overlay{ color:var(--pt-cream); }
body:has(.cert-hero) .course-price,
body:has(.cert-hero) .course-price-paid{ color:var(--pt-gold); }
body:has(.cert-hero) .course-card-category-paid{
  background:linear-gradient(135deg, var(--pt-gold), #b08d3f);
  color:#1a0a10;
  box-shadow:0 2px 8px var(--pt-gold-glow);
}
body:has(.cert-hero) .course-badge-paid{
  background:rgba(196,163,90,.14);
  color:var(--pt-gold-light);
}

/* ---------------------------------------------------------------
   4. Buttons -> antique gold pill (override the inline gradients)
   The view sets inline background/border on these, so !important.
   --------------------------------------------------------------- */
body:has(.cert-hero) .btn-primary{
  background:linear-gradient(135deg, var(--pt-gold) 0%, #b08d3f 100%) !important;
  color:#1a0a10 !important;
  border:1px solid transparent !important;
  box-shadow:0 8px 28px var(--pt-gold-glow);
}
body:has(.cert-hero) .btn-primary:hover{
  background:linear-gradient(135deg, var(--pt-gold-light) 0%, var(--pt-gold) 100%) !important;
  color:#1a0a10 !important;
  box-shadow:0 14px 36px rgba(196,163,90,.5);
}
body:has(.cert-hero) .btn-outline{
  color:var(--pt-cream);
  border:1px solid var(--pt-line-strong);
}
body:has(.cert-hero) .btn-outline:hover{
  background:rgba(253,246,240,.08);
  border-color:var(--pt-gold);
  color:#fff;
}

/* ---------------------------------------------------------------
   5. Closing CTA band ("Ready to bring AI training to your faculty?")
   The view renders this with inline styles and no class; only its <h2>
   and <p> need cohesion on the dark canvas.
   --------------------------------------------------------------- */
body:has(.cert-hero) h2{ color:var(--pt-cream); }

/* ---------------------------------------------------------------
   6. Motion courtesy
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body:has(.cert-hero) .cert-hero .text-accent{ animation:none; }
}