/* ══════════════════════════════════════════════
   AZURE MASTERY — LIGHT THEME
   Everything here is gated behind html[data-theme="light"],
   set by the inline head snippet (from localStorage) and /theme.js.
   Dark remains the default: with no stored preference this file is inert
   apart from the .theme-toggle base styles at the bottom.
   Loaded AFTER each page's inline <style> block so equal-specificity
   rules still win via source order.
   ══════════════════════════════════════════════ */

/* ── 1. Design-system token remap (homepage + exam pages share names) ── */
html[data-theme="light"] {
  color-scheme: light;

  /* Accents darkened for text/border use on light surfaces (WCAG AA).
     Decorative gradients (--gradient-cyan-blue etc.) embed raw hexes,
     so brand-bright cyan survives where it is background art. */
  --azure-cyan:      #0E7490;
  --azure-blue:      #1D6FB8;
  --azure-purple:    #6C4EC9;
  --xp-gold:         #B45309;
  --success-green:   #15803D;
  --error-red:       #D03030;
  --warning-orange:  #C2410C;

  --bg-app:          #F5F7FA;
  --bg-deep:         #ECF1F7;
  --bg-card:         #FFFFFF;
  --bg-surface:      #F8FAFD;
  --bg-elevated:     #FFFFFF;
  --bg-overlay:      #EDF2F9;
  --bg-soft-blue:    #E1EEFA;

  --text-primary:    #14202E;
  --text-secondary:  #46566A;
  --text-muted:      #5B6B7D;

  --border-subtle:   rgba(13,30,55,0.09);
  --border-strong:   rgba(13,30,55,0.18);
  --border-accent:   rgba(0,110,170,0.35);

  --shadow-flat:     0 3px 6px rgba(15,30,60,0.08);
  --shadow-raised:   0 5px 9px rgba(15,30,60,0.10), 0 2px 8px rgba(15,30,60,0.06);
  --shadow-floating: 0 8px 12px rgba(15,30,60,0.12), 0 6px 16px rgba(15,30,60,0.10);
  --shadow-device:   0 40px 80px rgba(15,30,60,0.25);

  --gradient-hero-bg:    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(43,136,216,0.14) 0%, transparent 65%),
                         radial-gradient(ellipse 50% 40% at 80% 20%, rgba(80,230,255,0.10) 0%, transparent 55%),
                         var(--bg-app);
  --gradient-section-bg: linear-gradient(180deg, var(--bg-app) 0%, var(--bg-deep) 50%, var(--bg-app) 100%);
}

/* ── 2. hero.css --amh-* namespace (scoped to .am-cert-hero) ── */
html[data-theme="light"] .am-cert-hero {
  --amh-bg:     #F5F7FA;
  --amh-card:   #FFFFFF;
  --amh-text:   #14202E;
  --amh-muted:  #46566A;
  --amh-border: rgba(13,30,55,0.12);
  /* Per-family bright accent, darkened enough to act as ink on light.
     Mix toward BLACK (not navy) so warm hues darken without going muddy;
     the @supports block below upgrades to OKLCH, which pins lightness
     while keeping the family's full hue and chroma. */
  --amh-ink: color-mix(in srgb, var(--amh-accent) 55%, #000);
}
@supports (color: oklch(from red 0.5 c h)) {
  html[data-theme="light"] .am-cert-hero {
    --amh-ink: oklch(from var(--amh-accent) 0.47 c h);
  }
}
html[data-theme="light"] .am-cert-hero__eyebrow-code,
html[data-theme="light"] .am-cert-hero__badge-code,
html[data-theme="light"] .am-cert-hero__score-pill-value { color: var(--amh-ink); }
html[data-theme="light"] .am-cert-hero__badge-glyph path { stroke: var(--amh-ink); }
html[data-theme="light"] .am-cert-hero__lead-accent {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--amh-accent) 65%, #000) 0%,
    color-mix(in srgb, var(--amh-accent-2) 78%, #000) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (color: oklch(from red 0.5 c h)) {
  /* Large display text (3:1 floor) — keep lightness higher for extra pop */
  html[data-theme="light"] .am-cert-hero__lead-accent {
    background: linear-gradient(135deg,
      oklch(from var(--amh-accent) 0.55 c h) 0%,
      oklch(from var(--amh-accent-2) 0.5 c h) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
html[data-theme="light"] .am-cert-hero__brand:hover { background: rgba(0,110,170,0.06); border-color: rgba(0,110,170,0.30); }
html[data-theme="light"] .am-cert-hero__brand-icon { box-shadow: 0 4px 12px rgba(15,30,60,0.20), 0 0 0 1px rgba(13,30,55,0.08) inset; }
html[data-theme="light"] .am-cert-hero__stat { background: rgba(13,30,55,0.03); }
html[data-theme="light"] .am-cert-hero__badge {
  background: rgba(255,255,255,0.90);
  border-color: rgba(0,110,170,0.40);
  box-shadow: 0 12px 32px rgba(15,30,60,0.18), 0 0 24px rgba(43,136,216,0.10);
}
html[data-theme="light"] .am-cert-hero__score-pill {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 36px rgba(15,30,60,0.20), 0 0 28px rgba(43,136,216,0.08);
}
html[data-theme="light"] .am-cert-hero__score-pill-delta { color: #15803D; }
html[data-theme="light"] .am-cert-hero__phone-wrap {
  filter: drop-shadow(0 50px 70px rgba(15,30,60,0.28)) drop-shadow(0 0 40px rgba(43,136,216,0.10));
}
html[data-theme="light"] .am-cert-hero__phone-screen {
  background-color: #F5F7FA;
  background-image: url('/images/cap-home-dashboard-light.webp');
}
/* The light capture's baked-in exam CTA sits lower and spans more of the
   card than the dark capture. Align the per-exam mask to cover it exactly. */
html[data-theme="light"] .am-cert-hero__cta-overlay {
  left: 6.8%;
  right: 6.8%;
  top: 56%;
  height: 4.8%;
}
html[data-theme="light"] .am-retire-banner__cta { color: #fff; }

/* ── 3. Homepage component overrides ── */
/* Gradient-painted text: the dark theme's bright cyan reads at ~1.5:1 on a
   light background, so remap the text gradients to AA-safe deep variants.
   (Gradient *backgrounds* — buttons, chips — keep the bright brand hexes.) */
html[data-theme="light"] .headline-accent,
html[data-theme="light"] .page-h1-accent,
html[data-theme="light"] .hero-app-name,
html[data-theme="light"] .how-step-num {
  background: linear-gradient(135deg, #0891B2 0%, #1D6FB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="light"] .headline-accent--purple {
  background: linear-gradient(135deg, #1D6FB8 0%, #6C4EC9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="light"] .site-nav { background: rgba(245,247,250,0.80); }
html[data-theme="light"] .site-nav--scrolled { background: rgba(245,247,250,0.94); }
html[data-theme="light"] .btn-nav-cta { border-color: rgba(0,110,170,0.45); }
html[data-theme="light"] .btn-nav-cta:hover { background: rgba(0,110,170,0.08); }
html[data-theme="light"] .badge-exam-iq { color: #fff; } /* gradient bg darkens via tokens; keep white text */
html[data-theme="light"] .hero-app-icon { box-shadow: 0 0 24px rgba(43,136,216,0.25), 0 0 48px rgba(43,136,216,0.12); }

/* Device screenshots use CSS variables so the stored light preference is
   honoured before first paint. Missing light captures fall back to dark. */
.themed-screenshot { background-image: var(--screenshot-dark); }
html[data-theme="light"] .themed-screenshot {
  background-image: var(--screenshot-light, var(--screenshot-dark));
}

html[data-theme="light"] .phone-wrap {
  filter: drop-shadow(0 40px 60px rgba(15,30,60,0.28)) drop-shadow(0 0 30px rgba(43,136,216,0.10));
}
html[data-theme="light"] .phone-wrap::before {
  background: radial-gradient(ellipse at 50% 40%, rgba(43,136,216,0.10) 0%, rgba(43,136,216,0.05) 40%, transparent 70%);
}
html[data-theme="light"] .phone-angle-center {
  filter: drop-shadow(0 60px 80px rgba(15,30,60,0.32)) drop-shadow(0 0 50px rgba(43,136,216,0.12));
}
html[data-theme="light"] .screenshot-frame { filter: drop-shadow(0 24px 40px rgba(15,30,60,0.22)); }
html[data-theme="light"] .mac-wrap {
  filter: drop-shadow(0 40px 80px rgba(15,30,60,0.28)) drop-shadow(0 0 60px rgba(43,136,216,0.10));
}
/* Safari can briefly expose the rectangular filter-compositing surface while
   child carousel slides cross-fade. Keep the same depth on the actual shells
   so there is no filtered wrapper layer to flash during the transition. */
html[data-theme="light"] .ipad-wrap,
html[data-theme="light"] .watch-wrap {
  filter: none;
}
html[data-theme="light"] .ipad-frame {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    inset 1px 0 rgba(255,255,255,0.06),
    inset -1px 0 rgba(255,255,255,0.06),
    0 40px 80px rgba(15,30,60,0.28),
    0 0 60px rgba(43,136,216,0.10);
}
html[data-theme="light"] .watch-frame {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    inset 1px 0 rgba(255,255,255,0.06),
    inset -1px 0 rgba(255,255,255,0.06),
    0 30px 50px rgba(15,30,60,0.25),
    0 0 40px rgba(43,136,216,0.10);
}

html[data-theme="light"] .aura-img { filter: drop-shadow(0 18px 26px rgba(15,30,60,0.22)) drop-shadow(0 0 26px rgba(43,136,216,0.14)); }
html[data-theme="light"] .aura-glow { background: radial-gradient(circle at 50% 55%, rgba(80,230,255,0.16) 0%, rgba(43,136,216,0.06) 46%, transparent 72%); }
html[data-theme="light"] .aura-pill {
  background: rgba(255,255,255,0.90);
  border-color: rgba(0,110,170,0.40);
  box-shadow: 0 12px 32px rgba(15,30,60,0.16), 0 0 24px rgba(43,136,216,0.10);
}
html[data-theme="light"] .aura-portrait-img { filter: drop-shadow(0 30px 50px rgba(15,30,60,0.24)) drop-shadow(0 0 40px rgba(43,136,216,0.12)); }
html[data-theme="light"] .aura-portrait-glow { background: radial-gradient(circle at 50% 50%, rgba(80,230,255,0.14) 0%, rgba(43,136,216,0.06) 46%, transparent 70%); }
html[data-theme="light"] .aura-trait { background: rgba(13,30,55,0.04); }
html[data-theme="light"] .aura-trait--blue { color: #1D6FB8; }
html[data-theme="light"] .aura-trait--purple { color: #6C4EC9; }
html[data-theme="light"] .how-aura { background: rgba(255,255,255,0.75); }
html[data-theme="light"] .how-aura-img { filter: drop-shadow(0 8px 14px rgba(15,30,60,0.20)); }
html[data-theme="light"] .cta-aura-img { filter: drop-shadow(0 18px 28px rgba(15,30,60,0.22)) drop-shadow(0 0 30px rgba(43,136,216,0.14)); }

html[data-theme="light"] .roadmap-filter__button {
  border-color: rgba(13,30,55,0.15);
  background: rgba(13,30,55,0.04);
}
html[data-theme="light"] .roadmap-filter__button:hover,
html[data-theme="light"] .roadmap-filter__button:focus-visible { border-color: rgba(0,110,170,0.40); }
html[data-theme="light"] .roadmap-filter__button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, #1D6FB8, #6C4EC9);
  border-color: transparent;
  box-shadow: 0 0 24px rgba(29,111,184,0.25);
}
html[data-theme="light"] .roadmap-shell {
  border-color: rgba(13,30,55,0.12);
  background: rgba(255,255,255,0.75);
}
html[data-theme="light"] .roadmap-axis,
html[data-theme="light"] .roadmap-category,
html[data-theme="light"] .roadmap-level,
html[data-theme="light"] .roadmap-cell {
  border-right-color: rgba(13,30,55,0.08);
  border-bottom-color: rgba(13,30,55,0.08);
}
html[data-theme="light"] .roadmap-axis,
html[data-theme="light"] .roadmap-level { background: rgba(13,30,55,0.03); }
html[data-theme="light"] .roadmap-cell { background: rgba(13,30,55,0.02); }
html[data-theme="light"] .roadmap-category {
  background: linear-gradient(180deg, var(--pillar-bg), rgba(13,30,55,0.02)), rgba(13,30,55,0.03);
}
html[data-theme="light"] .roadmap-pill { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
html[data-theme="light"] .roadmap-pill--featured::after { background: rgba(13,30,55,0.25); }
html[data-theme="light"] .roadmap-pill:focus-visible { box-shadow: 0 0 0 3px rgba(0,110,170,0.30); }

/* Brightness makes pale chips recede on light surfaces, so use a denser
   family tint and a small coloured lift for a clear pointer/focus state. */
html[data-theme="light"] a.hero-exam-tag:hover,
html[data-theme="light"] a.hero-exam-tag:focus-visible,
html[data-theme="light"] a.exam-tag:hover,
html[data-theme="light"] a.exam-tag:focus-visible,
html[data-theme="light"] a.exam-mini__tag:hover,
html[data-theme="light"] a.exam-mini__tag:focus-visible,
html[data-theme="light"] .roadmap-pill:hover,
html[data-theme="light"] .roadmap-pill:focus-visible {
  background: color-mix(in srgb, var(--group-color, var(--pillar-color)) 18%, #fff);
  border-color: var(--group-color, var(--pillar-color));
  filter: saturate(1.12);
  transform: translateY(-2px) scale(1.025);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 7px 16px color-mix(in srgb, var(--group-color, var(--pillar-color)) 20%, transparent);
}

html[data-theme="light"] .exam-mini__dot { background: rgba(13,30,55,0.22); }
html[data-theme="light"] .exam-mini__dot:hover { background: rgba(13,30,55,0.42); }

/* ── 4. Exam-page component overrides ── */
html[data-theme="light"] .site-nav__cta { background: rgba(0,110,170,0.07); border-color: rgba(0,110,170,0.40); }
html[data-theme="light"] .site-nav__cta:hover { background: rgba(0,110,170,0.12); }
html[data-theme="light"] .page-toc { background: rgba(245,247,250,0.85); }
html[data-theme="light"] .page-toc__link:hover { background: rgba(0,110,170,0.07); }
html[data-theme="light"] .page-toc__link[aria-current="true"] { background: rgba(0,110,170,0.09); }

html[data-theme="light"] .exam-format li,
html[data-theme="light"] .domain,
html[data-theme="light"] .study-plan > li,
html[data-theme="light"] .faq,
html[data-theme="light"] .qt,
html[data-theme="light"] .cert-path,
html[data-theme="light"] .related-card { background: rgba(13,30,55,0.03); }

html[data-theme="light"] .domain__weight { background: rgba(0,110,170,0.10); border-color: rgba(0,110,170,0.30); }
html[data-theme="light"] .qt__hint { background: rgba(0,110,170,0.08); border-color: rgba(0,110,170,0.25); }

/* Question-type visualizations mirror the app's light surfaces while
   retaining clear selected, drag, hotspot, and coaching states. */
html[data-theme="light"] .qt {
  background: rgba(255,255,255,0.58);
  border-color: rgba(13,30,55,0.12);
  box-shadow: 0 8px 24px rgba(15,30,60,0.07);
}
html[data-theme="light"] .qt__viz {
  background: linear-gradient(145deg, #FFFFFF 0%, #F1F6FB 100%);
  border-color: rgba(13,30,55,0.12);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 8px 20px rgba(15,30,60,0.08);
}
html[data-theme="light"] .qt__viz-options li,
html[data-theme="light"] .qt__viz-drag li,
html[data-theme="light"] .qt__viz-case-questions li {
  background: rgba(255,255,255,0.78);
  border-color: rgba(13,30,55,0.11);
  box-shadow: 0 1px 2px rgba(15,30,60,0.04);
}
html[data-theme="light"] .qt__viz-options li.is-selected {
  background: rgba(14,116,144,0.10);
  border-color: rgba(14,116,144,0.42);
  box-shadow: 0 0 0 1px rgba(14,116,144,0.05), 0 4px 12px rgba(14,116,144,0.08);
}
html[data-theme="light"] .is-selected .qt__viz-radio,
html[data-theme="light"] .is-selected .qt__viz-checkbox {
  box-shadow: 0 0 0 3px rgba(14,116,144,0.12);
}
html[data-theme="light"] .is-selected .qt__viz-radio::after { background: #FFFFFF; }
html[data-theme="light"] .is-selected .qt__viz-checkbox::after {
  border-right-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
html[data-theme="light"] .qt__viz-drag-num,
html[data-theme="light"] .qt__viz-case-num {
  background: rgba(14,116,144,0.12);
  color: #0E7490;
}
html[data-theme="light"] .qt__viz-hotspot {
  background: linear-gradient(145deg, #F8FBFE 0%, #E7EFF7 100%);
  border: 1px solid rgba(13,30,55,0.10);
}
html[data-theme="light"] .qt__viz-hotspot::before {
  background:
    linear-gradient(transparent 22%, rgba(13,30,55,0.06) 22%, rgba(13,30,55,0.06) 23%, transparent 23%),
    linear-gradient(transparent 44%, rgba(13,30,55,0.06) 44%, rgba(13,30,55,0.06) 45%, transparent 45%),
    linear-gradient(transparent 66%, rgba(13,30,55,0.06) 66%, rgba(13,30,55,0.06) 67%, transparent 67%),
    linear-gradient(transparent 88%, rgba(13,30,55,0.06) 88%, rgba(13,30,55,0.06) 89%, transparent 89%);
}
html[data-theme="light"] .qt__viz-hotspot-mock-row { background: rgba(13,30,55,0.12); }
html[data-theme="light"] .qt__viz-target {
  box-shadow: 0 0 0 5px rgba(14,116,144,0.10), 0 0 18px rgba(14,116,144,0.25);
}
html[data-theme="light"] .qt__viz-case-scenario {
  background: rgba(14,116,144,0.06);
  border-left-color: #0E7490;
}
html[data-theme="light"] .qt__viz-ai-wrong {
  background: rgba(208,48,48,0.07);
  border-color: rgba(208,48,48,0.22);
}
html[data-theme="light"] .qt__viz-ai-wrong-mark { color: #D03030; }
html[data-theme="light"] .qt__viz-ai-explain {
  background: linear-gradient(135deg, rgba(14,116,144,0.06), rgba(108,78,201,0.06));
  border-color: rgba(14,116,144,0.24);
}
html[data-theme="light"] .qt__viz-ai-explain-mark { color: #0E7490; }
html[data-theme="light"] .qt__viz-drag-handle,
html[data-theme="light"] .qt__viz-radio,
html[data-theme="light"] .qt__viz-checkbox {
  border-color: #718096;
  color: #718096;
}

html[data-theme="light"] .cert-path__chip { background: rgba(13,30,55,0.04); }
html[data-theme="light"] a.cert-path__chip:hover { background: rgba(0,110,170,0.07); border-color: rgba(0,110,170,0.35); }
html[data-theme="light"] .related-card:hover { background: rgba(0,110,170,0.05); border-color: rgba(0,110,170,0.30); }

/* ── 5. Theme toggle button (both themes — lives here as theme infra) ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.12));
  border-radius: 999px;
  color: var(--text-secondary, #8B95A5);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover {
  color: var(--text-primary, #F0F0F0);
  border-color: var(--border-accent, rgba(80,230,255,0.25));
  background: rgba(128,160,200,0.10);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--azure-cyan, #50E6FF);
  outline-offset: 2px;
}
.theme-toggle svg { width: 20px; height: 20px; }
/* Exam pages: header is flex space-between (brand | cta); pull the toggle
   right so it groups with the CTA. On the homepage the toggle sits inside
   .nav-links li, so this direct-child selector never matches there. */
.site-nav > .theme-toggle { margin-left: auto; margin-right: 12px; }
.theme-toggle__moon { display: none; }
html[data-theme="light"] .theme-toggle__sun { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: block; }

/* Cross-fade the complete rendered page so token, image, and surface changes
   move together. The class-based path covers browsers without View Transitions. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: theme-view-out; }
::view-transition-new(root) { animation-name: theme-view-in; }
@keyframes theme-view-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes theme-view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.theme-fade-ready body { transition: opacity 150ms ease; }
.theme-fade-out body { opacity: 0.72; }
.theme-fade-in body { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01ms; }
  .theme-fade-ready body { transition: none; }
}