/* ==========================================================================
   Starter: thema-CSS
   Header met megamenu en mobiel menu, kruimelpad, footer, containers en paginakop. Gebruikt de variabelen uit de ACSS-basis.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
/* Inhoud even breed als brede blokken (content-width), met de gutter er buiten. */
.starter-container {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.screen-reader-text,
.skip-link:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  z-index: 1000;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius-m);
}

.starter-main {
  display: block;
  min-block-size: 50vh;
}

/* --------------------------------------------------------------------------
   Header
   De balk hangt aan beide kanten iets over de inhoudsbreedte heen (--starter-bar-overhang).
   Op mobiel zijn de marges klein, zodat de balk het scherm vult.
   -------------------------------------------------------------------------- */
.starter-header {
  --starter-logo-w: clamp(135px, 117px + 4.7vw, 200px);
  --starter-bar-h: 5rem;
  --starter-bar-overhang: var(--space-l);
  --starter-bar-max: calc(var(--content-width) + var(--starter-bar-overhang) * 2);
  --starter-head-pad: max(var(--space-xs), calc(var(--gutter) - var(--starter-bar-overhang)));
  position: relative;
  z-index: 20;
  padding-block: var(--space-s);
  padding-inline: var(--starter-head-pad);
}

.starter-header__utility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  inline-size: 100%;
  max-inline-size: var(--starter-bar-max);
  margin-inline: auto;
  margin-block-end: var(--space-s);
  padding-inline-end: var(--space-l);
}

.starter-header__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  inline-size: 100%;
  max-inline-size: var(--starter-bar-max);
  min-block-size: var(--starter-bar-h);
  margin-inline: auto;
  padding-inline: calc(var(--starter-logo-w) + var(--space-l)) var(--space-l);
  border-radius: 999px;
  background: var(--white);
}

.starter-header__logo {
  position: absolute;
  z-index: 5;
  inset-inline-start: var(--space-s);
  inset-block-start: 50%;
  translate: 0 -50%;
  display: block;
  line-height: 0;
  color: inherit;
}
.starter-header__logo svg {
  display: block;
  inline-size: var(--starter-logo-w);
  block-size: auto;
}
.starter-header__logo [id="logo-woord"] {
  fill: light-dark(var(--neutral), var(--neutral-semi-dark));
}
.starter-header__logo-text {
  font-weight: 800;
  font-size: var(--text-l);
}

.starter-menu-missing {
  align-self: center;
  margin: 0;
  font-size: var(--text-s);
  color: var(--neutral-dark);
}

@media (max-width: 1279px) {
  .starter-header {
    --starter-bar-overhang: var(--space-m);
  }
  .starter-header__utility {
    padding-inline-end: var(--space-s);
  }
  .starter-header__bar {
    padding-inline: calc(var(--starter-logo-w) + var(--space-s) * 2) var(--space-s);
  }
}

/* --------------------------------------------------------------------------
   Header zonder menu (template "Zonder menu (e-mailflow)")
   Alleen het staande logo linksboven, bovenaan 20 px aangesneden, en rechtsboven de schakelaar licht/donker.
   De header staat niet vast: het logo schuift mee uit beeld. Logomaat en plek zoals de Kickstart-header in Bricks.
   De header is zo hoog dat de inhoud (na --starter-header-gap) pas net onder het logo begint (--space-s lucht);
   een lange of gecentreerde titel valt er zo nooit achter.
   -------------------------------------------------------------------------- */
.starter-header-kaal {
  --starter-kaal-logo-w: clamp(100px, 15vw, 200px);
  --starter-kaal-logo-h: calc(var(--starter-kaal-logo-w) * 1.125);
  --starter-kaal-x: clamp(0.25rem, calc(1rem + 0.25vw), 2rem);
  --starter-kaal-cut: 20px;
  position: relative;
  z-index: 20;
  min-block-size: max(3.5rem, calc(var(--starter-kaal-logo-h) - var(--starter-kaal-cut) - var(--starter-header-gap) + var(--space-s)));
}
.starter-header-kaal__logo {
  position: absolute;
  inset-block-start: calc(var(--starter-kaal-cut) * -1);
  inset-inline-start: var(--starter-kaal-x);
  display: block;
  line-height: 0;
}
.starter-header-kaal__logo img,
.starter-header-kaal__logo svg {
  display: block;
  inline-size: var(--starter-kaal-logo-w);
  block-size: auto;
}
.starter-header-kaal .starter-scheme-toggle {
  position: absolute;
  inset-block-start: var(--space-m);
  inset-inline-end: max(1rem, var(--starter-kaal-x));
}

/* --------------------------------------------------------------------------
   Hoofdmenu: knoppen met pijltje
   Het groene driehoekje schuift weg en het blauwe pijltje komt van boven in beeld.
   -------------------------------------------------------------------------- */
.starter-nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.starter-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.3;
  color: var(--neutral);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.starter-nav__toggle:focus-visible {
  outline: 2px solid var(--secondary-dark);
  outline-offset: 4px;
  border-radius: 2px;
}

.starter-nav__icon {
  position: relative;
  flex: none;
  inline-size: 0.75em;
  block-size: 0.75em;
}
.starter-nav__icon::before,
.starter-nav__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.2s, transform 0.25s;
}
.starter-nav__icon::before {
  background: var(--tertiary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.starter-nav__icon::after {
  background: var(--secondary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M2.5 7l3.5 3.5L9.5 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateY(-40%);
}

.starter-nav__item.is-open > .starter-nav__toggle {
  color: var(--secondary-semi-dark);
}
.starter-nav__item.is-open > .starter-nav__toggle .starter-nav__icon::before {
  opacity: 0;
  transform: translateY(40%);
}
.starter-nav__item.is-open > .starter-nav__toggle .starter-nav__icon::after {
  opacity: 1;
  transform: none;
}
/*
 * Actief (sinds 0.9.21): de huidige pagina hoort bij dit hoofditem (de pagina zelf, een onderliggende pagina, of via het
 * kruimelpad, zoals een tool of een inspiratie-item). Blauwe tekst, net als bij openklappen; het pijltje blijft groen,
 * want het blauwe pijltje betekent dat het menu open is.
 */
.starter-nav__item.is-current > .starter-nav__toggle {
  color: var(--secondary-semi-dark);
}

/* --------------------------------------------------------------------------
   Megamenu: inhoud (desktop en mobiel)
   -------------------------------------------------------------------------- */
.starter-mega__card {
  display: flex;
  flex-direction: column;
}
.starter-mega__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: baseline;
  gap: var(--space-l);
  padding: var(--space-l) var(--space-m);
  background: var(--secondary-ultra-light);
}
.starter-mega__intro,
.starter-mega__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.starter-mega__lede {
  margin: 0;
  max-inline-size: 30ch;
  font-size: calc(var(--text-m) * 1.2);
  font-weight: 300;
  line-height: 1.3;
  color: var(--secondary-dark);
}
.starter-mega__label {
  margin: 0;
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--secondary-dark);
}
.starter-mega__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.starter-mega__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-m);
  font-weight: 300;
  color: var(--neutral);
  text-decoration: none;
}
.starter-mega__link::after {
  content: "";
  flex: none;
  inline-size: 0.7em;
  block-size: 0.7em;
  background: var(--secondary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h9M7 2.5L10.5 6 7 9.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s;
}
.starter-mega__link:hover {
  color: var(--secondary-semi-dark);
}
.starter-mega__link:hover::after {
  transform: translateX(3px);
}
.starter-mega__link[aria-current="page"] {
  color: var(--secondary-semi-dark);
}
.starter-mega__link:focus-visible {
  outline: 2px solid var(--secondary-semi-dark);
  outline-offset: 3px;
}
.starter-mega__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--white);
}
.starter-mega__cta-label {
  margin: 0;
  font-size: var(--h4);
  font-weight: 300;
  color: var(--secondary-semi-dark);
}

/* --------------------------------------------------------------------------
   Desktop (992px en breder): menu in de balk, megamenu klapt eronder open
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .starter-nav,
  .starter-nav__drawer,
  .starter-nav__list {
    display: flex;
    align-items: stretch;
  }
  .starter-nav__list {
    gap: var(--space-s);
  }
  .starter-nav__item {
    display: flex;
    align-items: center;
  }
  .starter-nav__item:hover > .starter-nav__toggle {
    color: var(--secondary-semi-dark);
  }

  /* Het megamenu hangt onder de balk, gecentreerd, 70% van de inhoudsbreedte. */
  .starter-mega {
    position: absolute;
    z-index: 10;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    inline-size: min(calc(var(--content-width) * 0.7), 100%);
    padding-block-start: var(--space-s);
    translate: -50% 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
  }
  .starter-nav__item.is-open > .starter-mega {
    z-index: 11;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s, transform 0.2s, visibility 0s;
  }
  .starter-mega__card {
    overflow: hidden;
    border-radius: var(--radius-xxl, 40px);
    background: var(--white);
    box-shadow: 0 12px 32px light-dark(oklch(0 0 0 / 0.12), oklch(0 0 0 / 0.55));
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .starter-nav__list {
    gap: var(--space-xs);
  }
  .starter-nav__toggle {
    gap: 0.3em;
    font-size: calc(var(--text-m) * 0.9);
  }
}

/* --------------------------------------------------------------------------
   Mobiel (tot 992px): wit uitschuifmenu dat van links achter de header langs binnenschuift.
   Logo, schakelaar licht/donker en de menuknop blijven in de header; de menuknop wordt een kruisje.
   Hoofditems klappen open als lichtblauw vlak.
   -------------------------------------------------------------------------- */
.starter-nav__burger {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: 0 calc(var(--space-xs) * -1) 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--neutral-dark);
  cursor: pointer;
  transition: color 0.3s;
}
.starter-nav__burger:focus-visible {
  outline: 2px solid var(--secondary-dark);
  outline-offset: 2px;
  border-radius: 50%;
}
.starter-nav__lines {
  position: relative;
  inline-size: 1.5rem;
  block-size: 17.6px; /* 0.9.35: streepjes op hele pixels (0, 8, 16) zodat ze alle drie even dik ogen (was 18px: 0, 8.2, 16.4) */
}
.starter-nav__lines > span {
  position: absolute;
  inset-inline: 0;
  block-size: 1.6px;
  border-radius: 1px;
  background: currentColor;
  transition: inset-block-start 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}
.starter-nav__lines > span:nth-child(1) {
  inset-block-start: 0;
}
.starter-nav__lines > span:nth-child(2) {
  inset-block-start: 8px;
}
.starter-nav__lines > span:nth-child(3) {
  inset-block-start: 16px;
}
.starter-nav__burger[aria-expanded="true"] {
  color: var(--secondary);
}
.starter-nav__burger[aria-expanded="true"] .starter-nav__lines > span:nth-child(1) {
  inset-block-start: 8px;
  transform: rotate(45deg);
}
.starter-nav__burger[aria-expanded="true"] .starter-nav__lines > span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.starter-nav__burger[aria-expanded="true"] .starter-nav__lines > span:nth-child(3) {
  inset-block-start: 8px;
  transform: rotate(-45deg);
}

.starter-header__bar-toggle {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
}

@media (min-width: 992px) {
  .starter-nav__burger,
  .starter-header__bar-toggle,
  .starter-nav__legal {
    display: none;
  }
}

@media (max-width: 991px) {
  .starter-header {
    --starter-bar-h: 3.5rem;
    --starter-head-pad: var(--space-xs);
  }
  .starter-header__utility {
    display: none;
  }
  .starter-header__bar {
    align-items: center;
    gap: var(--space-s);
    margin-block-start: var(--space-xs);
  }

  /* Schakelaar licht/donker in de balk: alleen zichtbaar als het menu open is. */
  .starter-header__bar-toggle {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0s linear 0.25s;
  }
  html.starter-nav-open .starter-header__bar-toggle {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s 0.1s, visibility 0s;
  }

  /* De header staat vast bovenaan zolang het menu open is, ook als de pagina gescrold was.
     De ruimte die hij in de pagina innam blijft bewaard, zodat er niets verspringt. */
  /* Zweeft de balk al bovenin (omhoog gescrold, zie hieronder), dan blijft alleen de balk staan. */
  html:is(.starter-nav-open, .starter-nav-closing):not(.starter-head-float) .starter-header {
    position: fixed;
    inset-block-start: var(--starter-nav-top, 0px);
    inset-inline: 0;
  }
  html:is(.starter-nav-open, .starter-nav-closing):not(.starter-head-float) body {
    padding-block-start: var(--starter-header-h, 0px);
  }
  html.starter-nav-scrolled.starter-nav-open .starter-header {
    animation: starter-header-in 0.3s ease both;
  }
  html.starter-nav-scrolled.starter-nav-closing .starter-header {
    animation: starter-header-out 0.3s ease both;
  }

  /* Het witte vlak schuift achter logo, schakelaar en menuknop langs. */
  .starter-nav__drawer {
    position: fixed;
    z-index: 1;
    inset: var(--starter-nav-top, 0px) 0 0 0;
    display: flex;
    flex-direction: column;
    padding-block-start: calc(var(--space-s) * 2 + var(--space-xs) + var(--starter-bar-h));
    overflow: hidden;
    background: var(--white);
    translate: -100% 0;
    visibility: hidden;
    transition: translate 0.35s ease, visibility 0s linear 0.35s;
  }
  .starter-nav.is-open .starter-nav__drawer {
    translate: 0 0;
    visibility: visible;
    transition: translate 0.35s ease, visibility 0s;
  }

  /* Alleen de lijst scrolt, onder de header. Zo lopen tekst en logo nooit door elkaar. */
  .starter-nav__list {
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    padding-block: var(--space-s) var(--space-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Tekst die onder de header verdwijnt, vervaagt in de bovenste marge. */
    mask-image: linear-gradient(to bottom, transparent, #000 var(--space-s));
  }
  /* Groter en minder dun (sinds 0.9.32): 21 px Regular in plaats van 16,5 px Light. De kleuren zijn (nog) ongewijzigd. */
  .starter-nav__toggle {
    inline-size: 100%;
    padding: 0.5em var(--space-m);
    font-size: 1.3125rem;
    font-weight: 400;
    text-align: start;
  }
  .starter-mega__lede {
    font-size: 1.125rem;
    font-weight: 400;
  }
  .starter-mega__links {
    gap: var(--space-s);
  }
  .starter-mega__link {
    font-size: 1.125rem;
    font-weight: 400;
  }

  /* Lichtblauw vlak dat openschuift. Werkt in alle browsers via grid-template-rows 0fr naar 1fr. */
  .starter-mega {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
  }
  .starter-nav__item.is-open > .starter-mega {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.35s ease, visibility 0s;
  }
  .starter-mega__card {
    min-block-size: 0;
    overflow: hidden;
  }
  .starter-nav__item.is-open {
    border-block-end: 1px solid var(--neutral-ultra-light);
  }
  .starter-mega__top {
    grid-template-columns: 1fr;
    gap: var(--space-m);
    margin-block-start: var(--space-xs);
    padding: var(--space-m) var(--space-m) var(--space-l) calc(var(--space-m) * 1.5);
  }
  .starter-mega__label {
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .starter-mega__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding: var(--space-m) var(--space-m) var(--space-l);
  }
  .starter-mega__cta-label {
    font-size: 1.125rem;
    font-weight: 400;
  }

  /* Privacybeleid en Cookiebeleid onderaan het mobiele menu: klein en rustig. */
  .starter-nav__legal {
    flex: none;
    padding: var(--space-s) var(--space-m) calc(var(--space-m) + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--neutral-ultra-light);
  }
  .starter-nav__legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-s);
    line-height: 1.4;
  }
  .starter-nav__legal-list a {
    color: var(--neutral);
    text-decoration: none;
  }
  .starter-nav__legal-list a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* De links verschijnen terwijl het vlak openschuift, een voor een. */
  .starter-mega__intro,
  .starter-mega__label,
  .starter-mega__links > li,
  .starter-mega__cta {
    opacity: 0;
    translate: 0 -0.5rem;
    transition: opacity 0.15s, translate 0.15s;
  }
  .starter-nav__item.is-open :is(.starter-mega__intro, .starter-mega__label, .starter-mega__links > li, .starter-mega__cta) {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.3s ease calc(0.1s + var(--i, 0) * 0.04s), translate 0.3s ease calc(0.1s + var(--i, 0) * 0.04s);
  }

  /* Pagina vastzetten zolang het menu open is. */
  html.starter-nav-open {
    overflow: hidden;
  }
}

/* Via margin en niet via translate: een transform op de header zou het vaste witte vlak erin laten meeschuiven. */
@keyframes starter-header-in {
  from {
    margin-block-start: calc(var(--starter-header-h, 0px) * -1);
  }
}
@keyframes starter-header-out {
  to {
    margin-block-start: calc(var(--starter-header-h, 0px) * -1);
  }
}

/* --------------------------------------------------------------------------
   Compacte header die meescrolt (sinds 0.9.27; vanaf 0.9.29 sticky, het script staat in assets/js/nav.js)
   De gewone header scrolt mee uit beeld. Na nog een stukje scrollen (120 px) schuift een compacte balk bovenin
   in beeld en blijft daar staan, ook als je verder naar beneden scrolt: alleen het rondje van het logo, een lagere
   balk en op desktop zo breed als het menu. Terug naar boven schuift hij weer weg en staat de gewone header er weer.
   Schuiven via de bovenkant (top), niet via transform: een transform op de balk zou het vaste witte uitschuifmenu
   (mobiel) erin laten meeschuiven.
   -------------------------------------------------------------------------- */
.starter-header {
  --starter-adminbar: var(--wp-admin--admin-bar--height, 0px);
  --starter-float-top: calc(var(--starter-adminbar) + var(--space-s));
}
/* Op smalle schermen scrolt de WordPress-adminbalk mee; dan begint de balk gewoon bovenaan. */
@media (max-width: 600px) {
  .starter-header {
    --starter-adminbar: 0px;
  }
}
.starter-header__slot {
  display: flow-root;
}
html.starter-head-float .starter-header__bar {
  --starter-bar-h: 3.5rem;
  --starter-logo-w: 4.25rem; /* breedte van het hele logo; zichtbaar is alleen het rondje (62%) */
  --starter-logo-icon: calc(var(--starter-logo-w) * 0.62);
  position: fixed;
  z-index: 30;
  inset-block-start: calc(var(--starter-bar-h) * -1 - 3rem);
  inset-inline: 0;
  inline-size: fit-content;
  max-inline-size: calc(100% - var(--starter-head-pad) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--starter-logo-icon) + var(--space-s) * 2) var(--space-m);
  box-shadow: 0 0.5rem 2rem -0.75rem color-mix(in oklch, #000 30%, transparent);
}
html.starter-head-float.starter-head-shown .starter-header__bar {
  inset-block-start: var(--starter-float-top);
}
html.starter-head-anim .starter-header__bar {
  transition: inset-block-start 0.35s ease;
}
/* Compacte balk: alleen het beeldmerk van het logo. Geef in de logo-SVG het woorddeel id="logo-woord" (of pas de selector aan). */
html.starter-head-float .starter-header__logo {
  inline-size: var(--starter-logo-icon);
  overflow: hidden;
}
html.starter-head-float .starter-header__logo [id="logo-woord"] {
  opacity: 0;
}
.starter-header__logo svg {
  transition: inline-size 0.3s ease;
}
@media (max-width: 991px) {
  /* Mobiel: de balk blijft over de volle breedte (logo links, menuknop rechts), maar lager en met een klein logo. */
  html.starter-head-float .starter-header__bar {
    --starter-bar-h: 3rem;
    --starter-logo-w: 3.75rem;
    inline-size: calc(100% - var(--starter-head-pad) * 2);
    padding-inline: calc(var(--starter-logo-icon) + var(--space-s) * 2) var(--space-s);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.starter-head-anim .starter-header__bar,
  .starter-header__logo svg {
    transition: none;
  }
  .starter-nav__icon::before,
  .starter-nav__icon::after,
  .starter-mega,
  .starter-nav__drawer,
  .starter-mega__intro,
  .starter-mega__label,
  .starter-mega__links > li,
  .starter-mega__cta,
  .starter-mega__link::after,
  .starter-nav__lines > span,
  .starter-header__bar-toggle {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transform: none !important;
  }
  html .starter-header {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Kruimelpad
   -------------------------------------------------------------------------- */
.starter-breadcrumbs {
  --starter-bc-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --starter-bc-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2l-4 4 4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  inline-size: 100%;
  max-inline-size: var(--starter-bar-max);
  margin-inline: auto;
  margin-block-start: calc(var(--space-xs) / 2);
  padding-inline: calc(var(--space-s) + var(--starter-logo-w) * var(--starter-bc-align, 0.6665)) var(--space-l);
  font-size: var(--text-s);
  color: var(--neutral-dark);
}
.starter-breadcrumbs:not(:has(.separator ~ .separator)) {
  display: none;
}
.starter-breadcrumbs .item {
  display: inline-block;
  max-inline-size: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
  color: inherit;
  text-decoration: none;
}
.starter-breadcrumbs a.item:hover {
  color: var(--secondary-semi-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.starter-breadcrumbs a.item:focus-visible {
  outline: 2px solid var(--secondary-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
.starter-breadcrumbs .separator {
  flex: none;
  inline-size: calc(var(--text-s) * 0.75);
  block-size: calc(var(--text-s) * 0.75);
  margin-inline: 0.35em;
  font-size: 0;
  background-color: var(--neutral-semi-light);
  mask: var(--starter-bc-next) center / contain no-repeat;
}
@media (max-width: 1279px) {
  .starter-breadcrumbs {
    padding-inline-end: var(--space-s);
  }
}
/* Mobiel: alleen de stap terug, met een pijltje. */
@media (max-width: 767px) {
  .starter-breadcrumbs > :is(.item, .separator) {
    display: none;
  }
  .starter-breadcrumbs > a.item:nth-last-child(3) {
    display: inline-block;
    max-inline-size: 100%;
  }
  .starter-breadcrumbs > a.item:nth-last-child(3)::before {
    content: "";
    display: inline-block;
    vertical-align: -0.05em;
    margin-inline-end: 0.3em;
    inline-size: 0.7em;
    block-size: 0.7em;
    background-color: currentColor;
    mask: var(--starter-bc-back) center / contain no-repeat;
  }
}

/* --------------------------------------------------------------------------
   Paginakop en inhoud
   -------------------------------------------------------------------------- */
/*
 * Ruimte tussen header en inhoud: op elke pagina gelijk (sinds 06-10-2026; was 40 tot 135 px op desktop).
 * 24 px op 360 px schermbreedte, oplopend tot 45 px vanaf 1366 px.
 * Geldt voor het eerste blok onder de header: paginakop, eerste sectie uit de blok-editor, kop van een tip of inspiratie-item.
 * !important omdat secties uit de editor hun ruimte als inline style meekrijgen; de ruimte onder de header is een zaak van het thema.
 */
:root {
  --starter-header-gap: clamp(1.5rem, calc(2.0875vw + 1.0303rem), 2.8125rem);
}
.starter-main > :first-child:is(.starter-page-header, .starter-ins-header),
.starter-main > :first-child > :first-child:is(.starter-page-header, .starter-tip-single__top, .starter-ins-single__header, .starter-ins-header, .starter-typo__kop),
.starter-main > :first-child > .starter-content.is-sectioned:first-child > .wp-block-group.is-style-section:first-child {
  padding-block-start: var(--starter-header-gap) !important;
}
.starter-page-header {
  padding-block: var(--space-xl) var(--space-l);
}
.starter-page-title {
  margin: 0;
}
.starter-content {
  padding-block-end: var(--space-xxl);
}
.starter-content.is-sectioned {
  padding-block-end: 0;
}
.starter-notice {
  padding: var(--space-s) var(--space-m);
  border-inline-start: 4px solid var(--secondary);
  background: var(--secondary-ultra-light);
  border-radius: var(--radius-m);
}

/* --------------------------------------------------------------------------
   Footer (zoals "Footer" in Bricks)
   - Wit vlak van 30% over het kleurverloop van de pagina.
   - Links logo, tekst en knop; rechts twee kolommen met menu's. Smaller dan 992px onder elkaar,
     smaller dan 479px ook de menu's onder elkaar.
   - Menulinks in --base, zoals in Bricks; in donkere modus licht, zodat ze leesbaar blijven.
   -------------------------------------------------------------------------- */
.starter-footer {
  --starter-footer-link: light-dark(var(--base), var(--neutral-ultra-dark));
  position: relative;
}
.starter-footer__main {
  padding-block: var(--section-space-m);
  background-color: var(--white-trans-30);
}
.starter-footer__inner {
  display: grid;
  grid-template-columns: var(--grid-2-3);
  gap: var(--space-xxl);
  align-items: stretch;
}
.starter-footer__brand,
.starter-footer__intro,
.starter-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
}
.starter-footer__intro > * {
  margin: 0;
}
.starter-footer__logo {
  display: block;
  inline-size: 7em;
  line-height: 0;
  color: inherit;
}
.starter-footer__logo svg,
.starter-footer__logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.starter-footer__logo [id="logo-woord"] {
  fill: light-dark(var(--neutral), var(--neutral-semi-dark));
}
.starter-footer__logo-text {
  font-weight: 800;
  font-size: var(--text-l);
}
.starter-footer__text,
.starter-footer__intro p {
  max-inline-size: 45ch;
  font-size: var(--text-s);
  line-height: var(--text-line-height);
}
.starter-footer__nav {
  display: grid;
  grid-template-columns: var(--grid-2);
  gap: var(--space-l);
  align-items: stretch;
}
.starter-footer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.starter-footer__menu--groot {
  gap: var(--space-s);
  font-size: var(--text-l);
  font-weight: 500;
}
.starter-footer__menu--klein {
  font-size: var(--text-s);
  line-height: var(--text-line-height);
}
.starter-footer__menu a {
  display: flex;
  color: var(--starter-footer-link);
  font-weight: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.starter-footer__menu a:hover,
.starter-footer__menu .current-menu-item > a {
  color: var(--primary);
}
.starter-footer__menu a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.starter-footer__sub {
  padding-block: var(--space-s);
}
.starter-footer__sub-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.starter-footer__copyright {
  margin: 0;
  font-size: var(--text-s);
  line-height: var(--text-line-height);
}
@media (max-width: 991px) {
  .starter-footer__inner {
    grid-template-columns: var(--grid-1);
  }
}
@media (max-width: 478px) {
  .starter-footer__nav {
    grid-template-columns: var(--grid-1);
  }
}

/* --------------------------------------------------------------------------
   Schakelaar licht/donker (zelfde als in het Bricks-thema)
   -------------------------------------------------------------------------- */
.starter-scheme-toggle {
  --starter-scheme-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg transform='translate(3 3)' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7,10.792 C4.906,10.792 3.208,9.094 3.208,7 C3.208,4.906 4.906,3.208 7,3.208 C9.094,3.208 10.792,4.906 10.792,7 C10.792,9.094 9.094,10.792 7,10.792 Z' stroke-width='0.875'/%3E%3Cpath d='M11.165,2.835 L11.089,2.911 Z M2.911,11.089 L2.835,11.165 Z M7,1.167 L7,1.213 Z M7,12.787 L7,12.833 Z M1.167,7 L1.213,7 Z M12.787,7 L12.833,7 Z M2.835,2.835 L2.911,2.911 Z M11.165,11.165 L11.089,11.089' stroke-width='1.167'/%3E%3C/g%3E%3C/svg%3E");
  --starter-scheme-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg transform='translate(4 4)' fill='none' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.995,10.995 C7.84,11.075 9.49,10.215 10.48,8.86 C10.89,8.305 10.67,7.935 9.985,8.06 C9.65,8.12 9.305,8.145 8.945,8.13 C6.5,8.03 4.5,5.985 4.49,3.57 C4.485,2.92 4.62,2.305 4.865,1.745 C5.135,1.125 4.81,0.83 4.185,1.095 C2.205,1.93 0.85,3.925 1.015,6.21 C1.195,8.785 3.38,10.88 5.995,10.995 Z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  display: block;
  flex-shrink: 0;
  inline-size: 40px;
  block-size: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: color-mix(in oklch, var(--neutral) 25%, transparent);
  cursor: pointer;
  appearance: none;
  transition: background-color 0.2s ease;
}
.starter-scheme-toggle::before,
.starter-scheme-toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 1px;
  inline-size: 20px;
  block-size: 20px;
  transition: transform 0.2s ease;
}
.starter-scheme-toggle::before {
  border-radius: 50%;
  background-color: var(--white);
}
.starter-scheme-toggle::after {
  background-color: var(--neutral);
  -webkit-mask: var(--starter-scheme-sun) center / 20px 20px no-repeat;
  mask: var(--starter-scheme-sun) center / 20px 20px no-repeat;
}
.starter-scheme-toggle:hover {
  background-color: color-mix(in oklch, var(--neutral) 40%, transparent);
}
.starter-scheme-toggle:focus-visible {
  outline: 2px solid var(--secondary-dark);
  outline-offset: 3px;
}
:root[data-color-scheme="dark"] .starter-scheme-toggle {
  background-color: color-mix(in oklch, var(--neutral) 79%, transparent);
}
:root[data-color-scheme="dark"] .starter-scheme-toggle:hover {
  background-color: color-mix(in oklch, var(--neutral) 90%, transparent);
}
:root[data-color-scheme="dark"] .starter-scheme-toggle::before,
:root[data-color-scheme="dark"] .starter-scheme-toggle::after {
  transform: translateX(16px);
}
:root[data-color-scheme="dark"] .starter-scheme-toggle::after {
  -webkit-mask-image: var(--starter-scheme-moon);
  mask-image: var(--starter-scheme-moon);
}
@media (prefers-reduced-motion: reduce) {
  .starter-scheme-toggle,
  .starter-scheme-toggle::before,
  .starter-scheme-toggle::after {
    transition: none;
  }
}