/*
  base.css: design-tokens voor jacko.be.
  Bron van waarheid: design-richting.md (bindend). Twee werelden, twee
  kleurenpaletten, twee stemmen. Dit bestand bevat alleen de tokens, de
  minimale reset en de basis-achtergrond. Latere taken bouwen hierop verder
  (split.css, timeline.css, de eigenlijke lay-out en componenten).
*/

:root {
  /* Kleur, papier-wereld (Strategy, links) */
  --papier: #f5f2ec;
  --inkt: #17191d;
  --inkt-zacht: #4a4f58;
  --rasterlijn: rgba(23, 25, 29, 0.07);
  --knipoog-oranje: #ff4d00;

  /* Kleur, atelier-wereld (Art, rechts) */
  --atelier: #121014;
  --licht-op-donker: #f2ede4;
  --licht-op-donker-zacht: rgba(242, 237, 228, 0.72);

  /* Verfkleuren: decor en accenten op de atelier-kant, geen kleur voor
     lopende tekst op donker (behalve grote koppen, na contrastcheck) */
  --verf-magenta: #d8479b;
  --verf-cyaan: #2fc0d6;
  --verf-lime: #a8cf3f;
  --verf-geel: #f0c536;
  --verf-oranje: #ee7d31;

  /* Typografie: twee stemmen, nul webfonts. Cursief (font-style: italic)
     wordt apart toegepast waar de kunststem gebruikt wordt, niet in dit
     token zelf. */
  --font-structuur: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-kunst: Georgia, "Times New Roman", serif;

  /* Ruimte-schaal: klein, sensibel setje voor marges, padding en gaps */
  --ruimte-2xs: 0.5rem;
  --ruimte-xs: 0.75rem;
  --ruimte-sm: 1rem;
  --ruimte-md: 1.5rem;
  --ruimte-lg: 2.5rem;
  --ruimte-xl: 4rem;

  /* Layout-token: hoogte van de gedeelde footer-balk. Woont hier (generiek)
     zodat elke pagina dezelfde footer deelt. */
  --footer-h: 2.75rem;
}

/* Minimale reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Papier als basis-achtergrond: ook het bewijs dat base.css echt laadt. */
  background: var(--papier);
}

/* ================================================================== */
/* Footer: de gedeelde, dunne donkere balk die de twee werelden verbindt */
/* ================================================================== */

/* Generiek voor elke pagina (homepage, over-jacko, privacy): daarom woont de
   footer sinds de footer-verhuizing hier en niet in split.css. Op de homepage
   is de balk de laatste laag in de body-flexkolom; op de andere pagina's sluit
   ze de gewone flow af. flex: 0 0 auto en z-index doen op een niet-flexpagina
   geen kwaad. flex-wrap laat de regel netjes afbreken op heel smalle schermen. */
.site-footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.5ch;
  min-height: var(--footer-h);
  padding: 0.4rem var(--ruimte-md);
  background: var(--inkt);
  color: var(--licht-op-donker-zacht);
  font-family: var(--font-structuur);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-align: center;
}

/* De middot-separatoren: gedempt, decoratief (aria-hidden in de HTML). */
.site-footer__sep {
  opacity: 0.55;
}

/* De links: iets helderder dan de lopende tekst en onderstreept als affordance.
   licht-op-donker op inkt haalt AA ruim (contrast > 12:1). */
.site-footer a {
  color: var(--licht-op-donker);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.site-footer a:hover {
  text-decoration: none;
}
/* Zichtbare toetsenbord-focus op het donker. */
.site-footer a:focus-visible {
  outline: 2px solid var(--licht-op-donker);
  outline-offset: 3px;
  border-radius: 2px;
}

/* De huidige-pagina-aanduiding (bijv. "Over Jacko" in de footer van de about-
   pagina zelf): gewone tekst, geen link, in dezelfde gedempte kleur. */
.site-footer__huidig {
  color: var(--licht-op-donker-zacht);
}

/* Smalle schermen: de footer mag over twee regels en wordt iets kleiner. */
@media (max-width: 720px) {
  .site-footer {
    font-size: 0.75rem;
    padding: var(--ruimte-sm) var(--ruimte-md);
  }
}

/* ================================================================== */
/* Generieke proza-pagina (privacy nu, en later de WordPress page.php) */
/* ================================================================== */

/* Een sobere leeskolom op papier: smal, rustig, structuurstem. Klein en
   herbruikbaar gehouden, zodat dezelfde opmaak straks ook de page.php van het
   WordPress-thema kan dragen. base.css laat tekstkleur en font generiek open,
   dus de pagina zet ze hier zelf. De min-height reserveert de vrije hoogte
   boven de footer (var(--footer-h)), zodat de donkere footer-balk ook bij
   weinig tekst netjes onderaan het scherm sluit. */
.pagina {
  max-width: 40rem;
  min-height: calc(100dvh - var(--footer-h));
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6rem) var(--ruimte-md) var(--ruimte-xl);
  color: var(--inkt);
  font-family: var(--font-structuur);
  font-size: 1.06rem;
  line-height: 1.65;
}

.pagina h1 {
  margin: 0 0 var(--ruimte-md);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.pagina p {
  margin: 0 0 var(--ruimte-sm);
}

/* Links in inkt, onderstreept als affordance; zichtbare toetsenbord-focus. */
.pagina a {
  color: var(--inkt);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.pagina a:hover {
  text-decoration: none;
}
.pagina a:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 2px;
  border-radius: 2px;
}