/* ==========================================================================
   base.css  -  reset, typografie, layout, header en footer
   Leunt volledig op tokens.css. Sentence case overal, geen uppercase in UI.
   Zo doet fakro.pl het ook: een label onderscheidt zich met formaat en kleur
   (klein, gewicht 500, gedempt grijs), nooit met kapitalen of letterafstand.
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--tekst-basis);
  font-weight: var(--gew-normaal);
  line-height: var(--regel);
  color: var(--inkt);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* gewone pijl boven tekst, geen tekstcursor (wens Finn 2026-11-02);
     selecteren en kopiëren blijft gewoon werken */
  cursor: default;
}
/* waar je wel typt, blijft de tekstcursor; links houden de handje-cursor */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
textarea, [contenteditable] { cursor: text; }

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

/* --- links: kleur plus wipe-in onderstreping ------------------------- */
a { color: var(--groen-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.link-wipe {
  position: relative;
  text-decoration: none;
  color: inherit;
}
.link-wipe::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--overgang);
}
.link-wipe:hover { text-decoration: none; }
.link-wipe:hover::after,
.link-wipe:focus-visible::after { transform: scaleX(1); }

/* --- koppen: semibold, strakke letterafstand, geen bold ------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--ruimte-2);
  font-weight: var(--gew-semibold);
  line-height: var(--regel-kop);
  letter-spacing: var(--spatie-kop);
  color: var(--inkt);
  text-wrap: balance;
}
h1 { font-size: var(--tekst-2xl); }
h2 { font-size: var(--tekst-lg); }
h3 { font-size: var(--tekst-md); }
h4 { font-size: var(--tekst-basis); }

/* nadruk in een kop is groen, niet vet */
h1 em, h2 em, h3 em { font-style: normal; color: var(--groen); }

p { margin: 0 0 var(--ruimte-2); max-width: var(--breedte-tekst); }

/* --- layout: 1440 buiten, ~1312 inhoud, 80px zijmarge desktop ------ */
.inhoud {
  width: 100%;
  max-width: var(--breedte-max);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .inhoud { padding-inline: min(5%, 80px); }
}
@media (min-width: 1024px) {
  .inhoud { padding-inline: 80px; }
}

.sectie { padding-block: var(--ruimte-5); }
.sectie--ruim { padding-block: var(--ruimte-6); }
.sectie--grijs { background: var(--vlak); }

/* --- header: sticky, wit, dunne grijze onderrand, geen schaduw ---- */
.site-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vlak-2);
  border-bottom: 1px solid var(--grijs-kop-lijn);
}
.site-kop__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  padding-block: var(--ruimte-1);
  min-height: 64px;
}
.site-kop__logo { display: inline-flex; align-items: center; }
.site-kop__logo img { height: 28px; width: auto; }
.site-kop__nav {
  display: flex;
  gap: var(--ruimte-3);
  font-size: var(--tekst-sm);
  font-weight: var(--gew-semibold);
}
.site-kop__nav a { color: var(--inkt); }
.site-kop__nav a[aria-current="page"] { color: var(--groen); }

/* --- mobiel: drie rijen onder elkaar ------------------------------
   Onder 900px paste de zoekbalk niet meer tussen het logo en het menu: hij
   werd platgeknepen tot een streepje en Finn vond hem op zijn telefoon niet
   terug. De balk wrapt nu, en elk onderdeel krijgt een eigen rij: logo
   gecentreerd, daaronder de drie categorieen gespreid van rand tot rand,
   daaronder het zoekveld. Keuze van Finn op 2026-09-24: het menu links tegen
   de rand met alles op een kluitje voelde smal op een telefoon, en de
   tikgebieden waren te klein. .kop-zoek staat op order 3 (componenten.css),
   dus het zoekveld blijft onderaan ook al staat het in de HTML voor het menu. */
@media (max-width: 899px) {
  /* gemeten op 390px: logo 22, menu 31, zoekveld 39, drie rijen met 6px
     ertussen plus 8px extra onder het logo, plus 2x6 padding en 1px rand,
     samen 124,4. Naar boven afgerond, want de waarde stuurt de sprong naar
     ankers in de pagina: te ruim is onschuldig, te krap schuift de titel
     onder de sticky kop. */
  :root { --kop-hoogte: 125px; }
  .site-kop__balk {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: var(--ruimte-2);
    min-height: 0;
    padding-block: 6px;
  }
  /* rij 1: logo in het midden */
  /* 8px bovenop de row-gap van 6, dus 14px lucht onder het logo. Keuze van
     Finn op 2026-09-24: met alleen de row-gap stonden het logo en de drie
     categorieen te kort op elkaar. */
  .site-kop__logo { flex: 1 0 100%; justify-content: center; margin-bottom: 8px; }
  .site-kop__logo img { height: 22px; }
  /* rij 2: de drie categorieen over de volle breedte, met lucht om de tekst
     zodat er met een duim op te mikken valt */
  .site-kop__nav {
    flex: 1 0 100%;
    justify-content: space-between;
    gap: 0;
    font-size: var(--tekst-sm);
    /* Bovengrens, want deze regel loopt door tot 899px. Zonder grens staat
       "Dakramen" op een tablet tegen de linkerrand en "Zonwering" tegen de
       rechter, met een gat van een halve schermbreedte ertussen. Op een
       telefoon (tot 420px tekstbreedte) verandert er niets, daar blijft het
       rand tot rand zoals Finn koos. */
    max-width: 420px;
    margin-inline: auto;
  }
  .site-kop__nav a { padding: 4px 2px; }
}

/* --- footer: warm bijna-zwart ----------------------------------- */
.site-voet {
  margin-top: var(--ruimte-6);
  background: var(--voet);
  color: rgba(255, 255, 255, .9);
  font-size: var(--tekst-sm);
}
.site-voet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ruimte-4);
  padding-block: var(--ruimte-5);
}
.site-voet strong {
  color: #fff;
  font-weight: var(--gew-semibold);
  display: block;
  margin-bottom: var(--ruimte-1);
}
.site-voet a { color: rgba(255, 255, 255, .9); }
.site-voet a:hover { color: #fff; }
.site-voet__slot {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: var(--ruimte-2);
  color: rgba(255, 255, 255, .7);
  font-size: var(--tekst-xs);
}

/* --- veldlabel: klein, gedempt, geen kapitalen ----------------- */
/* De fakro.pl-manier om een veld of sectie te benoemen. Onderscheid komt
   van formaat en kleur, niet van blokletters. */
.label {
  font-size: var(--tekst-xs);
  font-weight: var(--gew-medium);
  color: var(--grijs-gedempt);
}

/* --- hulpklassen --------------------------------------------- */
.tekst-zacht { color: var(--grijs-gedempt); }
.tekst-klein { font-size: var(--tekst-sm); }
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .link-wipe::after { transition: none; }
}