/* ==========================================================================
   Starter: blokken
   Blokstijlen en hulpklassen voor inhoud uit de blok-editor. Geladen op de voorkant én in de editor.
   ========================================================================== */

/* Ronding van alle kaarten (Kaart, Kaart transparant, liggend, statistiek, aanpakker, tools, tip-, tool- en
   inspiratiekaarten): 20 px op 360 px schermbreedte, vloeiend oplopend tot 30 px vanaf 1366 px. */
:root {
  --starter-card-radius: clamp(1.25rem, calc(0.994vw + 1.0262rem), 1.875rem);
}

/* --------------------------------------------------------------------------
   Koppen
   Grootte "Kop 1" t/m "Kop 4" (lettergrootte in de editor) of de ACSS-klassen h1 t/m h4.
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4) {
  text-wrap: balance;
}
.has-kop-1-font-size {
  font-weight: var(--h1-font-weight, 800);
}
.has-kop-2-font-size {
  font-weight: var(--h2-font-weight, 600);
}
/* In Bricks stonden kleine koppen (klasse h4) op h2-tags en waren dus vet. Koppen uit de editor krijgen hetzelfde gewicht. */
.wp-block-heading.h4 {
  font-weight: 600;
}
.has-kop-1-font-size,
.has-kop-2-font-size,
.has-kop-3-font-size,
.has-kop-4-font-size {
  line-height: var(--heading-line-height);
}

/* --------------------------------------------------------------------------
   Groep, stijl "Sectie": vaste ruimte boven en onder
   Sinds 0.9.26 uit de presets Sectie XS t/m XL (theme.json), niet meer rechtstreeks uit ACSS:
   op desktop 30% minder dan ACSS (--section-space-*), op mobiel 15% minder, daartussen vloeiend.
   Ook de ruimtes die in de editor zijn gekozen (Sectie XS/S/M/L) volgen dit. De footer houdt de ACSS-ruimte.
   -------------------------------------------------------------------------- */
/* ACSS maakt van elke <section> een flexbox (kolom met gap). Daardoor krimpen brede blokken.
   Groepen uit de blok-editor gebruiken de opmaak van WordPress zelf. */
section.wp-block-group.is-layout-constrained,
section.wp-block-group.is-layout-flow {
  display: block;
}
.wp-block-group.is-style-section {
  padding-block: var(--wp--preset--spacing--sectie-m);
}
/* Secties sluiten op elkaar aan, zonder de standaardruimte tussen blokken. */
.is-layout-constrained > .wp-block-group.is-style-section,
.is-layout-flow > .wp-block-group.is-style-section {
  margin-block: 0;
}
.wp-block-group.is-style-section.starter-section--hero {
  padding-block: var(--wp--preset--spacing--sectie-l) var(--wp--preset--spacing--sectie-m);
}
.wp-block-group.is-style-section.starter-section--tight {
  padding-block: var(--wp--preset--spacing--sectie-s);
}

/* --------------------------------------------------------------------------
   Groep, stijl "Kaart" en "Kaart, transparant"
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-card {
  --starter-kaart-py: var(--space-xl);
  --starter-kaart-px: var(--space-xl);
  padding: var(--starter-kaart-py) var(--starter-kaart-px);
  border-radius: var(--starter-card-radius);
  background: var(--white);
}
.wp-block-group.is-style-card-glass {
  padding: var(--space-l);
  border-radius: var(--starter-card-radius);
  background: color-mix(in oklch, var(--white) 40%, transparent);
}
/* Kaart met beeld en tekst (kolommen in een kaart): op mobiel staat het beeld altijd boven de tekst,
   ook als het op grotere schermen rechts staat. Patronen "Kaart met beeld links/rechts". */
@media (max-width: 781px) {
  .wp-block-group.is-style-card > .wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child) {
    order: -1;
  }
  .wp-block-group.is-style-card > .wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child) img {
    max-inline-size: 7.5rem;
  }
}
@media (max-width: 767px) {
  .wp-block-group.is-style-card {
    --starter-kaart-py: var(--space-l);
    --starter-kaart-px: var(--space-m);
  }
  .wp-block-group.is-style-card-glass {
    padding: var(--space-m);
  }
}

/* --------------------------------------------------------------------------
   Groep, stijl "Zigzag": rijen om en om iets naar links en rechts (brede schermen)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .wp-block-group.is-style-zigzag > :nth-child(odd) {
    translate: -50px 0;
  }
  .wp-block-group.is-style-zigzag > :nth-child(even) {
    translate: 50px 0;
  }
}

/* Kaart die als geheel klikbaar is: zet klasse starter-card-link op de groep en een link in de kop. */
.starter-card-link {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.starter-card-link a {
  color: inherit;
  text-decoration: none;
}
.starter-card-link a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.starter-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px light-dark(oklch(0 0 0 / 0.08), oklch(0 0 0 / 0.4));
}
.starter-card-link:has(a:focus-visible) {
  outline: 2px solid var(--secondary-dark);
  outline-offset: 4px;
}
.starter-card-link a:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   Knoppen: dezelfde knoppen als ACSS (btn--primary, btn--outline).
   De basisopmaak komt uit de ACSS-regel [class*="btn--"].wp-block-button > .wp-block-button__link;
   hier alleen de kleuren per stijl.
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-btn--primary {
  color-scheme: light;
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--primary-hover);
  --focus-color: var(--primary-light);
}
.wp-block-button.is-style-btn--secondary {
  color-scheme: light;
  --btn-background: var(--secondary);
  --btn-background-hover: var(--secondary-hover);
  --btn-text-color: var(--secondary-ultra-light);
  --btn-text-color-hover: var(--secondary-ultra-light);
  --btn-border-color: var(--secondary);
  --btn-border-color-hover: var(--secondary-hover);
  --focus-color: var(--secondary-light);
}
.wp-block-button.is-style-btn--tertiary {
  color-scheme: light;
  --btn-background: var(--tertiary);
  --btn-background-hover: var(--tertiary-hover);
  --btn-text-color: var(--tertiary-ultra-light);
  --btn-text-color-hover: var(--tertiary-ultra-light);
  --btn-border-color: var(--tertiary);
  --btn-border-color-hover: var(--tertiary-hover);
  --focus-color: var(--tertiary-light);
}
.wp-block-button.is-style-btn--outline-primary {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-width: 2px;
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--primary-hover);
  --focus-color: var(--primary-light);
}
.wp-block-button.is-style-btn--outline-secondary {
  --btn-background: transparent;
  --btn-background-hover: var(--secondary-hover);
  --btn-text-color: var(--secondary);
  --btn-text-color-hover: var(--secondary-ultra-light);
  --btn-border-width: 2px;
  --btn-border-color: var(--secondary);
  --btn-border-color-hover: var(--secondary-hover);
  --focus-color: var(--secondary-light);
}
/* Rand, wit: voor knoppen op een donkere of gekleurde achtergrond. Blijft wit, ook in de donkere modus. */
.wp-block-button.is-style-btn--outline-white {
  --btn-background: transparent;
  --btn-background-hover: #fff;
  --btn-text-color: #fff;
  --btn-text-color-hover: var(--primary);
  --btn-border-width: 2px;
  --btn-border-color: #fff;
  --btn-border-color-hover: #fff;
  --focus-color: oklch(1 0 0 / 0.6);
}
/*
 * Link met pijltje (sinds 0.9.22): alleen tekst, links uitgelijnd, met een dun lijntje eronder en rechts het groene
 * pijltje van het hoofdmenu. Voor een link naar een anker verderop op de pagina (#anker), of een rustige link.
 * Geen vlak en geen rand. Tekst magenta (primary), lijntje in dezelfde kleur maar lichter.
 * Hover: tekst en lijntje donkerder magenta (primary-semi-dark; in de donkere modus lichter), het pijltje zakt een stukje.
 */
.wp-block-button.is-style-btn--link {
  --btn-background: transparent;
  --btn-background-hover: transparent;
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-semi-dark);
  --btn-border-color: transparent;
  --btn-border-color-hover: transparent;
  --btn-min-width: 0;
  --focus-color: var(--secondary-dark);
}
.wp-block-button.is-style-btn--link > .wp-block-button__link {
  justify-content: flex-start;
  gap: 0.45em;
  min-inline-size: 0;
  padding: 0 0 0.3em;
  border: 0;
  border-block-end: 1px solid color-mix(in oklch, currentColor 35%, transparent);
  border-radius: 0;
  background: transparent;
  text-align: start;
  transition: color 0.2s, border-color 0.2s;
}
.wp-block-button.is-style-btn--link > .wp-block-button__link::after {
  content: "";
  flex: none;
  inline-size: 0.75em;
  block-size: 0.75em;
  background: var(--tertiary);
  -webkit-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;
  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;
  transition: transform 0.25s;
}
.wp-block-button.is-style-btn--link > .wp-block-button__link:hover {
  border-block-end-color: currentColor;
  background: transparent;
  color: var(--primary-semi-dark);
}
.wp-block-button.is-style-btn--link > .wp-block-button__link:hover::after {
  transform: translateY(0.15em);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button.is-style-btn--link > .wp-block-button__link::after {
    transition: none;
  }
}
/* Ankerlinks scrollen zacht naar hun doel, met wat ruimte erboven (niet bij "beweging beperken"). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* ACSS geeft elk [id] scroll-margin-top: var(--offset) (= --scroll-margin + --header-height).
   Sinds 0.9.44: --header-height is de compacte balk die na wat scrollen vast bovenin staat (ruimte erboven + hoogte,
   zie "Compacte header" in theme.css), zodat een anker niet achter die balk valt. De adminbalk telt WordPress zelf mee. */
:root {
  --scroll-margin: var(--space-m);
  --header-height: calc(var(--space-s) + 3.5rem);
}
@media (max-width: 991px) {
  :root {
    --header-height: calc(var(--space-s) + 3rem);
  }
}
.wp-block-buttons {
  gap: var(--space-s) var(--space-m);
}
/* Knoppen die rechts staan in een kolom, gaan naar links zodra de kolommen onder elkaar staan
   (tot 781 px, of tot 991 px bij kolommen met de klasse starter-stack-tablet). Dan staan ze in lijn met de tekst erboven. */
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-buttons.is-content-justification-right {
    justify-content: flex-start;
  }
}
@media (max-width: 991px) {
  .wp-block-columns.starter-stack-tablet > .wp-block-column > .wp-block-buttons.is-content-justification-right {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Afbeeldingen en video
   -------------------------------------------------------------------------- */
.wp-block-image.is-style-rounded img {
  border-radius: var(--radius-xl);
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper,
.wp-block-video video {
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.wp-block-embed.is-type-video {
  margin-block: 0;
}
/* Spotify: de speler heeft een vaste hoogte (152 px), geen 21:9-verhouding. */
.wp-block-embed.is-provider-spotify .wp-block-embed__wrapper::before {
  content: none;
}
.wp-block-embed.is-provider-spotify .wp-block-embed__wrapper iframe {
  position: static;
  block-size: 152px;
}

/* --------------------------------------------------------------------------
   Kolommen: op tablets eerder onder elkaar
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .wp-block-columns.starter-stack-tablet {
    flex-wrap: wrap !important;
  }
  .wp-block-columns.starter-stack-tablet > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Altijd licht: voor vlakken met een vaste kleur (cijferkaarten, video)
   -------------------------------------------------------------------------- */
.starter-scheme-light {
  color-scheme: light;
  color: var(--text-dark);
}

/* --------------------------------------------------------------------------
   Cijferkaarten: afbeelding met het cijfer, korte tekst eronder
   -------------------------------------------------------------------------- */
.starter-cijfers .wp-block-image {
  margin-block: 0;
}
.starter-cijfers .wp-block-group.is-style-card {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Breedtes, zoals width--l, width--xl en width--xxl in Bricks (deel van de inhoudsbreedte)
   -------------------------------------------------------------------------- */
:is(.wp-block-group, .wp-block-columns).starter-breedte-l {
  max-width: calc(var(--content-width) * 0.6);
  margin-inline: auto;
}
:is(.wp-block-group, .wp-block-columns).starter-breedte-xl {
  max-width: calc(var(--content-width) * 0.8);
  margin-inline: auto;
}
:is(.wp-block-group, .wp-block-columns).starter-breedte-xxl {
  max-width: calc(var(--content-width) * 0.9);
  margin-inline: auto;
}

/* Koppen met een ACSS-klasse (h1 t/m h6) zetten zelf max-width: 100%. In een sectie houden ze de brede maat aan,
   zoals de containers in Bricks (1366 px). */
.is-layout-constrained > .wp-block-heading:where(.h1, .h2, .h3, .h4, .h5, .h6):where(:not(.alignfull)) {
  max-width: var(--wp--style--global--wide-size);
}

/* Regellengte in tekens, zoals max-width: 25ch in Bricks. Voor koppen en tekst die breder of smaller mag dan de inhoudsbreedte. */
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-13ch { max-width: 13ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-15ch { max-width: 15ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-20ch { max-width: 20ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-24ch { max-width: 24ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-25ch { max-width: 25ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-29ch { max-width: 29ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-34ch { max-width: 34ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-45ch { max-width: 45ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-60ch { max-width: 60ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-65ch { max-width: 65ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-70ch { max-width: 70ch; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-75ch { max-width: 75ch; }
:is(.wp-block-heading, .wp-block-paragraph, p).starter-mw-960 { max-width: 960px; }
:is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-60vw { max-width: 60vw; }
@media (max-width: 991px) {
  :is(.wp-block-heading, .wp-block-paragraph, p, .wp-block-group).starter-mw-60vw { max-width: 90vw; }
}
.has-text-align-center:is(.starter-mw-13ch, .starter-mw-15ch, .starter-mw-20ch, .starter-mw-24ch, .starter-mw-25ch, .starter-mw-29ch, .starter-mw-34ch, .starter-mw-45ch, .starter-mw-60ch, .starter-mw-65ch, .starter-mw-70ch, .starter-mw-75ch, .starter-mw-960, .starter-mw-60vw) {
  margin-inline: auto;
}
/* Smaller blok in het midden van een kaart of sectie */
.starter-midden {
  margin-inline: auto !important;
}

/* Lijsten zoals de tekstelementen in Bricks (ACSS): inspringing en wat lucht tussen de punten */
:where(.wp-block-list) {
  padding-inline-start: var(--list-indent-spacing, 2em);
}
:where(.wp-block-list) > li + li {
  margin-block-start: var(--list-item-spacing, 0.5em);
}
.wp-block-group.starter-tekst > * + :is(ul, ol) {
  margin-block: var(--list-spacing, 1em);
}

/* Raster waarin alle rijen even hoog zijn (de hoogste kaart bepaalt de maat) */
.wp-block-group.is-layout-grid.starter-rijen-gelijk {
  grid-auto-rows: 1fr;
}

/* Tekst in twee kolommen (krantenkolommen), op smalle schermen één */
.wp-block-group.starter-tekstkolommen {
  columns: 2;
  column-gap: 2rem;
}
@media (max-width: 768px) {
  .wp-block-group.starter-tekstkolommen {
    columns: 1;
  }
}

/* Icoon boven een kop, met iets meer ruimte eronder (aanpakker-pagina's) */
.wp-block-image.starter-mb-icoon {
  margin-block-end: calc(var(--space-s) + var(--space-xs));
}

/* Vetgedrukte kleine kop, zoals de Bricks-koppen met klasse h4/h5 op een h2 */
.starter-vet {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Animatie tussen twee secties: smalle sectie, de animatie hangt erboven en valt
   achter de volgende sectie (zoals de Lottie onder de kop van Contact en Kickstart).
   -------------------------------------------------------------------------- */
.wp-block-group.starter-tussenanimatie,
.is-layout-constrained > .wp-block-group.starter-tussenanimatie {
  position: relative;
  margin-block: 0;
  padding-block: var(--space-xs);
}
.wp-block-group.starter-tussenanimatie > .starter-lottie {
  position: absolute;
  inset-block-start: -60px;
  inset-inline: 0;
  z-index: -5;
  inline-size: 10em;
  max-inline-size: none;
  margin: 0 auto;
}
/* Variant onderaan de Kickstart-dagen: kleiner, iets lager. */
.wp-block-group.starter-tussenanimatie.starter-tussenanimatie--slot {
  padding-block: var(--wp--preset--spacing--sectie-xs) var(--wp--preset--spacing--sectie-xl);
}
.wp-block-group.starter-tussenanimatie.starter-tussenanimatie--slot > .starter-lottie {
  inset-block-start: 20px;
  inline-size: 7.5em;
}

/* --------------------------------------------------------------------------
   Kaart met animatie en tekst naast elkaar (patroon "Kaart met animatie en knop")
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-card-glass.starter-glas-50 {
  padding: var(--space-xl);
  /* Terugval (sinds 0.9.25): in de editor bestaat --white-trans-50 van ACSS niet, dan was de kaart daar doorzichtig. */
  background: var(--white-trans-50, color-mix(in oklch, #fff 50%, transparent));
}
.wp-block-group.starter-animatie-tekst {
  gap: var(--content-gap);
}
/* De animatie schaalt mee met het scherm (14 tot 20rem), maar nooit breder dan de Maximale breedte van het Lottie-blok
   (--starter-lottie-max, sinds 0.9.24). Ook in de editor (.starter-lottie-editor). */
.wp-block-group.starter-animatie-tekst > :is(.starter-lottie, .starter-lottie-editor) {
  flex: 0 1 min(var(--starter-lottie-max, 20rem), clamp(14rem, 8rem + 10vw, 20rem));
  max-inline-size: min(var(--starter-lottie-max, 20rem), clamp(14rem, 8rem + 10vw, 20rem));
  margin: 0;
}
.wp-block-group.starter-animatie-tekst > .wp-block-group {
  flex: 0 1 60ch;
  max-width: 60ch;
}
@media (max-width: 767px) {
  .wp-block-group.is-style-card-glass.starter-glas-50 {
    padding: var(--space-l) var(--space-m);
  }
  .wp-block-group.starter-animatie-tekst {
    flex-wrap: wrap !important;
  }
}

/* --------------------------------------------------------------------------
   Formulier (Fluent Forms) in een kaart
   -------------------------------------------------------------------------- */
.starter-formulier .fluentform {
  inline-size: 100%;
}
/* Conversational form (Deel je tip): groter op brede schermen, zoals in Bricks. */
.starter-gesprek-formulier {
  transform-origin: center top;
}
@media (min-width: 600px) {
  .starter-gesprek-formulier { transform: scale(1.1); }
}
@media (min-width: 900px) {
  .starter-gesprek-formulier { transform: scale(1.25); }
}
@media (min-width: 1200px) {
  .starter-gesprek-formulier { transform: scale(1.5); }
}

/* Tekstblok met alinea's dicht op elkaar, zoals een tekstelement in Bricks (alinea-afstand 1em) */
/* flow-root: de marge onder een lijst aan het eind blijft binnen het blok, zoals in Bricks */
.wp-block-group.starter-tekst {
  display: flow-root;
}
.wp-block-group.starter-tekst > * {
  margin-block: 0;
}
.wp-block-group.starter-tekst > * + * {
  margin-block-start: var(--paragraph-spacing, 1em);
}
/* Formulier met ruimere invoervelden (Kickstart) */
.starter-formulier--ruim .fluentform .ff-el-group :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
  padding: var(--space-xs);
}

/* Kaart met extra ruimte (Gefeliciteerd! in de Kickstart) */
.wp-block-group.is-style-card.starter-kaart--ruim {
  --starter-kaart-py: var(--space-xxl);
  --starter-kaart-px: var(--space-xxl);
}
@media (max-width: 767px) {
  .wp-block-group.is-style-card.starter-kaart--ruim {
    --starter-kaart-py: var(--space-l);
    --starter-kaart-px: var(--space-m);
  }
}

/* --------------------------------------------------------------------------
   Uitgelichte tekst (alinea, stijl "Uitgelicht", of klasse starter-highlight)
   Handschrift in de primaire kleur, iets groter dan de lopende tekst, met een pijltje ervoor.
   Noteworthy staat op Apple-apparaten; elders Kalam Bold (in het thema, OFL).
   -------------------------------------------------------------------------- */
.is-style-uitgelicht,
.starter-highlight {
  font-family: Noteworthy, Kalam, var(--text-font-family);
  font-weight: 700;
  font-size: calc(var(--text-m) * 1.2);
  line-height: 1.35;
  color: var(--primary);
}
.is-style-uitgelicht::before,
.starter-highlight::before {
  content: "";
  display: inline-block;
  inline-size: 2em;
  aspect-ratio: 2;
  margin-inline-end: 0.4em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 25'%3E%3Cg transform='translate(2 -4)'%3E%3Cpath transform='rotate(4 22 13.5)' d='M31.54,13.74 L44.38,18.71 L44.13,16.98 L33.22,25.38 C32.78,25.72 32.7,26.34 33.04,26.78 C33.37,27.22 34,27.3 34.44,26.96 L45.35,18.57 L46.76,17.48 L45.1,16.84 L32.26,11.88 C31.75,11.68 31.17,11.93 30.97,12.45 C30.77,12.96 31.03,13.54 31.54,13.74 Z M43.86,16.89 L32.82,18.49 L32.93,18.48 C19.49,18.88 5.98,13.87 0.8,6.9 C0.47,6.46 -0.15,6.37 -0.6,6.7 C-1.04,7.03 -1.13,7.65 -0.8,8.1 C4.81,15.66 18.95,20.89 32.99,20.48 L33.1,20.47 L44.14,18.87 C44.69,18.79 45.07,18.29 44.99,17.74 C44.91,17.19 44.4,16.81 43.86,16.89 Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* Links uitgelijnd: de tweede regel begint onder de tekst, niet onder de pijl (hangende inspringing). */
.is-style-uitgelicht:not(.has-text-align-center):not(.has-text-align-right),
.starter-highlight:not(.has-text-align-center):not(.has-text-align-right) {
  padding-inline-start: 2.4em;
  text-indent: -2.4em;
}

/* --------------------------------------------------------------------------
   Groep, stijl "Kaart, liggend": icoon links, nummer met titel en uitleg, knop rechts.
   Het nummer (geel bolletje) telt automatisch op per kaart binnen dezelfde groep.
   Opbouw in de editor: Afbeelding, Groep (kop + alinea), Knoppen. Patroon: "Kaart, liggend" en "Start direct met".
   -------------------------------------------------------------------------- */
:has(> .wp-block-group.is-style-kaart-liggend) {
  counter-reset: starter-kaart;
}
.wp-block-group.is-style-kaart-liggend {
  --starter-kaart-icoon: 7.5rem;
  --starter-kaart-nummer: 1.75rem;
  counter-increment: starter-kaart;
  display: grid;
  grid-template-columns: var(--starter-kaart-icoon) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs) var(--space-l);
  padding: var(--space-m) var(--space-xl) var(--space-m) var(--space-l);
  border-radius: var(--starter-card-radius);
  background: var(--white);
}
.wp-block-group.is-style-kaart-liggend > * {
  grid-column: 2;
  margin: 0;
}
.wp-block-group.is-style-kaart-liggend > .wp-block-image {
  grid-column: 1;
  grid-row: 1;
}
.wp-block-group.is-style-kaart-liggend > .wp-block-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.wp-block-group.is-style-kaart-liggend > .wp-block-buttons {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}
.wp-block-group.is-style-kaart-liggend:not(:has(> .wp-block-image)) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.wp-block-group.is-style-kaart-liggend:not(:has(> .wp-block-image)) > * {
  grid-column: 1;
}
.wp-block-group.is-style-kaart-liggend:not(:has(> .wp-block-image)) > .wp-block-buttons {
  grid-column: 2;
}
/* Kop met nummer; de tekst eronder lijnt uit met de kop, niet met het nummer. */
.wp-block-group.is-style-kaart-liggend :is(h2, h3, h4) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.wp-block-group.is-style-kaart-liggend :is(h2, h3, h4)::before {
  content: counter(starter-kaart);
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--starter-kaart-nummer);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: var(--secondary-semi-dark);
  font-family: var(--heading-font-family);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  color-scheme: light;
}
.wp-block-group.is-style-kaart-liggend :is(h2, h3, h4) ~ * {
  margin-block: 0.35em 0;
  margin-inline-start: calc(var(--starter-kaart-nummer) + 0.6rem);
}
/* Mobiel: icoon en titel naast elkaar, uitleg en knop over de volle breedte eronder. */
@media (max-width: 767px) {
  .wp-block-group.is-style-kaart-liggend {
    --starter-kaart-icoon: 3.5rem;
    grid-template-columns: var(--starter-kaart-icoon) minmax(0, 1fr);
    gap: var(--space-xs) var(--space-s);
    padding: var(--space-m);
  }
  .wp-block-group.is-style-kaart-liggend > .wp-block-group {
    display: contents;
  }
  .wp-block-group.is-style-kaart-liggend :is(h2, h3, h4) {
    grid-column: 2;
    grid-row: 1;
  }
  .wp-block-group.is-style-kaart-liggend :is(h2, h3, h4) ~ * {
    grid-column: 1 / -1;
    margin-inline-start: 0;
  }
  .wp-block-group.is-style-kaart-liggend > .wp-block-buttons {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-start;
    margin-block-start: var(--space-xs);
  }
  .wp-block-group.is-style-kaart-liggend:not(:has(> .wp-block-image)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .wp-block-group.is-style-kaart-liggend:not(:has(> .wp-block-image)) :is(h2, h3, h4) {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   Groep, stijl "Statistiek": cijfer, korte tekst en bron in een roze kaart.
   Opbouw in de editor: drie alinea's (cijfer, tekst, bron); de stijl maakt de eerste groot en blauw
   en zet de bron onderaan. Zet de kaarten samen in één groep: die wordt een raster van
   4 kolommen, 2 op smallere schermen. Patroon: "Statistieken (vier kaarten)".
   -------------------------------------------------------------------------- */
.wp-block-group:has(> .wp-block-group.is-style-statistiek) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
@media (min-width: 1100px) {
  .wp-block-group:has(> .wp-block-group.is-style-statistiek) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.wp-block-group.is-style-statistiek {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-l) var(--space-m);
  border-radius: var(--starter-card-radius);
  background: color-mix(in oklch, var(--primary-light) 50%, var(--primary-ultra-light));
}
.wp-block-group.is-style-statistiek > * {
  margin: 0;
}
.wp-block-group.is-style-statistiek > :first-child {
  font-family: var(--heading-font-family);
  font-size: var(--h2);
  font-weight: 800;
  line-height: 1.1;
  color: var(--secondary);
}
.wp-block-group.is-style-statistiek > :nth-child(2) {
  font-size: var(--text-l);
  line-height: 1.3;
}
.wp-block-group.is-style-statistiek > :last-child:not(:nth-child(-n+2)) {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  font-size: var(--text-xs);
}
@media (max-width: 599px) {
  .wp-block-group:has(> .wp-block-group.is-style-statistiek) {
    gap: var(--space-s);
  }
  .wp-block-group.is-style-statistiek {
    padding: var(--space-m) var(--space-s);
  }
  .wp-block-group.is-style-statistiek > :first-child {
    font-size: var(--h3);
  }
  .wp-block-group.is-style-statistiek > :nth-child(2) {
    font-size: var(--text-m);
    line-height: 1.35;
  }
}

/* --------------------------------------------------------------------------
   Groep, stijl "Logokaart" (sinds 0.9.36): wit vlak (4 bij 3) met een logo in het midden, bijvoorbeeld voor
   samenwerkingspartners. Zet de kaarten samen in één groep: die wordt een raster van 4 kolommen vanaf 992 px,
   2 op smallere schermen; meer kaarten lopen door op een nieuwe rij. Patroon: "Logo's (raster)".
   Sinds 0.9.37: een kaart zonder logo staat niet op de site (in de editor wel, om er een logo in te zetten), en
   een rij die niet vol is staat in het midden (3 logo's = 3 kaarten, gecentreerd).
   Het logo past zich aan de kaart aan (hoogstens 55 % van de breedte en 62 % van de hoogte), zodat brede en
   ronde logo's even zwaar ogen. Altijd wit, ook in de donkere modus (logo's horen op wit).
   -------------------------------------------------------------------------- */
.wp-block-group:has(> .wp-block-group.is-style-logokaart) {
  --starter-logo-cols: 2;
  --starter-logo-gap: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--starter-logo-gap);
}
@media (min-width: 992px) {
  .wp-block-group:has(> .wp-block-group.is-style-logokaart) {
    --starter-logo-cols: 4;
  }
}
.wp-block-group.is-style-logokaart {
  flex: 0 0 calc((100% - (var(--starter-logo-cols) - 1) * var(--starter-logo-gap)) / var(--starter-logo-cols));
  min-inline-size: 0;
  color-scheme: light;
  container-type: size;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border-radius: var(--starter-card-radius);
  background: #fff;
}
.wp-block-group.is-style-logokaart > * {
  margin: 0;
}
.wp-block-group.is-style-logokaart .wp-block-image img {
  display: block;
  inline-size: 55cqi;
  block-size: 62cqb;
  max-inline-size: none;
  object-fit: contain;
}
/* Op de site: een kaart zonder logo niet tonen, en de hele groep niet als er nog geen enkel logo in staat
   (anders blijft er een lege tussenruimte over). */
.wp-block-group.is-style-logokaart:not(:has(img, .components-placeholder)),
.wp-block-group:has(> .wp-block-group.is-style-logokaart):not(:has(img, .components-placeholder)) {
  display: none;
}
/* In de editor: een lege kaart (nog geen logo) mag groeien, zodat de knoppen Uploaden en Mediabibliotheek passen. */
.wp-block-group.is-style-logokaart:has(.components-placeholder) {
  container-type: normal;
  aspect-ratio: auto;
  padding: var(--space-s);
}
@media (max-width: 599px) {
  .wp-block-group:has(> .wp-block-group.is-style-logokaart) {
    --starter-logo-gap: var(--space-s);
  }
}

/* --------------------------------------------------------------------------
   Groep, stijl "Stap" (sinds 0.9.39): compacte witte kaart met een nummer in een lichtgroen rondje, een blauwe titel
   en een korte uitleg eronder. Het nummer telt vanzelf op per kaart in dezelfde groep. Zet de stappen samen in één
   groep: die wordt een smalle kolom (hoogstens 40rem) in het midden. Opbouw: Kop (h3) + Alinea. Patroon: "Stappen".
   -------------------------------------------------------------------------- */
:has(> .wp-block-group.is-style-stap) {
  counter-reset: starter-stap;
}
.wp-block-group:has(> .wp-block-group.is-style-stap) {
  display: grid;
  gap: var(--space-s);
  inline-size: 100%;
  max-inline-size: 40rem;
  margin-inline: auto;
}
.wp-block-group.is-style-stap {
  --starter-stap-nummer: 2.25rem;
  counter-increment: starter-stap;
  display: grid;
  grid-template-columns: var(--starter-stap-nummer) minmax(0, 1fr);
  align-content: center;
  column-gap: var(--space-xs);
  margin: 0;
  padding: var(--space-s) var(--space-l) var(--space-s) var(--space-m);
  border-radius: calc(var(--starter-card-radius) * 1.4);
  background: var(--white);
}
.wp-block-group.is-style-stap::before {
  content: counter(starter-stap);
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  inline-size: var(--starter-stap-nummer);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tertiary-light);
  color: var(--secondary);
  font-family: var(--heading-font-family);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.wp-block-group.is-style-stap > * {
  grid-column: 2;
  margin: 0;
}
.wp-block-group.is-style-stap > :is(h2, h3, h4) {
  color: var(--secondary);
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.wp-block-group.is-style-stap > :is(h2, h3, h4) + * {
  margin-block-start: 0.25em;
  font-size: var(--text-m);
}
/* Stap met alleen een kop (sinds 0.9.42): de kop staat in het midden naast het nummer. */
.wp-block-group.is-style-stap > :only-child {
  grid-row: 1 / span 2;
  align-self: center;
}
@media (max-width: 599px) {
  .wp-block-group.is-style-stap {
    --starter-stap-nummer: 1.875rem;
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
  }
  .wp-block-group.is-style-stap::before {
    font-size: 1.0625rem;
  }
}

/* --------------------------------------------------------------------------
   Groep, stijl "Tip" (sinds 0.9.40): zachtgeel paneel met een lampje in een geel rondje. Opbouw: Kop "Tip" (h3)
   en een of meer alinea's; de kop staat op één lijn met het lampje. Patroon: "Tip".
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-tip {
  --starter-tip-icoon: 2.75rem;
  display: grid;
  grid-template-columns: var(--starter-tip-icoon) minmax(0, 1fr);
  align-items: start;
  gap: 0 var(--space-s);
  padding: var(--space-m) var(--space-l) var(--space-m) var(--space-m);
  border-radius: var(--starter-card-radius);
  background: var(--accent-ultra-light);
}
.wp-block-group.is-style-tip::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 12;
  inline-size: var(--starter-tip-icoon);
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18.5h6M10 21.5h4M12 2.5a6.5 6.5 0 0 0-3.8 11.8c.6.5 1 1.2 1 2V16.5h5.6v-.2c0-.8.4-1.5 1-2A6.5 6.5 0 0 0 12 2.5z'/%3E%3Cpath d='M12 6.5a3 3 0 0 1 3 3'/%3E%3C/svg%3E") center / 58% no-repeat, var(--accent);
  color-scheme: light;
}
.wp-block-group.is-style-tip > * {
  grid-column: 2;
  margin: 0;
}
.wp-block-group.is-style-tip > * + * {
  margin-block-start: 0.35em;
}
.wp-block-group.is-style-tip > :is(h2, h3, h4):first-child {
  display: flex;
  align-items: center;
  min-block-size: var(--starter-tip-icoon);
  color: var(--primary);
  font-size: var(--h4);
  font-weight: 600;
  line-height: 1.2;
}
.wp-block-group.is-style-tip > :is(h2, h3, h4):first-child + * {
  margin-block-start: 0;
}
/* Een lijst in het paneel (sinds 0.9.43): de nummers of punten staan onder het begin van de kop. */
.wp-block-group.is-style-tip > :is(ul, ol) {
  padding-inline-start: 1.25em;
}
/* Mobiel: lampje en kop op één regel, de tekst eronder over de volle breedte. */
@media (max-width: 599px) {
  .wp-block-group.is-style-tip {
    --starter-tip-icoon: 2.25rem;
    column-gap: var(--space-xs);
    padding: var(--space-s) var(--space-m) var(--space-m) var(--space-s);
  }
  .wp-block-group.is-style-tip:has(> :is(h2, h3, h4):first-child)::before {
    grid-row: 1;
  }
  .wp-block-group.is-style-tip > :is(h2, h3, h4):first-child ~ * {
    grid-column: 1 / -1;
  }
  .wp-block-group.is-style-tip > :is(h2, h3, h4):first-child + * {
    margin-block-start: 0.5em;
  }
}

/* Lijst, stijl "Vinkjes" (sinds 0.9.40): groene vinkjes in plaats van opsommingstekens. */
.wp-block-list.is-style-vinkjes {
  padding-inline-start: 0;
  list-style: none;
}
.wp-block-list.is-style-vinkjes > li {
  position: relative;
  padding-inline-start: 2rem;
}
.wp-block-list.is-style-vinkjes > li + li {
  margin-block-start: 0.5em;
}
.wp-block-list.is-style-vinkjes > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.15em;
  inline-size: 1.3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146b3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat, var(--tertiary-light);
  color-scheme: light;
}

/* Kaart, compact (klasse starter-kaart--compact bij de stijl Kaart, sinds 0.9.40): minder binnenruimte, voor
   kleinere panelen zoals twee lijstjes naast elkaar. */
.wp-block-group.is-style-card.starter-kaart--compact {
  --starter-kaart-py: var(--space-l);
  --starter-kaart-px: var(--space-l);
}
@media (max-width: 767px) {
  .wp-block-group.is-style-card.starter-kaart--compact {
    --starter-kaart-py: var(--space-m);
    --starter-kaart-px: var(--space-m);
  }
}

/* --------------------------------------------------------------------------
   Kaartvoet: grijze balk onderaan een Kaart met een korte tekst en een knop, zoals onderaan het megamenu.
   Aanzetten in de editor: Kaart selecteren > zijbalk "Kaart" > "Balk onderaan met link".
   Dat voegt als laatste blok een Groep met de stijl "Kaartvoet" toe (alinea + knop); uitzetten haalt hem weg.
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-kaartvoet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--neutral-ultra-light);
  text-align: center;
}
.wp-block-group.is-style-card > .wp-block-group.is-style-kaartvoet {
  margin: var(--starter-kaart-py) calc(var(--starter-kaart-px) * -1) calc(var(--starter-kaart-py) * -1);
  padding-inline: var(--starter-kaart-px);
  border-radius: 0 0 var(--starter-card-radius) var(--starter-card-radius);
}
.wp-block-group.is-style-kaartvoet > * {
  margin: 0;
}
.wp-block-group.is-style-kaartvoet > p {
  font-weight: 600;
  color: var(--secondary);
}