/* ForestEdge versie 3.0 - basis.
   Alle maten en kleuren komen uit tokens.css, dat gegenereerd wordt uit
   bron/content/ontwerpsysteem.json. Hier staan geen losse waarden. */

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

/* De pagina mag op geen enkele breedte opzij te schuiven zijn (19-10, gemeld
   vanaf een iPhone). Een enkel te breed element maakt de hele pagina
   sleepbaar, en dan loopt alles wat 100 procent breed is niet meer tot de
   rand: je ziet een witte strook naast de inhoud.

   clip en niet hidden: overflow hidden maakt van html of body een
   scrollvlak, en daarmee werkt de plakkende kop niet meer en springen
   ankers verkeerd. clip knipt alleen af en laat dat alles heel.

   Dit is een vangnet, geen vergunning: een blok dat te breed is hoort
   gewoon opgelost te worden. De browsercontrole meet daarom nog steeds de
   breedte van het document en valt om zodra iets uitsteekt. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--fe-font-tekst);
  font-size: var(--fe-ts-tekst);
  font-weight: 400;
  line-height: var(--fe-ts-tekst-regel);
  color: var(--fe-tekst);
  background: var(--fe-wit);
}

/* ---- koppen ---------------------------------------------------------- */
/* hyphens: manual, want automatisch afbreken maakte op mobiel van
   managementoverleg "managementoverl-eg". text-wrap: balance houdt een kop
   van een paar woorden bij elkaar in plaats van een los woord op regel twee. */

h1, h2, h3, h4 {
  /* Hoe groter de kop, hoe meer hij onder zich nodig heeft: een h2 van 34 px
     met 16 px eronder plakt aan zijn eigen tekst (gemeten 25-10-2026, op elke
     pagina). Een h3 of h4 blijft juist dicht bij zijn tekst, want die korte
     afstand is precies wat de twee aan elkaar koppelt. */
  margin: 0 0 var(--fe-ritme-kop-blok);
  font-family: var(--fe-font-kop);
  font-weight: 700;
  hyphens: manual;
  text-wrap: balance;
}
h3, h4 { margin-bottom: var(--fe-ritme-kop-tekst); }

h1 { font-size: var(--fe-ts-h1); line-height: var(--fe-ts-h1-regel); color: var(--fe-kop); }
h2 {
  font-size: var(--fe-ts-h2);
  line-height: var(--fe-ts-h2-regel);
  color: var(--fe-inkt);
  /* Lucht boven een kop, zodat hij bij de tekst eronder hoort en niet aan de
     alinea erboven plakt. Een alinea geeft maar 16 px mee en dat las te dicht.
     Staat de kop vooraan in zijn blok, dan zorgt de sectie al voor de ruimte. */
  margin-top: var(--fe-ritme-boven-kop);
}
h2:first-child { margin-top: 0; }
h3 { font-size: var(--fe-ts-h3); line-height: var(--fe-ts-h3-regel); color: var(--fe-kop); }
h4 { font-size: var(--fe-ts-h4); line-height: var(--fe-ts-h4-regel); color: var(--fe-kop); }

p { margin: 0 0 var(--fe-ritme-alinea); }
p:last-child { margin-bottom: 0; }

.fe-intro { font-size: var(--fe-ts-intro); line-height: var(--fe-ts-intro-regel); }
.fe-klein { font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }

/* eyebrow boven een kop */
.fe-label {
  display: block;
  margin-bottom: var(--fe-ruimte-8);
  font-family: var(--fe-font-kop);
  font-size: var(--fe-ts-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fe-olijf-tekst);
}

/* ---- links ----------------------------------------------------------- */
/* onderstreept, want kleur alleen is niet genoeg om een link herkenbaar
   te maken (toegankelijkheidsbevinding uit het rapport). */

/* Drie rollen, een systeem (25-10-2026). Tot die dag hing het af van het
   toeval of een link onderstreept was: de basisregel pakte elke link in een
   p of een li, en of de bouw een losse link in een <p> of in een <div> zette
   verschilde per blok. Zo stond "contact@forest-edge.nl" onderstreept naast
   een even belangrijke link die dat niet was, en waren zelfs de foto's in een
   collage onderstreept.

     1. link in lopende tekst   merkkleur en onderstreept, altijd
     2. zelfstandige actielink  merkkleur, onderstreept bij aanwijzen en focus
     3. link om een heel blok   geen eigen kleur en geen streep; de kaart,
                                tegel of foto is zelf de knop

   Onderstrepen blijft dus waar het moet: in lopende tekst is kleur alleen
   niet genoeg om een link te herkennen (toegankelijkheidsbevinding uit het
   rapport). Een actielink staat op zijn eigen regel, met een pijl of een
   icoon ernaast, en heeft die streep niet nodig om op te vallen. */

a { color: var(--fe-olijf-tekst); }
:is(p, li) a { text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--fe-actie); }

/* rol 2: de zelfstandige actielinks, bij naam */
.fe-actielink,
:is(.fe-cta__links, .fe-reviews__alle, .fe-kort__tel, .fe-kort__vraag,
    .fe-ruimtebalk__knoppen) a,
.fe-kaart__meer,
.fe-collage a,
.fe-galerij a,
.fe-logo,
.fe-skip { text-decoration: none; }

.fe-actielink:hover, .fe-actielink:focus-visible,
:is(.fe-cta__links, .fe-reviews__alle, .fe-kort__tel, .fe-kort__vraag,
    .fe-ruimtebalk__knoppen) a:hover,
:is(.fe-cta__links, .fe-reviews__alle, .fe-kort__tel, .fe-kort__vraag,
    .fe-ruimtebalk__knoppen) a:focus-visible,
.fe-kaart:hover .fe-kaart__meer,
.fe-kaart:focus-visible .fe-kaart__meer,
.fe-collage a:hover, .fe-collage a:focus-visible,
.fe-galerij a:hover, .fe-galerij a:focus-visible,
.fe-skip:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--fe-actie);
  outline-offset: 2px;
}

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

/* ---- indeling -------------------------------------------------------- */

/* ---- het ritme binnen een sectie (25-10-2026, cosmetische ronde) -----
   Afstand hoort bij elkaar te zetten wat bij elkaar hoort. Tot deze dag stond
   binnen een sectie alles op 16 of 24 px: de afstand tussen een kop en zijn
   eigen tekst was dezelfde als die tussen twee losse blokken, en dan doet
   afstand geen werk meer. Nu vier niveaus:

     boven een h2 die volgt op iets   48 px mobiel, 64 px desktop
     tussen twee blokken              32 px mobiel, 48 px desktop
     kop naar eigen inhoud            24 px (h1, h2) of 16 px (h3, h4)
     tussen twee alinea's             20 px

   Alle ruimte komt van de bovenmarge van wat volgt, en de onderste marge van
   de blokken zelf gaat uit. Anders tellen twee marges bij elkaar op zodra het
   volgende blok niet samenvalt (een knop is inline-flex en doet dat niet: op
   de home stond daar 68 px in plaats van 48).

   De volgorde van de regels is de rangorde, want ze hebben gelijke
   specificiteit en de laatste wint. Daarom staat "boven een kop" voor de twee
   kopregels: een h3 direct onder een h2 hoort bij die h2 (24 px), niet op
   64 px afstand. */
main .fe-sectie > .fe-inhoud > * { margin-block: 0; }
main .fe-sectie > .fe-inhoud > * + * { margin-top: var(--fe-ritme-blok); }
main .fe-sectie > .fe-inhoud > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: var(--fe-ritme-alinea); }
main .fe-sectie > .fe-inhoud > * + h2 { margin-top: var(--fe-ritme-boven-kop); }
main .fe-sectie > .fe-inhoud > :is(h1, h2) + * { margin-top: var(--fe-ritme-kop-blok); }
main .fe-sectie > .fe-inhoud > :is(h3, h4) + * { margin-top: var(--fe-ritme-kop-tekst); }
/* de link "alle reviews" hoort bij de reviews erboven, niet bij het volgende blok */
main .fe-sectie > .fe-inhoud > .fe-reviews + .fe-reviews__alle { margin-top: var(--fe-ruimte-16); }

/* De hero staat buiten .fe-sectie en had zijn eigen marges, die bij elkaar
   optelden: 44 px tussen de introzin en de knoppen in plaats van 24. Zelfde
   model: de ruimte komt van wat volgt. Het label hoort tegen de h1 aan, dat
   is een paar. */
.fe-hero__over .fe-inhoud > * { margin-block: 0; }
.fe-hero__over .fe-inhoud > * + * { margin-top: var(--fe-ritme-alinea); }
.fe-hero__over .fe-inhoud > .fe-label + * { margin-top: var(--fe-ruimte-8); }
.fe-hero__over .fe-inhoud > h1 + * { margin-top: var(--fe-ritme-kop-blok); }
.fe-hero__over .fe-inhoud > * + .fe-hero__knoppen { margin-top: var(--fe-ruimte-24); }

.fe-sectie { padding: var(--fe-sectie) 0; }
.fe-sectie--compact { padding: var(--fe-sectie-compact) 0; }
.fe-sectie--warm { background: var(--fe-warmgrijs); }
.fe-sectie--inkt { background: var(--fe-inkt); color: var(--fe-papier); }
.fe-sectie--inkt :is(h1, h2, h3, h4) { color: var(--fe-papier); }

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

/* lopende tekst nooit breder dan 66 tekens */
.fe-meet { max-width: var(--fe-tekstkolom); }

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

/* ---- knoppen --------------------------------------------------------- */
/* Vier rollen uit Q9. Primair maximaal een per scherm. Nadruk komt van
   kleur, hoogte en alleen-zijn, niet van grote letters. */

.fe-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fe-ruimte-8);
  min-height: var(--fe-knop-hoog-2);
  padding: var(--fe-ruimte-12) var(--fe-ruimte-24);
  border: 2px solid transparent;
  border-radius: var(--fe-rond-knop);
  font-family: var(--fe-font-kop);
  font-size: var(--fe-ts-menu);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Op een smalle telefoon (iPhone SE, 320 px) is een knop die niet mag
   afbreken breder dan het venster: "Bekijk de heidagpakketten" meet 302 px en
   er is 280 px. Daar mag de tekst dus wel over twee regels. Vanaf 360 px, de
   smalste telefoon die nu nog verkocht wordt, blijft een knop een regel. */
@media (max-width: 359.98px) { .fe-knop { white-space: normal; } }

.fe-knop--primair {
  min-height: var(--fe-knop-hoog);
  padding-inline: var(--fe-ruimte-32);
  background: var(--fe-actie);
  color: var(--fe-wit);
  font-size: var(--fe-ts-tekst);
}
.fe-knop--primair:hover { background: #B2452A; color: var(--fe-wit); }

.fe-knop--secundair {
  background: var(--fe-wit);
  border-color: var(--fe-inkt);
  color: var(--fe-inkt);
}
.fe-knop--secundair:hover { background: var(--fe-inkt); color: var(--fe-wit); }

.fe-knop--tertiair {
  min-height: var(--fe-raak);
  padding-inline: 0;
  color: var(--fe-olijf-tekst);
}
.fe-knop--tertiair:hover { color: var(--fe-actie); }

/* Een stuk tekst dat niet mag afbreken. Gebruikt voor het telefoonnummer op
   de CTA-tegel: daar stond "Bel Andrea: 0318" op de ene regel en "761 066"
   op de volgende (ronde 4, los punt 18-10). De regel breekt nu voor het
   nummer in plaats van erin. */
.fe-nowrap { white-space: nowrap; }

/* ---- velden ---------------------------------------------------------- */

/* Ronde 4, punt 5: het formulier mocht compacter. Het label stond 8 px van
   zijn veld en elk veld 16 px van het volgende, en onder elk veld hing een
   lege foutregel die ook nog eens 8 px kostte. Dat is per veld 20 px lucht om
   niets. De veldhoogte zelf blijft 48 px: dat is het tikvlak. */
.fe-veld { display: block; margin-bottom: var(--fe-ruimte-12); }
.fe-veld > span {
  display: block;
  margin-bottom: var(--fe-ruimte-4);
  font-size: var(--fe-ts-label); line-height: var(--fe-ts-klein-regel);
  color: var(--fe-inkt);
}
.fe-veld :is(input, textarea) {
  width: 100%;
  min-height: var(--fe-veld-hoog);
  padding: var(--fe-ruimte-12) var(--fe-ruimte-16);
  border: var(--fe-veldrand);
  border-radius: var(--fe-rond-vlak);
  background: var(--fe-wit);
  font: inherit;
  color: var(--fe-inkt);
}
.fe-veld :is(input, textarea):focus {
  outline: none;
  border-color: var(--fe-actie);
  /* De maat zit in het token (3px plus kleur), dus hier geen 3px meer voor:
     met beide stond er 0 0 0 3px 3px <kleur>, vijf lengtes, en dat is geen
     geldige box-shadow. Gevolg: het veld had helemaal geen zichtbare focus. */
  box-shadow: 0 0 0 var(--fe-veldring);
}
.fe-fout { display: block; margin-top: var(--fe-ruimte-4); font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); color: var(--fe-fout); }
/* Een foutregel zonder tekst hoort geen ruimte te nemen. */
.fe-form__error:empty { display: none; }
/* Een veld dat is afgekeurd moet je zien, niet alleen horen. Tot ronde 4 zat
   er alleen aria-invalid op en bleef de rand grijs; wie op Versturen drukte
   met een leeg verplicht veld, zag niets gebeuren. */
.fe-veld :is(input, textarea)[aria-invalid="true"] { border-color: var(--fe-fout); }

.fe-icoon { flex-shrink: 0; }

/* Skiplink: de eerste halte van de tab-toets, zodat iemand die met het
   toetsenbord werkt niet eerst door de hele kop hoeft. WCAG 2.2 AA (EN 301 549
   v4.1.1). Hij staat buiten beeld tot hij focus krijgt en komt dan boven de
   vaste kop uit, zodat de focus niet onder een plakkende balk verdwijnt. */
.fe-skip {
  position: fixed;
  top: var(--fe-ruimte-8);
  left: var(--fe-ruimte-8);
  z-index: 1000;
  transform: translateY(-200%);
  background: var(--fe-inkt);
  color: var(--fe-papier);
  padding: var(--fe-ruimte-8) var(--fe-ruimte-16);
  border-radius: var(--fe-rond-vlak);
  text-decoration: none;
}
.fe-skip:focus { transform: translateY(0); }
/* main krijgt tabindex="-1" zodat de sprong de focus echt verzet; de rand
   eromheen hoort daar niet bij, de skiplink zelf heeft zijn eigen focus. */
main:focus { outline: none; }