/* Dual-Def — de vormgeving van de inhoudspagina's.
 *
 * Dit zijn leespagina's, geen marketingdia's. Een domeinpagina telt 1.200 à 1.800 woorden en
 * wordt gelezen door een oprichter of een CTO die de cijfers natrekt. De vormgeving is daarop
 * gebouwd: een serif voor de lopende tekst, een leeskolom van 66 tekens, en mono voor alles
 * wat een cijfer of een code is.
 *
 * De kleuren komen uit de bestaande merktokens van main.css — niet ernaast verzonnen:
 *   --tj-color-theme-dark     #0c1e21   -> inkt
 *   --tj-color-theme-primary  #1e8a8a   -> accent (op wit iets dieper gezet voor het contrast)
 *   --tj-color-text-body      #364e52   -> lopende tekst
 * Het papier trekt licht naar datzelfde teal in plaats van een standaardgrijs te zijn.
 *
 * Het donkere thema is gekozen, niet omgekeerd: het accent is opgetild naar #45B7B3, want
 * #16797B op een donkere grond zakt weg onder de contrastdrempel.
 *
 * De dossierstrook (.dossier) komt uit de wereld van het onderwerp zelf: een EDF-oproep ís
 * een record met een identificatie en een bedrag, dus de pagina is als zo'n record gezet.
 */

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */

:root {
  --paper:       #EEF3F2;
  --surface:     #FFFFFF;
  --ink:         #0C1E21;
  --body:        #364E52;
  --muted:       #6B8285;
  --rule:        #CBD9D7;
  --rule-soft:   #DDE7E5;
  --accent:      #16797B;
  --accent-ink:  #0E5457;
  --mark-mute:   #AFC3C2;
  --ground:      #0C1E21;
  --ground-ink:  #E4EDEB;
  --ground-mut:  #7E9A9B;
  --ground-rule: #1E3A3D;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #0A1618;
    --surface:     #10252A;
    --ink:         #E6EFED;
    --body:        #A9C0BE;
    --muted:       #7B9497;
    --rule:        #21393D;
    --rule-soft:   #182E32;
    --accent:      #45B7B3;
    --accent-ink:  #74D0CB;
    --mark-mute:   #2E4A4E;
    --ground:      #061012;
    --ground-ink:  #E6EFED;
    --ground-mut:  #7B9497;
    --ground-rule: #1B3236;
  }
}

/* De themaschakelaar van de bezoeker moet de mediaquery in béide richtingen kunnen overrulen. */
:root[data-theme="dark"] {
  --paper:       #0A1618;
  --surface:     #10252A;
  --ink:         #E6EFED;
  --body:        #A9C0BE;
  --muted:       #7B9497;
  --rule:        #21393D;
  --rule-soft:   #182E32;
  --accent:      #45B7B3;
  --accent-ink:  #74D0CB;
  --mark-mute:   #2E4A4E;
  --ground:      #061012;
  --ground-ink:  #E6EFED;
  --ground-mut:  #7B9497;
  --ground-rule: #1B3236;
}

:root[data-theme="light"] {
  --paper:       #EEF3F2;
  --surface:     #FFFFFF;
  --ink:         #0C1E21;
  --body:        #364E52;
  --muted:       #6B8285;
  --rule:        #CBD9D7;
  --rule-soft:   #DDE7E5;
  --accent:      #16797B;
  --accent-ink:  #0E5457;
  --mark-mute:   #AFC3C2;
  --ground:      #0C1E21;
  --ground-ink:  #E4EDEB;
  --ground-mut:  #7E9A9B;
  --ground-rule: #1E3A3D;
}

/* ---------------------------------------------------------------------------
   Basis
   --------------------------------------------------------------------------- */

/* De homepage draait nog op het oude thema (bootstrap, gsap, main.css). Daar mag deze
   stylesheet niets aan veranderen: alles hieronder geldt enkel buiten .op-thema. */
body:not(.op-thema) {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body:not(.op-thema) * { box-sizing: border-box; }

body:not(.op-thema) h1,
body:not(.op-thema) h2,
body:not(.op-thema) h3 {
  font-family: 'Mona Sans', system-ui, sans-serif;
  color: var(--ink);
  text-wrap: balance;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* De nulmarge staat bewust in een eigen regel, en niet hierboven.
 *
 * Hierboven is de selector `body:not(.op-thema) h2`. Die weegt (0,1,2): twee elementen,
 * en `:not()` telt voor de specificiteit mee als een klasse. Verderop staat `.prose h2`
 * met `margin: 64px 0 0` — maar dat weegt (0,1,1) en verliest dus, hoe ver naar onderen
 * je het ook zet. Het gevolg was dat élke kop op élke inhoudspagina in werkelijkheid
 * marge nul had en tegen de vorige alinea plakte, terwijl er in dit bestand keurig 64px
 * stond. Een regel die er is, maar niets doet: het vervelendste soort fout.
 *
 * `:where()` weegt nul. `body:not(.op-thema) :where(h1, h2, h3)` komt daarmee op (0,1,1)
 * — hoog genoeg om Bootstrap's `h2 { margin-bottom: .5rem }` te verslaan, en precies
 * gelijk aan `.prose h2`. Bij gelijke specificiteit wint wie later staat, en dat is de
 * bedoelde regel. De nul blijft dus het vertrekpunt voor koppen zonder eigen regel,
 * zonder de koppen mét een eigen regel te overrulen.
 */
body:not(.op-thema) :where(h1, h2, h3) { margin: 0; }

/* LET OP — deze regel weegt (0,1,2), en dat is zwaarder dan elke `.klasse a`-regel verderop
 * in dit bestand. Ze wint dus van .crumbs a, .rail a, .sources li a, .foot-col a en .btn:
 * tien regels die hun eigen linkkleur zetten en die nooit wordt toegepast. Alles wat een
 * link is, is daardoor --accent-ink, ongeacht wat er verderop staat.
 *
 * Dat is een echte fout, maar ze repareren betekent tien onderdelen tegelijk van kleur laten
 * veranderen (kruimelpad, inhoudsopgave, bronnen, voettekst worden dan grijs). Dat is een
 * ontwerpbeslissing, geen bugfix, en ze staat open. Zolang ze niet genomen is, blijft deze
 * regel zoals ze is en wordt .btn hieronder apart zwaarder gemaakt — de knop was namelijk
 * onleesbaar en kon niet wachten. */
body:not(.op-thema) a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body:not(.op-thema) a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.sep { color: var(--muted); }

/* ---------------------------------------------------------------------------
   Kopbalk
   --------------------------------------------------------------------------- */

body:not(.op-thema) .topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.topbar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-size: 17px;
  text-decoration: none;
}

.wordmark span { color: var(--accent); }

.crumbs {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12.5px;
  color: var(--muted);
}

.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Hero en dossierstrook
   --------------------------------------------------------------------------- */

.hero {
  background: var(--ground);
  color: var(--ground-ink);
  border-bottom: 1px solid var(--ground-rule);
}

.hero-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 32px 0;
}

.hero .eyebrow { color: var(--ground-mut); }

.hero h1 {
  color: var(--ground-ink);
  font-size: clamp(48px, 9vw, 104px);
  letter-spacing: -0.035em;
  margin: 18px 0 0;
}

.hero .thesis {
  max-width: 32ch;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ground-ink);
  margin: 24px 0 0;
  opacity: 0.92;
}

/* Een EDF-oproep is een record met een nummer en een bedrag. Dus is dit een record. */
.dossier {
  max-width: 1180px;
  margin: 64px auto 0;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ground-rule);
}

.dossier > div {
  padding: 22px 24px 26px 0;
  border-right: 1px solid var(--ground-rule);
}

.dossier > div:last-child { border-right: 0; }

.dossier dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ground-mut);
  margin: 0 0 8px;
}

.dossier dd {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  margin: 0;
  color: var(--ground-ink);
  font-size: 14px;
  line-height: 1.5;
}

.dossier .big {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   Het lijf: asymmetrisch, met een plakkende zijbalk
   --------------------------------------------------------------------------- */

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

/* Pagina's zonder zijbalk (404, juridisch) krijgen alleen de leeskolom. */
.shell-solo { grid-template-columns: minmax(0, 1fr); }

.rail {
  position: sticky;
  top: 40px;
  padding: 56px 0 0;
}

.rail-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 4px;
}

.rail ol,
.rail ul {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.rail li { border-bottom: 1px solid var(--rule-soft); }

.rail a {
  display: block;
  padding: 11px 0;
  font-family: 'Mona Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
}

.rail a:hover { color: var(--accent-ink); }

.rail-stat {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.rail-stat .stat-num {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  display: block;
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
}

.rail-stat .stat-cap {
  font-family: 'Mona Sans', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

/* ---------------------------------------------------------------------------
   De leeskolom
   --------------------------------------------------------------------------- */

.prose {
  padding: 56px 0 0;
  max-width: 66ch;   /* de maat waarop lange tekst leesbaar blijft */
}

.shell-solo .prose { margin: 0 auto; }

/* De ruimte bóven een kop hoort duidelijk groter te zijn dan die tussen twee alinea's
 * (18px), anders leest de kop als onderdeel van de vorige gedachte in plaats van als
 * het begin van een nieuwe. 72px is ruim vier keer de alineamarge — dat leest als een
 * echte sectiegrens. Eronder komt geen marge: de eerste alinea van een sectie hoort
 * dicht bij haar kop te staan. Die twee ongelijke afstanden zijn wat de indeling
 * leesbaar maakt. */
.prose h2 {
  font-size: 34px;
  margin: 72px 0 0;
  scroll-margin-top: 32px;
}

.prose > h2:first-child { margin-top: 0; }

/* Een h3 is een onderverdeling binnen een sectie, geen nieuwe sectie. Ze krijgt dus
 * duidelijk meer lucht dan een alinea (18px), maar duidelijk minder dan een h2 (72px):
 * de afstand vertelt de lezer welk niveau hij binnenstapt. */
.prose h3 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 44px 0 0;
}

.prose p { margin: 18px 0 0; }

.prose .lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose ul,
.prose ol { margin: 18px 0 0; padding-left: 22px; }
.prose li { margin-bottom: 8px; }

/* Voetnoten: het bewijs staat achteraan, de verwijzing in de zin. */
.prose sup a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-decoration: none;
  color: var(--accent-ink);
  padding: 0 1px;
}

.prose sup a:hover { text-decoration: underline; }

/* Tabellen en grafieken breken door de leeskolom heen. */
.breakout {
  max-width: none;
  margin: 44px 0 0;
}

/* ---------------------------------------------------------------------------
   De topictabel
   --------------------------------------------------------------------------- */

.tbl-wrap { overflow-x: auto; }   /* de pagina zelf schuift nooit zijwaarts */

.topics {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.topics caption {
  text-align: left;
  font-family: 'Mona Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 12px;
}

.topics th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--rule);
}

.topics td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-family: 'Mona Sans', sans-serif;
  color: var(--body);
}

.topics th.num,
.topics td.num {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.topic-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   De grafiek — platte HTML, geen bibliotheek
   --------------------------------------------------------------------------- */

.figure { margin: 44px 0 0; }

.fig-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.fig-sub {
  font-family: 'Mona Sans', sans-serif;
  font-size: 13.5px;
  color: var(--muted);
  margin: 4px 0 24px;
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 2px;   /* de tussenruimte die twee balken uit elkaar houdt */
}

.bar-row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 14px;
  padding: 3px 0;
}

.bar-name {
  font-family: 'Mona Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--body);
  text-align: right;
}

.bar-track { height: 18px; display: flex; }

.bar-fill {
  height: 100%;
  background: var(--mark-mute);
  border-radius: 0 4px 4px 0;   /* enkel het uiteinde rond; de nullijn blijft scherp */
  transition: filter .15s ease;
}

.bar-row:hover .bar-fill { filter: brightness(1.08); }

/* De uitgelichte balken dragen het accent; de rest wijkt terug. */
.bar-row.on .bar-name { color: var(--ink); font-weight: 700; }
.bar-row.on .bar-fill { background: var(--accent); }

.bar-row.zero .bar-fill {
  background: transparent;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  width: 2px;
}

.bar-value {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
}

.bar-row:not(.on) .bar-value { color: var(--muted); }

.fig-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

/* ---------------------------------------------------------------------------
   Het Belgische anker, en het kader dat zegt wat níét waar is
   --------------------------------------------------------------------------- */

.anchor-note {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 28px 32px;
  margin: 44px 0 0;
}

.anchor-note .eyebrow { color: var(--accent-ink); }
.anchor-note p { margin: 12px 0 0; font-size: 18px; }
.anchor-note p:first-of-type { font-size: 20px; color: var(--ink); }

/* "Where we will not overclaim" — het geloofwaardigste kader op de pagina. */
.caveat {
  border: 1px solid var(--rule);
  padding: 22px 26px;
  margin: 36px 0 0;
  font-size: 16.5px;
}

.caveat .eyebrow {
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   Oproep, verwante domeinen, bronnen
   --------------------------------------------------------------------------- */

.cta {
  margin: 72px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta p { margin: 0; max-width: 46ch; }

/* Het groen van de huisstijl (--accent), met wit erop: contrast 5,2 : 1, ruim boven de
 * 4,5 : 1 die WCAG AA voor gewone tekst vraagt. Bij zweven wordt de knop dónkerder en niet
 * lichter — dan stijgt het contrast met het wit, en blijft hij leesbaar terwijl hij reageert.
 *
 * De selector draagt `body:not(.op-thema)` niet voor de sier: zonder dat voorvoegsel weegt
 * `.btn` (0,1,0) lichter dan de linkregel bovenaan dit bestand (0,1,2), en dan wint die.
 * Precies dat gebeurde: de knop kreeg de linkkleur --accent-ink op de donkere achtergrond
 * --ground — donkergroen op bijna-zwart, onleesbaar, en door niemand gekozen. Met het
 * voorvoegsel weegt de regel (0,2,1) en komt de kleur aan die hier staat. */
body:not(.op-thema) .btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: 'Mona Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 26px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}

body:not(.op-thema) .btn:hover,
body:not(.op-thema) .btn:focus-visible { background: var(--accent-ink); color: #fff; }

.related {
  margin: 64px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.related-list a {
  display: inline-block;
  font-family: 'Mona Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 15px;
  border: 1px solid var(--rule);
  color: var(--body);
  text-decoration: none;
}

.related-list a:hover { border-color: var(--accent); color: var(--accent-ink); }

.sources {
  margin: 80px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
}

.sources h2 {
  font-family: 'Mona Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.sources ol {
  padding-left: 22px;
  margin: 18px 0 0;
}

.sources li {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  padding-left: 6px;
  margin-bottom: 8px;
}

.sources li a { color: var(--body); }
.sources li:target { color: var(--ink); }

/* ---------------------------------------------------------------------------
   De voettekst — ook onder de homepage, dus zonder :not(.op-thema)
   --------------------------------------------------------------------------- */

.site-footer {
  margin-top: 100px;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  font-family: 'Mona Sans', sans-serif;
}

.foot-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
}

.foot-brand p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 0;
}

.foot-col h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}

.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 24px;
}

.foot-col ul li { margin-bottom: 10px; break-inside: avoid; }

.foot-col a {
  font-size: 14px;
  color: var(--body);
  text-decoration: none;
}

.foot-col a:hover { color: var(--accent-ink); text-decoration: underline; }
.foot-col .foot-all { color: var(--muted); font-style: italic; }

.foot-legal {
  border-top: 1px solid var(--rule-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--muted);
}

.foot-legal .foot-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 32px;
}

.foot-legal p { margin: 0; }
.foot-legal a { color: var(--body); }

/* ---------------------------------------------------------------------------
   Smal scherm
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .rail {
    position: static;
    padding-top: 40px;
  }

  .dossier { grid-template-columns: 1fr 1fr; }
  .dossier > div:nth-child(2) { border-right: 0; }

  .hero-in { padding-top: 56px; }

  .bar-row {
    grid-template-columns: 118px minmax(0, 1fr) 54px;
    gap: 10px;
  }

  .bar-name { font-size: 12px; }

  .foot-in { grid-template-columns: 1fr; gap: 40px; }
  .foot-col ul { columns: 2; }
}

@media (max-width: 560px) {
  .topbar-in,
  .hero-in,
  .dossier,
  .shell,
  .foot-in { padding-left: 20px; padding-right: 20px; }

  .dossier { grid-template-columns: 1fr; }
  .dossier > div { border-right: 0; border-bottom: 1px solid var(--ground-rule); }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.op-thema) *,
  body:not(.op-thema) *::before,
  body:not(.op-thema) *::after {
    transition: none !important;
    animation: none !important;
  }
}