/* ==========================================================================
   Basis: reset, typografie, formulieren, knoppen, hulpklassen.
   Gebruikt uitsluitend variabelen uit tokens.css.
   ========================================================================== */

/* De lettertypes staan op onze eigen server, zie assets/css/fonts.css. Elke
   pagina laadt dat bestand als eerste stylesheet, nog voor deze. */

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

/* Het hidden-attribuut moet altijd winnen, ook van display:grid of flex. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: var(--c-paper);
}

/* De breisteek-textuur ligt in een vaste laag achter alles. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--textuur);
  background-size: var(--textuur-maat) var(--textuur-maat);
  background-repeat: repeat;
  opacity: var(--textuur-zichtbaar);
  pointer-events: none;
  z-index: -1;
}

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

::selection { background: var(--c-zand); color: var(--c-ink); }

/* ==========================================================================
   Typografie
   --------------------------------------------------------------------------
   Koppen staan in kleine letters, in de displayletter, met een strakke
   regelafstand. Labels, knoppen en het menu staan juist in hoofdletters met
   ruime letterafstand. Dat contrast draagt de hele stijl.
   ========================================================================== */

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: 1.08;
  letter-spacing: -.02em;
}
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.16;
  letter-spacing: -.015em;
}
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
}

p { margin: 0 0 var(--sp-4); max-width: var(--maat-tekst); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 20px; max-width: var(--maat-tekst); }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--c-merk-licht); }

hr { border: none; border-top: var(--rand); margin: var(--sp-6) 0; }

/* Links krijgen een streep die dikker wordt, niet een kleur die verspringt. */
a {
  color: var(--c-merk-diep);
  text-underline-offset: .28em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--kort) ease, color var(--kort) ease;
}
a:hover { text-decoration-thickness: 2px; color: var(--c-ink); }

:focus-visible {
  outline: 2px solid var(--c-merk);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Herbruikbare tekstonderdelen ---------------------------------------- */

/* Het hoofdletterlabel boven een kop, en in knoppen en menu. */
.opschrift {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-merk-licht);
  margin: 0 0 var(--sp-3);
}

.lead {
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--c-ink-2);
  max-width: 32em;
}

.klein { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.cijfers { font-variant-numeric: tabular-nums; }

/* Een streep in de merkkleur onder een enkel woord in een kop. */
.gemarkeerd {
  background-image: linear-gradient(transparent 62%, var(--c-oker-zacht) 62%);
  padding-inline: .06em;
}

/* ==========================================================================
   Knoppen
   ========================================================================== */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  padding: 15px 32px;
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: var(--c-op-donker);
  border-radius: var(--radius-knop);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background var(--vloei), color var(--vloei),
              border-color var(--vloei), box-shadow var(--vloei), opacity var(--vloei);
}
/* Een ring die groeit bij hover, in plaats van een kleur die omslaat. */
.knop:hover {
  background: var(--c-accent-ink);
  border-color: var(--c-accent-ink);
  color: var(--c-op-donker);
  box-shadow: 0 0 0 4px var(--c-zand);
}
.knop:disabled, .knop[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.knop:disabled:hover { background: var(--c-accent); border-color: var(--c-accent); }

.knop--licht {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-merk-licht);
}
.knop--licht:hover { background: transparent; color: var(--c-merk-diep); border-color: var(--c-merk); box-shadow: 0 0 0 4px var(--c-creme); }

/* Knop bovenop een foto: wit, zonder vulling. */
.knop--opfoto {
  background: transparent;
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}
.knop--opfoto:hover { background: #fff; border-color: #fff; color: var(--c-ink); box-shadow: none; }

.knop--vol { background: var(--c-op-donker); border-color: var(--c-op-donker); color: var(--c-ink); }
.knop--vol:hover { background: #fff; border-color: #fff; color: var(--c-ink); box-shadow: none; }

.knop--kaal {
  background: none; border: none; padding: 0;
  color: var(--c-ink-soft);
  text-transform: none; letter-spacing: 0; font-weight: 400;
  text-decoration: underline; font-size: var(--fs-sm);
  box-shadow: none;
}
.knop--kaal:hover { background: none; color: var(--c-signal); box-shadow: none; }

.knop--breed { width: 100%; }

/* Tekstlink met een pijltje dat een duwtje krijgt. */
.pijllink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-merk-diep);
}
.pijllink svg { transition: transform var(--vloei); }
.pijllink:hover svg { transform: translateX(5px); }

/* ==========================================================================
   Formulieren
   ========================================================================== */

label { display: block; }

.veld { margin-bottom: var(--sp-4); }
.veld > .veldnaam {
  display: block;
  font-size: 11px;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-ink-soft);
  margin-bottom: 7px;
}
.veld > .veldhint { display: block; font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: 6px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="url"], input[type="search"], input[type="password"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 13px 17px;
  transition: border-color var(--vloei), box-shadow var(--vloei);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-merk);
  box-shadow: 0 0 0 3px var(--c-creme);
  outline: none;
}
textarea { resize: vertical; min-height: 92px; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.vink {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.vink input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--c-merk); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Meldingen ------------------------------------------------------------ */

.melding {
  border-left: 3px solid var(--c-merk);
  background: var(--c-creme);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  max-width: var(--maat-tekst);
}
.melding--fout  { border-left-color: var(--c-signal); background: var(--c-signal-bg); color: var(--c-ink); }
.melding--goed  { border-left-color: var(--c-ok);     background: var(--c-ok-bg); }
.melding--wacht { border-left-color: var(--c-wacht);  background: var(--c-wacht-bg); }

/* --- Labelchips ----------------------------------------------------------- */

.chip {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-rond);
  background: var(--c-creme);
  color: var(--c-ink-soft);
  white-space: nowrap;
}
.chip--accent { background: var(--c-zand);        color: var(--c-merk-diep); }
.chip--signal { background: var(--c-signal-bg);   color: var(--c-signal); }
.chip--ok     { background: var(--c-ok-bg);       color: var(--c-ok); }
.chip--wacht  { background: var(--c-wacht-bg);    color: var(--c-wacht); }

/* --- Hulpklassen ---------------------------------------------------------- */

.verborgen { display: none !important; }
.alleen-lezers {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.scrolbaar { overflow-x: auto; }

/* ==========================================================================
   Beweging
   --------------------------------------------------------------------------
   Twee soorten: de binnenkomst op de homepage, en onderdelen die zichzelf
   tonen zodra je erlangs scrolt. Beide staan meteen stil en beide luisteren
   naar de systeeminstelling voor minder beweging.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .opkomst { animation: opkomen .9s cubic-bezier(.2, .7, .3, 1) backwards; }
  .opkomst--1 { animation-delay:  80ms; }
  .opkomst--2 { animation-delay: 200ms; }
  .opkomst--3 { animation-delay: 320ms; }
  .opkomst--4 { animation-delay: 440ms; }
  .opkomst--5 { animation-delay: 560ms; }

  /* Onthullen bij het scrollen. De klasse wordt door effecten.js gezet. */
  [data-onthul] { opacity: 0; transform: translateY(22px); }
  [data-onthul].is-zichtbaar {
    opacity: 1; transform: none;
    transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  }
  [data-onthul][data-vertraag="1"].is-zichtbaar { transition-delay: .1s; }
  [data-onthul][data-vertraag="2"].is-zichtbaar { transition-delay: .2s; }
  [data-onthul][data-vertraag="3"].is-zichtbaar { transition-delay: .3s; }
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}