/* ============================================
   Globale stijlen — basis, container, typografie-rollen, knoppen.
   Alle waarden komen uit de Elementor-kit (post-6.css) en zijn gemeten in capture/live.
   ============================================ */

body {
  background-color: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

a { color: var(--color-text); }
h1, h2 { color: var(--color-primary); }
p { margin-block-end: 0; }            /* kit: p { margin-block-end: 0 } */
img { border-radius: var(--radius-img); } /* kit: img { border-radius: 12px } */
/* Eleventy Image zet elke <img> in een <picture>; voor de opmaak telt dat omhulsel niet mee,
   zodat de <img> zich in flex, grid en percentages gedraagt als direct kind. */
picture { display: contents; }
picture > source { display: none; } /* anders tellen ze als (lege) flex-items met gap */

.fa { display: inline-block; width: var(--fa-w, 1em); height: 1em; fill: currentColor; vertical-align: -0.125em; overflow: visible; }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; overflow: hidden;
  top: -10000em; margin: -1px;
  position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto !important; clip-path: none; height: auto; width: auto;
  background: #eee; color: #333; display: block; font-size: 1rem; line-height: normal;
  left: 5px; top: 5px; padding: 12px 24px; z-index: 100000;
}

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

/* --------------------------------------------
   Container — de "boxed" binnenkant van een Elementor-sectie:
   max 1240px, op tablet max 1024px, op mobiel de volle breedte.
   -------------------------------------------- */
.container {
  width: 100%;
  max-width: min(100%, var(--container));
  margin-inline: auto;
}
@media (max-width: 1024px) { :root { --container: 1024px; } }
@media (max-width: 767px)  { :root { --container: 100%; } }

/* --------------------------------------------
   Typografie-rollen die op (bijna) elke pagina terugkomen
   -------------------------------------------- */

/* Kleine oranje kicker boven een sectiekop ("RESULTATEN", "WAT WIJ DOEN") */
.eyebrow {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow--light { color: var(--color-white); }

/* Sectiekop (kit "secondary"): Red Hat Display 44/900, mobiel 32 */
.heading-2 {
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--h-secondary-size);
  font-weight: 900;
  line-height: var(--h-secondary-lh);
  letter-spacing: -0.9px;
  color: var(--color-primary);
}
.heading-2 em,
.heading-2 .accent { color: #ee8532; font-style: italic; }
.heading-2--light { color: var(--color-white); }

/* --------------------------------------------
   Knoppen — kit-knop: Poppins 16/600, 13px 26px, radius 7px.
   Elementor tilt de knop 2px op bij hover (transform 0.4s).
   -------------------------------------------- */
.knop {
  display: inline-block;
  padding: 13px 26px;
  border: 0 none;
  border-radius: var(--radius-btn);
  background-color: var(--color-accent);
  color: var(--color-white);
  fill: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: 600;
  line-height: var(--ui-lh);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-color), color var(--t-color), border-color var(--t-color), transform var(--t-transform);
}
@media (hover: hover) {
  .knop:hover { transform: translateY(-2px); color: var(--color-white); }
  .knop--accent:hover { background-color: var(--color-accent-hover); }
  .knop--outline-light:hover { background-color: #ffffff17; border-color: var(--color-white); }
  .knop--cream:hover { background-color: #1d2337; color: var(--color-white); }
}
.knop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* donker met lichte rand (hero "Bekijk resultaten") */
.knop--outline-light {
  background-color: var(--color-primary);
  border: 1.5px solid #ffffff52;
}
/* crème (footer-CTA "Begin direct") */
.knop--cream {
  background-color: var(--color-cream);
  color: var(--color-text);
}

/* Kit-standaard op mobiel is 11px 22px; vrijwel elke knop op de site overschrijft dat met 13px 26px.
   Gebruik .knop--kit voor de uitzonderingen die de kitwaarde houden. */
@media (max-width: 767px) {
  .knop--kit { padding: 11px 22px; }
}

/* wit met donkere rand ("Bekijk alle resultaten") */
.knop--outline-dark {
  background-color: var(--color-white);
  color: var(--color-text);
  border: 1.5px solid #0000002b;
}
@media (hover: hover) {
  .knop--outline-dark:hover { background-color: #ffffff17; color: var(--color-text); border-color: var(--color-text); }
}

/* --------------------------------------------
   Icoonlijst (Elementor "icon list"): per lijst instelbaar met custom properties.
   --ruimte = afstand tussen items (verdeeld als padding-onder + marge-boven, zoals Elementor)
   -------------------------------------------- */
.icoonlijst {
  --icoon-maat: 1em; --icoon-box: auto; --icoon-pad: 0px; --icoon-kleur: currentColor;
  --icoon-uitlijning: center; --icoon-verschuiving: 0px; --ruimte: 10px;
  --tekst-font: var(--font-ui); --tekst-maat: var(--body-size); --tekst-gewicht: 400; --tekst-lh: var(--body-lh); --tekst-kleur: inherit;
  margin: 0; padding: 0; list-style: none;
}
.icoonlijst__item { display: flex; align-items: var(--icoon-uitlijning); }
.icoonlijst__item:not(:last-child) { padding-bottom: calc(var(--ruimte) / 2); }
.icoonlijst__item:not(:first-child) { margin-top: calc(var(--ruimte) / 2); }
.icoonlijst__icoon {
  position: relative;
  top: var(--icoon-verschuiving);
  display: flex; align-items: center; flex-shrink: 0;
  width: var(--icoon-box);
  height: var(--icoon-maat);
  padding-right: var(--icoon-pad);
  color: var(--icoon-kleur);
  font-size: var(--icoon-maat);
}
.icoonlijst__icoon .fa { width: var(--icoon-maat); height: var(--icoon-maat); vertical-align: 0; }
.icoonlijst__tekst {
  padding-left: 5px;
  font-family: var(--tekst-font);
  font-size: var(--tekst-maat);
  font-weight: var(--tekst-gewicht);
  line-height: var(--tekst-lh);
  color: var(--tekst-kleur);
}