/* ==========================================================================
   ABCD for COPC — abcd.informatics.org.za
   Part of the Community Informatics family. The palette, the hard offset
   shadow, the monospace labelling and the hairline borders are the shared CI
   design system (see CI Web Theme / THEME.md); this file carries them across
   four themes for a content site.

   The four themes cycle from the shared header:
       dark  ->  fabulous  ->  light  ->  fabulous light  ->  dark
   Dark is the default. The celebratory theme is called "Fabulous" in the
   interface; the internal identifier stays `pride`.
   ========================================================================== */

/* ---- Dark, the default ---------------------------------------------------- */
:root{
  color-scheme: dark;
  --bg:#0f172a; --bg-2:#0b1120; --surface:#131e36; --surface-2:#172443;
  --hairline:#1e293b; --rule:#334155;
  --emerald:#10b981; --cyan:#06b6d4;
  --ruby:#fb7185; --burnt:#fb923c; --gold:#f59e0b; --sapphire:#60a5fa; --violet:#a78bfa;
  --heading:#ffffff; --body:#e2e8f0; --lead:#cbd5e1; --secondary:#94a3b8; --muted:#64748b;
  --onaccent:#0f172a; --link:#22d3ee; --focus:#06b6d4;
  --accent:var(--emerald); --accent-2:var(--cyan);
  /* the light mat every illustration sits on, matching the warm ground the
     illustrations were drawn on, so a light-ground picture reads as a framed
     picture in every theme rather than a bright rectangle in the dark ones */
  --plate:#f7f3ea; --plate-edge:rgba(15,23,42,.14);
  --shadow:6px 6px 0 0 var(--cyan);
  --callout-bg:#16223f;
}

:root[data-theme="dark"]{ color-scheme: dark; }

/* ---- Light ---------------------------------------------------------------- */
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f4f7fb; --bg-2:#eaf0f8; --surface:#ffffff; --surface-2:#f8fafc;
  --hairline:#e2e8f0; --rule:#cbd5e1;
  --emerald:#0d9488; --cyan:#0891b2;
  --ruby:#e11d48; --burnt:#ea580c; --gold:#b45309; --sapphire:#2563eb; --violet:#7c3aed;
  --heading:#0f172a; --body:#334155; --lead:#475569; --secondary:#64748b; --muted:#94a3b8;
  --onaccent:#ffffff; --link:#0e7490; --focus:#0891b2;
  --accent:var(--emerald); --accent-2:var(--cyan);
  --plate:#ffffff; --plate-edge:rgba(15,23,42,.10);
  --shadow:6px 6px 0 0 var(--cyan);
  --callout-bg:#f1f6fb;
}

/* ---- Fabulous (dark base) ------------------------------------------------- */
:root[data-theme="pride"]{
  color-scheme: dark;
  --bg:#120e26; --bg-2:#0d0a1c; --surface:#1a1436; --surface-2:#211a44;
  --hairline:#2a2145; --rule:#3a3057;
  --emerald:#3fd9b8; --cyan:#5eb0ff;
  --ruby:#ff8ecb; --burnt:#ff9f45; --gold:#ffd34d; --sapphire:#5eb0ff; --violet:#c48cff;
  --heading:#ffffff; --body:#ded0ec; --lead:#cbbde0; --secondary:#a99bc0; --muted:#8a7da6;
  --onaccent:#120e26; --link:#f0abfc; --focus:#ff8ecb;
  --accent:var(--violet); --accent-2:var(--ruby);
  --plate:#f7f3ea; --plate-edge:rgba(18,14,38,.16);
  --shadow:6px 6px 0 0 var(--ruby);
  --callout-bg:#201a40;
}

/* ---- Fabulous, light ------------------------------------------------------ */
:root[data-theme="pride-light"]{
  color-scheme: light;
  --bg:#fff2f8; --bg-2:#ffe7f3; --surface:#fffdfe; --surface-2:#fdf4fa;
  --hairline:#f4d3e6; --rule:#e9a8cd;
  --emerald:#00806a; --cyan:#0b57d0;
  --ruby:#c2185b; --burnt:#d94f00; --gold:#a86400; --sapphire:#0b57d0; --violet:#7b1fa2;
  --heading:#2a0f2e; --body:#5b275c; --lead:#6b356c; --secondary:#8a5a83; --muted:#a678a0;
  --onaccent:#ffffff; --link:#a21caf; --focus:#7b1fa2;
  --accent:var(--violet); --accent-2:var(--ruby);
  --plate:#ffffff; --plate-edge:rgba(42,15,46,.10);
  --shadow:6px 6px 0 0 var(--ruby);
  --callout-bg:#fff6fb;
}

/* ==========================================================================
   Base
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
  font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
  color:var(--heading); letter-spacing:-.02em; line-height:1.15; font-weight:800;
}
h1{ font-size:clamp(30px,5vw,46px); }
h2{ font-size:clamp(24px,3.4vw,32px); font-weight:800; }
h3{ font-size:clamp(19px,2.4vw,22px); font-weight:700; }
h4{ font-size:16px; font-weight:700; }
p{ margin:0 0 1.1em; }
a{ color:var(--link); text-underline-offset:.16em; text-decoration-thickness:1px; }
a:hover{ text-decoration:underline; }
strong{ color:var(--heading); font-weight:700; }
img{ max-width:100%; height:auto; display:block; }
hr{ border:0; border-top:1px solid var(--hairline); margin:2.5rem 0; }
::selection{ background:var(--accent); color:var(--onaccent); }

:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }

.wrap{ max-width:72rem; margin:0 auto; padding:0 24px; }
@media (min-width:768px){ .wrap{ padding:0 40px; } }
.prose{ max-width:44rem; }
.prose.wide{ max-width:52rem; }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; z-index:200;
  background:var(--accent); color:var(--onaccent); padding:10px 16px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; }
.skip:focus{ left:12px; top:12px; }

/* ==========================================================================
   Shared header (ci-nav.js) — re-pointed at the host tokens
   ========================================================================== */
.ci-nav{
  --ci-nav-a:var(--accent); --ci-nav-b:var(--accent-2);
  --ci-nav-n1:var(--ruby); --ci-nav-n2:var(--gold); --ci-nav-n3:var(--sapphire);
  --ci-nav-bg:var(--surface); --ci-nav-line:var(--hairline);
  --ci-nav-head:var(--heading); --ci-nav-dim:var(--secondary);
  --ci-nav-on-accent:var(--onaccent);
  --ci-nav-mark-bg:var(--bg); --ci-nav-mark-line:var(--rule);
}
@media print{ .ci-nav,.subnav,.to-top{ display:none; } }

/* ==========================================================================
   ABCD sub-navigation — the site's own sections, under the family header
   ========================================================================== */
.subnav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.subnav-in{
  max-width:72rem; margin:0 auto; display:flex; align-items:center; gap:2px;
  padding:6px 12px; overflow-x:auto; scrollbar-width:none;
}
.subnav-in::-webkit-scrollbar{ display:none; }
@media (min-width:768px){ .subnav-in{ padding:6px 34px; } }
.subnav a{
  flex:0 0 auto; color:var(--secondary); text-decoration:none;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:12px; letter-spacing:.02em; padding:10px 14px; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.subnav a:hover{ color:var(--accent); }
.subnav a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }

/* ==========================================================================
   Kicker, tags, notes — the monospace labelling
   ========================================================================== */
.kicker{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  color:var(--accent); margin:0 0 .8rem;
}
.tags{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.08em; color:var(--accent); text-transform:uppercase; }
.tags .sep{ color:var(--muted); margin:0 .5rem; }
.note{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
  line-height:1.7; color:var(--muted); }

/* ==========================================================================
   Sections
   ========================================================================== */
section{ padding:64px 0; }
section.tight{ padding:40px 0; }
.band{ background:var(--bg-2); border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline); }
.sec-head{ max-width:44rem; margin:0 0 2rem; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head p.stand{ color:var(--lead); font-size:1.06rem; margin-top:.6rem; }

/* ==========================================================================
   Cards
   ========================================================================== */
.grid{ display:grid; gap:20px; }
@media (min-width:640px){ .grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  .grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grid.cols-4{ grid-template-columns:repeat(4,1fr); } }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--hairline);
  padding:24px; border-radius:2px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.card .bar{ position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent);
  border-radius:2px 2px 0 0; }
.card.pad-top{ padding-top:28px; }
a.card{ text-decoration:none; color:inherit; }
a.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
a.card:hover h3{ color:var(--accent); }
.card h3{ margin:.2rem 0 .5rem; }
.card p{ color:var(--body); font-size:.98rem; margin-bottom:0; }
.card .go{ margin-top:auto; padding-top:1rem;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
  color:var(--accent); letter-spacing:.04em; }
@media (prefers-reduced-motion:reduce){ .card,a.card:hover{ transition:none; transform:none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:var(--onaccent); border:1px solid var(--accent);
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; font-weight:600;
  letter-spacing:.03em; padding:12px 22px; border-radius:2px; cursor:pointer;
  text-decoration:none; transition:transform .2s,box-shadow .2s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow); text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--body); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--accent-2); color:var(--accent-2); box-shadow:none; transform:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.5rem; }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }

/* ==========================================================================
   Figures — every illustration on a consistent light mat
   ========================================================================== */
figure.fig{ margin:2rem 0; }
figure.fig .mat{
  background:var(--plate); border:1px solid var(--plate-edge); border-radius:4px;
  padding:clamp(10px,2.5vw,22px); overflow:hidden;
}
figure.fig .mat img{ width:100%; height:auto; border-radius:2px; }
figure.fig figcaption{
  margin-top:.7rem; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px; line-height:1.6; letter-spacing:.02em; color:var(--muted);
  text-transform:none;
}
figure.fig figcaption b{ color:var(--secondary); font-weight:600; }
/* a bare mat, for illustration thumbnails inside cards and elsewhere */
.mat{ background:var(--plate); border:1px solid var(--plate-edge); border-radius:4px;
  padding:10px; overflow:hidden; }
.mat img{ width:100%; height:auto; border-radius:2px; display:block; }
.card .mat{ margin:0 0 16px; }
.card .mat.aspect img{ aspect-ratio:16/10; height:auto; object-fit:cover; }

/* standalone illustrations in a text column: hold them to a comfortable size and
   centre them, rather than letting a wide picture fill the whole measure */
.prose > figure.fig .mat{ max-width:600px; margin-left:auto; margin-right:auto; }
.prose > figure.fig figcaption{ max-width:600px; margin-left:auto; margin-right:auto;
  text-align:center; }

/* portrait covers sit narrower and centred */
figure.fig.portrait .mat{ max-width:360px; }
figure.fig.center{ text-align:center; }
figure.fig.center .mat{ margin:0 auto; }

/* ==========================================================================
   Callouts — the guide's pull-aside boxes
   ========================================================================== */
.callout{
  position:relative; background:var(--callout-bg); border:1px solid var(--hairline);
  border-radius:3px; padding:20px 22px; margin:1.8rem 0;
}
.callout::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--accent); border-radius:3px 3px 0 0; }
.callout .lbl{ display:block; margin-bottom:.5rem;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.14em; color:var(--accent); }
.callout p:last-child{ margin-bottom:0; }
.callout.quote{ font-size:1.12rem; line-height:1.6; color:var(--heading);
  font-family:Montserrat,Inter,sans-serif; font-weight:600; letter-spacing:-.01em; }

/* ==========================================================================
   Prose helpers — lists, tables, references
   ========================================================================== */
.prose h2, .prose h3{ scroll-margin-top:120px; }
.prose h2{ margin:2.6rem 0 1rem; }
.prose h3{ margin:2rem 0 .7rem; }
.prose ul, .prose ol{ margin:0 0 1.2em; padding-left:1.3em; }
.prose li{ margin:.4em 0; }
.prose ul li::marker{ color:var(--accent); }

.table-scroll{ overflow-x:auto; margin:1.6rem 0; border:1px solid var(--hairline);
  border-radius:3px; }
table.data{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px; }
table.data th, table.data td{ text-align:left; vertical-align:top;
  padding:12px 16px; border-bottom:1px solid var(--hairline); }
table.data thead th{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--secondary);
  background:var(--surface); position:sticky; top:0;
}
table.data tbody tr:last-child td{ border-bottom:0; }
table.data td strong{ color:var(--heading); }

.refs{ font-size:.9rem; color:var(--lead); }
.refs li{ margin:.55em 0; line-height:1.5; }

/* glossary as a definition-ish table already handled by table.data */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding:56px 0 40px; }
.hero .kicker{ color:var(--accent); }
.hero h1{ max-width:16ch; }
.hero .stand{ font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--lead);
  max-width:40rem; margin-top:1rem; }
.hero-fig{ margin-top:2.2rem; max-width:880px; margin-left:auto; margin-right:auto; }
.hero-fig .mat{ background:var(--plate); border:1px solid var(--plate-edge);
  border-radius:6px; padding:clamp(8px,2vw,16px); }
.hero-fig img{ width:100%; height:auto; border-radius:3px; }
/* a hero illustration placed as a plain figure (e.g. the guide header) is centred
   at a sane width rather than spanning the whole 72rem column */
.hero > .wrap > figure.fig .mat{ max-width:760px; margin-left:auto; margin-right:auto; }
.hero > .wrap > figure.fig figcaption{ max-width:760px; margin-left:auto; margin-right:auto;
  text-align:center; }

/* two-column intro (text + picture) */
.split{ display:grid; gap:28px; align-items:center; }
@media (min-width:860px){ .split{ grid-template-columns:1.05fr .95fr; }
  .split.rev>*:first-child{ order:2; } }

/* ==========================================================================
   Booklet — large accessible type, generous spacing
   ========================================================================== */
.booklet{ --bk-max:46rem; }
.booklet .spread{ padding:52px 0; border-bottom:1px solid var(--hairline); }
.booklet .spread:last-child{ border-bottom:0; }
.booklet .spread h2{ font-size:clamp(26px,4.4vw,38px); }
.booklet .spread p{ font-size:clamp(1.08rem,2.2vw,1.24rem); line-height:1.6;
  color:var(--body); max-width:38rem; }
.booklet .spread .lead-line{ color:var(--heading); font-weight:600; }
.booklet .ask{ font-family:Montserrat,Inter,sans-serif; }

/* ==========================================================================
   Video
   ========================================================================== */
.video-block{ margin:0 0 12px; }
.video-block video{ width:100%; border-radius:4px; border:1px solid var(--hairline);
  background:#000; display:block; }
.transcript{ margin-top:14px; border:1px solid var(--hairline); border-radius:3px;
  background:var(--surface); }
.transcript summary{ cursor:pointer; padding:14px 18px; list-style:none;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent);
  display:flex; align-items:center; gap:.6rem; }
.transcript summary::-webkit-details-marker{ display:none; }
.transcript summary::before{ content:"+"; color:var(--accent); font-weight:700; }
.transcript[open] summary::before{ content:"–"; }
.transcript .body{ padding:0 18px 18px; color:var(--lead); font-size:.98rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site{ border-top:1px solid var(--hairline); background:var(--bg-2);
  padding:48px 0 40px; margin-top:24px; }
footer.site .cols{ display:grid; gap:28px; }
@media (min-width:760px){ footer.site .cols{ grid-template-columns:2fr 1fr 1fr; } }
footer.site h4{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--secondary);
  margin:0 0 .9rem; font-weight:600; }
footer.site a{ color:var(--lead); text-decoration:none; display:block; margin:.4rem 0;
  font-size:.94rem; }
footer.site a:hover{ color:var(--accent); }
footer.site .brand{ color:var(--heading); font-family:Montserrat,Inter,sans-serif;
  font-weight:800; letter-spacing:-.02em; font-size:1.1rem; }
footer.site .fine{ margin-top:28px; padding-top:20px; border-top:1px solid var(--hairline);
  color:var(--muted); font-size:.82rem; }
footer.site .fine .stamp{ font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px; color:var(--muted); }
footer.site .cc{ display:inline-flex; align-items:center; gap:.5rem; }

/* back to top */
.to-top{ position:fixed; right:18px; bottom:18px; z-index:50;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--hairline); color:var(--accent);
  text-decoration:none; opacity:0; pointer-events:none; transition:opacity .3s; }
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ border-color:var(--accent); }

/* utility */
.center{ text-align:center; }
.muted{ color:var(--muted); }
.lead{ color:var(--lead); }
.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }