/* ============================================================================
   BASE — minimale reset + typografische fundering.
   ============================================================================
   Browsers hebben elk hun eigen default-stijlen (Chrome geeft body 8px marge,
   Safari geeft buttons andere fonts dan input-velden, etc.). Deze 'base' egaliseert
   de verschillen zodat we daarna voorspelbaar kunnen styleren.

   Wat hier WEL hoort: globale defaults die op de hele site gelden.
   Wat hier NIET hoort: stijl van specifieke secties of componenten — dat komt
   in style.css.
   ============================================================================ */

/* ----- 1. Box-sizing -------------------------------------------------------
   Default: een 100px breed element + 16px padding wordt 132px breed (padding
   wordt erbij opgeteld). Met border-box wordt dat gewoon 100px (padding past
   in de 100). Veel intuïtiever — vrijwel elke moderne site doet dit. */

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

/* ----- 2. Default-marges weghalen ------------------------------------------
   Browsers geven body, headings en paragrafen standaard verticale marges.
   We resetten ze op 0 zodat WIJ bewust kiezen waar ruimte komt (via
   --space-* uit variables.css). */

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol,
figure, blockquote {
  margin: 0;
}

/* ----- 3. Body — fundering van de typografie en kleur ----------------------
   Dit is de "canvas" waar alles op staat. We pakken hier al onze design-tokens
   uit variables.css. */

body {
  background-color: var(--color-light);  /* default page bg = licht */
  color: var(--color-dark);              /* default tekst = donker */
  font-family: var(--font-body);         /* DM Sans, met fallbacks */
  font-size: 1rem;                       /* 16px — body baseline */
  line-height: 1.6;                      /* 1.6× regelhoogte = comfortabel leesbaar */

  /* Subtiele font-rendering smoothing op Mac (Retina). Voorkomt dat tekst
     'te dik' oogt. Heeft op Windows en Linux geen effect. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- 4. Headings ---------------------------------------------------------
   Outfit met strakkere line-height (1.2) — headings zijn groter en hebben
   minder regelhoogte nodig dan body-tekst. font-weight 700 als default;
   per heading-level overschrijven we dit later in style.css als 600 beter past. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

/* ----- 5. Afbeeldingen -----------------------------------------------------
   display: block voorkomt een mysterieuze 4px witruimte onder de afbeelding
   (komt door inline-default + font-baseline — een klassieke valkuil).
   max-width: 100% voorkomt dat een grote afbeelding de container uitloopt
   op kleinere schermen. height: auto bewaart de aspect-ratio. */

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

/* ----- 6. Form-elementen erven font + kleur --------------------------------
   Browsers geven inputs/buttons om historische redenen hun eigen font
   (vaak een serif!) en kleur. Deze regel forceert dat ze het body-font
   gebruiken — waar je 99% van de tijd op rekent. */

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

/* ----- 7. Links — standaard primary-kleur, geen onderstreping --------------
   Per context (nav, body-tekst, footer) styleren we ze straks specifieker.
   text-decoration: none is bewust: in 2026 is een onderstreping-by-default
   visueel druk. Lees-tekst-links krijgen 'm later wél terug. */

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* ----- 8. Toetsenbord-toegankelijkheid -------------------------------------
   :focus-visible toont alleen de focus-ring bij toetsenbord-navigatie (Tab),
   niet bij muis-clicks. Voor screen-reader- en keyboard-only-gebruikers
   essentieel om te zien waar ze zijn op de pagina.

   outline-offset duwt de ring 2px van het element af — leesbaarder dan
   strak-tegen-de-rand. */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ----- 9. Mobiel: geen horizontale scroll + veilige marges -----------------
   overflow-x: hidden vangt elementen die per ongeluk buiten het scherm
   steken (een klassieke oorzaak van horizontaal scrollen op mobiel).
   env(safe-area-inset-*) houdt de content uit de afgeronde schermhoeken
   en de notch van moderne iPhones. Werkt samen met viewport-fit=cover,
   dat in de viewport-meta van elke pagina staat. */

html,
body {
  overflow-x: hidden;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}