/* ==========================================================================
   Werk en Mantelzorg Tour: eigen onderdelen
   Klassen met het voorvoegsel wenm-. Te gebruiken als "Extra CSS-klasse" op kernblokken.
   Rustig zoals mantelzorg.nl (lila vlakken, 16 px rondingen), met eigen schwung:
   kopjes als wegwijzerbordje, de groene weg als scheiding.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Secties (Groep met tagName section, uitlijning volledig, lay-out "constrained")
   -------------------------------------------------------------------------- */
.wenm-sectie {
  padding-block: var(--section-space-m);
  padding-inline: var(--gutter);
}
.wenm-sectie--lila { background: var(--bg-lila); }
.wenm-sectie--groen { background: var(--bg-groen); }
.wenm-sectie--hero { padding-block: var(--space-m) var(--section-space-s); }
.wenm-sectie > * + * { margin-block-start: var(--space-m); }
.wenm-sectie > :is(h2, h3) + p { margin-block-start: var(--space-s); }
/* Paginatitel (H1 in een sectie, zoals op Contact): even groot als de sectiekoppen op de home ("Over de tour").
   De H1 van de home is de payoff in de hero-animatie en valt hier niet onder. */
.wenm-sectie > h1 { font-size: var(--h2); line-height: var(--heading-line-height); }

/* Lead: grotere inleidende tekst */
.wenm-lead { font-size: var(--text-l); line-height: 1.45; }

/* --------------------------------------------------------------------------
   2. Bordje: kopje boven een sectie in de vorm van de wegwijzers uit de tour
   (Alinea met klasse wenm-bordje)
   -------------------------------------------------------------------------- */
.wenm-bordje {
  display: inline-block;
  width: fit-content;
  padding: 0.35em 1.6em 0.35em 0.8em;
  background: var(--primary);
  color: #fff;
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  clip-path: polygon(0 0, calc(100% - 0.9em) 0, 100% 50%, calc(100% - 0.9em) 100%, 0 100%);
}
.wenm-bordje--groen { background: var(--secondary); color: #421645; }
.has-text-align-center.wenm-bordje, .wenm-sectie > .wenm-bordje.aligncenter { margin-inline: auto; }
/* In een sectie: links in lijn met de inhoudskolom (70rem), niet tegen de rand en niet gecentreerd. */
.is-layout-constrained > .wenm-bordje {
  display: block;
  margin-inline-start: max(0px, calc((100% - 70rem) / 2)) !important;
  margin-inline-end: auto !important;
}

/* --------------------------------------------------------------------------
   3. De weg: groene lijn als scheiding (Scheidingslijn met klasse wenm-weg)
   -------------------------------------------------------------------------- */
hr.wenm-weg, .wp-block-separator.wenm-weg {
  border: 0;
  height: 7px;
  max-width: none;
  width: 100%;
  background: var(--secondary);
  border-radius: 7px;
  opacity: 1;
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   4. Knoppen: kleuren zoals mantelzorg.nl
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-btn--secondary {
  --btn-text-color: #421645;
  --btn-text-color-hover: #421645;
}
.wp-block-button.is-style-btn--primary {
  --btn-text-color: #fff;
  --btn-text-color-hover: #fff;
}
/* Knoppen met alleen een rand: dunnere lijn (was 2 px). */
.wp-block-button[class*="is-style-btn--outline"] { --btn-border-width: 1.5px; }
/* Pijltje achter de knoptekst, als richtingaanwijzer (klasse wenm-pijl op de knop) */
.wp-block-button.wenm-pijl > .wp-block-button__link::after {
  content: "→";
  transition: transform var(--transition-duration) var(--transition-timing);
}
.wp-block-button.wenm-pijl > .wp-block-button__link:hover::after { transform: translateX(0.25em); }

/* --------------------------------------------------------------------------
   5. Twee kolommen: kop links, tekst rechts (Kolommen met klasse wenm-kop-tekst)
   -------------------------------------------------------------------------- */
.wenm-kop-tekst { gap: var(--space-xl) !important; align-items: start; }
.wenm-kop-tekst h2 { margin-block-start: var(--space-s); }

/* --------------------------------------------------------------------------
   6. Cijfers (Groep met klasse wenm-cijfers, met daarin Groepen met klasse wenm-cijfer)
   -------------------------------------------------------------------------- */
.wenm-cijfers {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-m);
}
/* In een raster geen ruimte boven de 2e en 3e kaart (blockGap van WordPress); anders staan ze lager. */
.wenm-cijfers > *, .wenm-tourstops > * { margin-block: 0 !important; }
/* Groene "schaduw" onder de kaart: in rust steekt hij aan de bovenkant uit, bij hover schuift de kaart
   omhoog en komt het groen er aan de onderkant onder vandaan. Een box-shadow ligt altijd achter de kaart,
   dus het groen beweegt nooit over de inhoud. */
.wenm-cijfer {
  position: relative;
  background: var(--bg-kaart);
  border-radius: var(--radius-xl);
  padding: var(--space-m);
  box-shadow: 0 -7px 0 var(--secondary), 0 2px 16px rgb(110 36 114 / 0.08);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wenm-cijfer:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 14px 0 var(--secondary), 0 26px 36px rgb(110 36 114 / 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .wenm-cijfer { transition: none; }
  .wenm-cijfer:hover { transform: none; }
}
.wenm-cijfer > * + * { margin-block-start: var(--space-xs); }
.wenm-cijfer__getal {
  color: var(--heading-color);
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1;
}
.wenm-bron { font-size: var(--text-s); color: var(--text-dark-muted); }

/* --------------------------------------------------------------------------
   7. Tourstops (Groep met klasse wenm-tourstops)
   -------------------------------------------------------------------------- */
/* Vast raster (sinds 1.12.4): 3 kolommen, 2 op tablet, 1 op mobiel. Kaarten houden dezelfde breedte, hoeveel het er ook
   zijn, en kaarten op een rij worden even hoog. De foto staat altijd op 3:2 (sectie 17). */
.wenm-tourstops {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-m);
}
@media (max-width: 991px) {
  .wenm-tourstops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wenm-tourstops { grid-template-columns: minmax(0, 1fr); }
}
.wenm-tourstop {
  background: var(--bg-kaart);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 16px rgb(110 36 114 / 0.08);
}
.wenm-tourstop > :not(figure) { padding-inline: var(--space-m); }
.wenm-tourstop > :last-child { padding-block-end: var(--space-m); }
.wenm-tourstop--binnenkort {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12rem;
  background: transparent;
  border: 2px dashed var(--primary-light);
  box-shadow: none;
  padding-block: var(--space-m);
  color: var(--heading-color);
}

/* --------------------------------------------------------------------------
   8. Oproep (Groep met klasse wenm-oproep): lila vlak met afgeronde hoeken
   -------------------------------------------------------------------------- */
.wenm-oproep {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-l);
}
.wenm-oproep :is(h2, h3) { color: #fff; }
.wenm-oproep > * + * { margin-block-start: var(--space-s); }
.wenm-oproep .wp-block-buttons { margin-block-start: var(--space-m); }

/* --------------------------------------------------------------------------
   9. Veelgestelde vragen (Details-blokken met klasse wenm-vraag)
   Witte kaarten, grote vraag, chevron die omdraait. Open- en dichtklappen loopt vloeiend via
   assets/js/wenm.js (hoogte geanimeerd); zonder JS werkt het gewoon, alleen zonder animatie.
   -------------------------------------------------------------------------- */
.wenm-vraag {
  background: var(--bg-kaart);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 var(--secondary), 0 4px 20px rgb(110 36 114 / 0.08);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Hover en open: de kaart schuift omhoog en de groene schaduw komt eronder vandaan (zoals de cijferkaarten).
   De schaduw zit aan de kaart vast, dus bij openklappen schuift het groen mee naar beneden. */
.wenm-vraag:hover,
.wenm-vraag[open]:not(.is-sluiten) {
  transform: translateY(-6px);
  box-shadow: 0 10px 0 var(--secondary), 0 20px 32px rgb(110 36 114 / 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .wenm-vraag { transition: none; }
  .wenm-vraag:hover, .wenm-vraag[open] { transform: none; }
}
.wenm-vraag + .wenm-vraag { margin-block-start: var(--space-s) !important; }
.wenm-vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  cursor: pointer;
  list-style: none;
  font-size: var(--h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color);
  transition: color 0.25s ease-out;
}
.wenm-vraag summary:hover { color: var(--heading-color-hover); }
.wenm-vraag summary::-webkit-details-marker { display: none; }
.wenm-vraag summary:focus-visible { outline-offset: -4px; border-radius: var(--radius-xl); }
/* Chevron in een rondje */
.wenm-vraag summary::after {
  content: "";
  flex-shrink: 0;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--secondary-light) center / 1.1rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23421645' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease-out;
}
.wenm-vraag summary:hover::after { background-color: var(--secondary); }
.wenm-vraag[open] summary::after { transform: rotate(180deg); }
.wenm-vraag[open].is-sluiten summary::after { transform: none; }
/* Het antwoord: ruim, met een rustige regellengte */
.wenm-vraag > :not(summary) {
  max-inline-size: 58rem;  /* was 46rem; op groot scherm iets breder (Nico 03-11-2026) */
  margin: 0 !important;
  padding-inline: var(--space-l) calc(var(--space-l) + 2.25rem);
  font-size: var(--text-m);
  line-height: 1.6;
}
.wenm-vraag > :not(summary):last-child { padding-block-end: var(--space-l); }
.wenm-vraag > :not(summary) + :not(summary) { padding-block-start: var(--space-s); }
@media (max-width: 600px) {
  .wenm-vraag summary { padding: var(--space-s) var(--space-m); }
  .wenm-vraag > :not(summary) { padding-inline: var(--space-m); }
  .wenm-vraag > :not(summary):last-child { padding-block-end: var(--space-m); }
}

/* --------------------------------------------------------------------------
   10. Header: logo links op de inhoudsrand, witte menukaart in het midden, rechts de schakelaar licht/donker
   (ontwerp Nico 03-11-2026; daarvoor stond het logo boven het menu in de kaart)
   Het actieve item (huidige sectie, klasse wenm-actief uit assets/js/wenm.js) en hover krijgen een paars blokje.
   Niet op is-current: WordPress markeert alle links naar /#anker op de home als huidige pagina.
   -------------------------------------------------------------------------- */
:root { --wenm-lucht: var(--bg-lucht); }  /* achtergrond van de hero-animatie, waarde in tokens.css */

.starter-header { background: var(--wenm-lucht); }
.starter-header__utility { display: none; }
.starter-header__logo :is(img, svg) { display: block; inline-size: var(--starter-logo-w); block-size: auto; }

@media (min-width: 992px) {
  /* Drie kolommen: logo | menu (altijd in het midden) | schakelaar. Zelfde breedte als de footer (--content-width,
     zie .starter-container), zodat logo en schakelaar precies boven de footerkolommen staan. */
  .starter-header { --starter-logo-w: 12.5rem; padding-block: var(--space-m) 0; padding-inline: var(--gutter); }
  .starter-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-m);
    inline-size: 100%;
    max-inline-size: var(--content-width);
    min-block-size: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .starter-header__logo { position: static; translate: none; grid-column: 1; grid-row: 1; justify-self: start; }
  .starter-nav {
    grid-column: 2;
    grid-row: 1;
    padding: var(--space-s) var(--space-l);
    border-radius: var(--radius-xl);
    background: var(--bg-kaart);
  }
  .starter-header__bar > .starter-header__bar-toggle { display: flex; grid-column: 3; grid-row: 1; justify-self: end; }
  .starter-nav__list { gap: var(--space-xs); }
  .starter-nav__item--link > .starter-nav__link {
    position: relative;
    isolation: isolate;
    padding: 0.15em 0.45em;
    border-radius: var(--radius-s);
    font-size: var(--text-m);
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.25s ease-out;
  }
  /* Paars blokje: komt met een korte fade-in van links (schuift en groeit vanaf de linkerkant). */
  .starter-nav__item--link > .starter-nav__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--primary);
    opacity: 0;
    transform: translateX(-0.4em) scaleX(0.7);
    transform-origin: left center;
    transition: opacity 0.25s ease-out, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .starter-nav__item--link > .starter-nav__link::before { transform: none; transition: opacity 0.2s; }
  }
  /* is-current van het thema (groene tekst) geldt niet voor de ankerlinks op de home */
  .starter-nav__item--link.is-current > .starter-nav__link { color: var(--text-color); }
  .starter-nav__item--link > .starter-nav__link:hover,
  .starter-nav__item--link.wenm-actief > .starter-nav__link,
  .starter-nav__item--link.is-current.wenm-actief > .starter-nav__link {
    color: #fff;
  }
  .starter-nav__item--link > .starter-nav__link:hover::before,
  .starter-nav__item--link.wenm-actief > .starter-nav__link::before {
    opacity: 1;
    transform: none;
  }

  /* Na scrollen: één witte kaart in het midden met klein logo, menu en schakelaar. */
  html.starter-head-float .starter-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    inline-size: fit-content;
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--radius-xl);
    background: var(--bg-kaart);
  }
  html.starter-head-float .starter-nav { padding: 0; background: none; }
  html.starter-head-float .starter-header__logo,
  html.starter-head-float .starter-header__logo :is(img, svg) { inline-size: 6rem; overflow: visible; }
}

/* Menubalk (mobiel en de compacte balk na scrollen) en het uitschuifmenu: vlakkleur uit de tokens, zodat ze in
   donker mee donker worden. De starter zet hier vast wit neer; met lichte logoletters op wit viel het logo weg. */
html.starter-head-float .starter-header__bar { background: var(--bg-kaart); }
.starter-nav__burger { color: var(--text-color); }

@media (max-width: 991px) {
  /* Logo past in de witte balk: balk 72 px hoog, logo 112 px breed (de starter gaf 135 px op een balk van 56 px). */
  .starter-header { --starter-bar-h: 4.5rem; --starter-logo-w: 7rem; }
  .starter-header__bar,
  .starter-nav__drawer { background: var(--bg-kaart); }
  .starter-header__bar { border-radius: var(--radius-xl); }

  /* Uitklapmenu (ontwerp Nico 03-11-2026): grote links zonder onderstreping, ingesprongen; het actieve item en hover
     krijgen het paarse blokje zoals op desktop. Privacy en Cookies (menu Juridisch) onderaan, zodra dat menu er is. */
  .starter-nav__list { gap: var(--space-xs); padding-inline: calc(var(--space-l) + var(--space-s)); }
  .starter-nav__item--link > .starter-nav__link {
    inline-size: fit-content;
    padding: 0.1em 0.35em;
    margin-inline-start: -0.35em;
    border-radius: var(--radius-s);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
  }
  .starter-nav__item--link.is-current > .starter-nav__link { color: var(--text-color); }
  .starter-nav__item--link > .starter-nav__link:hover,
  .starter-nav__item--link.wenm-actief > .starter-nav__link {
    background: var(--primary);
    color: #fff;
  }
  .starter-nav__legal { padding-inline: calc(var(--space-l) + var(--space-s)); border-block-start: 0; }
  .starter-nav__legal-list { gap: var(--space-xs) var(--space-l); font-size: var(--text-m); }
  .starter-nav__legal-list a { color: var(--text-dark-muted); }
  html.starter-head-float .starter-header__logo,
  html.starter-head-float .starter-header__logo :is(img, svg) { inline-size: 5.5rem; overflow: visible; }
  html.starter-head-float .starter-header__bar { padding-inline-start: calc(5.5rem + var(--space-s) * 2); }
}

/* Hover op het headerlogo (sinds 1.12.0): het logo groeit subtiel en het TOUR-bordje neemt een aanloopje naar links,
   schiet naar rechts en veert uit (overshoot en elasticiteit). Het bordje (vlak + tekst) heeft de klasse
   wenm-logo-bordje uit de logofilter in inc/blokken.php. In SVG-eenheden: het logo is 400 breed, op het scherm 112-200 px. */
.starter-header__logo svg {
  transform-origin: left center;
  transition: inline-size 0.3s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.starter-header__logo .wenm-logo-bordje { transform-box: view-box; }
.starter-header__logo:is(:hover, :focus-visible) svg { scale: 1.04; }
.starter-header__logo:is(:hover, :focus-visible) .wenm-logo-bordje { animation: wenm-bordje-veer 0.85s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
@keyframes wenm-bordje-veer {
  0%   { translate: 0 0; }
  18%  { translate: -12px 0; }   /* aanloopje naar links */
  42%  { translate: 22px 0; }    /* schiet door naar rechts */
  58%  { translate: -7px 0; }
  72%  { translate: 4px 0; }
  86%  { translate: -1.5px 0; }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .starter-header__logo svg { transition: none; }
  .starter-header__logo:is(:hover, :focus-visible) svg { scale: 1; }
  .starter-header__logo:is(:hover, :focus-visible) .wenm-logo-bordje { animation: none; }
}

/* --------------------------------------------------------------------------
   11. Hero: de achtergrond van de animatie loopt naadloos door over de volle breedte
   (Sectie met klasse wenm-sectie--hero; de header erboven heeft dezelfde kleur)
   -------------------------------------------------------------------------- */
.wenm-sectie--hero,
.wenm-sectie--lucht { background: var(--wenm-lucht); }  /* lucht: zelfde tint als de hero, loopt door achter het headermenu (contactpagina) */
.wp-block-group.is-style-section.wenm-sectie--hero { padding-block: var(--space-m) 0; }  /* onderkant animatie = onderkant hero */
.wenm-sectie--hero .hero__kader { border-radius: 0; }

/* --------------------------------------------------------------------------
   12. Werk en Mantelzorg Partner worden (Sectie met klasse wenm-sectie--partner)
   Donkerpaars verloop dat aansluit op de foto van de erkenning (boven bijna zwart, onder paars).
   -------------------------------------------------------------------------- */
.wenm-sectie--partner {
  background: linear-gradient(180deg, #110a17 0%, #2a1630 70%, #351d3c 100%);
  color: #f3e9f3;
}
.wenm-sectie--partner :is(h2, h3) { color: #fff; }
.wenm-sectie--partner .wenm-lead { color: #fff; }
.wenm-sectie--partner .wp-block-columns { align-items: center; gap: var(--space-xl) !important; }
.wenm-partner-beeld img {
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}
.wenm-voor-wie {
  font-size: var(--text-s);
  letter-spacing: 0.02em;
  color: var(--secondary-light);
}
.wenm-sectie--partner .wp-block-buttons { gap: var(--space-s); margin-block-start: var(--space-m); }

/* --------------------------------------------------------------------------
   13. Footer (footer.php van dit thema)
   Lila vlak met de groene weg erboven; drie kolommen: tour, "Een initiatief van", menu.
   -------------------------------------------------------------------------- */
.wenm-footer { --starter-footer-link: var(--text-color); }
.wenm-footer .starter-footer__main {
  background: var(--wenm-lucht);
  border-top: 7px solid var(--secondary);
}
.wenm-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: var(--space-xl);
  align-items: start;
}
.wenm-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.wenm-footer .starter-footer__logo { inline-size: 11rem; }
.wenm-footer .starter-footer__intro p { font-size: var(--text-m); max-inline-size: 32ch; }
.wenm-footer__label {
  margin: 0;
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--heading-color);
}
.wenm-footer__logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wenm-footer__logos li { margin: 0; }
.wenm-footer__logos { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-m); }
.wenm-footer__logos img { block-size: auto; }
.wenm-footer__logo-mznl { inline-size: 6.5rem; }
.wenm-footer__logo-wm { inline-size: 10rem; }
.wenm-footer__logos a { display: inline-block; transition: opacity 0.2s ease; }
.wenm-footer__logos a:hover { opacity: 0.8; }
.wenm-footer__naam { font-size: var(--text-l); font-weight: 800; color: var(--heading-color); }
.wenm-footer__noot { margin: 0; font-size: var(--text-s); color: var(--text-dark-muted); }
.wenm-footer .starter-footer__menu { gap: var(--space-xs); font-size: var(--text-m); }
/* Footerlinks: geen onderstreping, maar hetzelfde paarse blokje als in het topmenu (fade-in van links).
   Negatieve marge, zodat de tekst links uitgelijnd blijft met de rest van de kolom. */
.wenm-footer .starter-footer__menu a,
.wenm-footer .starter-footer__menu .current-menu-item > a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  inline-size: fit-content;
  padding: 0.15em 0.45em;
  margin-inline-start: -0.45em;
  border-radius: var(--radius-s);
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.25s ease-out;
}
.wenm-footer .starter-footer__menu a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--primary);
  opacity: 0;
  transform: translateX(-0.4em) scaleX(0.7);
  transform-origin: left center;
  transition: opacity 0.25s ease-out, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wenm-footer .starter-footer__menu a:hover,
.wenm-footer .starter-footer__menu a:focus-visible { color: #fff; }
.wenm-footer .starter-footer__menu a:hover::before,
.wenm-footer .starter-footer__menu a:focus-visible::before { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wenm-footer .starter-footer__menu a::before { transform: none; transition: opacity 0.2s; }
}
.wenm-footer .starter-footer__sub { background: var(--bg-kaart); }
.wenm-footer__sub .starter-footer__menu--klein { flex-direction: row; gap: var(--space-m); }
@media (max-width: 991px) {
  .wenm-footer__inner { grid-template-columns: 1fr 1fr; }
  .wenm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .wenm-footer__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14. Contactformulier (Fluent Forms in een Groep met klasse wenm-formulier)
   Witte velden op het lila vlak. Een actief veld krijgt de groene schaduw van de kaarten.
   Foutkleur: --danger uit tokens.css (framboos, familie Accent), in plaats van het felle rood van Fluent Forms.
   -------------------------------------------------------------------------- */
:root {
  --wenm-fout: var(--danger);
  --wenm-fout-licht: var(--danger-ultra-light);
  /* Knopkleuren hier vastgelegd: snippets.css zet op de Fluent Forms-knop paarse --btn-*-waarden. */
  --wenm-knop: var(--btn-background);
  --wenm-knop-hover: var(--btn-background-hover);
  --wenm-knop-tekst: var(--btn-text-color);
  --wenm-knop-tekst-hover: var(--btn-text-color-hover);
}
/* Op het formulier zelf, niet op de groep: de lay-out "constrained" centreert de groep anders. */
.wenm-formulier .fluentform { max-width: 44rem; }
.wenm-formulier .fluentform .ff-el-group { margin-block-end: var(--space-m); }
.wenm-formulier .fluentform .ff-el-input--label label {
  font-size: var(--text-m);
  font-weight: 700;
  color: var(--heading-color);
}
.wenm-formulier .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--primary-semi-light); }
.wenm-formulier .fluentform .ff-el-form-control {
  padding: 0.75em 1em;
  border: 1.5px solid transparent;
  border-radius: var(--radius-l);
  background: var(--bg-kaart);
  color: var(--text-color);
  font-size: var(--text-m);
  line-height: 1.4;
  box-shadow: 0 0 0 var(--secondary), 0 2px 12px rgb(110 36 114 / 0.08);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease-out;
}
.wenm-formulier .fluentform .ff-el-form-control::placeholder { color: var(--text-dark-muted); opacity: 1; }
.wenm-formulier .fluentform .ff-el-form-control:hover { border-color: var(--primary-light); }
.wenm-formulier .fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--secondary);
  transform: translateY(-3px);
  box-shadow: 0 6px 0 var(--secondary), 0 14px 24px rgb(110 36 114 / 0.12);
}
.wenm-formulier .fluentform textarea.ff-el-form-control { min-height: 10em; resize: vertical; }

/* Fouten */
.wenm-formulier .fluentform .ff-el-is-error .ff-el-form-control,
.wenm-formulier .fluentform .ff-el-is-error .ff-el-form-control:focus { border-color: var(--wenm-fout); }
.wenm-formulier .fluentform .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 6px 0 var(--wenm-fout), 0 14px 24px rgb(110 36 114 / 0.12); }
.wenm-formulier .fluentform .error.text-danger,
.wenm-formulier .fluentform .ff-el-is-error .text-danger {
  margin-block-start: 0.5em;
  color: var(--wenm-fout);
  font-size: var(--text-s);
  font-weight: 600;
}
.wenm-formulier .ff-errors-in-stack .error {
  padding: 0.75em 1em;
  border-radius: var(--radius-l);
  background: var(--wenm-fout-licht);
  color: var(--wenm-fout);
}

/* Verzendknop: zelfde knop als de rest van de site, links onder de velden */
.wenm-formulier .fluentform .ff-el-group.ff_submit_btn_wrapper { text-align: start; }  /* snippets.css centreert hem */
.wenm-formulier .fluentform .ff-btn-submit,
.wenm-formulier .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border: 0;
  border-radius: var(--btn-border-radius);
  background: var(--wenm-knop) !important;
  color: var(--wenm-knop-tekst) !important;
  font-family: var(--text-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  opacity: 1;
  transition: var(--btn-transition);
}
.wenm-formulier .fluentform .ff-btn-submit:hover {
  background: var(--wenm-knop-hover) !important;
  color: var(--wenm-knop-tekst-hover) !important;
}

/* Bedankt-melding na verzenden */
.wenm-formulier .ff-message-success {
  padding: var(--space-m) var(--space-l);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--bg-kaart);
  color: var(--text-color);
  box-shadow: 0 10px 0 var(--secondary), 0 20px 32px rgb(110 36 114 / 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .wenm-formulier .fluentform .ff-el-form-control { transition: none; }
  .wenm-formulier .fluentform .ff-el-form-control:focus { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Donkere modus (sinds 1.9.0). De kleuren zelf staan in tokens.css (light-dark()); hier alleen wat
   daar niet kan: de logo's en de uitsneden uit het logo in de hero.
   -------------------------------------------------------------------------- */
/* Letters van het tourlogo (inline SVG, klasse cls-3 uit Illustrator): licht in donker. */
:is(.starter-header__logo, .starter-footer__logo, .wenm-hero .intro) .cls-3 { fill: var(--logo-paars); }
/* De logo-intro in de hero is sinds hero-blok 1.0.5 inline SVG en kleurt via .cls-3 hierboven mee. */
/* Logo's van de initiatiefnemers: in donker wordt alleen het paars wit (filter #wenm-paars-wit in footer.php);
   het groen en het witte & van Werk&Mantelzorg blijven zoals ze zijn. */
:root[data-color-scheme="dark"] .wenm-footer__logos img { filter: url("#wenm-paars-wit"); }
/* Compacte balk in donker: dun lichtpaars randje, anders valt hij weg tegen de donkere kaarten erachter. */
:root[data-color-scheme="dark"].starter-head-float .starter-header__bar {
  box-shadow: 0 0 0 1px rgb(226 185 229 / 0.2), 0 0.5rem 2rem -0.75rem rgb(0 0 0 / 0.6);
}
/* Knop met alleen een paarse rand: in donker lichtpaars (via --link-color), anders valt hij weg. */
.wp-block-button.is-style-btn--outline-primary {
  --btn-text-color: var(--link-color);
  --btn-border-color: var(--link-color);
}
/* Compacte balk na scrollen (desktop): de schakelaar achteraan, na het menu. Op mobiel blijft hij voor het kruisje. */
@media (min-width: 992px) {
  html.starter-head-float .starter-header__bar > .starter-header__bar-toggle { order: 10; }
}
/* Schakelaar licht/donker: rond knopje met zon of maan (iconen via inc/blokken.php), in de kleur van de menukaart.
   De schuifschakelaar van de starter (::before/::after) staat uit. */
.starter-scheme-toggle.has-icons,
:root[data-color-scheme] .starter-scheme-toggle.has-icons {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 3rem;
  block-size: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-kaart);
  color: var(--heading-color);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.4s, color 0.4s, scale 0.2s;
}
.starter-scheme-toggle.has-icons::before,
.starter-scheme-toggle.has-icons::after { content: none; }
.starter-scheme-toggle.has-icons:hover,
:root[data-color-scheme] .starter-scheme-toggle.has-icons:hover { scale: 1.06; background: var(--secondary); color: #421645; }
.starter-scheme-toggle.has-icons:active { scale: 0.92; }
.starter-scheme-toggle.has-icons:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
.starter-scheme-toggle.has-icons > svg {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  transition: opacity 0.35s, rotate 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), scale 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.wenm-schema__maan { opacity: 0; rotate: -90deg; scale: 0.4; }
:root[data-color-scheme="dark"] .wenm-schema__zon { opacity: 0; rotate: 90deg; scale: 0.4; }
:root[data-color-scheme="dark"] .wenm-schema__maan { opacity: 1; rotate: 0deg; scale: 1; }
/* In de compacte balk na scrollen iets kleiner. */
html.starter-head-float .starter-scheme-toggle.has-icons { inline-size: 2.5rem; block-size: 2.5rem; }
@media (prefers-reduced-motion: reduce) {
  .starter-scheme-toggle.has-icons,
  .starter-scheme-toggle.has-icons > svg { transition: none; }
}

/* --------------------------------------------------------------------------
   16. Cookiebanner (Complianz) en juridische pagina's (sinds 1.11.0)
   Complianz zet zijn kleuren als variabelen op :root en laadt die CSS later in; daarom zetten we onze waarden
   direct op de banner. Alles uit de tokens, dus licht en donker gaan vanzelf goed. De groene schaduw zoals de kaarten.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
  --cmplz_banner_background_color: var(--bg-kaart);
  --cmplz_banner_border_color: var(--bg-kaart);
  --cmplz_banner_border_radius: var(--radius-xl);
  --cmplz_text_color: var(--text-color);
  --cmplz_hyperlink_color: var(--link-color);
  --cmplz_title_font_size: 1.25rem;
  --cmplz_text_font_size: 0.9375rem;
  --cmplz_link_font_size: 0.9375rem;
  --cmplz_category_body_font_size: 0.875rem;
  --cmplz_category_header_title_font_size: 1rem;
  --cmplz_category_header_active_font_size: 0.875rem;
  --cmplz_category_header_always_active_color: light-dark(var(--secondary-semi-dark), var(--secondary));
  --cmplz_button_accept_background_color: var(--secondary);
  --cmplz_button_accept_border_color: var(--secondary);
  --cmplz_button_accept_text_color: #421645;
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: var(--link-color);
  --cmplz_button_deny_text_color: var(--link-color);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: transparent;
  --cmplz_button_settings_text_color: var(--link-color);
  --cmplz_button_border_radius: var(--radius-l);
  --cmplz_button_font_size: 1rem;
  --cmplz_slider_active_color: var(--primary);
  --cmplz_slider_inactive_color: var(--base);
  --cmplz_slider_bullet_color: #fff;
  font-family: var(--text-font-family);
}
.cmplz-cookiebanner.cmplz-cookiebanner {
  box-shadow: 0 10px 0 var(--secondary), 0 24px 48px rgb(0 0 0 / 0.18) !important;  /* Complianz zet zijn eigen schaduw */
}
/* Logo links op dezelfde lijn als de tekst. Complianz zet het op 35 px hoog in een breder vak, waardoor het inspringt;
   de -4% haalt de witruimte links in de logo-SVG weg. */
.cmplz-cookiebanner .cmplz-logo { block-size: auto !important; max-block-size: none !important; }
.cmplz-cookiebanner .cmplz-logo .starter-cmplz-eigen { inline-size: 5.25rem; block-size: auto; }
.cmplz-cookiebanner .cmplz-logo .starter-cmplz-eigen svg { inline-size: 100% !important; block-size: auto !important; max-block-size: none !important; margin-inline-start: -4%; }
.cmplz-cookiebanner .cmplz-title { font-weight: 800; color: var(--heading-color); }
.cmplz-cookiebanner .cmplz-close { color: var(--text-color); }
.cmplz-cookiebanner .cmplz-message { line-height: 1.5; }
.cmplz-cookiebanner .cmplz-btn {
  font-weight: 600;
  border-width: 1.5px;
  transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background-color: var(--secondary-hover); border-color: var(--secondary-hover); }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.cmplz-cookiebanner .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences, .cmplz-manage-options) { text-decoration: underline; text-underline-offset: 0.2em; }
.cmplz-cookiebanner .cmplz-category { background-color: var(--bg-lila); border-radius: var(--radius-l); }
.cmplz-cookiebanner .cmplz-category .cmplz-category-title { font-weight: 700; }
.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--link-color); }
#cmplz-manage-consent .cmplz-manage-consent { font-weight: 600; box-shadow: 0 -2px 16px rgb(110 36 114 / 0.12); }

/* Juridische pagina's (Cookiebeleid, Privacyverklaring): tekst van Complianz in een rustige leesbreedte. */
/* De leesbreedte op de kinderen, niet op het document: de lay-out "constrained" centreert het document anders, en dan
   begint de tekst rechts van de paginatitel. */
.wenm-juridisch > h1 + * { margin-block-start: var(--space-m); }
.wenm-juridisch .cmplz-document.cmplz-document { max-inline-size: 70rem !important; inline-size: 100%; font-size: var(--text-m); line-height: 1.6; }  /* Complianz zet 800 px; 70rem is de breedte van de kop */
.wenm-juridisch .cmplz-document > * { max-inline-size: 48rem; }
.wenm-juridisch .cmplz-document > * + * { margin-block-start: var(--paragraph-spacing); }
.wenm-juridisch .cmplz-document :is(h2, h3, h4) { margin-block: var(--heading-spacing) 0; color: var(--heading-color); }
.wenm-juridisch .cmplz-document h2 { font-size: var(--h3); }
.wenm-juridisch .cmplz-document :is(h3, h4) { font-size: var(--h5); }
.wenm-juridisch .cmplz-document :is(h2, h3, h4) + * { margin-block-start: var(--space-xs); }
.wenm-juridisch .cmplz-document :is(ul, ol) li + li { margin-block-start: var(--list-item-spacing); }
.wenm-juridisch .cmplz-document table { font-size: var(--text-s); }
.wenm-juridisch .cmplz-document :is(th, td) { padding: 0.4em 0.6em; border-block-end: 1px solid var(--base-light); text-align: start; vertical-align: top; }

/* --------------------------------------------------------------------------
   17. Teaservideo (Insluiten-blok met klasse wenm-video, sinds 1.12.2) en foto op de tourstopkaart
   Complianz blokkeert YouTube tot er toestemming is en zet het kader op de verhouding van de miniatuur (4:3);
   daarom hier vast 16:9. De melding staat als groene knop in beeld.
   -------------------------------------------------------------------------- */
.wenm-video {
  margin-block-start: var(--space-l) !important;  /* ruimte onder de knop; de sectie geeft de kolommen hier geen marge */
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 0 var(--secondary), 0 20px 32px rgb(110 36 114 / 0.14);
}
.wenm-video .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  block-size: auto !important;
  background-size: cover !important;
  background-position: center !important;
}
.wenm-video .wp-block-embed__wrapper::before { content: none; }
.wenm-video iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.wenm-video .cmplz-blocked-content-notice {
  inline-size: fit-content;
  max-inline-size: calc(100% - var(--space-m));
  padding: 0.667em 1.5em;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--wenm-knop);
  color: var(--wenm-knop-tekst);
  font-family: var(--text-font-family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.wenm-video .cmplz-blocked-content-notice:hover { background: var(--wenm-knop-hover); }
/* Hover op een tourstopkaart: de kaart schuift omhoog en de groene schaduw komt eronder vandaan, zoals de cijferkaarten
   en de FAQ. Niet op de stippelkaart "volgt binnenkort". */
.wenm-tourstop:not(.wenm-tourstop--binnenkort) {
  box-shadow: 0 0 0 var(--secondary), 0 2px 16px rgb(110 36 114 / 0.08);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wenm-tourstop:not(.wenm-tourstop--binnenkort):hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 14px 0 var(--secondary), 0 26px 36px rgb(110 36 114 / 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .wenm-tourstop:not(.wenm-tourstop--binnenkort) { transition: none; }
  .wenm-tourstop:not(.wenm-tourstop--binnenkort):hover { transform: none; }
}
.wenm-tourstop .wp-block-image { margin: 0; }
.wenm-tourstop .wp-block-image img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; }  /* altijd dezelfde uitsnede, ook bij staande foto's */