/* ===========================================================
   GEORGE'S WEBSITE: site shell
   Design tokens, skip link, header/nav, footer and focus styles.
   Loaded by EVERY page, including the quiz games, so the header and
   footer look identical everywhere. Page layouts, cards and sections
   live in styles.css (loaded after this file on the main pages only;
   the quiz games keep their own game styles).
   =========================================================== */
/* 2. Design tokens --------------------------------------------------
   Same tokens published in the Garibaldi Grid style guide —
   keep this block in sync if the palette ever changes. */
:root{
  --ink:#121014;
  --surface:#1c1820;
  --surface-raised:#241f29;
  --line: rgba(241,237,233,0.10);
  --line-strong: rgba(241,237,233,0.18);
  --chalk:#f1ede9;
  --chalk-dim:#b9b2ac;
  --chalk-faint:#8a857e; /* was #7d7770 — 4.27:1 on ink, fails AA for the footer/caption text it's used on. This passes at 5.17:1. */

  --garibaldi:#e1102c;
  --garibaldi-ink:#3a0a12;
  --volt:#9d5cff;
  --volt-ink:#241a3a;
  --gold:#f5b942;
  --gold-ink:#3a2a0c;

  /* Accessibility note: the raw brand colours above are tuned for large
     surfaces, glows and borders, where WCAG contrast rules don't apply
     the same way. Used as small TEXT on a dark background, garibaldi and
     volt both fall short of the 4.5:1 AA minimum (measured ~3.5-4.2:1).
     These are lightened, text-safe variants for that specific job — same
     hue, still clearly "the same colour", but legible.
     Gold and chalk-dim/faint are covered separately below. */
  --garibaldi-text:#e84c61;   /* was #e1102c as text → 3.5-3.9:1. Now 4.6-5.1:1 */
  --volt-text:#a264ff;        /* was #9d5cff as text → 4.2-4.9:1. Now 4.5-5.2:1 */
  /* gold (#f5b942) already passes AA as text (7.9-10.7:1) — no variant needed */

  /* A solid button fill needs to hold contrast against chalk (button
     label) text. #e1102c + chalk = 4.18:1 (fails). This fill is ~10%
     darker — 5.0:1 — and reads as the same red at button size. */
  --garibaldi-solid:#ca0e28;

  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --shadow-card: 0 10px 30px rgba(0,0,0,0.45);
  --glow-garibaldi: 0 0 0 1px rgba(225,16,44,0.4), 0 0 28px rgba(225,16,44,0.35);
  --glow-volt: 0 0 0 1px rgba(157,92,255,0.4), 0 0 28px rgba(157,92,255,0.35);
  --glow-gold: 0 0 0 1px rgba(245,185,66,0.4), 0 0 28px rgba(245,185,66,0.35);

  --font-display:'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body:'Manrope', -apple-system, 'Segoe UI', sans-serif;

  --accent: var(--garibaldi);
  --accent-text: var(--garibaldi-text);
  --accent-ink: var(--garibaldi-ink);
  --glow-accent: var(--glow-garibaldi);
  /* Text colour to put ON a filled --btn-bg swatch. Dark ink reads on the
     light accents (gold); light chalk reads on the dark/saturated ones
     (garibaldi's solid fill, volt). Getting this backwards is how you end
     up with a school-zone button at 1.5:1 contrast — see the audit note
     in the button rules below. */
  --btn-bg: var(--garibaldi-solid);
  --on-accent: var(--chalk);
}

/* Per-page accent: the current section's colour drives the nav
   underline, hero glow and primary button on that page only. */
body[data-page="games"]{
  --accent: var(--volt); --accent-text: var(--volt-text); --accent-ink: var(--volt-ink); --glow-accent: var(--glow-volt);
  --btn-bg: var(--volt); --on-accent: var(--ink); /* chalk-on-volt was 3.33:1 — fails AA. Ink-on-volt is 4.87:1. */
}
body[data-page="school"]{
  --accent: var(--gold); --accent-text: var(--gold); --accent-ink: var(--gold-ink); --glow-accent: var(--glow-gold);
  --btn-bg: var(--gold); --on-accent: var(--ink); /* chalk-on-gold was 1.52:1 — badly fails AA. Ink-on-gold is 10.7:1. */
}
body[data-page="quiz-zone"], body[data-page="quiz-game"]{
  --accent: var(--volt); --accent-text: var(--volt-text); --accent-ink: var(--volt-ink); --glow-accent: var(--glow-volt);
  --btn-bg: var(--volt); --on-accent: var(--ink);
}
.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--garibaldi); color: var(--chalk);
  padding: 12px 20px; z-index: 1000; border-radius: 0 0 var(--r-sm) 0; font-family: var(--font-display); font-weight: 600;
}
.skip-link:focus { left: 0; }
/* 5. Header & navigation ---------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,16,20,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-strong);
}
.nav-bar{
  max-width: 1080px; margin: 0 auto; padding: var(--s3) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.logo{ font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--chalk); }
.logo span { color: var(--garibaldi); }
.nav-links{ display: flex; gap: var(--s5); }
.nav-links a{
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--chalk-dim); padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--chalk); }
.nav-links a[aria-current="page"] { color: var(--accent-text); border-color: var(--accent); }

.nav-toggle{
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--chalk); }

.mobile-nav{
  display: none; flex-direction: column; gap: var(--s2); padding: var(--s4);
  border-top: 1px solid var(--line-strong); background: var(--surface);
}
.mobile-nav a{
  font-family: var(--font-display); font-weight: 600; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm); color: var(--chalk-dim); min-height: 44px;
}
.mobile-nav a[aria-current="page"] { background: var(--accent-ink); color: var(--accent-text); }
.mobile-nav svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 760px){
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  body.nav-open .mobile-nav { display: flex; }
}
/* 10. Footer --------------------------------------------------------------- */
.site-footer{
  border-top: 1px solid var(--line); padding-block: var(--s6);
  color: var(--chalk-faint); font-size: 0.85rem;
}
.footer-row{
  max-width: 1080px; margin: 0 auto; padding-inline: var(--s4);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.footer-row a { color: var(--chalk-dim); }
.footer-row a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Shell pieces also need a couple of basics on pages that don't load
   styles.css (the quiz games). */
.site-header, .site-footer, .skip-link { font-family: var(--font-body); }
.site-header a, .site-footer a { text-decoration: none; }
.nav-links, .mobile-nav { list-style: none; margin: 0; padding: 0; }
.site-header svg { display: block; }
.footer-row span { color: var(--chalk-faint); }


[hidden] { display: none !important; }