/*
 * Reset, lettertypes en de typografische schaal.
 * Alle waarden komen uit tokens.css.
 */

/* ---- Lettertypes ---------------------------------------------------------
 * Zelf gehost, variabel 200 tot 800, alleen de latin-subset. Samen 69 KB.
 * Geen Google Fonts CDN: dat is een externe partij op een site die belooft er
 * geen te hebben, en in de EU is die specifieke CDN ook al als AVG-probleem
 * beoordeeld.
 */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
}

/* ---- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--wit);
  color: var(--ink);
  font-family: var(--letter-tekst);
  font-size: var(--tekst-m);
  font-weight: var(--gewicht-normaal);
  line-height: var(--regelhoogte-tekst);
  /* Geen horizontale scroll vanaf 360px. Lange Nederlandse samenstellingen
   * zoals communicatiestoornissen lopen anders uit hun container. */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---- Typografie ---------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--letter-display);
  /* Bewust geen letter-spacing: 0 hier. Atkinson is getekend op zijn eigen
   * spatiering en die aanpassen maakt de letters juist minder onderscheidbaar,
   * wat op deze site het hele punt van de keuze ondermijnt. */
  text-wrap: balance;
}

h1 {
  font-size: var(--tekst-h1);
  font-weight: var(--gewicht-zwaar);
  line-height: var(--regelhoogte-krap);
}

h2 {
  font-size: var(--tekst-h2);
  font-weight: var(--gewicht-vet);
  line-height: var(--regelhoogte-kop);
  /* Binnen .stroom stuurt layout.css het ritme; dit vangt de koppen daarbuiten
   * op, zodat een h2 nooit tegen de tekst eronder plakt. */
  margin-block-end: var(--ruimte-5);
}

h3 {
  font-size: var(--tekst-h3);
  font-weight: var(--gewicht-half);
  line-height: var(--regelhoogte-h3);
  margin-block-end: var(--ruimte-3);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: var(--tekst-l);
  line-height: var(--regelhoogte-lead);
}

.klein {
  font-size: var(--tekst-xs);
  line-height: var(--regelhoogte-klein);
  color: var(--klei);
}

strong,
b {
  font-weight: var(--gewicht-vet);
}

/* ---- Links ---------------------------------------------------------------
 * Onderstreept, altijd. Een link die alleen aan zijn kleur te herkennen is,
 * mist iedereen die kleuren anders ziet.
 */

a {
  color: var(--oker-donker);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duur-snel) var(--ease-uit),
    text-decoration-color var(--duur-snel) var(--ease-uit);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--ink);
    text-decoration-thickness: 2px;
  }
}

/* ---- Focus ---------------------------------------------------------------
 * Zichtbaar, overal, ook op een okergeel vlak. NOOIT outline: none zonder
 * vervanger in dezelfde regel.
 */

:focus-visible {
  outline: 3px solid var(--oker-donker);
  outline-offset: 2px;
}

.op-oker :focus-visible {
  outline-color: var(--ink);
}

/* Springlink: onzichtbaar tot hij focus krijgt, dan bovenaan de pagina. */
.springlink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--ink);
  color: var(--wit);
  text-decoration: none;
}

.springlink:focus {
  left: var(--ruimte-4);
  top: var(--ruimte-4);
}

/* Alleen voor schermlezers, maar wel in de toegankelijkheidsboom. */
.enkel-schermlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}