/**
 * Breakpointschaal van Klubb. Deze vier breedtes gelden voor elk project.
 * Wijk hier niet van af, ook niet met een tussenwaarde van 900 of 1100.
 *
 *   375   mobiel      basis, mobile first
 *   768   tablet
 *  1024   laptop      hier schakelt de navigatie van hamburger naar balk
 *  1440   desktop     hier zit de maximale inhoudsbreedte
 *
 * Een media query kan geen custom property lezen, dus de getallen staan hier
 * ook letterlijk. De variabelen zijn er voor JavaScript, container queries en
 * maximale breedtes. Kopieer de blokken hieronder, verzin geen eigen grenzen.
 *
 *   @media (min-width: 375px)  { }
 *   @media (min-width: 768px)  { }
 *   @media (min-width: 1024px) { }
 *   @media (min-width: 1440px) { }
 */

:root {
  --bp-mobiel: 375px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;

  /* Inhoud loopt niet breder dan de desktopbreedte min de buitenmarge. */
  --inhoud-max: 1360px;
  --marge: 20px;

  /* Kleinste toegestane tikdoel. Elke knop, link en invoer haalt dit. */
  --tikdoel: 44px;
}

@media (min-width: 768px) {
  :root {
    --marge: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --marge: 48px;
  }
}

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

html {
  /* Voorkomt horizontale scroll door een enkel te breed element. */
  overflow-x: hidden;
}

body {
  margin: 0;
  /* Mobile first: de basis is de kleinste breedte. */
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.55;
}

img,
video,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

.binnen {
  width: 100%;
  max-width: var(--inhoud-max);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Elke knop, menulink en formuliervelden halen het minimum tikdoel. */
.knop,
button,
input,
select,
textarea,
nav a {
  min-height: var(--tikdoel);
}

.knop,
nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Zichtbare focus, ook als een project de opmaak overschrijft. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Overslaan naar de inhoud, voor toetsenbord en schermlezer. */
.overslaan {
  position: absolute;
  left: -9999px;
}

.overslaan:focus {
  left: var(--marge);
  top: 8px;
  z-index: 100;
  /* Ook deze link haalt het tikdoel. Hij is klein en zeldzaam, en juist
     daarom makkelijk te missen bij een controle. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tikdoel);
  padding: 12px 16px;
  background: #fff;
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}