/* =====================================================================
   alevel-light.css — A-LEVEL SITE = IB LOOK & FEEL (single source of truth)
   Loaded LAST on every A-Level page so it overrides each page's bespoke
   dark/editorial styling. Goal: alevelmathrevision.com must be visually
   indistinguishable from ibmathrevision.com — same system font, same navy
   (#062559) + blue (#0d3d8f) + cyan (#5ec8ff) palette on white/#f4f7fc,
   same header chrome, same buttons, same cards, same footer. The ONLY
   intended differences are the wordmark/domain and the question content.

   Strategy:
     1) Remap BOTH A-Level palette systems' CSS variables to the IB palette
        (so vars flowing through inline styles + the nav-dropdown JS come out
        on-brand automatically).
     2) Force the IB system font stack everywhere (kills IBM Plex Serif/Mono),
        excluding MathJax so equations still render.
     3) Restyle the shared components (topnav, spec switcher, launch banner,
        hero panel, buttons, unit cards, doors, footer) to the IB chrome.
   ===================================================================== */

/* ---------- 1. Palette variables (both historical systems) ---------- */
html:root {
  /* System A (index / unit / my-homework / teacher-dashboard …) */
  --bg-0: #ffffff !important;
  --bg-1: #ffffff !important;
  --bg-2: #f4f7fc !important;
  --bg-3: #eef2f9 !important;
  --line: #d6dfec !important;
  --ink-0: #151b2b !important;
  --ink-1: #334155 !important;
  --ink-2: #64748b !important;
  --accent-amber: #0d3d8f !important;   /* was gold → IB primary blue */
  --accent-red:   #0d3d8f !important;   /* was coral slash → IB blue  */
  --accent-cyan:  #5ec8ff !important;
  --accent-lime:  #10b981 !important;
  /* Bug fix (Feb 2026): several buttons hardcode a near-black text colour
     (#05070d) for use on top of --accent-amber, correct when amber meant
     gold (dark theme default) but unreadable now that amber = navy blue
     here. --on-amber lets those buttons stay readable in both themes —
     white text on the navy this file forces, dark text on the real gold
     wherever light.css isn't loaded. */
  --on-amber: #ffffff !important;
  --shadow-lift:  0 12px 40px rgba(6,37,89,0.10), 0 2px 6px rgba(6,37,89,0.06) !important;

  /* System B (courses / marketing / utility pages) */
  --brand:        #062559 !important;
  --brand-strong: #0d3d8f !important;
  --brand-deep:   #0284c7 !important;
  --card:         #ffffff !important;
  --card-2:       #f8fafc !important;
  --bg:           #f4f7fc !important;
  --ink:          #151b2b !important;
  --ink-3:        #64748b !important;
  --ok:           #10b981 !important;
  --warn:         #d97706 !important;
  --err:          #ef4444 !important;

  color-scheme: light;
}

/* ---------- 2. Font — match IB (system stack), skip MathJax ---------- */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, header, footer, nav, section, main, article, aside,
ul, ol, li, dl, dt, dd,
button, input, textarea, select, option, label,
strong, em, small, b, i,
table, td, th, figure, figcaption, blockquote, code, pre, summary, details {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif !important;
}
/* Keep MathJax typeset math in its own math fonts. */
mjx-container, mjx-container *, .MathJax, .MathJax * { font-family: revert !important; }
/* Monospace only where genuinely code/pre. */
code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }

body { background: #ffffff !important; color: #151b2b !important; line-height: 1.55; }
h1, h2, h3, h4 { color: #062559 !important; font-weight: 700 !important; letter-spacing: -0.4px !important; }
a { color: #0d3d8f; }
::selection { background: #cfe8ff; color: #062559; }

/* ---------- 3. Brand logo (neutralise old gradient text badge) ---------- */
.brand-mark {
  background: none !important;
  background-image: none !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  display: block !important;
  color: transparent !important;
}

/* ===================== 4. Header / top nav (IB chrome) ===================== */
header.topnav, .topnav {
  background: #ffffff !important;
  border-bottom: 1px solid #d6dfec !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  padding: 14px 28px !important;
}
.topnav .brand, header.topnav .brand,
.topnav .brand span, .topnav .brand-txt { color: #062559 !important; font-weight: 700 !important; }
.brand-txt-sub { color: #64748b !important; font-weight: 500 !important; }

.nav-links a, header nav a.nav-link, header.topnav nav a {
  color: #062559 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background-color .14s ease, color .14s ease !important;
}
.nav-links a:hover, header.topnav nav a:hover { background: #e6ecf7 !important; color: #062559 !important; }
.nav-links a[data-testid="nav-igcse"] { color: #0d3d8f !important; }

/* nav-dropdown.js menus (they read --bg-1 / --ink-1 / --accent-cyan) */
.aln-dd-btn { color: #062559 !important; font-weight: 600 !important; font-size: 0.9rem !important; }
.aln-dd-btn:hover, .aln-dropdown.aln-open .aln-dd-btn { color: #0d3d8f !important; }
.aln-caret { color: inherit !important; }
.aln-dd-menu {
  background: #ffffff !important;
  border: 1px solid #d6dfec !important;
  box-shadow: 0 8px 24px rgba(6,37,89,0.12) !important;
}
.aln-dd-menu a { color: #062559 !important; }
.aln-dd-menu a:hover { background: #f0f4fb !important; color: #0d3d8f !important; }

/* ===================== 5. Spec switcher (navy bar, cyan active) ===================== */
.board-switcher, [data-testid="board-switcher"] {
  background: #062559 !important;
  border-bottom: 1px solid #0d3d8f !important;
}
[data-testid="board-switcher"] a { color: #a9c2e8 !important; border-bottom: 2px solid transparent !important; }
[data-testid="board-switcher"] a:hover { color: #ffffff !important; }
/* The active tab always carries cyan (#5cd6ff) in its inline style. */
[data-testid="board-switcher"] a[style*="5cd6ff"] {
  color: #ffffff !important;
  border-bottom: 2px solid #5ec8ff !important;
}

/* ===================== 6. Launch / bridging banner (navy) ===================== */
.launch-banner { background: #062559 !important; color: #ffffff !important; }
.launch-banner a { color: #ffffff !important; }
.launch-banner .pulse { background: #5ec8ff !important; }

/* ===================== 7. Buttons ===================== */
.btn-primary {
  background: #0d3d8f !important;
  color: #ffffff !important;
  border: 1px solid #0d3d8f !important;
}
.btn-primary:hover { background: #062559 !important; box-shadow: 0 8px 24px rgba(13,61,143,0.28) !important; }
.btn-ghost {
  background: #ffffff !important;
  color: #0d3d8f !important;
  border: 1px solid #cbd5e1 !important;
}
.btn-ghost:hover { border-color: #0d3d8f !important; color: #062559 !important; box-shadow: none !important; }
.btn-formula {
  background: #eafaf1 !important;
  color: #186a3b !important;
  border: 1px solid #10b981 !important;
}
.btn-formula:hover { box-shadow: 0 8px 24px rgba(16,185,129,0.18) !important; }

/* ===================== 8. Hero + eyebrow + status panel ===================== */
.hero-eyebrow {
  background: #e6ecf7 !important;
  border: 1px solid #0d3d8f !important;
  color: #0d3d8f !important;
}
.hero h1 { color: #062559 !important; }
.hero h1 .accent { color: #0d3d8f !important; font-style: normal !important; }
.hero-lede { color: #334155 !important; }

.hero-panel {
  background: #ffffff !important;
  border: 1px solid #e4ebf5 !important;
  box-shadow: 0 12px 40px rgba(6,37,89,0.08) !important;
}
.hero-panel .label { color: #64748b !important; }
.hero-panel .value { color: #062559 !important; }
.hero-panel .value.big { color: #062559 !important; }
.hero-panel .divider { background: #e4ebf5 !important; }
.hero-panel .spec-row { color: #334155 !important; }
.hero-panel .spec-row .k { color: #64748b !important; }
.hero-panel .spec-row .v { color: #062559 !important; }

/* ===================== 9. Section headings ===================== */
.section-heading h2 { color: #062559 !important; }
.section-heading .caption { color: #64748b !important; }

/* ===================== 10. Unit / content cards ===================== */
.unit-card { background: #ffffff !important; border: 1px solid #e4ebf5 !important; }
.unit-card:hover { border-color: #5ec8ff !important; box-shadow: 0 12px 40px rgba(6,37,89,0.10) !important; }
.unit-card h3 { color: #062559 !important; }
.unit-card .u-sub, .unit-card::after { color: #64748b !important; }
.unit-card ul li { color: #334155 !important; }
.unit-card ul li::before { color: #0d3d8f !important; }
.unit-card .u-cta { color: #64748b !important; }
.unit-card:hover .u-cta { color: #0d3d8f !important; }
.unit-card .u-badge { background: #e6ecf7 !important; border: 1px solid #cbd5e1 !important; color: #0d3d8f !important; }
.unit-card.stats .u-badge { background: #e6f7ff !important; border-color: #5ec8ff !important; color: #0284c7 !important; }
.unit-card.pure .u-badge, .unit-card.mech .u-badge { background: #e6ecf7 !important; border-color: #cbd5e1 !important; color: #0d3d8f !important; }

/* ===================== 11. Doors (persona router) ===================== */
.door-tile > div { background: #ffffff !important; border: 1px solid #e4ebf5 !important; }
.door-tile:hover > div { box-shadow: 0 18px 40px rgba(6,37,89,0.14) !important; border-color: #5ec8ff !important; }
.door-tile h3 { color: #062559 !important; }
.door-tile p { color: #334155 !important; }

/* ===================== 12. Formula strip ===================== */
.formula-strip .inner {
  background: #f4f7fc !important;
  border: 1px solid #e4ebf5 !important;
  border-left: 4px solid #10b981 !important;
}
.formula-strip .text h3 { color: #062559 !important; }
.formula-strip .text p { color: #334155 !important; }
.formula-strip .text .tag { color: #186a3b !important; }

/* ===================== 13. Newsletter subscribe button ===================== */
[data-testid="nl-submit-alevel"] { background: #0d3d8f !important; color: #ffffff !important; }

/* ===================== 14. Footer (IB light) ===================== */
footer[data-testid="ial-footer"], footer.site-footer, body > footer {
  background: #f8fafc !important;
  border-top: 1px solid #d6dfec !important;
  color: #475569 !important;
}
footer[data-testid="ial-footer"] a, footer.site-footer a, body > footer a { color: #0d3d8f !important; }
footer[data-testid="ial-footer"] h3, footer[data-testid="ial-footer"] h4,
footer.site-footer h3, footer.site-footer h4,
body > footer h3, body > footer h4 { color: #062559 !important; }