/* ============================================================
   base.css - reset, typografie, focus, layoutprimitieven
   Vereist tokens.css. Laad in deze volgorde:
   tokens.css, base.css, components.css, site.css (per klant)
   ============================================================ */

@layer base {

  /* ---- 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(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
  }

  img, picture, video, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }

  /* ---- Typografie ------------------------------------------- */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text-strong);
    line-height: var(--lh-tight);
    text-wrap: balance;
    margin: 0 0 var(--sp-s);
    /* Zinsstijl, geen Title Case. Nederlands is geen Engels. */
  }
  h1 { font-size: var(--step-5); letter-spacing: -0.02em; }
  h2 { font-size: var(--step-3); letter-spacing: -0.015em; }
  h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
  h4 { font-size: var(--step-0); }

  h2, h3 { scroll-margin-top: calc(var(--nav-h) + var(--sp-m)); }

  p { margin: 0 0 var(--sp-s); text-wrap: pretty; }
  p, li { max-width: var(--measure); }

  .lead {
    font-size: var(--step-1);
    line-height: var(--lh-snug);
    color: var(--text);
  }
  .muted { color: var(--text-muted); }

  /* Cursief met stokken onder de regel knipt af zonder ruimte. */
  em, .italic, i {
    line-height: max(var(--lh-italic-min), 1em);
    padding-block-end: 0.06em;
  }

  a {
    color: var(--accent-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  a:hover { text-decoration-thickness: 2px; }

  ul, ol { padding-inline-start: 1.15rem; margin: 0 0 var(--sp-s); }
  li + li { margin-block-start: var(--sp-3xs); }

  /* Lijst zonder bolletjes, voor navigatie en voettekst. Scheelt
     een style-attribuut in de HTML die de klant zelf onderhoudt. */
  .list-bare { list-style: none; padding-inline-start: 0; }

  hr {
    border: 0;
    border-block-start: 1px solid var(--rule);
    margin: var(--sp-l) 0;
  }

  ::selection { background: var(--accent-tint); color: var(--text-strong); }

  /* ---- Focus ------------------------------------------------
     Nooit outline:none zonder vervanging. focus-visible boven
     focus, zodat een muisklik geen ring achterlaat.           */
  :focus-visible {
    outline: var(--focus-ring) solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-s);
  }
  :focus:not(:focus-visible) { outline: none; }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--sp-s);
    inset-block-start: -6rem;
    z-index: 100;
    background: var(--accent);
    color: var(--on-accent);
    padding: var(--sp-2xs) var(--sp-s);
    border-radius: 0 0 var(--r-s) var(--r-s);
    text-decoration: none;
    transition: inset-block-start var(--dur) var(--ease);
  }
  .skip-link:focus-visible { inset-block-start: 0; }

  /* ---- Layoutprimitieven ------------------------------------ */
  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .wrap--tight { max-width: var(--wrap-tight); }

  .section { padding-block: var(--section-y); }
  .section--sunken { background: var(--bg-sunken); }

  /* Volledige hoogte: dvh, want vh breekt op mobiel door de
     verdwijnende browserbalk.                                  */
  .full-height { min-height: 100dvh; }

  .stack > * + * { margin-block-start: var(--flow, var(--sp-s)); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    align-items: center;
  }

  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px; width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /* Brede tabellen en codeblokken scrollen in hun eigen doos,
     de pagina zelf krijgt nooit een horizontale scrollbalk.    */
  .scroll-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Touch ------------------------------------------------ */
  a, button, label, summary, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgb(31 87 65 / 0.12);
  }
}