/* ============================================
   Global — layout-primitief, koppen, tekst, knoppen
   ============================================ */

/* --- Layout-primitief -------------------------------------------------
   .box is een flexcontainer met dezelfde rekensom als de containers van het
   origineel: eigen padding (standaard 10px), gap (standaard 20px) en breedte
   via variabelen. Elke .box zet zijn variabelen opnieuw, zodat niets van de
   ouder doorlekt. Een component zet alleen wat afwijkt, bijvoorbeeld:
     .hero { --dir: row; --gap: 0px; --pad: 0px; }
   .box--boxed centreert de inhoud in .box__in (max. --content, standaard de
   containerbreedte); de verticale padding zit dan op .box__in. */
.box {
  --dir: column;
  --wrap: nowrap;
  --wrap-m: wrap;
  --justify: normal;
  --align: normal;
  --gap: var(--widget-gap);
  --pad: 10px;
  --pt: var(--pad); --pr: var(--pad); --pb: var(--pad); --pl: var(--pad);
  --w: 100%;
  --grow: 0;
  --shrink: 1;
  --minh: initial;
  --content: min(100%, var(--container));
  --bg: transparent;

  display: flex;
  flex-direction: var(--dir);
  flex-wrap: var(--wrap);
  justify-content: var(--justify);
  align-items: var(--align);
  gap: var(--gap);
  padding: var(--pt) var(--pr) var(--pb) var(--pl);
  width: var(--w);
  min-width: 0;
  min-height: var(--minh);
  flex: var(--grow) var(--shrink) auto;
  position: relative;
  background-color: var(--bg);
}

.box--boxed {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  gap: 0;
  padding-block: 0;
}

.box__in {
  display: flex;
  flex-direction: var(--dir);
  flex-wrap: var(--wrap);
  justify-content: var(--justify);
  align-items: var(--align);
  gap: var(--gap);
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content);
  height: 100%;
  margin: 0 auto;
  padding-block: var(--pt) var(--pb);
}

/* Kinderen van een .box mogen krimpen onder hun inhoud, zoals in het origineel */
.box > *, .box__in > * { min-width: 0; }

@media (max-width: 767px) {
  .box { --wrap: var(--wrap-m); }
}

/* Zichtbaarheid per breekpunt (zoals het origineel per apparaat verbergt) */
@media (max-width: 767px) { .hide-m { display: none !important; } }
@media (min-width: 768px) and (max-width: 880px) { .hide-mx { display: none !important; } }
@media (min-width: 881px) { .hide-from-t { display: none !important; } }
@media (max-width: 880px) { .hide-to-mx { display: none !important; } }
@media (max-width: 1200px) { .hide-to-tx { display: none !important; } }
@media (min-width: 1025px) { .hide-from-tx { display: none !important; } }
@media (max-width: 1024px) { .hide-to-t { display: none !important; } }

/* --- Koppen en tekst -------------------------------------------------- */
.heading {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: var(--font-main);
  font-size: var(--fs-primary);
  font-weight: var(--fw-primary);
  letter-spacing: var(--ls-primary);
  color: var(--color-primary);
}

/* Sectiekop: 38px vet, gecentreerd (op mobiel 30px) */
.section-title {
  font-size: 38px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 767px) {
  .section-title { font-size: 30px; }
}

/* Overlay-laag voor secties met een achtergrondfoto */
.has-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.has-overlay > .box__in { position: relative; }

/* Externe reviewwidget (ReviewChicken): altijd precies de breedte van de kolom,
   zoals de widget in het origineel (anders rekt een meeschalende mobiele kolom
   mee met de lange rij review-kaarten). */
.reviews-widget { width: 100%; max-width: 100%; min-width: 0; }
.reviews-widget > :not(script) { display: block; max-width: 100%; }

/* WordPress-emoji als afbeelding, zoals op het origineel */
img.emoji {
  display: inline;
  width: 1em;
  height: 1em;
  margin: 0 0.07em;
  vertical-align: -0.1em;
  border: none;
  box-shadow: none;
}

.t-primary {
  font-size: var(--fs-primary);
  font-weight: var(--fw-primary);
  letter-spacing: var(--ls-primary);
}
.t-secondary { font-size: var(--fs-secondary); font-weight: var(--fw-secondary); }
.t-title { font-size: var(--fs-title); font-weight: var(--fw-title); }
.t-lead { font-size: var(--fs-lead); font-weight: var(--fw-lead); }
.t-kicker { font-size: var(--fs-kicker); font-weight: var(--fw-kicker); text-transform: uppercase; }

.text {
  font-family: var(--font-main);
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  color: var(--color-text);
}

/* --- Knoppen -----------------------------------------------------------
   .knop staat naast .btn als meethaakje voor tools/capture.js (hover-staten); geen eigen stijl. */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border: 3px solid var(--btn-border, var(--btn-bg));
  border-radius: var(--radius);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-family: var(--font-main);
  font-size: var(--fs-accent);
  font-weight: var(--fw-accent);
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  transition: all var(--t-button);
}
.btn:hover, .btn:focus-visible { color: var(--btn-color); }
.btn__text { display: block; }

/* geel, vol (hover: transparant met gele rand) */
.btn--accent { --btn-bg: var(--color-accent); --btn-color: var(--color-text); }
@media (hover: hover) {
  .btn--accent:hover { background-color: transparent; color: var(--color-accent); }
}
.btn--accent:focus-visible { background-color: transparent; color: var(--color-accent); }

/* wit omlijnd */
.btn--outline { --btn-bg: transparent; --btn-border: var(--color-white); --btn-color: var(--color-white); }

/* koper */
.btn--copper { --btn-bg: var(--color-copper); --btn-color: var(--color-text); }

/* "grow"-effect van het origineel: schaal 1.1 bij hover */
.btn--grow { transition: transform var(--t-button); }
@media (hover: hover) {
  .btn--grow:hover { transform: scale(1.1); }
}
.btn--grow:focus-visible, .btn--grow:active { transform: scale(1.1); }

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

/* --- Hulpklassen ------------------------------------------------------- */
.sr-only, .skip-link {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  width: auto; height: auto; margin: 0; clip: auto;
  top: 5px; left: 5px; z-index: 100000;
  padding: 15px 23px 14px;
  background: #f1f1f1; color: #21759b;
  font-size: 14px; font-weight: 700;
}