/* catalog-light.css — the light theme for the catalogue and the three hub pages.
 *
 *   games.html · articulation.html · language.html · cognitive.html
 *
 * Written 5 Sep 2026, after the homepage was rebuilt light and left these four
 * on the old purple-blue (#3f4c85) with an orange wordmark. Walking from the
 * homepage into the catalogue was a jump between two different sites.
 *
 * ▶▶ THIS IS AN OVERRIDE SHEET, NOT A REWRITE. It is linked AFTER each page's
 * own <style>, so every existing selector, layout rule, animation and media
 * query is left exactly as it was and only the colours are restated. Nothing
 * here changes structure, and deleting this one file restores the old look.
 *
 * ▶ THE CARD BANNERS ARE DELIBERATELY UNTOUCHED. Each game's banner gradient is
 * an inline style on the element and it is that game's identity on the page —
 * the colour belongs to the game, not to the theme.
 *
 * ⚠ The filter chips keep their per-band hues (preschool amber, elementary blue,
 * middle pink, high school cyan, adult violet, free green). They were tuned to
 * sit on a dark chip; on white they need a DARKER ink and a PALE fill, or they
 * fail contrast. That is why each one is restated rather than blanket-reset.
 */

:root{
  --lt-bg:#DFE8F5; --lt-surface:#FFFFFF; --lt-tint:#EEF3FB;
  --lt-ink:#0E2440; --lt-ink2:#4A5B72; --lt-line:#DCE3ED;
  --lt-navy:#12365c; --lt-primary:#1B57C7; --lt-primary-hi:#14459F; --lt-primary-pale:#E7EEFC;
  --lt-shadow:0 1px 2px rgba(14,36,64,.05), 0 8px 22px rgba(14,36,64,.07);
}

/* ── page ─────────────────────────────────────────────────────────────────── */
body{
  background:var(--lt-bg) !important;
  color:var(--lt-ink) !important;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif !important;
}

/* ── header ───────────────────────────────────────────────────────────────── */
.header{
  background:var(--lt-surface) !important;
  border-bottom:1px solid var(--lt-line) !important;
}
.logo{color:var(--lt-navy) !important;}
.tagline{color:var(--lt-ink2) !important;}
.header-count{color:var(--lt-ink2) !important;}
.header-signin{
  color:var(--lt-navy) !important;
  border:2px solid var(--lt-line) !important;
  min-height:44px; display:inline-flex; align-items:center;
}
.header-signin:hover{background:var(--lt-tint) !important;}
.header-cta{
  background:var(--lt-primary) !important; color:#fff !important;
  min-height:44px; display:inline-flex; align-items:center;
}
.header-cta:hover{background:var(--lt-primary-hi) !important;}

/* ── section furniture ────────────────────────────────────────────────────── */
.section-label{color:var(--lt-ink2) !important;}
.game-count{color:var(--lt-ink2) !important;}
.game-count a{color:var(--lt-primary) !important;}
.sec-head{color:var(--lt-ink) !important;}
.sec-blurb{color:var(--lt-ink2) !important;}
.sec-count{color:var(--lt-ink2) !important;}
.no-results{color:var(--lt-ink2) !important;}

/* ── cards ────────────────────────────────────────────────────────────────── */
.card{
  background:var(--lt-surface) !important;
  border:1px solid var(--lt-line) !important;
  box-shadow:var(--lt-shadow);
}
.card:hover{
  border-color:#B9C7DA !important;
  box-shadow:0 2px 4px rgba(14,36,64,.06), 0 14px 30px rgba(14,36,64,.10);
}
.card-world{color:var(--lt-primary-hi) !important;}
.card-title{color:var(--lt-ink) !important;}
.card-target{color:var(--lt-ink2) !important;}

/* Card tags were pale ink on a dark fill. Inverted to dark ink on a pale fill,
   keeping each tag its own hue so the categories stay distinguishable. */
.card-tag{border:1px solid transparent;}
.tag-adventure{background:#E4F5EF !important; color:#0B5344 !important; border-color:#BEE3D5;}
.tag-speed    {background:#ECEAFB !important; color:#3A2E8F !important; border-color:#CFC9F2;}
.tag-boss     {background:#FBE9E9 !important; color:#8A2020 !important; border-color:#F0C9C9;}
.tag-show     {background:#FBF0DC !important; color:#7A4A05 !important; border-color:#EDD9B0;}
.tag-early    {background:#FBE7EE !important; color:#8A2148 !important; border-color:#F0C7D6;}
.tag-language {background:#E7EEFC !important; color:#14459F !important; border-color:#C9D6FF;}
.tag-artic    {background:#E7EEFC !important; color:#14459F !important; border-color:#C9D6FF;}

/* ── search ───────────────────────────────────────────────────────────────── */
#gameSearch{
  background:var(--lt-surface) !important;
  border:2px solid var(--lt-line) !important;
  color:var(--lt-ink) !important;
  min-height:48px;
}
#gameSearch::placeholder{color:#67788F !important;}
#gameSearch:focus{outline:3px solid var(--lt-primary); outline-offset:2px; border-color:var(--lt-primary) !important;}

/* ── filter chips ─────────────────────────────────────────────────────────── */
.fb{
  background:var(--lt-surface) !important;
  color:var(--lt-navy) !important;
  border:2px solid var(--lt-line) !important;
  min-height:44px; display:inline-flex; align-items:center;
}
.fb:hover{background:var(--lt-tint) !important;}
.fb.active{background:var(--lt-primary) !important; color:#fff !important; border-color:var(--lt-primary) !important;}

/* per-band hues: dark enough to read on white, pale fill when selected */
.fb.fb-pre  {border-color:#E2B268 !important; color:#7A4A05 !important;}
.fb.fb-el,
.fb.fb-lel  {border-color:#9DBBF2 !important; color:#14459F !important;}
.fb.fb-uel  {border-color:#A9AEF0 !important; color:#3A3E9C !important;}
.fb.fb-ms   {border-color:#F0A6C4 !important; color:#8A2148 !important;}
.fb.fb-hs   {border-color:#7FC9D8 !important; color:#0B5566 !important;}
.fb.fb-adult{border-color:#BCA6F5 !important; color:#4A2C9B !important;}
.fb.fb-free {background:#E4F5EF !important; border-color:#8ECBB6 !important; color:#0B5344 !important;}

.fb-pre.active  {background:#8A5405 !important; color:#fff !important; border-color:#8A5405 !important;}
.fb-el.active,
.fb-lel.active  {background:#14459F !important; color:#fff !important; border-color:#14459F !important;}
.fb-uel.active  {background:#3A3E9C !important; color:#fff !important; border-color:#3A3E9C !important;}
.fb-ms.active   {background:#8A2148 !important; color:#fff !important; border-color:#8A2148 !important;}
.fb-hs.active   {background:#0B5566 !important; color:#fff !important; border-color:#0B5566 !important;}
.fb-adult.active{background:#4A2C9B !important; color:#fff !important; border-color:#4A2C9B !important;}
.fb-free.active {background:#0E7C63 !important; color:#fff !important; border-color:#0E7C63 !important;}

/* ── links ────────────────────────────────────────────────────────────────── */
a{color:var(--lt-primary);}

/* ⚠⚠ `hidden` LOSES TO A CLASS THAT SETS display. `.af-in{display:inline-flex}`
   outranks the browser's own `[hidden]{display:none}`, so the "Showing:" pill
   sat there with an empty label on the unfiltered page. My bug, from building
   the catalogue page — it only ever showed in the filtered state I screenshotted. */
[hidden]{display:none !important;}

/* ── the catalogue page's own heading block ───────────────────────────────── */
.cat-head h1{color:var(--lt-ink) !important;}
.cat-head p{color:var(--lt-ink2) !important;}
.cat-count{color:var(--lt-primary-hi) !important;}
.cat-back{color:var(--lt-ink2) !important;}
.cat-back:hover{color:var(--lt-navy) !important;}
.af-in{
  background:var(--lt-surface) !important;
  border:2px solid var(--lt-line) !important;
  color:var(--lt-navy) !important;
}
.af-in button{
  background:var(--lt-tint) !important;
  border:1px solid var(--lt-line) !important;
  color:var(--lt-navy) !important;
  min-height:44px;
}
.af-in button:hover{background:var(--lt-primary-pale) !important;}

/* ── focus, everywhere ────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--lt-primary); outline-offset:3px; border-radius:10px;
}

/* ══ HUB PAGES ONLY — the extra furniture the catalogue does not have ═══════
   articulation.html · language.html · cognitive.html carry a hero, a sticky
   filter band, nav pills and per-domain card TINTS that the catalogue has no
   equivalent of. All three are byte-for-byte the same rules, so they are
   relit once here. */

.hero h1{color:var(--lt-ink) !important;}
.hero p{color:var(--lt-ink2) !important;}

/* the sticky band under the hero was a near-black strip across a light page */
.filter-bar{background:var(--lt-surface) !important; border-bottom:1px solid var(--lt-line);}

/* ⚠ `.fb.active,.fb:hover` sets the ORANGE together — so hovering an unselected
   chip made it look selected. Split them: hover tints, active fills. */
.fb:hover{background:var(--lt-tint) !important; color:var(--lt-navy) !important;
  border-color:#B9C7DA !important;}
.fb.active,
.fb.active:hover{background:var(--lt-primary) !important; color:#fff !important;
  border-color:var(--lt-primary) !important;}

/* the three cross-links between hubs */
.pill{background:var(--lt-surface) !important; border:2px solid var(--lt-line) !important;
  color:var(--lt-navy) !important; min-height:44px; display:inline-flex; align-items:center;}
.pill:hover{background:var(--lt-tint) !important;}

/* ▶ PER-DOMAIN CARD TINTS ARE KEPT, JUST INVERTED. On the hubs a card is tinted
   by what it is — language purple, cognitive teal, articulation amber — and that
   is information, not decoration. Pale fill, coloured edge, dark ink. */
.card[data-type~="pragmatics"],
.card[data-type~="language"]{background:#F4F1FE !important; border-color:#C9BCF6 !important;}
.card[data-type~="pragmatics"] .card-world,
.card[data-type~="language"] .card-world{color:#4A2C9B !important;}

.card[data-type~="cognitive"]{background:#EAF7F4 !important; border-color:#9AD6C9 !important;}
.card[data-type~="cognitive"] .card-world{color:#0B5344 !important;}

.card[data-type~="artic"]{background:#FDF3EA !important; border-color:#EDC3A0 !important;}
.card[data-type~="artic"] .card-world{color:#8A4A16 !important;}

/* the corner ribbons stay strong — they are meant to be seen at a glance */
.card[data-type~="early"]::before{background:#8A5405 !important;}
.card[data-type~="adult"]::before{background:#4A2C9B !important;}

/* the hub header's "All N activities" link */
.header a{color:var(--lt-primary) !important;}
.header .header-cta{color:#fff !important;}

/* ⚠ THE HUB HERO IS `.seohero`, NOT `.hero`; ITS SEARCH IS `#hubSearch`, NOT
   `#gameSearch`; AND ITS CROSS-LINKS ARE `.catnav a`, NOT `.pill`. Four names I
   assumed matched the catalogue and did not — the page came back with an
   invisible headline, a dark search box and a dark nav strip on a white page.
   ▶ Read the page's own selectors before writing an override for it. */
.seohero h1{color:var(--lt-ink) !important;}
.seohero p, .seohero p.lead{color:var(--lt-ink2) !important;}

#hubSearch{
  background:var(--lt-surface) !important;
  border:2px solid var(--lt-line) !important;
  color:var(--lt-ink) !important;
  min-height:48px;
}
#hubSearch::placeholder{color:#67788F !important;}
#hubSearch:focus{outline:3px solid var(--lt-primary); outline-offset:2px;
  border-color:var(--lt-primary) !important;}

.catnav a{
  background:var(--lt-surface) !important;
  border:2px solid var(--lt-line) !important;
  color:var(--lt-navy) !important;
  min-height:44px; display:inline-flex; align-items:center;
}
.catnav a:hover{background:var(--lt-tint) !important; color:var(--lt-navy) !important;
  border-color:#B9C7DA !important;}
.catnav a.on, .catnav a.on:hover{
  background:var(--lt-primary) !important; color:#fff !important;
  border-color:var(--lt-primary) !important;}

/* the little count beside each section heading — dark pill, so it keeps a fill */
.sec-count{background:var(--lt-primary-pale) !important; color:var(--lt-primary-hi) !important;}

/* ── the SEO prose block, breadcrumb and site footer on the hub pages ────────
   Everything below the game grids: the written sections search engines read,
   the breadcrumb above the hero and the footer links. All were light-on-dark. */
.breadcrumb, .breadcrumb a{color:var(--lt-ink2) !important;}
.breadcrumb a{text-decoration:underline;}
.breadcrumb a:hover{color:var(--lt-navy) !important;}

.prose h2{color:var(--lt-ink) !important;}
.prose h3{color:var(--lt-navy) !important;}
.prose p, .prose li{color:var(--lt-ink2) !important;}
.prose a{color:var(--lt-primary) !important;}

.sitefoot{background:var(--lt-surface) !important; border-top:1px solid var(--lt-line) !important;}
.sitefoot, .sitefoot p, .sitefoot span{color:var(--lt-ink2) !important;}
.sitefoot a{color:var(--lt-primary) !important; min-height:44px;
  display:inline-flex; align-items:center;}