/* ==========================================================================
   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; }