/*
Theme Name:  MIRR — nieuw ontwerp
Theme URI:   https://mirr.nu
Author:      Bastiaan Bosch
Description: Werkversie voor het nieuwe ontwerp van MIRR. Gekloond van het thema MIRR, dat als terugval intact blijft. Zelfde post types, menu's en Customizer-velden; alleen de vormgeving verandert.
Version:     0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mirr
Tags:        custom-menu, featured-images, translation-ready, block-styles
*/


/* ==================================================================
   1. Tokens
   ------------------------------------------------------------------
   Kleur, type en ruimte staan hier bij elkaar. Verderop wordt geen
   losse hexwaarde of pixelmaat meer gebruikt.
   ================================================================== */

:root {
	/* Kleur — alles blauwleunend, magenta alleen waar je iets kunt doen. */
	--navy-diep:  #16213F;   /* voetnoot, zwaarste tekst */
	--navy:       #22315C;   /* koppen en structuur */
	--tekst:      #414A5E;   /* lopende tekst, blauwgrijs i.p.v. neutraal grijs */
	--gedempt:    #6B7488;   /* bijschriften, kruimelpad */
	--magenta:    #C93A6E;   /* links en randen: haalt AA op wit */
	--magenta-op: #DD467E;   /* vlakken en knoppen: de merkkleur zelf */
	--magenta-in: #A82D59;   /* ingedrukt en hover op vlakken */
	--mist:       #F4F7FC;   /* zachte sectie */
	--mist-diep:  #E9EFF9;   /* iets dieper vlak, tabelkoppen */
	--lijn:       #DCE4F1;   /* randen */
	--wit:        #FFFFFF;

	/* Type — Figtree voor koppen en bediening, Source Sans 3 voor lezen. */
	--kop-font:  'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--lees-font: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--t-xs:  0.875rem;                             /* 14 */
	--t-s:   0.9375rem;                            /* 15 */
	--t-m:   1.0625rem;                            /* 17, basis */
	--t-l:   clamp(1.1875rem, 0.4vw + 1.1rem, 1.3125rem);
	--t-xl:  clamp(1.5rem, 1.4vw + 1.15rem, 1.875rem);
	--t-2xl: clamp(1.8125rem, 2.2vw + 1.3rem, 2.375rem);
	--t-3xl: clamp(2.125rem, 2.9vw + 1.3rem, 2.875rem);

	/* Ruimte — één reeks, overal uit geput. */
	--r-1:  0.25rem;
	--r-2:  0.5rem;
	--r-3:  0.75rem;
	--r-4:  1rem;
	--r-5:  1.25rem;
	--r-6:  1.5rem;
	--r-7:  1.75rem;
	--r-8:  2rem;
	--r-10: 2.5rem;
	--r-12: 3rem;
	--r-16: 4rem;

	/* Fijn stippenraster voor het eerste witte blok van een pagina. */
	--stippen:      radial-gradient(circle, rgba(34, 49, 92, .075) 1px, transparent 1px);
	--stippen-maat: 24px 24px;

	--sectie:    clamp(3.5rem, 7vw, 6.5rem);
	--sectie-kl: clamp(2.5rem, 4.5vw, 4rem);

	--container: 1170px;
	--lees:      68ch;      /* leesbare regellengte */
	--radius:    10px;
	--radius-kl: 6px;
	--kop-hoog:  78px;
}

/* ==================================================================
   2. Basis
   ================================================================== */

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

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

body {
	margin: 0;
	font-family: var(--lees-font);
	font-size: var(--t-m);
	line-height: 1.7;
	color: var(--tekst);
	background: var(--wit);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	font-family: var(--kop-font);
	color: var(--navy);
	margin: 0 0 0.6em;
	line-height: 1.18;
	letter-spacing: -0.014em;
	text-wrap: balance;
}
h1 { font-size: var(--t-2xl); font-weight: 600; }
h2 { font-size: var(--t-xl);  font-weight: 600; }
h3 { font-size: var(--t-l);   font-weight: 600; letter-spacing: -0.008em; }
h4 { font-size: var(--t-m);   font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

a { color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--magenta-in); }

img { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 700; color: var(--navy); }

::selection { background: var(--magenta-op); color: #fff; }

/* Eén zichtbare focusring voor alles wat bediend kan worden. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 3px;
	border-radius: var(--radius-kl);
}

.container { width: min(var(--container), 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .container { width: min(var(--container), 100% - 2rem); } }

.vh, .screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 300;
	background: var(--navy); color: #fff; padding: var(--r-3) var(--r-5);
	font-family: var(--kop-font); font-size: var(--t-s);
}
.skip-link:focus {
	left: 0; width: auto; height: auto; clip: auto; clip-path: none;
}

/* ==================================================================
   3. Knoppen
   ================================================================== */

.knop {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--kop-font); font-size: var(--t-s); font-weight: 500;
	letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
	border-radius: 999px; padding: 0 var(--r-6); min-height: 46px;
	border: 1.5px solid transparent;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.knop-vol {
	background: var(--magenta-op); border-color: var(--magenta-op); color: #fff;
}
.knop-vol:hover { background: var(--magenta-in); border-color: var(--magenta-in); color: #fff; }
.knop-omlijnd {
	background: none; border-color: var(--lijn); color: var(--navy);
}
.knop-omlijnd:hover { border-color: var(--magenta); color: var(--magenta); background: none; }

/* ==================================================================
   4. Kop van de site
   ================================================================== */

/* De bovenbalk draagt de praktische gegevens; rechts is ruimte voor een
   eigen menu of extra tekst. */
.bovenbalk {
	background: var(--mist); border-bottom: 1px solid var(--lijn);
	font-family: var(--kop-font); font-size: var(--t-xs);
}
.bovenbalk-binnen {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--r-6); min-height: 38px; flex-wrap: wrap;
}
.bovenbalk-gegevens { display: flex; align-items: center; gap: var(--r-6); flex-wrap: wrap; }
.bovenbalk-item { display: inline-flex; align-items: center; gap: var(--r-2); }
.bovenbalk-item svg { width: 14px; height: 14px; fill: currentColor; }
.bovenbalk-menu { display: flex; gap: var(--r-6); list-style: none; margin: 0; padding: 0; }
.bovenbalk a {
	color: var(--gedempt); text-decoration: none; line-height: 38px;
	transition: color .18s ease;
}
.bovenbalk a:hover, .bovenbalk a[aria-current="page"] { color: var(--magenta); }

.site-kop {
	background: var(--wit); position: sticky; top: 0; z-index: 200;
	border-bottom: 1px solid var(--lijn);
	transition: box-shadow .2s ease;
}
/* De lijn staat er nu altijd; bij het scrollen komt alleen de schaduw erbij. */
.site-kop.geplakt { box-shadow: 0 6px 20px rgba(22, 33, 63, .06); }
.kop-binnen { display: flex; align-items: center; gap: var(--r-10); min-height: var(--kop-hoog); }
.logo { display: flex; align-items: center; }
.logo img { width: 108px; height: auto; }

.hoofdmenu { margin-left: auto; }
.hoofdmenu .menu { display: flex; gap: var(--r-7); list-style: none; margin: 0; padding: 0; }
.hoofdmenu .menu > li { position: relative; }
.hoofdmenu .menu > li > a {
	display: flex; align-items: center; gap: var(--r-2);
	font-family: var(--kop-font); font-size: var(--t-s); font-weight: 500;
	color: var(--tekst); text-decoration: none; line-height: var(--kop-hoog);
	position: relative; transition: color .18s ease;
}

/* De twee uitklappers zijn de diensten; de rest is over de praktijk. Dat
   verschil zit in het gewicht en in één scheiding, zonder er een woord als
   "Diensten" boven te hoeven zetten. */
.hoofdmenu .menu > li.heeft-submenu > a {
	font-weight: 600; color: var(--navy);
}
.hoofdmenu .menu > li.heeft-submenu + li:not(.heeft-submenu) {
	border-left: 1px solid var(--lijn);
	padding-left: var(--r-7);
}
/* Het streepje onder het actieve item vervangt de kleurwissel alleen. */
.hoofdmenu .menu > li > a::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px;
	background: var(--magenta-op); border-radius: 2px;
	transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.hoofdmenu .menu > li > a:hover::after,
.hoofdmenu .menu > li > a[aria-current="page"]::after,
.hoofdmenu .current-menu-ancestor > a::after { transform: scaleX(1); }
/* Even specifiek als de regel voor de uitklappers hierboven, anders wint
   het donkerblauw van de hover. */
.hoofdmenu .menu > li.menu-item > a:hover,
.hoofdmenu .menu > li.menu-item > a[aria-current="page"],
.hoofdmenu .menu > li.current-menu-ancestor > a { color: var(--magenta); }

/* Contact is de actie van de balk en staat er als knop in, niet als roze
   tekst. Roze tekst betekent in dit menu namelijk "je bent hier", en dan zou
   Contact op elke pagina lijken alsof je er al bent. */
.hoofdmenu .menu > li.menu-actie { display: flex; align-items: center; }
.hoofdmenu .menu > li.menu-actie > a {
	line-height: 1; min-height: 38px; padding: 0 var(--r-5);
	background: var(--magenta-op); border: 1.5px solid var(--magenta-op);
	border-radius: 999px; color: #fff; font-weight: 500;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hoofdmenu .menu > li.menu-actie > a::after { display: none; }
.hoofdmenu .menu > li.menu-actie > a:hover,
.hoofdmenu .menu > li.menu-actie > a[aria-current="page"] {
	background: var(--magenta-in); border-color: var(--magenta-in); color: #fff;
}

.pijl {
	width: 5px; height: 5px; margin-top: -3px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.hoofdmenu .submenu {
	position: absolute; top: 100%; left: calc(var(--r-4) * -1); min-width: 268px;
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	box-shadow: 0 14px 34px rgba(22, 33, 63, .10);
	list-style: none; margin: 0; padding: var(--r-2); z-index: 10;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hoofdmenu .heeft-submenu:hover > .submenu,
.hoofdmenu .heeft-submenu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.hoofdmenu .submenu a {
	display: flex; align-items: center; gap: var(--r-3);
	padding: var(--r-2) var(--r-4); border-radius: var(--radius-kl);
	font-family: var(--kop-font); font-size: var(--t-s); color: var(--navy);
	text-decoration: none; line-height: 1.45;
	transition: background-color .15s ease, color .15s ease;
}
.hoofdmenu .submenu a:hover,
.hoofdmenu .submenu a[aria-current="page"] { background: var(--mist); color: var(--magenta); }

/* Hetzelfde teken als in de dienstenlijst, zodat je het menu herkent. */
.menu-icoon {
	display: flex; align-items: center; justify-content: center;
	width: 1.125rem; height: 1.125rem; flex: none;
	color: #8E9AB4; transition: color .18s ease;
}
.menu-icoon svg { width: 100%; height: 100%; display: block; }
a:hover > .menu-icoon,
a[aria-current="page"] > .menu-icoon { color: var(--magenta); }


/* Bellen en het hamburgermenu; alleen zichtbaar op een smal scherm. Op een
   breed scherm mag dit blokje geen automatische marge houden, want dan
   verdeelt de kop de vrije ruimte tussen dit blokje en het menu, en komt het
   menu niet tegen de rechterrand. */
.kop-acties { display: none; }

/* Alleen op een smal scherm, waar de bovenbalk met het nummer wegvalt. */
.kop-bel {
	display: none; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--magenta-op); color: #fff;
	transition: background-color .18s ease;
}
.kop-bel:hover, .kop-bel:focus-visible { background: var(--magenta-in); color: #fff; }
.kop-bel svg { width: 19px; height: 19px; fill: currentColor; display: block; }

.hamburger {
	display: none; flex-direction: column; gap: 5px; background: none;
	border: 0; padding: var(--r-2); cursor: pointer;
}
.hamburger span {
	width: 24px; height: 2px; background: var(--navy); border-radius: 2px;
	transition: transform .22s ease, opacity .22s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobiel-menu {
	display: none; position: fixed; inset: 116px 0 auto 0; z-index: 199;
	background: var(--wit); border-top: 1px solid var(--lijn);
	box-shadow: 0 14px 34px rgba(22, 33, 63, .12);
	max-height: calc(100dvh - 116px); overflow-y: auto;
}
.mobiel-menu.open { display: block; }
.mobiel-lijst { list-style: none; margin: 0; padding: var(--r-2) 0; }
.mobiel-lijst + .mobiel-lijst { border-top: 1px solid var(--lijn); }
/* Flex in plaats van block, anders springt het pictogram naar een eigen
   regel: het is zelf een blok. */
.mobiel-menu a {
	display: flex; align-items: center; gap: var(--r-3);
	padding: var(--r-3) var(--r-6);
	font-family: var(--kop-font); font-size: var(--t-m); font-weight: 500;
	color: var(--navy); text-decoration: none;
}
.mobiel-menu a:hover, .mobiel-menu a[aria-current="page"] { color: var(--magenta); }
.mobiel-menu .sub-menu {
	list-style: none; margin: 0; padding: 0;
	position: static; opacity: 1; visibility: visible; transform: none;
	background: none; border: 0; border-radius: 0; box-shadow: none; min-width: 0;
}
/* Zelfde kleur als de andere menu-items: het inspringen en het lichtere
   gewicht laten de rangorde al zien, een tweede kleur maakt het rommelig. */
.mobiel-menu .sub-menu a,
.mobiel-subitem a { padding-left: var(--r-10); font-weight: 400; }

/* De groepen hebben een eigen pagina, dus ze zijn hier gewoon aanklikbaar;
   ze staan alleen wat kleiner als kopje boven hun diensten. */
.mobiel-menu .heeft-submenu > a {
	font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
	color: var(--gedempt); padding-bottom: var(--r-1);
}
.mobiel-menu .heeft-submenu > a .pijl { display: none; }
.mobiel-telefoon { color: var(--magenta) !important; }

@media (max-width: 1024px) {
	.hoofdmenu, .bovenbalk { display: none; }
	.kop-acties { display: flex; align-items: center; gap: var(--r-3); margin-left: auto; }
	.hamburger { display: flex; }
	.kop-bel { display: flex; }
	.mobiel-menu { inset: var(--kop-hoog) 0 auto 0; max-height: calc(100dvh - var(--kop-hoog)); }
}

/* ==================================================================
   5. Hero
   ------------------------------------------------------------------
   Tekst eerst, foto ernaast in een eigen kader in plaats van een
   beeldvullende band. Dat geeft lucht en laat de zin landen.
   ================================================================== */

.hero { padding-block: clamp(var(--r-10), 6vw, var(--r-16)); background-color: var(--wit); }
.hero-binnen {
	display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: clamp(var(--r-8), 5vw, var(--r-12)); align-items: center;
}
.hero-tekst { max-width: 34rem; }
.hero-tekst h1 {
	font-size: var(--t-3xl); font-weight: 600; color: var(--navy-diep);
	line-height: 1.12; letter-spacing: -0.022em; margin: 0;
}
.hero-onder {
	font-size: var(--t-l); line-height: 1.6; color: var(--tekst);
	margin: var(--r-6) 0 0; max-width: 42ch;
}
.hero-acties {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--r-4) var(--r-8); margin-top: var(--r-8);
}

.hero-beeld { margin: 0; }
.hero-beeld img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--radius);
}
.hero-beeld figcaption {
	font-family: var(--kop-font); font-size: var(--t-xs); color: var(--gedempt);
	margin-top: var(--r-3);
}

@media (max-width: 900px) {
	.hero-binnen { grid-template-columns: 1fr; gap: var(--r-8); }
	.hero-tekst { max-width: none; }
	.hero-beeld { order: -1; }
	.hero-beeld img { aspect-ratio: 3 / 2; }
}

/* Een tekstlink die naast een knop mag staan zonder ermee te concurreren. */
.stille-link {
	font-family: var(--kop-font); font-size: var(--t-s); font-weight: 500;
	color: var(--navy); text-decoration: none;
	border-bottom: 1.5px solid var(--lijn); padding-bottom: 2px;
	transition: border-color .18s ease, color .18s ease;
}
.stille-link:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

/* ==================================================================
   6. Secties
   ================================================================== */

.sectie { padding-block: var(--sectie); }
.sectie-blauw { background: var(--mist-diep); }
.sectie-zacht { background: var(--mist); }

/* Op de homepage wisselen wit en blauw elkaar af, te beginnen met de hero.
   Dat telt automatisch door, dus een sectie erbij of eraf blijft kloppen. */
.home main > section:nth-of-type(odd)  { background: var(--wit); }
.home main > section:nth-of-type(even) { background: var(--mist); }

/* Het eerste witte blok van een pagina draagt het stippenraster: op de
   homepage de hero, op alle andere pagina's de kop. Deze regel staat bewust
   ná de afwisseling hierboven: die gebruikt de shorthand background en zou de
   afbeelding anders wegvagen. Even specifiek, dus de volgorde beslist. */
.home main > section.hero,
.hero,
.kop {
	background-color: var(--wit);
	background-image: var(--stippen);
	background-size: var(--stippen-maat);
}

.sectie-voet { margin-top: var(--r-8); }

/* ==================================================================
   7. Diensten als blokken
   ------------------------------------------------------------------
   Kleine vlakken naast elkaar in plaats van regels onder elkaar. Het
   hele blok is aanklikbaar; de knop eronder zou alleen ruis zijn.
   ================================================================== */

/* Standaard drie naast elkaar, bijvoorbeeld bij Andere diensten. */
.dienst-lijst {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--r-5);
}

.dienst-blok > a {
	display: flex; flex-direction: column; height: 100%;
	padding: var(--r-6);
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius);
	text-decoration: none; color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dienst-blok > a:hover {
	border-color: #C4D2EA;
	box-shadow: 0 10px 26px rgba(22, 33, 63, .07);
	transform: translateY(-2px);
}

.dienst-blok-icoon {
	display: flex; align-items: center; justify-content: center;
	width: 1.75rem; height: 1.75rem; margin-bottom: var(--r-5);
	color: var(--magenta-op);
}
.dienst-blok-icoon svg { width: 100%; height: 100%; display: block; }

.dienst-blok-naam {
	font-family: var(--kop-font); font-size: var(--t-m); font-weight: 600;
	line-height: 1.25; letter-spacing: -0.004em; color: var(--navy);
	margin-bottom: var(--r-3);
	/* Nederlandse samenstellingen zijn lang; afbreken op lettergrepen in
	   plaats van midden in een woord, want html lang is nl. */
	hyphens: auto;
}
.dienst-blok-tekst {
	font-size: var(--t-s); line-height: 1.62; color: var(--tekst);
	flex: 1 1 auto; margin-bottom: var(--r-5);
}
.dienst-blok-meer {
	font-family: var(--kop-font); font-size: var(--t-s); font-weight: 500;
	color: var(--magenta);
}

@media (max-width: 820px) {
	.dienst-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.dienst-lijst { grid-template-columns: 1fr; }
}

/* ==================================================================
   7b. Hoe het gaat
   ------------------------------------------------------------------
   Een echte volgorde, dus genummerd.
   ================================================================== */

.stappen {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r-10);
	counter-reset: stap;
}
/* Dezelfde omlijsting als het contactblok op de homepage: wit vlak, dunne
   lijn, zelfde ronding. Zo horen de stappen bij de rest van de vlakken op de
   pagina in plaats van los in de ruimte te zweven. */
.stap {
	max-width: none;
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius); padding: var(--r-6);
}
.sectie-zacht .stap { background: var(--wit); }

/* Het merk boven een stap: het nummer, en bij de laatste twee stappen de groep
   waar die afloop bij hoort. De naam staat er gedempt bij, zodat je ziet welke
   van de twee over jou gaat zonder dat het met de kop concurreert. */
.stap-merk {
	/* Het nummer links, het groepslabel rechts op dezelfde regel. */
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--r-3); margin-bottom: var(--r-5);
}
/* Het nummer is even groot als de pictogrammen boven de diensten en heeft
   dezelfde kleur, zodat de twee blokken op de homepage bij elkaar horen.
   Geen streepje eronder: het cijfer draagt zichzelf. */
.stap-nummer {
	flex: none;
	font-family: var(--kop-font); font-size: 1.75rem; font-weight: 600;
	line-height: 1; color: var(--magenta-op);
}
/* Als pilletje, met hetzelfde grijze pictogram als in het menu en de naam in
   het blauw van de site. Zo leest het als een label bij de stap en niet als
   een tweede kop. */
.stap-groep {
	flex: none;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; border-radius: 999px;
	background: var(--mist);
	font-family: var(--kop-font); font-size: var(--t-xs); font-weight: 500;
	color: var(--navy); line-height: 1; white-space: nowrap;
}
.sectie-zacht .stap-groep { background: var(--wit); }
.stap-groep svg { width: 14px; height: 14px; flex: none; color: #8E9AB4; }
.stap h3 { font-size: var(--t-l); margin-bottom: var(--r-2); }
.stap p { font-size: var(--t-s); line-height: 1.68; margin: 0; max-width: 34ch; }
/* De laatste stap staat er twee keer, voor elke groep één. Die twee komen
   onder elkaar in de derde kolom te staan, en de eerste twee stappen staan
   daar op halve hoogte naast. Zo lees je nog steeds 1, 2, 3, maar zie je
   meteen dat die derde twee kanten op kan. */
.stappen-vier {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--r-10); row-gap: var(--r-8);
}
.stappen-vier .stap p { max-width: none; }
/* De eerste twee stappen lopen over allebei de rijen, zodat ze even hoog zijn
   als elkaar en als het paar ernaast. Hun inhoud staat in het midden, anders
   blijft de onderste helft van het vlak zichtbaar leeg. */
.stappen-vier > .stap:nth-child(1),
.stappen-vier > .stap:nth-child(2) {
	grid-row: 1 / span 2;
	display: flex; flex-direction: column; justify-content: center;
}
.stappen-vier > .stap:nth-child(1) { grid-column: 1; }
.stappen-vier > .stap:nth-child(2) { grid-column: 2; }
.stappen-vier > .stap:nth-child(3) { grid-column: 3; grid-row: 1; }
.stappen-vier > .stap:nth-child(4) { grid-column: 3; grid-row: 2; }

/* De derde stap loopt per groep anders af. De twee uitkomsten staan onder
   elkaar met het pictogram van hun groep ervoor, zodat je in één oogopslag
   ziet welke regel over jou gaat. */

@media (max-width: 1060px) {
	/* Te smal voor drie kolommen: alles onder elkaar in de gewone volgorde. */
	.stappen-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stappen-vier > .stap:nth-child(n) { grid-column: auto; grid-row: auto; align-self: start; }
}

@media (max-width: 860px) {
	.stappen, .stappen-vier { grid-template-columns: 1fr; gap: var(--r-8); }
}

/* ==================================================================
   8. Ervaringen
   ------------------------------------------------------------------
   Het aanhalingsteken maakt meteen duidelijk dat je iemand anders
   leest, de categorie staat eronder als bron. Elke ervaring staat op
   een eigen vlak, want los van elkaar lopen lange en korte citaten
   anders in elkaar over.
   ================================================================== */

.ervaring {
	display: flex; flex-direction: column;
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius); padding: var(--r-6);
}

.ervaring-teken {
	display: block; width: 1.625rem; height: 1.625rem;
	color: var(--magenta-op); margin-bottom: var(--r-4);
}
.ervaring-teken svg { width: 100%; height: 100%; display: block; }

.ervaring-citaat {
	margin: 0; padding: 0; border: 0;
	font-family: var(--lees-font); font-size: var(--t-s); font-style: italic;
	line-height: 1.72; color: var(--navy);
}
.ervaring-citaat p { margin: 0 0 0.9em; }
.ervaring-citaat p:last-child { margin-bottom: 0; }

.ervaring-bron {
	margin: var(--r-5) 0 0; padding-top: var(--r-4); width: 100%;
	border-top: 1px solid var(--lijn);
	font-family: var(--kop-font); font-size: var(--t-xs); font-weight: 500;
	color: var(--gedempt);
}
/* De bron verwijst door naar de dienst waar het citaat over gaat. Staat er
   geen dienst tegenover, dan dezelfde vorm zonder link. */
.ervaring-bron > a,
.ervaring-bron-binnen {
	display: inline-flex; align-items: center; gap: var(--r-2);
	color: inherit; text-decoration: none;
	transition: color .18s ease;
}
.ervaring-bron > a:hover,
.ervaring-bron > a:hover .ervaring-bron-icoon { color: var(--magenta); }
.ervaring-bron > a:hover > span:last-child { text-decoration: underline; }
/* Hetzelfde teken als bij de dienst zelf, zodat je ziet waar het over gaat. */
.ervaring-bron-icoon {
	display: flex; align-items: center; justify-content: center;
	width: 1.0625rem; height: 1.0625rem; flex: none; color: #8E9AB4;
}
.ervaring-bron-icoon svg { width: 100%; height: 100%; display: block; }

/* Drie naast elkaar op de homepage, even hoog; de bron staat onderaan. */
.ervaringen {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--r-6); align-items: stretch;
}
.ervaringen .ervaring-bron { margin-top: auto; }
.ervaringen .ervaring-citaat { margin-bottom: var(--r-5); }

/* Op de homepage worden de citaten afgekapt, zodat de drie blokken even hoog
   zijn ongeacht hoe lang iemand geschreven heeft. Wie meer wil lezen klapt het
   blok open. Het aantal regels staat hier, niet in het script, zodat het met
   de tekstgrootte meebeweegt. */
.ervaringen .ervaring-citaat {
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: 5; line-clamp: 5;
	overflow: hidden;
}
/* De marge onder de laatste alinea telt mee in de hoogte en zou een citaat dat
   precies past alsnog als afgekapt laten gelden. */
.ervaringen .ervaring-citaat > :last-child { margin-bottom: 0; }

.ervaringen .ervaring.open .ervaring-citaat {
	display: block; -webkit-line-clamp: none; line-clamp: none;
	overflow: visible;
}

.ervaring-meer {
	appearance: none; border: 0; background: none; padding: 0;
	margin: 0 0 var(--r-5); cursor: pointer;
	font-family: var(--lees-font); font-size: var(--t-s); font-weight: 600;
	color: var(--magenta); text-align: left;
}
.ervaring-meer:hover { color: var(--magenta-in); text-decoration: underline; }
.ervaring-meer:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* Op het overzicht in drie kolommen die zich vullen als metselwerk: een kort
   citaat laat geen gat achter, maar wordt meteen door het volgende gevolgd.
   Dat kan met kolommen in plaats van een raster. De leesvolgorde loopt dan per
   kolom naar beneden, en dat mag hier: de citaten staan los van elkaar, er zit
   geen volgorde in. */
.ervaringen-lijst { columns: 3; column-gap: var(--r-4); }
.ervaringen-lijst .ervaring {
	display: block; break-inside: avoid;
	margin-bottom: var(--r-4);
}

@media (max-width: 1100px) { .ervaringen-lijst { columns: 2; } }
@media (max-width: 700px)  { .ervaringen-lijst { columns: 1; } }

@media (max-width: 900px) {
	.ervaringen, .ervaringen-lijst { grid-template-columns: 1fr; }
}

/* ==================================================================
   8b. Dienstpagina
   ------------------------------------------------------------------
   Dezelfde vorm als de hero, zodat een dienstpagina aanvoelt als een
   vervolg van de homepage en niet als een ander soort pagina.
   ================================================================== */

.kop { padding-block: clamp(var(--r-8), 5vw, var(--r-12)); }
/* Alleen een titel: dan hoeft er onder de kop en boven de tekst niet allebei
   een volle ruimte te staan. */
.kop-strak { padding-bottom: var(--r-6); }
.kop-strak + .sectie { padding-top: var(--r-8); }

.kop-raster { display: grid; gap: clamp(var(--r-8), 5vw, var(--r-12)); }
.kop-met-beeld {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
}
.kop-met-telling {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
}

.kop-tekst { max-width: 36rem; }
.kop-met-beeld .kop-tekst { max-width: 34rem; }
.kop h1 { margin: 0; color: var(--navy-diep); }
.kop-intro {
	font-size: var(--t-l); line-height: 1.6; color: var(--tekst);
	margin: var(--r-5) 0 0; max-width: 48ch;
}
.kop .knop { margin-top: var(--r-8); }

/* Het kruimelpad staat hier boven de titel en dus links, niet gecentreerd. */
.kop .kruimelpad { padding: 0 0 var(--r-4); }
.kop .kruimelpad .container { width: auto; margin: 0; }
.kop .kruimelpad nav { justify-content: flex-start; }

.kop-beeld { margin: 0; }
.kop-beeld img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
}

@media (max-width: 900px) {
	.kop-met-beeld { grid-template-columns: 1fr; gap: var(--r-8); }
	.kop-met-beeld .kop-tekst { max-width: none; }
	.kop-beeld { order: -1; }
	.kop-beeld img { aspect-ratio: 3 / 2; }
}

/* Praktische gegevens: op elke dienstpagina op dezelfde plek en in
   dezelfde vorm, zodat je ze niet hoeft te zoeken. */
.dienst-praktisch { padding-block: var(--sectie-kl); }
.praktisch-kop {
	font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
	color: var(--gedempt); margin-bottom: var(--r-6);
	padding-bottom: 0; border-bottom: 0;
}
.praktisch {
	margin: 0; display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--r-6) var(--r-8);
}
.praktisch-paar { border-top: 2px solid var(--lijn); padding-top: var(--r-4); }
.praktisch dt {
	font-family: var(--kop-font); font-size: var(--t-xs); font-weight: 600;
	color: var(--magenta); margin-bottom: var(--r-2);
}
.praktisch dd {
	margin: 0; font-size: var(--t-m); line-height: 1.6; color: var(--navy);
}
@media (max-width: 860px) { .praktisch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .praktisch { grid-template-columns: 1fr; } }

/* Het aantal naast de titel, als rustig ankerpunt. */
.kop-telling {
	margin: 0; text-align: right; max-width: 12ch;
	font-family: var(--kop-font); font-size: var(--t-xs); font-weight: 500;
	line-height: 1.4; color: var(--gedempt);
}
.kop-telling-getal {
	display: block; font-size: var(--t-2xl); font-weight: 600;
	line-height: 1; color: var(--magenta); letter-spacing: -0.02em;
	margin-bottom: var(--r-2);
}
@media (max-width: 720px) {
	.kop-met-telling { grid-template-columns: 1fr; gap: var(--r-6); }
	.kop-telling { text-align: left; max-width: none; }
}

/* ==================================================================
   9. Paginakop en kruimelpad
   ================================================================== */

.kop-foto { width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; }
.pagina-titel { text-align: center; padding: var(--sectie-kl) 0 var(--r-6); }
.pagina-titel h1 { margin: 0 auto var(--r-4); max-width: 20ch; }
.pagina-titel p {
	max-width: 62ch; margin: 0 auto; color: var(--tekst); font-size: var(--t-l);
	line-height: 1.6;
}

.kruimelpad {
	font-family: var(--kop-font); font-size: var(--t-xs); color: var(--gedempt);
	padding-bottom: var(--r-8);
}
.kruimelpad nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.kruimelpad a { color: var(--gedempt); text-decoration: none; }
.kruimelpad a:hover { color: var(--magenta); }
.kruimelpad .scheiding { margin: 0 var(--r-2); color: #B9C4D9; }
.kruimelpad [aria-current="page"] { color: var(--navy); }

/* ==================================================================
   10. Artikel en zijbalk
   ================================================================== */

/* Een derde voor de zijbalk, net als de kolommen op het ervaringenoverzicht.
   Als breukdeel in plaats van een vast aantal pixels, zodat de verhouding
   klopt op elke schermbreedte. */
.met-zijbalk {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: clamp(var(--r-8), 4vw, var(--r-16)); align-items: start;
}
@media (max-width: 980px) { .met-zijbalk { grid-template-columns: 1fr; gap: var(--r-10); } }

.artikel { max-width: var(--lees); }
.met-zijbalk .artikel { max-width: none; }
.artikel > *:first-child { margin-top: 0; }
.artikel h2 { margin-top: var(--r-12); }
.artikel h3 { margin-top: var(--r-8); }
.artikel .intro {
	font-size: var(--t-l); line-height: 1.6; color: var(--navy);
	font-style: normal; margin-bottom: var(--r-6);
}
.artikel ul, .artikel ol { padding-left: var(--r-5); margin: 0 0 1.35em; }
.artikel li { margin-bottom: var(--r-2); }
.artikel li::marker { color: var(--magenta-op); }

/* Citaten in de lopende tekst dragen hetzelfde aanhalingsteken als een
   ervaring, zodat het overal dezelfde taal spreekt. Het teken komt uit een
   masker, zodat de kleur gewoon uit de tokens komt. */
.citaat, .artikel blockquote, .artikel .wp-block-quote {
	margin: var(--r-10) 0; padding: var(--r-6) 0;
	border: 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
	font-family: var(--kop-font); font-size: var(--t-l); font-style: normal;
	font-weight: 400; line-height: 1.45; letter-spacing: -0.006em;
	color: var(--navy); max-width: 44ch;
}
.citaat::before,
.artikel blockquote::before,
.artikel .wp-block-quote::before {
	content: ''; display: block; width: 1.5rem; height: 1.5rem;
	margin-bottom: var(--r-4); background-color: var(--magenta-op);
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cGF0aCBkPSJNMTAwLDU2SDQwQTE2LDE2LDAsMCwwLDI0LDcydjY0YTE2LDE2LDAsMCwwLDE2LDE2aDYwdjhhMzIsMzIsMCwwLDEtMzIsMzIsOCw4LDAsMCwwLDAsMTYsNDguMDUsNDguMDUsMCwwLDAsNDgtNDhWNzJBMTYsMTYsMCwwLDAsMTAwLDU2Wm0wLDgwSDQwVjcyaDYwWk0yMTYsNTZIMTU2YTE2LDE2LDAsMCwwLTE2LDE2djY0YTE2LDE2LDAsMCwwLDE2LDE2aDYwdjhhMzIsMzIsMCwwLDEtMzIsMzIsOCw4LDAsMCwwLDAsMTYsNDguMDUsNDguMDUsMCwwLDAsNDgtNDhWNzJBMTYsMTYsMCwwLDAsMjE2LDU2Wm0wLDgwSDE1NlY3Mmg2MFoiLz48L3N2Zz4=") center / contain no-repeat;
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cGF0aCBkPSJNMTAwLDU2SDQwQTE2LDE2LDAsMCwwLDI0LDcydjY0YTE2LDE2LDAsMCwwLDE2LDE2aDYwdjhhMzIsMzIsMCwwLDEtMzIsMzIsOCw4LDAsMCwwLDAsMTYsNDguMDUsNDguMDUsMCwwLDAsNDgtNDhWNzJBMTYsMTYsMCwwLDAsMTAwLDU2Wm0wLDgwSDQwVjcyaDYwWk0yMTYsNTZIMTU2YTE2LDE2LDAsMCwwLTE2LDE2djY0YTE2LDE2LDAsMCwwLDE2LDE2aDYwdjhhMzIsMzIsMCwwLDEtMzIsMzIsOCw4LDAsMCwwLDAsMTYsNDguMDUsNDguMDUsMCwwLDAsNDgtNDhWNzJBMTYsMTYsMCwwLDAsMjE2LDU2Wm0wLDgwSDE1NlY3Mmg2MFoiLz48L3N2Zz4=") center / contain no-repeat;
}
/* Twee citaten achter elkaar delen één streep. */
.citaat + .citaat,
.artikel blockquote + blockquote,
.artikel .wp-block-quote + .wp-block-quote { margin-top: 0; border-top: 0; }

.citaat p, .artikel blockquote p { margin: 0 0 0.6em; }
.citaat p:last-child, .artikel blockquote p:last-child { margin-bottom: 0; }
.artikel .wp-block-quote cite {
	display: block; font-family: var(--lees-font); font-size: var(--t-s);
	font-style: normal; color: var(--gedempt); margin-top: var(--r-4);
}

.form-kaart {
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	padding: var(--r-8) var(--r-6); position: sticky; top: calc(var(--kop-hoog) + var(--r-5));
}
.form-kaart h2, .form-kaart .widget-titel {
	font-size: var(--t-l); font-weight: 600; color: var(--navy); margin-bottom: var(--r-3);
}
.form-kaart p { font-size: var(--t-s); color: var(--tekst); margin-bottom: var(--r-6); }

/* ==================================================================
   11. Formulieren
   ------------------------------------------------------------------
   Labels blijven staan; een placeholder alleen verdwijnt zodra
   iemand begint te typen.
   ================================================================== */

.formulier { display: grid; gap: var(--r-5); }
.formulier .veld { display: flex; flex-direction: column; gap: var(--r-1); }
.formulier label {
	font-family: var(--kop-font); font-size: var(--t-xs); font-weight: 500;
	color: var(--gedempt); letter-spacing: 0.005em;
}
.formulier input, .formulier textarea {
	width: 100%; border: 0; border-bottom: 1.5px solid var(--lijn);
	background: none; font: inherit; font-size: var(--t-s); color: var(--navy);
	padding: var(--r-2) 0; border-radius: 0;
	transition: border-color .18s ease;
}
.formulier textarea { min-height: 104px; resize: vertical; }
.formulier input::placeholder, .formulier textarea::placeholder { color: #A3ACBE; }
.formulier input:hover, .formulier textarea:hover { border-bottom-color: #C4D2EA; }
.formulier input:focus, .formulier textarea:focus {
	outline: 0; border-bottom-color: var(--magenta); box-shadow: 0 1px 0 var(--magenta);
}
/* De knop zit in een veld dat als kolom uitlijnt; anders rekt hij mee. */
.formulier button { justify-self: start; margin-top: var(--r-2); }
.formulier .veld > button { align-self: flex-start; }
.formulier .veld-verborgen { position: absolute; left: -9999px; }

.melding {
	padding: var(--r-4) var(--r-5); margin-bottom: var(--r-6);
	border-radius: var(--radius-kl); font-size: var(--t-s);
	border-left: 3px solid currentColor;
}
.melding-goed { background: #ECF6F0; color: #1C5B37; }
.melding-fout { background: #FBECF1; color: #8C1F45; }

.zoekformulier { max-width: 420px; margin-inline: auto; }

/* ==================================================================
   12. Contactblok en contactpagina
   ------------------------------------------------------------------
   De homepage en de contactpagina delen dezelfde opbouw: het formulier
   links en groot, de gegevens ernaast in een kaart.
   ================================================================== */

/* ---------- Contactpagina ----------
   Hier staat het formulier links en groot; wie deze pagina opent wil iets
   versturen. De gegevens staan ernaast voor wie liever belt of mailt. */
.contact-pagina {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: clamp(var(--r-8), 4vw, var(--r-16)); align-items: start;
}
@media (max-width: 980px) {
	.contact-pagina { grid-template-columns: 1fr; gap: var(--r-10); }
}

.contact-formulier > h2,
.contact-zijkant > h2 {
	font-size: var(--t-l); margin-bottom: var(--r-6);
	padding-bottom: 0; border-bottom: 0;
}
.contact-formulier .artikel { max-width: none; margin-bottom: var(--r-8); }
/* Links uitgelijnd formulier, dus de knop ook. */
.contact-formulier .formulier-contact button,
.contact-formulier .formulier-contact .veld > button { justify-self: start; align-self: start; }

.contact-zijkant {
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius); padding: var(--r-8) var(--r-6);
}
.contact-lijst { margin: 0; display: grid; gap: var(--r-6); }
.contact-regel {
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	gap: var(--r-4); align-items: start;
}
.contact-regel + .contact-regel { border-top: 1px solid var(--lijn); padding-top: var(--r-6); }
.contact-regel-icoon {
	display: flex; align-items: center; justify-content: center;
	width: 1.375rem; height: 1.375rem; margin-top: 2px;
	color: var(--magenta-op); flex: none;
}
.contact-regel-icoon svg { width: 100%; height: 100%; display: block; }
.contact-lijst dt {
	font-family: var(--kop-font); font-size: var(--t-xs); font-weight: 600;
	color: var(--gedempt); margin-bottom: var(--r-1);
}
.contact-lijst dd {
	margin: 0; font-size: var(--t-m); line-height: 1.55; color: var(--navy);
}
.contact-lijst address { font-style: normal; }
.contact-lijst a { color: var(--navy); text-decoration: none; }
.contact-lijst a:hover { color: var(--magenta); text-decoration: underline; }
.contact-regel:last-child dd { font-size: var(--t-s); color: var(--tekst); }


/* De kaart van de omgeving als band onder aan de pagina: je hebt hem pas
   nodig als je besloten hebt te komen.

   Zwart-wit, zodat hij niet met de foto's concurreert, en muisdood: een
   ingesloten kaart vangt anders je scrollwiel af en zoomt in terwijl je
   langs de pagina wilt. Wie de route wil, gebruikt het adres in de
   bovenbalk; dat opent Google Maps. */
.kaart-band { display: block; position: relative; line-height: 0; }
.kaart-band iframe {
	width: 100%; height: clamp(260px, 32vw, 420px);
	border: 0; display: block; pointer-events: none;
	filter: grayscale(1) contrast(1.04);
}

.contact-smal { max-width: 780px; }

/* Het brede formulier wordt nog gebruikt door de shortcode. */
.formulier-contact {
	grid-template-columns: 1fr 1fr;
	column-gap: var(--r-10); row-gap: var(--r-8);
}
.formulier-contact .veld-breed { grid-column: 1 / -1; }
.formulier-contact textarea { min-height: 180px; }
.formulier-contact button,
.formulier-contact .veld > button { justify-self: center; align-self: center; }
@media (max-width: 640px) {
	.formulier-contact { grid-template-columns: 1fr; row-gap: var(--r-6); }
}

/* ==================================================================
   12b. Uitnodigingsblok
   ------------------------------------------------------------------
   De enige donkere vlek op de site. Eén vaste vorm, zodat het blok
   onder elke pagina herkenbaar is als hetzelfde aanbod.
   ================================================================== */

.sectie-uitnodiging { padding-block: var(--sectie-kl); }
/* Boven de voettekst: een streep, zodat de grens zichtbaar blijft ook als de
   sectie erboven dezelfde zachte achtergrond heeft. */
.sectie-uitnodiging-voet { border-top: 1px solid var(--lijn); }

.uitnodiging {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	align-items: center; gap: var(--r-8) var(--r-12);
	background: var(--navy-diep); border-radius: var(--radius);
	padding: clamp(var(--r-8), 4vw, var(--r-12));
}
.uitnodiging-tekst { max-width: 52ch; }
.uitnodiging h2 {
	color: #fff; margin: 0; font-size: var(--t-xl);
	padding-bottom: 0; border-bottom: 0;
}
.uitnodiging p {
	color: #C8D2E8; font-size: var(--t-m); line-height: 1.6;
	margin: var(--r-4) 0 0;
}

.uitnodiging-acties {
	display: flex; flex-direction: column; align-items: center;
	gap: var(--r-5); text-align: center;
}
.uitnodiging-telefoon {
	font-family: var(--kop-font); font-size: var(--t-s); font-weight: 500;
	color: #C8D2E8; text-decoration: none;
	border-bottom: 1px solid rgba(200, 210, 232, .4); padding-bottom: 2px;
	transition: color .18s ease, border-color .18s ease;
}
.uitnodiging-telefoon:hover { color: #fff; border-bottom-color: #fff; }
.uitnodiging :where(a):focus-visible { outline-color: #fff; }

@media (max-width: 820px) {
	.uitnodiging { grid-template-columns: 1fr; }
	.uitnodiging-acties { align-items: flex-start; text-align: left; }
}

/* ==================================================================
   13. Tarieven en tabellen
   ================================================================== */

/* Eén kaart per dienst, in dezelfde volgorde als het menu. Zo vindt wie van
   een dienstpagina komt meteen zijn eigen prijs. */
/* Twee kolommen met dezelfde tweedeling als het menu: coaching links,
   schoolbegeleiding rechts. Binnen een kolom staan de kaarten onder elkaar, en
   omdat de kolommen los van elkaar lopen blijft er nergens ruimte over. */
.tarieven {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(var(--r-6), 3vw, var(--r-10)); align-items: start;
}
@media (max-width: 820px) { .tarieven { grid-template-columns: 1fr; } }

.tarieven-groep-kop {
	display: flex; align-items: center; gap: var(--r-3);
	font-size: var(--t-xl); margin-bottom: var(--r-6);
	padding-bottom: var(--r-4); border-bottom: 1px solid var(--lijn);
}
.tarieven-groep-icoon {
	display: flex; align-items: center; justify-content: center;
	width: 1.625rem; height: 1.625rem; flex: none; color: var(--magenta-op);
}
.tarieven-groep-icoon svg { width: 100%; height: 100%; display: block; }

.tarieven-inleiding { max-width: 62ch; margin-bottom: var(--r-10); }
.groep-inleiding { max-width: 62ch; }

.tarief-kaart {
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius); padding: var(--r-6);
	break-inside: avoid; margin-bottom: var(--r-6);
}
.tarief-kaart h3 {
	font-size: var(--t-l); margin: 0 0 var(--r-5);
	padding-bottom: var(--r-5); border-bottom: 1px solid var(--lijn);
}
.tarief-kaart h3 a {
	display: flex; align-items: center; gap: var(--r-3);
	color: inherit; text-decoration: none;
	transition: color .18s ease;
}
.tarief-kaart h3 a:hover { color: var(--magenta); }
.tarief-kaart-icoon {
	display: flex; align-items: center; justify-content: center;
	width: 1.5rem; height: 1.5rem; flex: none;
	color: var(--magenta-op); transition: color .18s ease;
}
.tarief-kaart-icoon svg { width: 100%; height: 100%; display: block; }

.tarief-rijen { margin: 0; display: grid; gap: var(--r-4); }
.tarief-rij {
	display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: var(--r-2) var(--r-5); align-items: baseline;
}
.tarief-rij + .tarief-rij { border-top: 1px solid var(--lijn); padding-top: var(--r-4); }
.tarief-rijen dt {
	font-family: var(--kop-font); font-size: var(--t-m); font-weight: 600;
	color: var(--navy); white-space: nowrap;
}
.tarief-rijen dd {
	margin: 0; font-size: var(--t-s); line-height: 1.55; color: var(--tekst);
}
@media (max-width: 520px) {
	.tarief-rij { grid-template-columns: 1fr; }
}

/* ==================================================================
   14. Juridische pagina's
   ================================================================== */

.juridisch { max-width: var(--lees); }
.juridisch h2 { font-size: var(--t-l); margin-top: var(--r-10); }
.juridisch h2:first-child { margin-top: 0; }

/* ==================================================================
   15. Voet
   ================================================================== */

.site-voet { background: var(--mist); padding-top: var(--sectie-kl); border-top: 1px solid var(--lijn); }
.voet-binnen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r-7); }
.site-voet h3 {
	font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
	color: var(--navy); margin-bottom: var(--r-4);
	padding-bottom: var(--r-3); border-bottom: 1px solid var(--lijn);
}
.site-voet h3 a { color: inherit; font-size: inherit; text-decoration: none; }
.site-voet h3 a:hover { color: var(--magenta); }
.voet-meer { font-weight: 600; }
.voet-menu, .onder-menu { list-style: none; margin: 0; padding: 0; }
.site-voet li { margin-bottom: var(--r-2); }
.site-voet a {
	color: var(--tekst); text-decoration: none; font-size: var(--t-s);
	transition: color .18s ease;
}
.site-voet a:hover { color: var(--magenta); }

@media (max-width: 1000px) {
	.voet-binnen { grid-template-columns: repeat(2, 1fr); }
}

.voet-onder { margin-top: var(--sectie-kl); border-top: 1px solid var(--lijn); }
.voet-onder .container {
	display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;
	gap: var(--r-3); padding-block: var(--r-5);
	font-size: var(--t-xs); color: var(--gedempt);
}
.voet-onder p { margin: 0; }
.voet-onder-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-5); }
.voet-credit a { border-bottom: 1px solid var(--lijn); padding-bottom: 1px; }
.voet-credit a:hover { border-bottom-color: var(--magenta); }
.onder-menu { display: flex; gap: var(--r-5); }
.voet-onder a { color: var(--gedempt); text-decoration: none; font-size: var(--t-xs); }
.voet-onder a:hover { color: var(--magenta); }

@media (max-width: 700px) {
	.voet-binnen { grid-template-columns: 1fr; gap: var(--r-6); }
	.voet-onder .container { justify-content: flex-start; }
}

/* ==================================================================
   16. Naar boven
   ================================================================== */

.omhoog {
	position: fixed; right: var(--r-6); bottom: var(--r-8); z-index: 150;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--lijn); background: var(--wit); color: var(--navy);
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px rgba(22, 33, 63, .12);
	opacity: 0; visibility: hidden;
	transition: opacity .25s ease, visibility .25s, color .18s ease, border-color .18s ease;
}
.omhoog.zichtbaar { opacity: 1; visibility: visible; }


/* ==================================================================
   17. Losse WordPress-onderdelen
   ================================================================== */

.admin-bar .site-kop { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-kop { top: 46px; } }

.artikel .alignleft  { float: left;  margin: var(--r-1) var(--r-6) var(--r-5) 0; }
.artikel .alignright { float: right; margin: var(--r-1) 0 var(--r-5) var(--r-6); }
.artikel .aligncenter { margin-inline: auto; }
.artikel figure { margin: var(--r-8) 0; }
.artikel figure img { border-radius: var(--radius); }
.artikel figcaption { font-size: var(--t-xs); color: var(--gedempt); margin-top: var(--r-2); }

.pagineren { display: flex; gap: var(--r-2); justify-content: center; margin-top: var(--r-12); }
.pagineren .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 var(--r-3);
	border: 1px solid var(--lijn); border-radius: 999px;
	font-family: var(--kop-font); font-size: var(--t-s);
	color: var(--navy); text-decoration: none;
}
.pagineren .page-numbers.current,
.pagineren .page-numbers:hover {
	background: var(--magenta-op); border-color: var(--magenta-op); color: #fff;
}

.leeg { text-align: center; max-width: 56ch; margin-inline: auto; }

.berichten { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--r-10); }
.bericht-kaart h2 { font-size: var(--t-l); margin-bottom: var(--r-2); }
.bericht-kaart h2 a { color: inherit; text-decoration: none; }
.bericht-kaart h2 a:hover { color: var(--magenta); }
.bericht-datum { font-size: var(--t-xs); color: var(--gedempt); margin-bottom: var(--r-3); }
.bericht-kaart img { border-radius: var(--radius); margin-bottom: var(--r-5); }

/* Contact Form 7 laten meelopen met .formulier */
.wpcf7-form p { margin: 0 0 var(--r-5); }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"], .wpcf7-form textarea {
	width: 100%; border: 0; border-bottom: 1.5px solid var(--lijn); background: none;
	font: inherit; font-size: var(--t-s); color: var(--navy); padding: var(--r-2) 0; border-radius: 0;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
	outline: 0; border-bottom-color: var(--magenta); box-shadow: 0 1px 0 var(--magenta);
}
.wpcf7-form textarea { min-height: 104px; resize: vertical; }
.wpcf7-form input[type="submit"] {
	font-family: var(--kop-font); font-size: var(--t-s); font-weight: 500; cursor: pointer;
	border-radius: 999px; padding: 0 var(--r-6); min-height: 46px;
	border: 1.5px solid var(--magenta-op); background: var(--magenta-op); color: #fff;
	transition: background-color .18s ease, border-color .18s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--magenta-in); border-color: var(--magenta-in); }
.wpcf7-not-valid-tip { color: #8C1F45; font-size: var(--t-xs); }
.wpcf7-response-output {
	border: 0 !important; border-left: 3px solid currentColor !important;
	padding: var(--r-4) var(--r-5) !important; margin: var(--r-6) 0 0 !important;
	border-radius: var(--radius-kl); font-size: var(--t-s);
	background: #FBECF1; color: #8C1F45;
}
.wpcf7 form.sent .wpcf7-response-output { background: #ECF6F0; color: #1C5B37; }

/* Het vaste blok over de praktijkruimte op een plaatspagina. Zachte
   achtergrond en een streep aan de zijkant: het hoort bij het verhaal, maar
   het is geen deel ervan. */
.ruimte-blok {
	margin: var(--r-8) 0;
	padding: var(--r-6) var(--r-7);
	background: var(--mist); border-radius: var(--radius);
	border-left: 3px solid var(--magenta-op);
}
.ruimte-blok h2 {
	font-size: var(--t-m); margin: 0 0 var(--r-3);
}
.ruimte-blok p { margin: 0; }

/* ---------------------------------------------------------------- */
/* Werkgebied                                                        */
/* ---------------------------------------------------------------- */

/* De plaatsen staan als rustige naamkaartjes naast elkaar, niet als volwaardige
   dienstblokken: het zijn wegwijzers, geen aanbod. Vier op een rij, zodat de
   dertien plaatsen als een klein blok samen blijven staan in plaats van als
   een lange lijst. */
.plaats-lijst {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--r-4);
}

/* Het kaartje vult de hele cel. Zonder dit houdt een kaartje met één regel
   reistijd een kortere doos over naast Harmelen, waar "hier staat de
   praktijk" op een smal scherm over twee regels valt. */
.plaats-item { display: flex; }
.plaats-kaart {
	flex: 1 1 auto;
	display: flex; flex-direction: column; gap: 2px;
	padding: var(--r-4) var(--r-5);
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius-kl);
	text-decoration: none; color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
a.plaats-kaart:hover {
	border-color: var(--magenta);
	box-shadow: 0 2px 10px rgba(34, 49, 92, .07);
}
.sectie-zacht .plaats-kaart { background: var(--wit); }

.plaats-naam {
	font-family: var(--kop-font); font-weight: 500;
	color: var(--navy);
}
a.plaats-kaart .plaats-naam { color: var(--magenta); }

.plaats-reis {
	display: flex; align-items: center; gap: 6px;
	font-size: var(--t-xs); color: var(--gedempt);
}
.plaats-reis svg { width: 14px; height: 14px; flex: none; }

/* De plaats die je nu bekijkt blijft staan, maar stil. */
.plaats-item-nu .plaats-kaart {
	background: transparent; border-style: dashed;
}

.plaats-lijst-noot {
	margin: var(--r-5) 0 0; max-width: 62ch;
	color: var(--tekst);
}

@media (max-width: 900px) {
	.plaats-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.plaats-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- */
/* Diensten als regels                                               */
/* ---------------------------------------------------------------- */

/* Op de homepage staan alle zeven diensten bij elkaar. Als blokken wordt dat
   een raster van drie plus vier met ongelijke breedtes, en het concurreert met
   de vlakken van de stappen en de ervaringen. Als regels lees je ze in één
   oogopslag en blijft de pagina rustig. */

.dienst-groepskop {
	display: flex; align-items: center; gap: 8px;
	font-size: var(--t-m); color: var(--navy);
	margin: var(--r-8) 0 var(--r-4);
	padding-bottom: var(--r-3);
	border-bottom: 1px solid var(--lijn);
}
.dienst-groepskop:first-of-type { margin-top: 0; }
.dienst-groepskop a { color: inherit; text-decoration: none; }
.dienst-groepskop a:hover { color: var(--magenta); }
.dienst-groepskop-icoon {
	display: flex; width: 1.1rem; height: 1.1rem; flex: none;
	color: var(--magenta);
}
.dienst-groepskop-icoon svg { width: 100%; height: 100%; display: block; }

.dienst-regels { list-style: none; margin: 0; padding: 0; }
.dienst-regel + .dienst-regel { border-top: 1px solid var(--lijn); }

.dienst-regel > a {
	display: flex; align-items: center; gap: var(--r-5);
	padding: var(--r-4);
	text-decoration: none; color: inherit;
	border-radius: var(--radius-kl);
	transition: background-color .15s ease;
}
.dienst-regel > a:hover { background: var(--mist); }
.sectie-zacht .dienst-regel > a:hover { background: var(--wit); }
.dienst-regel > a:focus-visible { outline: 2px solid var(--magenta); outline-offset: -2px; }

.dienst-regel-icoon {
	display: flex; align-items: center; justify-content: center;
	width: 1.5rem; height: 1.5rem; flex: none;
	color: var(--magenta-op);
}
.dienst-regel-icoon svg { width: 100%; height: 100%; display: block; }

.dienst-regel-tekst { display: grid; gap: 2px; }
.dienst-regel-naam {
	font-family: var(--kop-font); font-size: var(--t-m); font-weight: 600;
	color: var(--navy); line-height: 1.3;
}
.dienst-regel-intro { font-size: var(--t-s); line-height: 1.5; color: var(--tekst); }

.dienst-regel-pijl {
	margin-left: auto; flex: none;
	color: var(--magenta); font-size: 1.5rem; line-height: 1;
	transition: transform .18s ease;
}
.dienst-regel > a:hover .dienst-regel-pijl { transform: translateX(3px); }

@media (max-width: 560px) {
	/* Het pijltje zegt op een smal scherm niets meer; de ruimte is nuttiger.
	   En de zin wordt na twee regels afgekapt, anders beslaan zeven diensten
	   bijna twee schermen en scrol je er eindeloos langs. */
	.dienst-regel-pijl { display: none; }
	.dienst-regel > a { gap: var(--r-4); align-items: flex-start; padding: var(--r-4) var(--r-3); }
	.dienst-regel-icoon { margin-top: 2px; }
	.dienst-regel-intro {
		display: -webkit-box; -webkit-box-orient: vertical;
		-webkit-line-clamp: 2; line-clamp: 2;
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------- */
/* Schuiven op een telefoon                                          */
/* ---------------------------------------------------------------- */

/* Zeven diensten of drie ervaringen onder elkaar maken de homepage op een
   telefoon eindeloos lang. Daarom schuiven die rijen daar opzij in plaats van
   dat ze stapelen. De kaarten lopen door tot de schermrand en de volgende
   steekt er half uit; dat is het enige wat nodig is om te laten zien dat er
   meer staat. Geen knoppen en geen script: de browser doet het zelf, en een
   veegbeweging is op een telefoon de normale manier om verder te kijken. */
@media (max-width: 700px) {
	.ervaringen,
	.dienst-lijst {
		display: flex; flex-wrap: nowrap;
		gap: var(--r-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1.5rem;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Tot de schermrand doorlopen, buiten de marge van de container om. */
		margin-inline: -1.5rem;
		padding: 0 1.5rem var(--r-2);
	}
	.ervaringen::-webkit-scrollbar,
	.dienst-lijst::-webkit-scrollbar { display: none; }

	.ervaringen > .ervaring {
		flex: 0 0 min(85%, 24rem);
		scroll-snap-align: start;
	}
	.dienst-lijst > .dienst-blok {
		flex: 0 0 min(78%, 20rem);
		scroll-snap-align: start;
	}
}

@media (max-width: 640px) {
	.ervaringen,
	.dienst-lijst {
		scroll-padding-inline: 1rem;
		margin-inline: -1rem;
		padding: 0 1rem var(--r-2);
	}
}

/* De stippen onder een schuifbaan. Ze worden door het script aangemaakt en
   verdwijnen weer zodra het scherm breed genoeg is voor een raster. Het
   aanraakvlak is groter dan de stip zelf, want een stip van zes pixels is
   met een duim niet te raken. */
.schuif-stippen {
	display: none;
	justify-content: center; gap: 2px;
	margin-top: var(--r-4);
}
.schuif-stip {
	appearance: none; border: 0; background: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; padding: 0;
}
.schuif-stip::before {
	content: ''; display: block;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--lijn);
	transition: background-color .18s ease, transform .18s ease;
}
.schuif-stip.hier::before { background: var(--magenta); transform: scale(1.25); }
.schuif-stip:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 50%; }

@media (max-width: 700px) {
	.schuif-stippen { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}