/*
Theme Name: Casa Lina
Description: Eigen, licht thema voor Casa Lina Kindercoaching. Pagina's bestaan uit gewone WordPress-blokken; de vormgeving staat in dit ene stylesheet.
Version: 1.0.0
Requires at least: 7.1
Requires PHP: 8.2
Text Domain: casalina
*/

/* ------------------------------------------------------------------ */
/* Ontwerpwaarden (bron: ontwerp/tokens.css)                           */
/* ------------------------------------------------------------------ */

@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/catamaran-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/catamaran-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/catamaran-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/catamaran-latin-800-normal.woff2') format('woff2'); }

:root {
  --inkt: #0A303A;
  --tekst-zacht: #2F4B52;
  --petrol: #176673;
  --accent: #F47833;
  --grond: #FAF8F4;
  --vlak-petrol: #E4F1F2;
  --vlak-creme: #FCEFD8;
  --vlak-voet: #F1EEE7;
  --wit: #FFFFFF;
  --lijn: #E8E4DC;
  --lijn-voet: #D9D4C8;
  --veldrand: #9DB3B8;

  --letter: 'Catamaran', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --tekst: 18px;
  --regelhoogte: 1.6;
  --h1: clamp(34px, 3.6vw, 46px);
  --h2: 36px;
  --h3: 24px;
  --inleiding: 20px;
  --intro: 19px;
  --label: 15px;

  --breedte: 1120px;
  --leeskolom: 760px;
  --rand: 32px;
  --sectie: 80px;
  --klikdoel: 44px;

  --rond-veld: 10px;
  --rond-klein: 14px;
  --rond-kaart: 20px;
  --rond-groot: 24px;
  --rond-foto: 28px;
  --rond-knop: 999px;

  --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176673' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --pictogram-telefoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v3a3 3 0 0 1-3 3A15 15 0 0 1 3 6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
  --pictogram-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  --pictogram-adres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176673' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.home { --h1: clamp(36px, 4.2vw, 54px); --h2: 40px; }

/* ------------------------------------------------------------------ */
/* Basis                                                               */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--tekst);
  line-height: var(--regelhoogte);
}

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-inhoud { flex-grow: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; color: var(--inkt); }
h1 { font-size: var(--h1); line-height: 1.12; text-wrap: balance; }
.home h1 { line-height: 1.1; }
h2 { font-size: var(--h2); line-height: 1.2; }
h3 { font-size: var(--h3); line-height: 1.25; }
h4 { font-size: 20px; line-height: 1.3; }

p { margin: 0; color: var(--tekst-zacht); }
ul, ol { margin: 0; }
figure { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--petrol); }
a:hover { color: var(--inkt); }

:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

.screen-reader-text,
.visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.naar-inhoud:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  width: auto; height: auto; clip: auto;
  background: var(--wit); color: var(--inkt);
  padding: 10px 16px; border-radius: var(--rond-veld);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Kopbalk                                                             */
/* ------------------------------------------------------------------ */

.kopbalk {
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

.kopbalk__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 16px var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kopbalk__logo { min-height: 48px; display: inline-flex; align-items: center; }
.kopbalk__logo img { height: 46px; width: auto; display: block; }

.kopbalk__menuknop { display: none; }

.kopbalk__menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 24px;
}

.kopbalk__menu > nav { flex: 1 1 auto; display: flex; justify-content: center; }

.hoofdmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  font-weight: 700;
  font-size: 17px;
}

.hoofdmenu a {
  color: var(--inkt);
  text-decoration: none;
  min-height: var(--klikdoel);
  display: inline-flex;
  align-items: center;
}

.hoofdmenu a:hover { color: var(--petrol); }

.hoofdmenu .current-menu-item > a,
.hoofdmenu .current_page_parent > a,
.hoofdmenu .casalina-actief > a {
  color: var(--petrol);
  box-shadow: inset 0 -3px 0 var(--petrol);
}

.hoofdmenu .current-menu-parent > a,
.hoofdmenu .current-menu-ancestor > a {
  color: var(--petrol);
  box-shadow: inset 0 -3px 0 var(--petrol);
}

/* Submenu: opent met de knop naast het menu-item (assets/js/menu.js). */
.hoofdmenu > li { position: relative; display: flex; align-items: center; }

.submenu-knop {
  width: 32px;
  min-height: var(--klikdoel);
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: var(--rond-veld);
  background: transparent;
  color: var(--inkt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.submenu-knop:hover { color: var(--petrol); background: var(--vlak-petrol); }
.submenu-knop[aria-expanded="true"] svg { transform: rotate(180deg); }

.hoofdmenu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 20;
  min-width: 260px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  box-shadow: 0 8px 24px rgba(10, 48, 58, 0.08);
}

.hoofdmenu .is-open > .sub-menu { display: block; }

/* Met een muis opent het submenu zodra je over het hoofditem gaat. De knop blijft voor toetsenbord en touchscreen. */
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .hoofdmenu li:hover > .sub-menu { display: block; }
  .hoofdmenu li:hover > .submenu-knop svg { transform: rotate(180deg); }
}

/* Zonder JavaScript opent het submenu bij aanwijzen of met de toetsenbordfocus. */
html:not(.js) .hoofdmenu li:hover > .sub-menu,
html:not(.js) .hoofdmenu li:focus-within > .sub-menu { display: block; }
html:not(.js) .submenu-knop { display: none; }

.hoofdmenu .sub-menu a {
  width: 100%;
  padding: 0 12px;
  border-radius: var(--rond-veld);
  font-weight: 700;
  box-shadow: none;
}

.hoofdmenu .sub-menu a:hover { background: var(--vlak-petrol); color: var(--inkt); }

.hoofdmenu .sub-menu .current-menu-item > a,
.hoofdmenu .sub-menu .casalina-actief > a {
  background: var(--vlak-petrol);
  color: var(--petrol);
  box-shadow: none;
}

.kopbalk .knop { font-size: 17px; min-height: 48px; padding: 0 22px; }

/* ------------------------------------------------------------------ */
/* Knoppen en links                                                    */
/* ------------------------------------------------------------------ */

.knop,
.wp-block-button .wp-block-button__link {
  background: var(--accent);
  color: var(--inkt);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  padding: 0 28px;
  min-height: 52px;
  border: 0;
  border-radius: var(--rond-knop);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.knop:hover,
.wp-block-button .wp-block-button__link:hover { background: #F68A4D; color: var(--inkt); }

.knop:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible { outline-color: var(--inkt); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--petrol);
  border: 2px solid var(--petrol);
  font-size: inherit;
  padding: 0 24px;
  min-height: 48px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--vlak-petrol); color: var(--petrol); }

.wp-block-button.is-style-tekstlink .wp-block-button__link {
  background: none;
  color: var(--petrol);
  font-weight: 700;
  text-decoration: underline;
  padding: 0;
  min-height: var(--klikdoel);
  border-radius: 0;
}

.wp-block-button.is-style-tekstlink .wp-block-button__link:hover { color: var(--inkt); background: none; }

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.wp-block-buttons > .wp-block-button { margin: 0; }

.link-sterk { font-weight: 700; }
.link-sterk a { min-height: var(--klikdoel); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ */
/* Secties en opbouw                                                   */
/* ------------------------------------------------------------------ */

.sectie,
.is-style-sectie-grond,
.is-style-sectie-petrol,
.is-style-sectie-creme {
  padding-block: var(--sectie);
  padding-inline: max(var(--rand), calc((100% - var(--breedte)) / 2 + var(--rand)));
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.home .sectie { padding-block: 88px; gap: 40px; }

.sectie--grond, .is-style-sectie-grond { background: var(--grond); }
.sectie--petrol, .is-style-sectie-petrol { background: var(--vlak-petrol); }
.sectie--creme, .is-style-sectie-creme { background: var(--vlak-creme); }

/* Losse blokken buiten een sectie (vangnet, zie inc/pagina.php). */
.sectie--los { gap: 16px; }
.sectie--los > :is(p, h2, h3, h4, ul, ol, .wp-block-quote, .wp-block-details, .wp-block-table, .wp-block-buttons) { max-width: var(--leeskolom); }
.sectie--los > :is(h2, h3, h4):not(:first-child) { margin-top: 16px; }
.sectie--los > :is(ul, ol) { color: var(--tekst-zacht); padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.sectie--wit { background: var(--wit); }

.sectie--smal { gap: 24px; }
.sectie--ruim { gap: 56px; }

.stapel { display: flex; flex-direction: column; gap: 16px; }
.stapel--krap { gap: 8px; }
.kop-blok { display: flex; flex-direction: column; gap: 12px; }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--kolom, 300px), 100%), 1fr));
  gap: 24px;
}

.raster--2 { --kolom: 420px; }
.raster--3 { --kolom: 300px; gap: 24px; }
.raster--4 { --kolom: 220px; gap: 20px; }
.raster--fotos { --kolom: 300px; gap: 20px; }

.twee-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}

.twee-kolommen--boven { align-items: start; gap: 48px; }
.twee-kolommen--rek { align-items: stretch; }

.leeskolom { max-width: var(--leeskolom); }

.kop-label {
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol);
}

.home .held .kop-label,
.home .sectie--lineke .kop-label { font-size: 16px; }

.inleiding { font-size: var(--inleiding); line-height: 1.6; max-width: 620px; }
.intro { font-size: var(--intro); max-width: 680px; }
.sterk { font-weight: 700; color: var(--inkt); }
.inkt { color: var(--inkt); }
.smal { max-width: 720px; }

/* ------------------------------------------------------------------ */
/* Titelband van subpagina's                                           */
/* ------------------------------------------------------------------ */

.paginakop { padding-block: 64px; }

.paginakop .stapel { gap: 16px; }

.paginakop--foto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}

.paginakop--juridisch { padding-block: 56px; gap: 14px; }
.paginakop .bijgewerkt { font-size: 16px; }

.paginakop .wp-block-buttons { margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* Foto's                                                              */
/* ------------------------------------------------------------------ */

.wp-block-image { margin: 0; }
.wp-block-image img { display: block; width: 100%; }

.wp-block-image.foto-held img {
  height: 460px;
  object-fit: cover;
  object-position: 40% center;
  border-radius: 56% 44% 52% 48% / 48% 54% 46% 52%;
  background: var(--vlak-petrol);
}

.wp-block-image.foto-portret img {
  max-width: 400px;
  height: 440px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--rond-foto);
  background: var(--vlak-creme);
}

.paginakop .wp-block-image.foto-portret { justify-self: end; width: 100%; max-width: 380px; }
.paginakop .wp-block-image.foto-portret img { height: 400px; }

.wp-block-image.foto-tuin { justify-self: center; width: 100%; max-width: 460px; }
.wp-block-image.foto-tuin img {
  height: 480px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--rond-foto);
}

.wp-block-image.foto-kaart img {
  height: 360px;
  object-fit: cover;
  object-position: center 38%;
  border-radius: var(--rond-kaart);
  background: var(--vlak-petrol);
}

.paginakop .wp-block-image.foto-kaart img { height: 380px; border-radius: var(--rond-foto); }

/* Lineke met de Sta Sterk-figuur: altijd onafgesneden. */
.wp-block-image.foto-figuur { flex-shrink: 0; width: 190px; }
.wp-block-image.foto-figuur img {
  aspect-ratio: 10 / 9;
  object-fit: contain;
  border-radius: var(--rond-klein);
}

.wp-block-image.foto-figuur-groot { flex-shrink: 0; width: 300px; max-width: 100%; }
.wp-block-image.foto-figuur-groot img {
  aspect-ratio: 10 / 9;
  object-fit: contain;
  border-radius: 16px;
}

.wp-block-image.foto-praktijk { max-width: 340px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wp-block-image.foto-praktijk img { height: 210px; object-fit: cover; border-radius: var(--rond-kaart); }
.sectie--contactpagina .wp-block-image.foto-praktijk { max-width: 400px; }
.sectie--contactpagina .wp-block-image.foto-praktijk img { height: 240px; }

.wp-block-image figcaption,
.wp-block-image .wp-element-caption {
  margin: 0;
  font-size: 16px;
  color: var(--tekst-zacht);
  text-align: left;
}

.wp-block-image.foto-ruimte img { height: 260px; object-fit: cover; border-radius: var(--rond-kaart); }

/* ------------------------------------------------------------------ */
/* Kaarten                                                             */
/* ------------------------------------------------------------------ */

.kaart {
  background: var(--wit);
  border-radius: var(--rond-kaart);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kaart--rand { border: 1px solid var(--lijn); gap: 8px; }

.kaart .groei { flex-grow: 1; }

.kaart--uitgelicht {
  border-radius: var(--rond-groot);
  padding: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 40px;
  align-items: center;
}

.kaart--uitgelicht .stapel { gap: 12px; }
.kaart.kaart--uitgelicht h2,
.kaart.kaart--uitgelicht h3 { font-size: 34px; line-height: 1.2; }
.kaart--uitgelicht .vinklijst { margin-top: 4px; }
.kaart--uitgelicht .sterk { margin-top: 4px; }
.kaart--uitgelicht .wp-block-buttons { margin-top: 8px; }

.kaart--met-foto {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.kaart--met-foto > .stapel { flex: 1 1 220px; gap: 8px; }

.kaart--met-foto-groot { gap: 32px; }
.kaart--met-foto-groot > .stapel { flex: 1 1 360px; gap: 10px; }

.kaart h3 { font-size: 24px; }
.kaart .kaart__kop-groot { font-size: 26px; }

.kaart .link-sterk { margin-top: auto; }

/* ------------------------------------------------------------------ */
/* Lijsten                                                             */
/* ------------------------------------------------------------------ */

.vinklijst {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 500;
  color: var(--inkt);
}

.vinklijst li {
  padding-left: 30px;
  background: var(--vink) no-repeat left 0.2em / 20px 20px;
}

.vinklijst--rij {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 16px;
  font-weight: 400;
  color: var(--tekst-zacht);
  margin-top: 8px;
}

.vinklijst--rij li { padding-left: 26px; background-size: 18px 18px; background-position: left 0.15em; }

.signalen {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  font-weight: 500;
}

.signalen li {
  background: var(--wit) var(--vink) no-repeat 20px center / 20px 20px;
  border-radius: var(--rond-klein);
  padding: 16px 20px 16px 52px;
  display: flex;
  align-items: center;
}

.labels {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 500;
  color: var(--inkt);
}

.labels li {
  background: var(--vlak-petrol);
  border-radius: var(--rond-knop);
  padding: 9px 16px;
  line-height: 1.4;
}

.sectie--petrol .labels li,
.is-style-sectie-petrol .labels li { background: var(--wit); }

.signalen-kort { display: none; }

/* ------------------------------------------------------------------ */
/* Stappen                                                             */
/* ------------------------------------------------------------------ */

.stappen {
  counter-reset: stap;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--kolom, 220px), 100%), 1fr));
  gap: 28px;
}

.stappen--3 { --kolom: 280px; }

.stap { display: flex; flex-direction: column; gap: 10px; counter-increment: stap; }

.stap::before {
  content: counter(stap);
  width: 44px; height: 44px;
  border-radius: var(--rond-knop);
  background: var(--petrol);
  color: var(--wit);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stap h3 { font-size: 22px; }

/* ------------------------------------------------------------------ */
/* Tarieven                                                            */
/* ------------------------------------------------------------------ */

.tarief {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tarief__naam { font-weight: 700; color: var(--inkt); }
.tarief__prijs { font-size: 36px; line-height: 1.2; font-weight: 800; color: var(--petrol); }

/* ------------------------------------------------------------------ */
/* Ervaringen en citaat                                                */
/* ------------------------------------------------------------------ */

.wp-block-quote.ervaring {
  margin: 0;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wp-block-quote.ervaring p { font-size: 19px; line-height: 1.55; color: var(--inkt); flex-grow: 1; }
.wp-block-quote.ervaring cite { font-style: normal; font-weight: 700; color: var(--petrol); }

.wp-block-quote.citaat {
  margin: 0;
  background: var(--vlak-creme);
  border-radius: var(--rond-groot);
  padding: 40px 48px;
}

.wp-block-quote.citaat p {
  font-size: 28px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--petrol);
  text-wrap: balance;
}

/* ------------------------------------------------------------------ */
/* Veelgestelde vragen                                                 */
/* ------------------------------------------------------------------ */

.vragen { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }

.wp-block-details {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  padding: 0 22px;
}

.wp-block-details summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details > :not(summary) { max-width: 720px; }
.wp-block-details > :last-child:not(summary) { margin-bottom: 18px; }

/* ------------------------------------------------------------------ */
/* Contactgegevens                                                     */
/* ------------------------------------------------------------------ */

.contactregels { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.contactregel { font-weight: 700; }

.contactregel a,
.contactregel--adres {
  min-height: var(--klikdoel);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.contactregel a::before,
.contactregel--adres::before {
  content: "";
  width: 20px; height: 20px;
  flex-shrink: 0;
  background: no-repeat center / 20px 20px;
}

.contactregel--telefoon a::before { background-image: var(--pictogram-telefoon); }
.contactregel--email a::before { background-image: var(--pictogram-email); }
.contactregel--adres { color: var(--petrol); }
.contactregel--adres::before { background-image: var(--pictogram-adres); }

/* ------------------------------------------------------------------ */
/* Formulier                                                           */
/* ------------------------------------------------------------------ */

.formulier {
  background: var(--wit);
  border-radius: var(--rond-kaart);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulier--rand { border: 1px solid var(--lijn); }
.formulier h2 { font-size: 26px; line-height: 1.25; }

.formulier__rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}

.veld { display: flex; flex-direction: column; gap: 4px; }
.veld--groei { flex-grow: 1; }

.veld label { font-weight: 700; font-size: 16px; }

.veld input,
.veld textarea {
  height: 48px;
  width: 100%;
  border: 1.5px solid var(--veldrand);
  border-radius: var(--rond-veld);
  padding: 0 14px;
  font: inherit;
  color: var(--inkt);
  background: var(--wit);
}

.veld textarea { height: auto; flex-grow: 1; min-height: 120px; padding: 12px 14px; resize: vertical; }
.formulier--rand .veld textarea { min-height: 140px; }

.veld input:focus-visible,
.veld textarea:focus-visible { outline-offset: 1px; border-color: var(--petrol); }

.veld__fout { font-size: 16px; font-weight: 700; color: var(--inkt); }
.veld input[aria-invalid="true"],
.veld textarea[aria-invalid="true"] { border-color: var(--inkt); }

.formulier .knop { align-self: flex-start; }

.formulier__melding {
  border-radius: var(--rond-veld);
  padding: 14px 18px;
  font-weight: 700;
}

.formulier__melding--goed { background: var(--vlak-petrol); color: var(--inkt); }
.formulier__melding--fout { background: var(--vlak-creme); color: var(--inkt); }

.formulier__honing {
  position: absolute !important;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Homepage                                                            */
/* ------------------------------------------------------------------ */

.home .held { padding-block: 72px 80px; }
.held { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 56px; align-items: center; }
.held .stapel { gap: 20px; }
.held .inleiding { max-width: 480px; }
.held .wp-block-buttons { margin-top: 12px; }

/* De enige golflijn: tussen het openingsblok en "Herken je dit bij je kind?". */
.met-golf {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Crect width='1440' height='60' fill='%23FAF8F4'/%3E%3Cpath d='M0 30 C 240 60 480 0 720 30 C 960 60 1200 0 1440 30 L 1440 60 L 0 60 Z' fill='%23E4F1F2'/%3E%3C/svg%3E") top center / 100% 48px no-repeat,
    var(--vlak-petrol);
}

.home .met-golf { padding-top: calc(48px + 56px); gap: 36px; }
.met-golf .intro { max-width: 680px; }
.met-golf > p:last-child { font-size: 19px; max-width: 720px; color: var(--inkt); }

.home .sectie--lineke { padding-block: 96px; }
.sectie--lineke { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 64px; align-items: center; }
.sectie--lineke .stapel { gap: 18px; }
.sectie--lineke .link-sterk { align-self: flex-start; }

.home .sectie--ervaringen { gap: 36px; }

.sectie--contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 56px; align-items: stretch; }
.sectie--contact .stapel { gap: 18px; }
.sectie--contact h2 { text-wrap: balance; }
.sectie--contact .intro { max-width: 440px; }

.sectie--contactpagina .intro { max-width: 460px; }
.sectie--contactpagina .contactregels { margin-top: 0; gap: 2px; }
.sectie--contactpagina .contactregel--adres { min-height: 0; padding-top: 8px; align-items: flex-start; }
.sectie--contactpagina .contactregel--adres::before { margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Over mij                                                            */
/* ------------------------------------------------------------------ */

.sectie--verhaal h2 { font-size: 30px; }
.sectie--verhaal .stapel { gap: 12px; }
.sectie--verhaal .twee-kolommen { gap: 48px; }

/* ------------------------------------------------------------------ */
/* Oproep (Benieuwd of het klikt?)                                     */
/* ------------------------------------------------------------------ */

.sectie--oproep { padding-block: 72px; }

.oproep {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.oproep p { font-size: var(--intro); max-width: 560px; }
.oproep .wp-block-buttons { justify-content: center; margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* Juridische pagina's                                                 */
/* ------------------------------------------------------------------ */

.sectie--juridisch { padding-block: 72px; }

.juridisch {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.juridisch__inhoud {
  flex: 0 1 280px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.juridisch__inhoud .kop-label { margin-bottom: 6px; }

.juridisch__inhoud a {
  min-height: var(--klikdoel);
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.35;
  padding-block: 6px;
}

.juridisch__inhoud a:hover { text-decoration: underline; }

.juridisch__tekst {
  flex: 1 1 480px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.juridisch__tekst h2 { font-size: 26px; line-height: 1.25; scroll-margin-top: 24px; }
.juridisch__tekst h2:not(:first-child) { margin-top: 22px; }
.juridisch__tekst h3 { font-size: 20px; margin-top: 8px; }
.juridisch__tekst ul,
.juridisch__tekst ol { color: var(--tekst-zacht); padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }

.vragen-regel {
  border-top: 1px solid var(--lijn);
  padding-top: 20px;
  margin-top: 22px;
  color: var(--inkt);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.vragen-regel a { font-weight: 700; min-height: var(--klikdoel); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ */
/* Blog                                                                */
/* ------------------------------------------------------------------ */

.berichten { --kolom: 310px; }

.berichtkaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--inkt);
  min-height: 190px;
}

.berichtkaart:hover { border-color: var(--veldrand); color: var(--inkt); }

.berichtkaart__rubriek {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol);
}

.berichtkaart__titel { font-size: 23px; line-height: 1.3; font-weight: 800; flex-grow: 1; text-wrap: balance; }

.berichtkaart__verder {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  color: var(--petrol);
}

.berichtkaart__verder::after {
  content: "";
  width: 18px; height: 18px;
  background: var(--pijl) no-repeat center / 18px 18px;
}

.paginering {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--tekst-zacht);
}

.paginering a { font-weight: 700; min-height: var(--klikdoel); display: inline-flex; align-items: center; }

.bericht__meta { font-size: 16px; color: var(--tekst-zacht); }

.wp-block-image.bericht__beeld { max-width: var(--leeskolom); }
.wp-block-image.bericht__beeld img { border-radius: var(--rond-kaart); max-height: 480px; object-fit: cover; }

.bericht__tekst {
  max-width: var(--leeskolom);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bericht__tekst h2 { font-size: 28px; margin-top: 16px; }
.bericht__tekst h3 { font-size: 22px; margin-top: 8px; }
.bericht__tekst ul,
.bericht__tekst ol { color: var(--tekst-zacht); padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }

.bericht__tekst .wp-block-quote {
  margin: 0;
  border-left: 4px solid var(--petrol);
  padding: 4px 0 4px 20px;
}

.bericht__tekst .wp-block-quote p { color: var(--inkt); font-weight: 500; }
.bericht__tekst .wp-block-quote cite { font-style: normal; font-size: 16px; color: var(--tekst-zacht); }

.terug-link { font-weight: 700; }
.terug-link a { min-height: var(--klikdoel); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ */
/* Voettekst                                                           */
/* ------------------------------------------------------------------ */

.voettekst { background: var(--vlak-voet); flex-grow: 1; }

.voettekst__binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 48px var(--rand) 32px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.voettekst__vlakken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

.vlak {
  background: var(--wit);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: var(--inkt);
}

a.vlak:hover { color: var(--petrol); }

.vlak__pictogram {
  width: 44px; height: 44px;
  border-radius: var(--rond-knop);
  background: var(--vlak-petrol);
  color: var(--petrol);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vlak__tekst { display: flex; flex-direction: column; }
.vlak__label { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--petrol); line-height: 1.3; }
.vlak__waarde { font-weight: 700; line-height: 1.35; display: flex; flex-direction: column; }

.voettekst__kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 40px;
  font-size: 17px;
  align-items: start;
}

.voettekst__kolom { display: flex; flex-direction: column; gap: 6px; }
.voettekst__kolom p { color: var(--tekst-zacht); }
.voettekst__kop { font-weight: 800; color: var(--inkt); }

.voettekst__logo { height: 136px; width: auto; align-self: flex-start; display: block; }

.sociaal { display: flex; gap: 10px; margin-top: 12px; }
.sociaal a {
  width: 44px; height: 44px;
  border-radius: var(--rond-knop);
  background: var(--wit);
  color: var(--inkt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sociaal a:hover { color: var(--petrol); }

.keurmerken { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.keurmerken img { display: block; width: auto; }
.keurmerken .keurmerk--adiona { height: 60px; }
.keurmerken .keurmerk--pesten { height: 68px; }
.keurmerken .keurmerk--prikkelstorm { height: 68px; border-radius: 8px; }

.voettekst__onder {
  border-top: 1px solid var(--lijn-voet);
  padding-top: 20px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: var(--tekst-zacht);
}

.voetmenu { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.voetmenu a { min-height: var(--klikdoel); display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ */
/* Smallere schermen: menu klapt in                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .kopbalk__binnen { flex-wrap: wrap; padding: 10px 20px; gap: 16px; }
  .kopbalk__logo { min-height: var(--klikdoel); }
  .kopbalk__logo img { height: 38px; }

  .kopbalk__menuknop {
    display: inline-flex;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    color: var(--inkt);
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border-radius: var(--rond-veld);
  }

  .kopbalk__menuknop .pictogram-sluiten { display: none; }
  .kopbalk__menuknop[aria-expanded="true"] .pictogram-sluiten { display: block; }
  .kopbalk__menuknop[aria-expanded="true"] .pictogram-menu { display: none; }

  .js .kopbalk__menu { display: none; }
  .js .kopbalk__menu.is-open { display: flex; }

  .kopbalk__menu {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 12px;
  }

  .kopbalk__menu > nav { display: block; }
  .hoofdmenu { flex-direction: column; gap: 0; margin: 0; font-size: 18px; }
  .hoofdmenu li + li { border-top: 1px solid var(--lijn); }
  .hoofdmenu a { min-height: 52px; width: 100%; }
  .hoofdmenu .current-menu-item > a,
  .hoofdmenu .current_page_parent > a,
  .hoofdmenu .current-menu-parent > a,
  .hoofdmenu .current-menu-ancestor > a,
  .hoofdmenu .casalina-actief > a { box-shadow: inset 4px 0 0 var(--petrol); padding-left: 14px; }

  /* Submenu op een telefoon: subitems direct zichtbaar, ingesprongen onder het hoofditem. */
  .hoofdmenu > li { display: block; }
  .submenu-knop { display: none; }
  .hoofdmenu .sub-menu {
    display: block;
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 0 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .hoofdmenu .sub-menu li + li { border-top: 0; }
  .hoofdmenu .sub-menu a { min-height: var(--klikdoel); font-size: 17px; font-weight: 500; padding: 0 14px; border-radius: 0; }
  .hoofdmenu .sub-menu .current-menu-item > a,
  .hoofdmenu .sub-menu .casalina-actief > a { background: none; box-shadow: inset 4px 0 0 var(--petrol); font-weight: 700; }

  .kopbalk .knop { width: 100%; min-height: 52px; font-size: 18px; }
}

/* ------------------------------------------------------------------ */
/* Telefoon (maat: referentie/home-mobiel.html, 390 px)                */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  :root,
  .home {
    --tekst: 17px;
    --h1: 36px;
    --h2: 28px;
    --rand: 20px;
    --sectie: 48px;
    --inleiding: 18px;
    --intro: 17px;
    --label: 14px;
  }

  h1 { line-height: 1.12; }
  .home h1 { line-height: 1.12; }

  .sectie,
  .is-style-sectie-grond,
  .is-style-sectie-petrol,
  .is-style-sectie-creme,
  .home .sectie,
  .paginakop,
  .paginakop--juridisch,
  .sectie--oproep,
  .sectie--juridisch,
  .home .sectie--lineke { padding-block: 48px; gap: 20px; }

  .alleen-breed { display: none !important; }

  /* Openingsblok: foto onder de tekst. */
  .home .held { padding-block: 28px 40px; gap: 16px; }
  .held .stapel { gap: 16px; }
  .held .kop-label { font-size: 14px !important; }
  .held .wp-block-buttons { margin-top: 8px; }
  .wp-block-image.foto-held img {
    height: 232px;
    border-radius: var(--rond-foto);
    object-position: 42% center;
  }

  .met-golf { background: var(--vlak-petrol); }
  .home .met-golf { padding-top: 44px; gap: 20px; }
  .met-golf > p:last-child { font-size: 17px; }

  /* Signalen als compacte labels. */
  .signalen { display: flex; flex-wrap: wrap; gap: 8px; font-size: 16px; }
  .signalen li { background: var(--wit); border-radius: var(--rond-knop); padding: 9px 16px; line-height: 1.4; }

  .stapel, .kop-blok { gap: 8px; }
  .sectie--lineke { gap: 14px; }
  .sectie--lineke .stapel { gap: 14px; }

  .wp-block-image.foto-portret img,
  .paginakop .wp-block-image.foto-portret img { max-width: none; height: 300px; object-position: center 22%; }
  .paginakop .wp-block-image.foto-portret { max-width: none; justify-self: stretch; }
  .sectie--lineke .wp-block-image.foto-portret { margin-bottom: 10px; }

  .wp-block-image.foto-kaart img,
  .paginakop .wp-block-image.foto-kaart img { height: 232px; }
  .wp-block-image.foto-tuin { max-width: none; }
  .wp-block-image.foto-tuin img { height: 320px; }
  .wp-block-image.foto-ruimte img { height: 220px; }

  .kaart { padding: 20px; border-radius: 18px; gap: 6px; }
  .kaart--uitgelicht { padding: 22px 20px; gap: 16px; }
  .kaart--uitgelicht .stapel { gap: 8px; }
  .kaart.kaart--uitgelicht h2,
  .kaart.kaart--uitgelicht h3 { font-size: 26px; }
  .kaart--uitgelicht .foto-kaart { display: none; }
  .kaart h3 { font-size: 20px; }
  .kaart .kaart__kop-groot { font-size: 22px; }
  .kaart--met-foto { flex-wrap: nowrap; gap: 16px; }
  .kaart--met-foto > .stapel { gap: 4px; }
  .wp-block-image.foto-figuur { width: 110px; }
  .wp-block-image.foto-figuur img { border-radius: 12px; }
  .kaart--met-foto-groot { flex-wrap: wrap; }
  .wp-block-image.foto-figuur-groot { width: 100%; }
  .raster, .raster--3, .raster--4, .raster--fotos { gap: 12px; }

  .vinklijst { gap: 6px; }
  .vinklijst li { background-size: 18px 18px; padding-left: 28px; background-position: left 0.25em; }

  .wp-block-quote.ervaring { padding: 20px; gap: 12px; border-radius: 18px; }
  .wp-block-quote.ervaring p { font-size: 18px; line-height: 1.5; }
  .wp-block-quote.citaat { padding: 28px 24px; }
  .wp-block-quote.citaat p { font-size: 22px; }

  /* Knoppen over de volle breedte. */
  .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 4px; }
  .wp-block-buttons > .wp-block-button { width: 100%; }
  .wp-block-button .wp-block-button__link { width: 100%; }
  .wp-block-button.is-style-tekstlink .wp-block-button__link { justify-content: center; }
  .formulier .knop { align-self: stretch; }
  .oproep .wp-block-buttons { align-self: stretch; }

  /* Contactblok: formulier vóór de contactgegevens. */
  .sectie--contact { gap: 20px; }
  .sectie--contact > .stapel { display: contents; }
  .sectie--contact h2 { order: 1; }
  .sectie--contact .intro { order: 2; margin-top: -12px; }
  .sectie--contact .formulier { order: 3; }
  .sectie--contact .contactregels { order: 4; margin-top: 0; gap: 0; }
  .sectie--contact .foto-praktijk { order: 5; margin-top: 0; max-width: none; }
  .wp-block-image.foto-praktijk img { height: 170px; border-radius: 18px; }
  .wp-block-image.foto-praktijk figcaption { font-size: 15px; }
  .sectie--contactpagina .wp-block-image.foto-praktijk { max-width: none; }

  .formulier { padding: 20px; border-radius: 18px; gap: 14px; }
  .formulier__rij { gap: 14px; }
  .veld textarea { min-height: 110px; }

  .tarief { padding: 20px; }
  .tarief__prijs { font-size: 30px; }

  .stappen { gap: 24px; }

  .juridisch { gap: 28px; }
  .juridisch__inhoud { flex-basis: 100%; }
  .juridisch__tekst h2 { font-size: 22px; }

  .berichtkaart { padding: 22px 20px; min-height: 0; }
  .berichtkaart__titel { font-size: 21px; }

  /* Voettekst: contactvlakken onder elkaar. */
  .voettekst__binnen { padding: 32px 20px 28px; gap: 24px; }
  .voettekst__vlakken { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .voettekst__kolommen { gap: 24px; font-size: 16px; }
  .voettekst__kolom { gap: 4px; }
  .voettekst__logo { height: 116px; }
  .keurmerken { gap: 16px; margin-top: 4px; }
  .keurmerken .keurmerk--adiona { height: 54px; }
  .keurmerken .keurmerk--pesten,
  .keurmerken .keurmerk--prikkelstorm { height: 60px; }
  .voettekst__onder { flex-direction: column-reverse; align-items: flex-start; gap: 8px; padding-top: 12px; }
  .voetmenu { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}