/*
Theme Name:   Scheidingsexpert
Theme URI:    https://www.scheidingsexpert.nl
Description:  Child theme for Scheidingsexpert, built on Twenty Twenty-Five. Professional divorce mediation, Netherlands.
Author:       CODATOR
Author URI:   https://codator.nl
Template:     twentytwentyfive
Version:      2.23.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Text Domain:  scheidingsexpert
License:      Private
*/

/* ==========================================================================
   SCHEIDINGSEXPERT — DESIGN TOKENS + COMPONENT STYLES
   Ported from design/homepage-preview.html (bron van waarheid, juli 2026),
   sindsdien doorontwikkeld (zie CLAUDE.md § Terugbelformulier — status).
   theme.json exposes the same palette as WP block-editor presets; this file
   keeps the original --variable names so preview CSS can be copied verbatim.
   ========================================================================== */

:root {
	--primary: #914A3C;        /* terracotta — logo 'expert' */
	--primary-dark: #6E362B;
	--primary-deep: #4A251D;
	--primary-soft: #A96557;
	--accent: #E1796E;         /* coral — logo 'scheidings' */
	--accent-soft: #EDC7C1;
	--surface-warm: #F8F3F1;
	--surface-rose: #FAEEEC;
	--ink-900: #2E1F1A;
	--ink-700: #5C4A43;
	--ink-500: #8F7C75;
	--border: #EDE1DD;
	--white: #FFFFFF;
	--radius-lg: 28px;
	--radius-md: 18px;
	--radius-sm: 12px;
	--shadow-soft: 0 20px 50px -20px rgba(145, 74, 60, 0.28);
	--shadow-card: 0 12px 32px -16px rgba(145, 74, 60, 0.2);
	--font-head: "Playfair Display", Georgia, serif;
	--font-body: "DM Sans", -apple-system, sans-serif;
	--wide: 1200px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px; /* clears the 84px sticky header when jumping to an anchor */
}

body {
	font-family: var(--font-body);
	color: var(--ink-900);
	background: var(--white);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 32px; }

/* Hide default TT5 page title on the homepage — the pattern carries its own hero */
.home .wp-block-post-title,
.home .entry-title,
.home header.entry-header,
.home .page-header {
	display: none !important;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-body); font-weight: 600; font-size: 16px;
	padding: 15px 30px; border-radius: 999px; text-decoration: none;
	transition: all .25s ease; cursor: pointer; border: none; line-height: 1;
}
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--primary); background: var(--surface-warm); }
.btn-rose { background: var(--accent); color: var(--white); }
.btn-rose:hover { background: #D06459; transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; }

/* ---------- Header ---------- */
header.se-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}

/* ---------- Root block gap ---------- */
/* Header / homepage-pattern / footer are top-level blocks in front-page.html;
   remove WP's automatic blockGap margin between them — each section already
   defines its own vertical padding. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.nav {
	display: flex; align-items: center; justify-content: space-between;
	height: 84px;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 52px; width: auto; }
nav.menu { display: flex; align-items: center; gap: 36px; }
nav.menu a {
	text-decoration: none; color: var(--ink-700); font-weight: 500; font-size: 15.5px;
	transition: color .2s;
}
nav.menu a:hover { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { display: flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; font-size: 15px; text-decoration: none; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, var(--surface-warm) 0%, #FDFCFB 100%); overflow: hidden; }
.hero-flat { background: var(--surface-warm); } /* matches .page-hero (single.html) instead of the homepage gradient */
.hero-compact .hero-grid { padding-block: 48px; gap: 48px; }
.hero-compact h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 18px; }
.hero-compact .hero-photo { aspect-ratio: 16/10; }
.hero-grid {
	display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px;
	align-items: center; padding-block: 88px 72px;
}
.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--accent); }
.hero h1, h1.se-h1 {
	font-family: var(--font-head); font-weight: 600;
	font-size: clamp(42px, 5vw, 64px); line-height: 1.08;
	color: var(--primary); letter-spacing: -0.01em; margin-bottom: 26px;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-sub { font-size: 18.5px; color: var(--ink-700); max-width: 54ch; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* Credential-regel onder de hero-knoppen (verving de sterrenrij + '8,3'-regel). */
.hero-trust {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
	margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border);
}
.trust-item {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--ink-700);
}
.trust-item::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: var(--accent); flex-shrink: 0;
}
.stars { color: var(--accent); letter-spacing: 2px; font-size: 15px; }

.hero-visual { position: relative; }
.hero-photo {
	border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: var(--shadow-soft);
	aspect-ratio: 4/4.4; background: var(--surface-rose);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-blob {
	position: absolute; inset: auto -60px -60px auto; width: 260px; height: 260px;
	background: var(--surface-rose); border-radius: 50%; z-index: -1;
}
.hero-badge {
	position: absolute; left: -28px; bottom: 36px;
	background: var(--white); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card); padding: 18px 22px;
	display: flex; align-items: center; gap: 14px;
}
.hero-badge .num { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--primary); line-height: 1; }
.hero-badge .lbl { font-size: 13px; color: var(--ink-500); line-height: 1.35; }

/* ---------- CTA: plan een vrijblijvend gesprek — de primaire CTA ----------
   Volle breedte in primary-deep met een koraal bovenrand: de sectie moet zich
   duidelijk onderscheiden van elke andere sectie op de pagina. Koraal is hier
   gereserveerd voor 'afspraak maken' en wordt nergens anders als knopkleur
   gebruikt, zodat die kleur één betekenis houdt. */
.callback {
	position: relative;
	background: var(--primary-deep);
	color: var(--white);
	padding: 144px 0 96px;
	overflow: hidden;
}
.callback::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(58% 50% at 82% 6%, rgba(225, 121, 110, .3), transparent 68%);
}
.callback-in { position: relative; z-index: 1; }

.callback-head { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.callback .eyebrow { color: var(--accent-soft); }
.callback .eyebrow::before,
.callback .eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--accent-soft); }
.callback-title {
	font-family: var(--font-head); font-weight: 600;
	font-size: clamp(36px, 4.4vw, 54px); line-height: 1.08;
	letter-spacing: -0.015em; color: var(--white); margin: 0 0 16px;
}
.callback-lead { font-size: 18px; color: rgba(255, 255, 255, .75); margin: 0 auto; max-width: 46ch; }


.callback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* ----- links: de twee vragen + de knop ----- */
.callback-form { display: flex; flex-direction: column; gap: 30px; }

.question-group { border: none; padding: 0; margin: 0; }
.question-group .q-label {
	display: block; font-weight: 600; font-size: 16.5px; color: var(--white);
	margin-bottom: 14px; padding: 0;
}
.q-nr {
	display: inline-flex; align-items: center; justify-content: center;
	width: 23px; height: 23px; border-radius: 50%;
	background: var(--accent); color: var(--primary-deep);
	font-size: 12.5px; font-weight: 700; margin-right: 10px; vertical-align: middle;
}
.radio-options { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-options input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-options label {
	display: inline-flex; align-items: center;
	padding: 12px 22px; border-radius: 999px;
	background: rgba(255, 255, 255, .12); color: var(--white);
	font-size: 15px; font-weight: 500; cursor: pointer;
	border: 1.5px solid rgba(255, 255, 255, .22); transition: all .2s ease;
}
.radio-options label:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }
.radio-options input[type="radio"]:checked + label {
	background: var(--white); color: var(--primary-deep); border-color: var(--white); font-weight: 600;
}
.radio-options input[type="radio"]:focus-visible + label { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.callback-uitkomst { margin-top: 30px; }
.callback-uitkomst[hidden] { display: none; }
.callback-uitkomst p {
	border-left: 2px solid var(--accent); padding: 2px 0 2px 16px;
	margin: 0 0 22px; font-size: 15.5px; color: rgba(255, 255, 255, .85);
}
.callback-uitkomst strong { color: var(--white); }

/* De enige koraal knop op de site: 'afspraak maken'. */
.btn-boek { background: var(--accent); color: var(--primary-deep); font-size: 17px; font-weight: 700; padding: 18px 34px; }
.btn-boek:hover { background: #EE8C81; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }


/* ----- rechts: compact overzicht van het traject ----- */
.callback-traject {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius-lg);
	padding: 38px 36px 34px;
}
.traject-kop {
	font-family: var(--font-head); font-weight: 600;
	font-size: 24px; line-height: 1.2; color: var(--white);
	margin: 0 0 28px;
}
.traject-lijst { list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; counter-reset: traject; }
.traject-lijst::before {
	content: ""; position: absolute; left: 11.5px; top: 26px; bottom: 26px;
	width: 1px; background: rgba(255, 255, 255, .22);
}
.traject-lijst li {
	position: relative; display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; padding: 13px 0;
	counter-increment: traject;
}
/* Genummerde stip: maakt zichtbaar dat het een vaste volgorde is. */
.traject-lijst li::before {
	content: counter(traject);
	position: absolute; left: -44px; top: 12px;
	width: 24px; height: 24px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--primary-deep); border: 1px solid rgba(255, 255, 255, .4);
	font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .75);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.traject-naam { font-size: 17px; font-weight: 500; color: var(--white); }
.traject-duur { font-size: 14px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.traject-lijst li.is-hier::before {
	background: var(--accent); border-color: var(--accent); color: var(--primary-deep);
	box-shadow: 0 0 0 5px rgba(225, 121, 110, .25);
}
.traject-lijst li.is-hier .traject-naam { font-weight: 700; }
.traject-lijst li.is-hier .traject-duur { color: var(--accent-soft); }
.traject-totaal {
	margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 15px; color: rgba(255, 255, 255, .65);
}
.traject-totaal strong { color: var(--white); }

/* ----- Calendly ----- */
.calendly-embed {
	width: 100%; margin: 56px 0 0;
	opacity: 0; transform: translateY(16px);
	transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.calendly-embed.is-visible { opacity: 1; transform: none; }
.calendly-back {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: none; padding: 0; margin-bottom: 16px;
	font-family: var(--font-body); font-size: 14px; font-weight: 600;
	color: var(--white); opacity: .85; cursor: pointer; transition: opacity .2s ease;
}
.calendly-back:hover { opacity: 1; text-decoration: underline; }
.calendly-embed iframe {
	display: block; width: 100%; height: 1050px; min-height: 1050px;
	margin: 0; border: 0;
	border-radius: var(--radius-md); background: var(--white);
}

/* ---------- Compacte CTA (hub-, informatie- en regiopagina's) ----------
   Dezelfde mechaniek als de CTA hierboven, andere omlijsting: een rustige
   kaart op warm in plaats van de donkere full-bleed band. Die band is het
   luidste moment van de site en werkt alleen zolang hij zeldzaam blijft; op
   een oriëntatiepagina is hij een drempel in plaats van een uitnodiging.
   De vragen zelf blijven identiek — die waren nooit het zware deel.
   De pill- en uitkomst-styling hierboven is voor een donkere achtergrond
   geschreven, dus hier staat de lichte tegenhanger.
   Achtergrond bewust surface-rose en niet surface-warm: de CTA grenst per
   pagina aan iets anders (wit artikel, witte reviews, warme "Verder lezen"),
   en rose is de enige tint die nergens tegen een gelijke buur aanligt. */
.callback-compact { background: var(--surface-rose); color: var(--ink-700); padding: 80px 0 88px; }
.callback-compact::before { content: none; }            /* geen koraalgloed */
.callback-compact .callback-in { max-width: 840px; }

.callback-kaart {
	display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: start;
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-lg); padding: 42px 44px;
	box-shadow: var(--shadow-soft);
}

.callback-compact .callback-title { font-size: clamp(24px, 2.6vw, 30px); color: var(--primary); margin-bottom: 10px; }
.callback-compact .callback-lead { font-size: 16px; color: var(--ink-700); margin: 0; }

.callback-compact .callback-form { gap: 24px; }
.callback-compact .q-label { color: var(--ink-900); font-size: 16px; margin-bottom: 12px; }
.callback-compact .radio-options label {
	background: var(--surface-warm); color: var(--ink-700);
	border-color: var(--border); padding: 11px 20px;
}
.callback-compact .radio-options label:hover { background: var(--surface-rose); border-color: var(--accent); }
.callback-compact .radio-options input[type="radio"]:checked + label {
	background: var(--primary); color: var(--white); border-color: var(--primary); font-weight: 600;
}
.callback-compact .radio-options input[type="radio"]:focus-visible + label { outline-color: var(--primary); }

.callback-compact .callback-uitkomst { margin-top: 26px; }
.callback-compact .callback-uitkomst p { color: var(--ink-700); font-size: 15.5px; }
.callback-compact .callback-uitkomst strong { color: var(--primary); }
.callback-compact .btn-boek { font-size: 16px; padding: 15px 28px; }

/* Tweede route voor wie liever meteen iemand spreekt. Onder 820px verbergt de
   header het telefoonnummer, dus daar is dit de eerste plek waar het weer
   zichtbaar wordt. */
.callback-bellen {
	margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--border);
	font-size: 14.5px; color: var(--ink-700);
}
.callback-bellen a { color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Dezelfde regel op de donkere variant (/afspraak-inplannen/): daar staat hij
   op primary-deep in plaats van op een witte kaart. */
.callback:not(.callback-compact) .callback-bellen {
	border-top-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .7);
}
.callback:not(.callback-compact) .callback-bellen a { color: var(--accent-soft); white-space: normal; }
.callback:not(.callback-compact) .callback-bellen a[href^="tel:"] { white-space: nowrap; }
.callback-bellen a:hover { color: var(--primary-dark); text-decoration: underline; }

.callback-compact .calendly-embed { margin-top: 32px; }
.callback-compact .calendly-back { color: var(--primary); }

/* De regio-hero: tekst links, contour rechts. Onder 820px onder elkaar,
   met de kaart eerst -- op een telefoon is die meteen duidelijk en kost hij
   weinig hoogte. */
.hero-regio .wrap { max-width: 1080px; }
.hero-regio-grid {
	display: grid; grid-template-columns: 1.25fr .75fr;
	gap: 48px; align-items: center;
}
@media (max-width: 820px) {
	.hero-regio-grid { grid-template-columns: 1fr; gap: 28px; }
	.hero-regio-grid > .regio-contour { order: -1; }
}

/* Regio-contour als hero-beeld. Het land staat er zacht achter zodat de
   bezoeker ziet wáár de regio ligt; de eigen regio is het enige dat kleur
   krijgt. Inline SVG, dus geen extra verzoek. */
.regio-contour { margin: 0; display: flex; justify-content: center; }
.regio-contour svg { width: 100%; max-width: 300px; height: auto; display: block; }
.contour-land path {
	fill: var(--surface-rose);
	stroke: var(--white);
	stroke-width: 3;
	stroke-linejoin: round;
}
.contour-actief {
	fill: var(--primary);
	stroke: var(--white);
	stroke-width: 3;
	stroke-linejoin: round;
}
/* In de hero staat de kaart op surface-warm, en surface-rose is daar bijna
   niet van te onderscheiden. Daar krijgt het land een eigen, iets warmere
   vulling plus een lichte rand, zodat de contour van Nederland leest zonder
   de aandacht van de uitgelichte regio weg te nemen. */
.page-hero .regio-contour .contour-land path {
	fill: var(--accent-soft);
	stroke: var(--surface-warm);
	stroke-width: 2.5;
}

@media (max-width: 640px) {
	.regio-contour svg { max-width: 210px; }
}

/* Haak voor de voorlopige reviewset; zonder API-sleutel staat deze klasse op
   de sectie. Bewust geen zichtbaar verschil: het is een merkteken voor ons. */
.reviews-voorlopig { }

/* Partnerlogo's. Ze komen uit tien verschillende huisstijlen: liggend, staand,
   met en zonder witruimte eromheen. Een vaste hoogte met object-fit: contain
   geeft ze een gelijke optische maat zonder ze te vervormen, en houdt de
   pagina rustig ondanks die verschillen. */
.article-body .prose .partner-logo {
	margin: 34px 0 10px; text-align: left;
}
.article-body .prose .partner-logo img {
	height: 52px; width: auto; max-width: 200px;
	object-fit: contain; object-position: left center;
}
/* De kop hoort direct onder het logo te staan, niet met de normale kopmarge. */
.article-body .prose .partner-logo + h2 { margin-top: 6px; }

/* Bronnenblok onderaan een artikel. Bewust rustig: het is verantwoording,
   geen call to action. De regel over wetswijziging staat erbij omdat de
   termijnen in deze artikelen kunnen veranderen. */
.article-body .prose .se-bronnen {
	margin: 44px 0 0; padding: 22px 26px;
	background: var(--surface-warm); border-radius: var(--radius-md);
	border-left: 3px solid var(--accent-soft);
}
.article-body .prose .se-bronnen-kop {
	font-family: var(--font-head); font-size: 17px; font-weight: 600;
	color: var(--ink-900); margin: 0 0 6px;
}
.article-body .prose .se-bronnen-lead {
	font-size: 13.5px; color: var(--ink-500); margin: 0 0 12px; max-width: 62ch;
}
.article-body .prose .se-bronnen ul { margin: 0; padding-left: 18px; }
.article-body .prose .se-bronnen li { font-size: 14px; margin-bottom: 5px; color: var(--ink-700); }
.article-body .prose .se-bronnen a { color: var(--primary); font-weight: 500; }

/* De verantwoordingsregel boven het artikel. Rustig gehouden: het is context,
   geen kop. De controleregel staat er alleen als er een mediator gekoppeld is
   -- zie inc/auteur.php. */
.article-body .prose .auteur-regel {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
	margin: 0 0 30px; padding-bottom: 18px;
	border-bottom: 1px solid var(--border);
	font-size: 14px; color: var(--ink-500);
}
.article-body .prose .auteur-label {
	font-size: 12px; font-weight: 600; letter-spacing: .07em;
	text-transform: uppercase; color: var(--ink-500);
}
.article-body .prose .auteur-naam { font-weight: 600; color: var(--ink-900); }
.article-body .prose .auteur-check { color: var(--primary); }
.article-body .prose .auteur-check a { color: inherit; font-weight: 600; }

/* ---------- Artikel/informatie pagina's ---------- */
.page-hero { background: var(--surface-warm); padding: 72px 0 56px; }
.page-hero .wrap { max-width: 740px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero .se-page-title {
	font-family: var(--font-head); font-weight: 600;
	font-size: clamp(30px, 4vw, 44px); line-height: 1.15;
	color: var(--primary); letter-spacing: -0.01em; margin: 0 0 20px;
}
.page-hero .hero-intro {
	font-size: 18px; color: var(--ink-700); line-height: 1.7;
	max-width: 56ch; margin: 0 0 28px;
}
.page-hero .hero-cta { margin-bottom: 40px; }
.page-hero .page-hero-image {
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-card); aspect-ratio: 21/9; margin: 0;
}
.page-hero .page-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Informatie-hero: compacter/minder aanwezig dan de Ik-ga-scheiden-hero (geen intro/CTA),
   maar met een groter, zwaarder wegend titel-lettertype om dat te compenseren. */
.page-hero-info { padding: 56px 0 40px; }
.page-hero-info .se-page-title { font-size: clamp(34px, 4.5vw, 50px); margin-bottom: 0; }
.page-hero-info .page-hero-image { margin-top: 32px; }

.article-body { padding: 64px 0 88px; background: var(--white); }
/* Pagina zonder bodytekst (bv. /over-ons/): de sectie zou anders 152px lege
   witte band opleveren. Niet met :empty te doen — de prose-div bevat witruimte,
   en dan telt hij niet als leeg. Valt op oude browsers zonder :has() terug op
   precies die lege band, dus alleen cosmetisch. */
.article-body:not(:has(.prose > *)) { display: none; }
.article-body .prose { max-width: 740px; margin: 0 auto; padding: 0 32px; }
.article-body h2 {
	font-family: var(--font-head); font-weight: 600;
	font-size: clamp(22px, 2.6vw, 29px); line-height: 1.25;
	color: var(--primary); margin: 48px 0 18px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-family: var(--font-head); font-weight: 600; font-size: 19px; color: var(--ink-900); margin: 36px 0 14px; }
.article-body p { font-size: 16.5px; color: var(--ink-700); line-height: 1.8; margin: 0 0 20px; }
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 20px; color: var(--ink-700); font-size: 16.5px; line-height: 1.8; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--primary); font-weight: 600; }
.article-body blockquote { border-left: 3px solid var(--accent); padding-left: 20px; font-style: italic; color: var(--ink-700); margin: 28px 0; }
.article-body img { border-radius: var(--radius-md); }
.article-body figure { margin: 32px 0; }

/* ---------- Gerelateerde onderwerpen ---------- */
.related { padding: 96px 0 110px; background: var(--surface-warm); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card {
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: 30px 28px;
	display: flex; flex-direction: column; gap: 12px;
	text-decoration: none; transition: all .25s ease;
}
.related-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: transparent; }
.related-card .tag { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.related-card h3 { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: var(--primary); flex: 1; }
.related-card .link { font-weight: 600; font-size: 14.5px; color: var(--ink-700); }

/* ---------- Regio-kaart: klikbare kaart van Nederland ----------
   Links de tekst met de tien grootste werkgebieden, rechts de kaart. De
   volledige lijst staat in een eigen sectie eronder (#alle-regios), zodat de
   kaart hier de ruimte krijgt in plaats van te concurreren met 37 regels tekst.
   Bewust één binnenkomstmoment (de kaart verschijnt als geheel) in plaats van
   37 losse animaties. */
.regio-kaart { padding: 96px 0 104px; background: var(--surface-warm); }
.regio-kaart-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 64px; align-items: center; }

.regio-kaart-tekst .section-title { margin-bottom: 18px; }
.regio-kaart-intro { font-size: 17px; color: var(--ink-700); margin-bottom: 30px; max-width: 40ch; }

.regio-top { list-style: none; margin: 0 0 28px; padding: 0; }
.regio-top-item {
	display: block; padding: 10px 0;
	border-top: 1px solid var(--border);
	font-size: 15.5px; font-weight: 500; color: var(--ink-700);
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease, padding-left .18s ease;
}
.regio-top li:last-child .regio-top-item { border-bottom: 1px solid var(--border); }
a.regio-top-item:hover,
a.regio-top-item.is-aangewezen { color: var(--primary); border-color: var(--primary); padding-left: 6px; }
.regio-top-item.is-uit { color: var(--ink-500); }

.regio-alle-knop { font-size: 15px; }

/* Homepagevariant: daar staat de volledige lijst niet op de pagina zelf, dus
   verlaat de knop de pagina. Een pijl naar rechts die meebeweegt in plaats van
   de ankersprong omlaag. */
.regio-kaart-home .regio-alle-knop svg { transition: transform .2s ease; }
.regio-kaart-home .regio-alle-knop:hover svg { transform: translateX(3px); }

/* ----- De kaart zelf ----- */
.regio-kaart-figuur { position: relative; }
.nl-kaart {
	width: 100%; max-width: 620px; height: auto; display: block;
	margin-inline: auto; overflow: visible;
	opacity: 0; transform: scale(.985);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.nl-kaart.is-in { opacity: 1; transform: none; }

/* Terracotta vlak met scheidingslijnen in de achtergrondkleur: de kaart is
   het beeldmerk van deze sectie en moet opvallen, niet wegvallen. */
.regio-vorm {
	fill: var(--primary);
	stroke: var(--surface-warm);
	stroke-width: 1.2;
	stroke-linejoin: round;
	transition: fill .18s ease;
}
.regio-link { cursor: pointer; outline: none; }
.regio-link:hover .regio-vorm,
.regio-link:focus-visible .regio-vorm { fill: var(--accent); }
.regio-link:focus-visible .regio-vorm { stroke: var(--primary-deep); stroke-width: 2.4; }

/* Regio's zonder eigen pagina: wel aanwijsbaar, niet aanklikbaar. */
.regio-link.is-uit { cursor: default; }
.regio-link.is-uit:hover .regio-vorm,
.regio-link.is-uit:focus-visible .regio-vorm { fill: var(--primary-soft); }

/* De regio van de pagina waar je nu bent. */
.regio-vorm.is-actief { fill: var(--primary-deep); }

/* Meelopende naamplaat: 37 labels op de kaart zelf zou onleesbaar zijn. */
.regio-tip {
	position: absolute; top: 0; left: 0; z-index: 5;
	pointer-events: none; white-space: nowrap;
	background: var(--primary-deep); color: var(--white);
	border-radius: var(--radius-sm); padding: 9px 14px;
	font-size: 14px; font-weight: 600; line-height: 1.3;
	box-shadow: 0 10px 24px -12px rgba(74, 37, 29, .6);
	transform: translate(-50%, -140%);
	opacity: 0; transition: opacity .15s ease;
}
.regio-tip.is-zichtbaar { opacity: 1; }
.regio-tip span { display: block; font-size: 12.5px; font-weight: 500; opacity: .72; }

/* ---------- Alle werkgebieden (#alle-regios) ---------- */
.regio-alle { padding: 96px 0 110px; background: var(--white); }
.regio-alle-head { max-width: 48ch; margin-bottom: 44px; }
.regio-alle-head p { font-size: 17px; color: var(--ink-700); }
.regio-alle-kolommen { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 44px; }
.regio-alle-kolommen li { break-inside: avoid; }
.regio-alle-item {
	display: block; padding: 14px 0;
	border-top: 1px solid var(--border);
	font-family: var(--font-head); font-size: 18px; font-weight: 600;
	color: var(--primary); text-decoration: none;
	transition: color .18s ease, border-color .18s ease, padding-left .18s ease;
}
a.regio-alle-item:hover,
a.regio-alle-item.is-aangewezen { color: var(--primary-dark); border-color: var(--primary); padding-left: 8px; }
.regio-alle-item.is-uit { color: var(--ink-500); font-weight: 500; }

/* ---------- Mediatorprofiel (single-mediator) ----------
   Portret naast de tekst in plaats van de 21:9-hero van de artikelpagina's:
   die zou van een portret een strook maken. Bewust géén vaste verhouding op
   de foto — mediators leveren straks portretten in allerlei formaten aan, en
   een uitsnede die bij de één werkt, snijdt bij de ander het hoofd af. */
.mediator-hero { padding: 64px 0 60px; }
/* .page-hero .wrap knijpt naar 740px (leesbreedte voor artikelen); een profiel
   met portret ernaast heeft meer nodig. Zelfde specificiteit, latere regel. */
.mediator-hero .wrap { max-width: 1080px; }
.mediator-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.mediator-hero .se-page-title { margin-bottom: 14px; }
.mediator-hero .hero-intro { margin-bottom: 26px; max-width: 46ch; }
.mediator-portret {
	margin: 0 0 0 auto; max-width: 440px;
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-soft); background: var(--surface-rose);
}
.mediator-portret img { width: 100%; height: auto; display: block; border-radius: 0; }

/* Labels direct onder de naam: dat is wat een bezoeker scant voordat hij gaat
   lezen, en het bevestigt dat hij op de juiste persoon is uitgekomen. */
.mediator-hero ul.mediator-expertises { margin: 14px 0 20px; }
.mediator-hero .mediator-expertises li { background: var(--white); }

/* ----- Citaat -----
   TT5 zet een kader om .wp-block-quote; dat gaf een dun koraal rechthoekje met
   de tekst er strak in geperst. Hier expliciet gereset en opgebouwd als wat het
   is: de mediator die zelf aan het woord is. Dit is het enige luide element in
   een lange leestekst, dus krijgt het de displayletter en een eigen vlak. */
.article-body blockquote,
.article-body .wp-block-quote {
	border: none; border-left: 3px solid var(--accent);
	background: var(--surface-warm);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	margin: 44px 0; padding: 34px 38px 30px;
	font-style: normal;
}
.article-body blockquote p {
	font-family: var(--font-head); font-style: italic; font-weight: 500;
	font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5;
	color: var(--primary); margin: 0;
}
.article-body blockquote cite {
	display: block; margin-top: 16px;
	font-family: var(--font-body); font-style: normal;
	font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--ink-500);
}

/* ----- Opsomming van uitkomsten -----
   Vinkjes in plaats van bolletjes: dit is de enige lijst op de pagina die zegt
   wat je concreet krijgt, en die verdient het om te worden gescand. Zelfde
   rozet als het FAQ-icoon, zodat het niet als nieuw element aanvoelt. */
.article-body ul.se-checklist { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.se-checklist li { position: relative; margin: 0; padding-left: 36px; }
.se-checklist li::before {
	content: "✓"; position: absolute; left: 0; top: 3px;
	width: 23px; height: 23px; border-radius: 50%;
	background: var(--surface-rose); color: var(--primary);
	display: grid; place-items: center;
	font-size: 12px; font-weight: 700; line-height: 1;
}

/* ----- Werkgebied -----
   Drie regio's naast elkaar in plaats van drie bullets onder elkaar: de inhoud
   is een opsomming van gelijkwaardige gebieden, geen leesvolgorde. */
.article-body ul.se-werkgebied {
	list-style: none; padding: 0; margin: 0 0 26px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.se-werkgebied li {
	margin: 0; padding: 16px 18px;
	background: var(--surface-warm); border-radius: var(--radius-sm);
	font-size: 14.5px; line-height: 1.55;
}
.se-werkgebied strong {
	display: block; margin-bottom: 5px;
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--primary);
}

/* ---------- Mediators per regio ([se_mediators]) ----------
   Een donker vlak met lichte kaarten. Dit blok staat midden in een artikel en
   is het moment waarop de bezoeker van lezen naar kiezen gaat, dus mag het
   zich als eigen sectie aandienen in plaats van als twee kadertjes in de
   tekstkolom. Zelfde device als de dienstensectie op /ik-ga-scheiden/.

   Het vlak breekt uit de leesbreedte: twee kaarten met een liggende foto
   hebben meer nodig dan de 676 px van de prose-kolom. De breedte is begrensd
   op de viewport, dus dit levert geen horizontale scroll op. */
.mediators {
	box-sizing: border-box;
	position: relative; left: 50%; transform: translateX(-50%);
	width: min(1120px, calc(100vw - 64px));
	margin: 56px 0 60px;
	padding: 48px 44px 52px;
	background: var(--primary-deep);
	border-radius: var(--radius-lg);
}
.mediators-head { max-width: 52ch; margin-bottom: 36px; }
/* LET OP — de .mediators-voorvoegsels hieronder zijn nodig, niet cosmetisch:
   dit blok staat binnen .article-body, en regels als `.article-body h2` of
   `.article-body p` (0,1,1) verslaan een losse klasse (0,1,0). Zonder het
   voorvoegsel wordt de kop terracotta op een donker vlak en krijgen de
   expertise-labels de inspringing van een gewone lijst. */
.mediators .mediators-titel {
	font-family: var(--font-head); font-weight: 600;
	font-size: clamp(26px, 3vw, 34px); line-height: 1.15;
	color: var(--white); margin: 0 0 12px;
}
.mediators .mediators-intro { font-size: 16.5px; color: rgba(255, 255, 255, .72); margin: 0; }

/* ----- Expertsoverzicht (/onze-experts/) -----
   Breder vlak en een kolom meer dan op een regiopagina: hier staan ze allemaal,
   en met tien of meer experts scheelt een vierde kolom veel scrollen. */
.mediators-overzicht { width: min(1240px, calc(100vw - 64px)); }
/* Ook hier auto-fill: filtert iemand tot één expert, dan blijft die kaart even
   breed als de andere in plaats van de hele rij te vullen. */
.mediators-overzicht .mediators-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Filterbalk: twee keuzelijsten naast elkaar, met de teller aan de andere kant
   van dezelfde regel. Native <select> — de dichte staat is te stijlen, de
   uitgeklapte lijst tekent het besturingssysteem zelf. Dat is hier de betere
   ruil: toetsenbord, screenreader en de mobiele systeemkiezer werken meteen. */
.mediators-balk {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 16px 32px; margin-bottom: 26px; padding-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.mediators-filter { display: flex; flex-wrap: wrap; gap: 16px; }
.mediators-filter[hidden] { display: none; }

.filter-veld { display: flex; flex-direction: column; gap: 7px; flex: 0 1 auto; }
.filter-label {
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--accent-soft);
}
.filter-keuze {
	appearance: none; -webkit-appearance: none;
	font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.2;
	color: var(--white); background-color: rgba(255, 255, 255, .12);
	border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 999px;
	padding: 12px 46px 12px 20px; min-width: 220px; cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 18px center; background-size: 14px;
	transition: background-color .18s ease, border-color .18s ease;
}
.filter-keuze:hover { background-color: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
.filter-keuze:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
/* Actief filter: gevuld, zoals een gekozen pil in de CTA. */
.filter-keuze.is-aan {
	background-color: var(--white); color: var(--primary-deep); border-color: var(--white); font-weight: 600;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A251D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* De optielijst zelf is OS-getekend; dit is het enige dat betrouwbaar pakt. */
.filter-keuze option { color: var(--ink-900); background: var(--white); }

/* Rechts in de balk: terugkoppeling over wat er onder de streep staat. */
.mediators-teller {
	margin: 0; text-align: right;
	font-size: 14px; color: rgba(255, 255, 255, .6);
}
.mediators-leeg {
	margin: 0; padding: 40px 0 8px; text-align: center;
	font-size: 16px; color: rgba(255, 255, 255, .75);
}
.mediators-leeg[hidden] { display: none; }
.mediators-reset {
	background: none; border: none; padding: 0; margin-left: 6px;
	font-family: var(--font-body); font-size: 16px; font-weight: 600;
	color: var(--accent-soft); cursor: pointer; text-decoration: underline;
}
.mediators-reset:hover { color: var(--white); }
.mediator-card[hidden] { display: none; }

/* auto-fit in plaats van een vast aantal kolommen: één regio heeft twee
   mediators, een andere vijf. Het grid past zich aan zonder losse regels. */
/* auto-FILL, niet auto-fit. Dat verschil is hier het hele punt: auto-fit laat
   lege kolommen inklappen, waardoor één kaart zich over de volle breedte uitrekt
   -- en 19 van de 27 regio's hebben precies één mediator. auto-fill houdt de
   lege kolommen aan, dus een kaart is altijd even breed, of het er nu één, twee
   of drie zijn.

   Een vaste bovengrens (minmax(260px, 20rem)) lost hetzelfde op, maar heeft een
   bijwerking: auto-fit en auto-fill bepalen het aantal kolommen aan de hand van
   het máximum, dus dan viel het expertsoverzicht terug van vier naar drie. */
.mediators-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px; margin: 0;
}
.mediator-card {
	box-sizing: border-box;
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--white); border-radius: var(--radius-md);
	transition: transform .25s ease, box-shadow .25s ease;
}
.mediator-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }

/* Liggende uitsnede: een vierkantje van 92 px zei niets over wie er straks
   aan tafel zit. De uitsnede zit iets boven het midden, waar gezichten staan. */
.mediator-foto {
	aspect-ratio: 3 / 2; overflow: hidden;
	background: var(--surface-rose);
	display: grid; place-items: center;
}
.mediators .mediator-foto img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; object-position: center 28%;
	border-radius: 0;                       /* .article-body img zet radius-md */
	transition: transform .45s ease;
}
.mediator-card:hover .mediator-foto img { transform: scale(1.04); }
/* Nog geen portret: initialen in dezelfde verhouding, zodat het grid gelijk
   blijft en het een keuze lijkt in plaats van een gat. */
.mediator-initialen {
	font-family: var(--font-head); font-size: 42px; font-weight: 600;
	color: var(--primary); opacity: .5; letter-spacing: .02em;
}

.mediator-body { flex: 1; display: flex; flex-direction: column; padding: 24px 26px 26px; }
.mediators .mediator-name { font-family: var(--font-head); font-size: 21px; font-weight: 600; color: var(--primary); margin: 0 0 2px; }

/* Expertises: hierop kiest een bezoeker. Labels, geen knoppen — ze linken
   nergens naar, dus mogen ze ook niet aanklikbaar lijken. */
/* ul.…/li-selectors (0,1,1) i.p.v. losse klassen: die verliezen van
   `.article-body ul` en `.article-body li`. Deze lijst staat ook in de
   profiel-hero, dus niet onder .mediators scopen. */
ul.mediator-expertises { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; }
.mediator-expertises li {
	margin: 0;
	background: var(--surface-warm); border: 1px solid var(--border);
	border-radius: 999px; padding: 6px 13px;
	font-size: 13px; font-weight: 600; color: var(--primary-dark); line-height: 1.2;
}

.mediators .mediator-bio {
	font-size: 14.5px; color: var(--ink-700); line-height: 1.65; margin: 16px 0 22px;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
	overflow: hidden;
}
/* Een echte knop, zoals "Lees hier" op de blogkaarten: dit is de enige actie
   op de kaart en moet ook als actie lezen. align-self houdt hem op zijn eigen
   breedte (in een flexkolom zou hij anders de hele kaart breed worden),
   margin-top:auto houdt hem onderaan, zodat kaarten met verschillend lange
   bio's dezelfde afsluiting hebben. */
.mediators .mediator-cta {
	align-self: flex-start; margin-top: auto;
	font-size: 14px; padding: 13px 24px;
	color: var(--white);      /* .article-body a (0,1,1) verslaat .btn-primary (0,1,0) */
}

/* ---------- Diensten (donkere 3-koloms overzichtssectie, /ik-ga-scheiden/) ---------- */
.diensten { padding: 96px 0 110px; background: var(--primary-deep); }
.diensten .eyebrow { color: var(--accent-soft); }
.diensten .section-title { color: var(--white); margin-bottom: 0; }
.diensten .section-head { margin-bottom: 48px; }
.diensten-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.diensten-card {
	background: var(--white); border: 1px solid transparent;
	border-radius: var(--radius-lg); padding: 36px 32px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.diensten-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.diensten-card .icon {
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--surface-rose); color: var(--accent);
	display: grid; place-items: center; margin-bottom: 22px;
}
.diensten-card .icon svg { width: 24px; height: 24px; }
.diensten-card h3 { font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--primary); margin-bottom: 20px; }
.diensten-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.diensten-card li a {
	display: flex; align-items: center; gap: 8px;
	color: var(--ink-700); text-decoration: none;
	font-size: 15px; font-weight: 500; line-height: 1.4;
	transition: gap .2s ease, color .2s ease;
}
.diensten-card li a::before { content: "→"; color: var(--accent); flex-shrink: 0; transition: transform .2s ease; }
.diensten-card li a:hover { color: var(--primary); gap: 12px; }

/* Variant met omschrijvingen i.p.v. linklijstjes (/ik-ben-gescheiden/): vier
   losse onderwerpen in plaats van acht categorieën met subpagina's, dus twee
   bredere kolommen en ruimte voor een alinea per kaart. Moet ná .diensten-grid
   staan: gelijke specificiteit, dus de bronvolgorde beslist. */
.diensten .section-head p { color: rgba(255, 255, 255, .72); }
.diensten-grid-tekst { grid-template-columns: repeat(2, 1fr); }
.diensten-grid-tekst .diensten-card { display: flex; flex-direction: column; }
.diensten-grid-tekst .diensten-card h3 { margin-bottom: 12px; }
.diensten-card p { font-size: 15px; color: var(--ink-700); line-height: 1.7; margin: 0 0 20px; }
/* margin-top:auto lijnt de doorlink onderaan uit, ook bij verschillend lange
   omschrijvingen. */
.kaart-link {
	display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
	font-size: 15px; font-weight: 600; color: var(--primary); text-decoration: none;
	transition: gap .2s ease, color .2s ease;
}
a.kaart-link:hover { gap: 12px; color: var(--primary-dark); }
/* Onderwerp zonder pagina: zichtbaar nog niet aanklikbaar in plaats van een
   dode link naar #. */
.kaart-link.is-uit { color: var(--ink-500); font-weight: 500; }

/* ---------- Blog overzicht ---------- */
.blog-grid-section { padding: 96px 0 110px; background: var(--white); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* De kaart zit in een <li> die het rastervak vult, maar groeide zelf niet mee:
   dan houdt de kaart de hoogte van haar eigen inhoud en zakt de knop mee. Met
   een uitgelichte afbeelding viel dat niet op, omdat de vaste beeldverhouding
   alle kaarten toch even hoog maakte. Zonder foto liepen ze 25px uiteen. */
.blog-grid > li { display: flex; }
.blog-card {
	display: flex; flex-direction: column; width: 100%;
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-md); overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.blog-card-image { margin: 0; aspect-ratio: 16/11; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-title {
	font-family: var(--font-head); font-size: 19px; font-weight: 600;
	color: var(--primary); line-height: 1.3;
	margin: 24px 24px 0; padding: 0;
	min-height: 2.6em;
}
/* De clamp staat op de link en niet op de <h2>. De kaart is een flexbox, en
   directe kinderen daarvan worden geblokkificeerd: display:-webkit-box wordt
   dan flow-root, en daarmee valt -webkit-line-clamp stil. De <a> is geen
   flex-item, dus daar blijft hij werken. */
.blog-card-title a {
	color: inherit; text-decoration: none;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
	overflow: hidden; text-overflow: ellipsis;
}
.blog-card-intro { margin: 12px 24px 0; }
.blog-card-intro p {
	font-size: 14.5px; color: var(--ink-700); line-height: 1.65; margin: 0;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
	overflow: hidden; text-overflow: ellipsis;
	min-height: 4.95em;
}
/* margin-top: auto duwt de knop naar de onderkant, zodat alle knoppen in een
   rij op dezelfde hoogte staan, ongeacht hoe lang de titel of de intro is. */
.blog-card-cta { margin: 10px 24px 18px; margin-top: auto; font-size: 14px; align-self: flex-start; }

.blog-pagination { gap: 16px; margin-top: 48px; }
.blog-pagination a, .blog-pagination .page-numbers {
	font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
	color: var(--ink-700); text-decoration: none; padding: 8px 14px;
	border-radius: 999px; transition: all .2s ease;
}
.blog-pagination a:hover { background: var(--surface-rose); color: var(--primary); }
.blog-pagination .current { background: var(--primary); color: var(--white); }

/* ---------- Reviews ---------- */
.reviews { padding: 96px 0 110px; background: var(--white); }
.reviews-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 32px; flex-wrap: wrap; margin-bottom: 48px;
}
.g-badge, .kv-badge {
	display: flex; align-items: center; gap: 16px;
	background: var(--surface-warm); border-radius: var(--radius-md);
	padding: 18px 26px;
}
.g-badge, .kv-badge .g-logo { width: 34px; height: 34px; }
.g-badge, .kv-badge .score { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--primary); line-height: 1; }
.g-badge, .kv-badge .meta { font-size: 13.5px; color: var(--ink-500); line-height: 1.4; }
.g-badge, .kv-badge .stars { font-size: 14px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review {
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: 30px 28px;
	display: flex; flex-direction: column; gap: 14px;
}
.review .stars { font-size: 15px; }
.review p { font-size: 15px; color: var(--ink-700); flex: 1; }
.review .who { display: flex; align-items: center; gap: 12px; }
.review .avatar {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--surface-rose); color: var(--primary);
	display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.review .name { font-weight: 600; font-size: 14.5px; color: var(--ink-900); line-height: 1.3; }
.review .date { font-size: 13px; color: var(--ink-500); }
.review .g-mini { width: 18px; height: 18px; margin-left: auto; }

/* De Google Maps-sectie (.kaart / .cities) is vervangen door de regio-kaart
   hierboven; die CSS staat nog in design/homepage-preview.html mocht de embed
   later ergens terugkomen (bv. op een contactpagina). */

/* ---------- Contactgegevens + kaart (/contact/) ----------
   Gegevens links, kaart rechts. De oude Google Maps-CSS van de homepage is bij
   het vervangen door de regio-kaart verwijderd; dit is de plek waar een embed
   wél op zijn plaats is: één adres, één kantoor. */
.contact-blok { padding: 72px 0 80px; background: var(--surface-warm); }
.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: stretch; }
/* Gegevens als kaart, niet als losse tekst: naast een kaartafbeelding van 3:2
   zou een kolom losse regels wegvallen. Zelfde wit-op-warm als de compacte CTA. */
.contact-lijst {
	display: flex; flex-direction: column; justify-content: center; gap: 24px;
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-lg); padding: 38px 36px;
}
.contact-item .label {
	display: block; margin-bottom: 5px;
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--accent);
}
.contact-item p { font-size: 16.5px; color: var(--ink-700); line-height: 1.6; margin: 0; }
.contact-item a { color: var(--primary); font-weight: 600; text-decoration: none; }
.contact-item a:hover { color: var(--primary-dark); text-decoration: underline; }
.contact-kaart {
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-soft); background: var(--surface-rose);
	aspect-ratio: 3 / 2; min-height: 100%;
}
.contact-kaart iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- "Mediator om de hoek" ([se_om_de_hoek], regiopagina's) ----------
   Uit het leadonderzoek: 51 van de 97 mensen die voor een concurrent kozen,
   gingen naar een mediator bij hen in de buurt. Dat is de grootste
   concurrentreden. Dit blok maakt het tegenargument expliciet in plaats van
   het impliciet te laten in een lijst met namen.

   Staat tussen de artikeltekst en het mediatorblok: eerst waaróm dichtbij bij
   ons ook kan, dan wie dat dan is. */
.om-de-hoek { padding: 8px 0 4px; }
.om-de-hoek-kaart {
	/* Het blok staat in de paginacontent en erft dus de leeskolom. De
	   max-width is alleen de begrenzing als het ooit ergens breder wordt
	   ingezet. */
	box-sizing: border-box; max-width: 754px; margin: 0 auto;
	background: var(--surface-warm); border: 1px solid var(--border);
	border-radius: var(--radius-lg); padding: 34px 38px 32px;
}
.om-de-hoek-eyebrow {
	margin: 0 0 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--accent);
}
.om-de-hoek-titel {
	margin: 0 0 14px;
	font-family: var(--font-head); font-size: 25px; font-weight: 600; line-height: 1.25;
	color: var(--ink-900); text-wrap: balance;
}
.om-de-hoek-lead { margin: 0 0 24px; font-size: 16.5px; line-height: 1.7; color: var(--ink-700); }
.om-de-hoek-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.om-de-hoek-punten li {
	position: relative; padding-left: 30px;
	font-size: 16px; line-height: 1.6; color: var(--ink-700);
}
/* Vinkje in een rozet: zelfde device als se-checklist, het partnerblok en de FAQ. */
.om-de-hoek-punten li::before {
	content: ""; position: absolute; left: 0; top: .34em;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23914A3C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.om-de-hoek-punten strong {
	display: block; margin-bottom: 2px;
	font-size: 16.5px; font-weight: 600; color: var(--ink-900);
}

/* Gesprekslocaties op het mediatorprofiel. Staat binnen .article-body, dus
   elke tekstregel heeft de .mediator-locatieblok-prefix nodig: regels als
   `.article-body h2` (0,1,1) verslaan een losse klasse (0,1,0). */
.mediator-locatieblok {
	margin: 40px 0 8px; padding: 26px 30px;
	background: var(--surface-warm); border-radius: var(--radius-md);
	border-left: 3px solid var(--accent-soft);
}
.article-body .prose .mediator-locatieblok-titel {
	margin: 0 0 14px;
	font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--ink-900);
}
.article-body .prose .mediator-locatielijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.article-body .prose .mediator-locatielijst li {
	position: relative; padding-left: 28px;
	font-size: 16px; line-height: 1.55; color: var(--ink-700);
}
.article-body .prose .mediator-locatielijst li::before {
	content: ""; position: absolute; left: 0; top: .3em;
	width: 17px; height: 17px; border-radius: 50%;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23914A3C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Gesprekslocaties op de mediatorkaart. De regel staat bewust ónder de bio en
   bóven de knop: het is het laatste dat iemand leest voordat hij doorklikt,
   en het is precies de vraag die een lokale concurrent oproept.
   Let op de .mediators-prefix: de kaart staat binnen .article-body, waar
   regels als `.article-body p` (0,1,1) een losse klasse (0,1,0) verslaan. */
.mediators .mediator-locaties {
	display: flex; align-items: flex-start; gap: 7px;
	margin: 0 0 16px; padding: 0;
	font-size: 13.5px; line-height: 1.45; color: var(--ink-500);
}
.mediators .mediator-locaties svg { flex: none; margin-top: 2px; color: var(--accent); }

/* ---------- Partnerblok ([se_partner], landingspagina's) ----------
   Staat direct onder de hero, vóór de bodytekst. De bezoeker komt hier vanuit
   het intranet van zijn personeelsvereniging of via zijn hypotheekadviseur;
   zijn eerste vraag is of hij goed zit en wat de regeling hem oplevert, niet
   wat mediation is. Daarom logo en voordelen boven de uitleg.

   Eén kaart op een warm vlak, zoals de compacte CTA: dit is een mededeling,
   geen call to action -- de knop staat verderop. */
.partner-blok { padding: 8px 0 4px; }
.partner-blok-kaart {
	/* De TEKST in de kaart moet op dezelfde lijn staan als de tekst erboven en
	   eronder, niet de rand van de kaart. De leeskolom is 676px breed, dus:
	   676 + 2x38 padding + 2x1 rand = 754. Wijzigt de padding, dan moet dit
	   getal mee, anders springt de kaart uit de lijn. */
	box-sizing: border-box; max-width: 754px; margin: 0 auto;
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
	padding: 34px 38px 32px;
}
/* Logo links, zin rechts. Onder 640px stapelt dit (zie Responsive). */
.partner-blok-kop {
	display: grid; grid-template-columns: 148px 1fr; gap: 28px; align-items: center;
}
/* Eigen vlakje achter het logo: de tien partnerlogo's komen uit tien
   huisstijlen, waarvan een deel een witte rand nodig heeft om niet in de kaart
   op te gaan. */
.partner-blok-logohouder {
	display: flex; align-items: center; justify-content: center;
	min-height: 72px; padding: 10px 12px;
	background: var(--surface-warm); border-radius: var(--radius-sm);
}
.partner-blok-logo { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; }
.partner-blok-eyebrow {
	margin: 0 0 6px;
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--accent);
}
.partner-blok-regel { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-700); }
/* Scheidingslijn tussen de introductie en de afspraken: het tweede deel is
   concreter en mag als een eigen mededeling lezen. */
.partner-blok-titel {
	margin: 26px 0 14px; padding-top: 24px; border-top: 1px solid var(--border);
	font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--ink-900);
}
.partner-blok-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.partner-blok-lijst li {
	position: relative; padding-left: 30px;
	font-size: 16.5px; line-height: 1.6; color: var(--ink-700);
}
/* Vinkje in een rozet, hetzelfde device als se-checklist en het FAQ-icoon. */
.partner-blok-lijst li::before {
	content: ""; position: absolute; left: 0; top: .42em;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--surface-rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23914A3C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- Waarom / Daarom Scheidingsexpert ---------- */
.waarom { padding: 96px 0 110px; }
.section-head { max-width: 640px; margin-bottom: 56px; }
h2.section-title {
	font-family: var(--font-head); font-weight: 600;
	font-size: clamp(32px, 3.6vw, 44px); line-height: 1.15; color: var(--primary);
	margin-bottom: 18px;
}
.section-head p { font-size: 17.5px; color: var(--ink-700); }
.waarom-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 24px; align-items: stretch; }
.feature {
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: 34px 28px;
	display: flex; flex-direction: column; gap: 16px;
	transition: all .25s ease;
}
.feature:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: transparent; }
.feature .icon {
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--surface-rose); color: var(--accent);
	display: grid; place-items: center;
}
.feature .icon svg { width: 24px; height: 24px; }
.feature h3 { font-family: var(--font-head); font-size: 21px; font-weight: 600; color: var(--primary); }
.feature p { font-size: 15px; color: var(--ink-700); flex: 1; }
.feature a { color: var(--accent); font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.feature a:hover { gap: 10px; }
.waarom-photo { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--surface-rose); }
.waarom-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- FAQ ---------- */
.faq { padding: 96px 0 110px; background: var(--surface-warm); }
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-items: start; }
.faq-item {
	background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: 4px 24px;
}
.faq-item summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 18px 0; cursor: pointer; list-style: none;
	font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: var(--primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon {
	flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
	background: var(--surface-rose); color: var(--accent);
	display: grid; place-items: center; font-size: 16px; font-weight: 600; line-height: 1;
	transition: transform .2s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { font-size: 14px; color: var(--ink-700); padding: 0 0 22px; margin: 0; }

/* ---------- Footer ---------- */
footer.se-footer { background: var(--primary-deep); color: rgba(255,255,255,.8); }
.footer-logo {
	display: inline-block; background: var(--white); border-radius: var(--radius-sm);
	padding: 10px 16px; margin-bottom: 20px;
}
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px; padding-block: 72px 56px;
}
/* Tekst die alleen voor screenreaders bedoeld is. `.screen-reader-text` hoort
   erbij omdat WordPress-blokken die klasse zelf gebruiken: het read-more-blok
   zet er ": <titel>" in voor context. Een blokthema krijgt die regel niet van
   core mee, dus zonder deze definitie staat die titel gewoon zichtbaar in de
   knop. Geldt ook voor de paginering en de reactieblokken. */
.se-verborgen,
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Uitzondering: bij toetsenbordfocus moet zulke tekst wél zichtbaar worden. */
.screen-reader-text:focus {
	position: static; width: auto; height: auto; margin: 0;
	clip: auto; white-space: normal;
}
.footer-grid .footer-links { list-style: none; margin: 0; padding: 0; }
.footer-grid h2 { font-family: var(--font-head); color: var(--white); font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.footer-grid p, .footer-grid a { font-size: 14.5px; color: rgba(255,255,255,.72); text-decoration: none; line-height: 1.9; }
.footer-grid a:hover { color: var(--white); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.14);
	padding-block: 22px; font-size: 13.5px; color: rgba(255,255,255,.55);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,.55); text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.callback-grid { grid-template-columns: 1fr; gap: 48px; }
	.waarom-grid { grid-template-columns: 1fr 1fr; }
	.waarom-photo { grid-column: span 2; max-height: 340px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.reviews-grid { grid-template-columns: 1fr 1fr; }
	.related-grid { grid-template-columns: 1fr 1fr; }
	.regio-kaart-grid { grid-template-columns: 1fr; gap: 44px; }
	.regio-alle-kolommen { columns: 2; }
	.mediators { padding: 40px 32px 44px; }
	.diensten-grid { grid-template-columns: 1fr 1fr; }
	.blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
	nav.menu { display: none; }
	.nav-phone { display: none; }
	.hero-grid { grid-template-columns: 1fr; padding-block: 56px 48px; gap: 40px; }
	.hero-badge { left: 16px; }
	.waarom-grid, .reviews-grid { grid-template-columns: 1fr; }
	.waarom-photo { grid-column: auto; }
	.callback { padding: 88px 0 80px; }
	.callback-compact { padding: 64px 0 72px; }
	.callback-kaart { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px 28px; }
	.callback-head { margin-bottom: 44px; }
	.callback-traject { padding: 30px 26px 28px; }
	.radio-options label { flex: 1 1 auto; justify-content: center; text-align: center; }
	.related-grid { grid-template-columns: 1fr; }
	.faq-list { grid-template-columns: 1fr; }
	.diensten-grid { grid-template-columns: 1fr; }
	.blog-grid { grid-template-columns: 1fr; }
	.regio-alle-kolommen { columns: 1; }
	.contact-grid { grid-template-columns: 1fr; gap: 36px; }
	.contact-lijst { padding: 28px 24px; }
	.contact-kaart { aspect-ratio: 4 / 3; min-height: 0; }
	.mediator-hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.article-body ul.se-werkgebied { grid-template-columns: 1fr; gap: 10px; }
	.mediator-portret { margin-inline: auto; max-width: 100%; }
	.mediators { padding: 30px 22px 34px; margin: 40px 0 44px; border-radius: var(--radius-md); }
	.mediators-balk { gap: 16px; margin-bottom: 22px; padding-bottom: 20px; }
	.mediators-filter { gap: 14px; width: 100%; }
	.filter-veld { flex: 1 1 100%; }
	.filter-keuze { min-width: 0; width: 100%; }
	.mediators-teller { text-align: left; }
	.mediators-head { margin-bottom: 26px; }
}

@media (max-width: 640px) {
	.partner-blok-kaart { padding: 28px 24px 26px; }
	.partner-blok-kop { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
	.partner-blok-logohouder { min-height: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.nl-kaart { opacity: 1; transform: none; transition: none; }
	.mediator-card:hover { transform: none; }
	.mediator-card:hover .mediator-foto img { transform: none; }
}


/* De categoriekop op de hub is een link geworden; hij moet er niet als een
   losse link uitzien maar als de kop die hij al was. */
.diensten-card h3 a { color: inherit; text-decoration: none; }
.diensten-card h3 a:hover { color: var(--accent); }

/* Onderwerp waarvan de artikelen nog geschreven worden: wel zichtbaar, geen
   link die nergens heen gaat. */
.diensten-binnenkort { color: var(--ink-500); font-style: italic; list-style: none; }

/* ---------- Interne doorlinking ---------- */
/* Vier kaarten in het "Verder lezen"-blok: de categorie, twee zusterartikelen
   en één artikel uit een andere categorie. Onder 1100px terug naar twee, want
   vier kaarten van 19px-koppen naast elkaar wordt daaronder onleesbaar. */
.related-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .related-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .related-grid-4 { grid-template-columns: 1fr; } }

/* Op een categoriepagina is de artikellijst de hoofdmoot, niet een naschrift. */
.related-categorie { background: var(--white); padding-top: 72px; }
.related-categorie .section-head p { max-width: 60ch; margin: 10px auto 0; color: var(--ink-700); }
.related-categorie .related-card .tag { color: var(--primary); }

/* ---------- Gravity Forms in de CTA ----------
   Gravity Forms' eigen stylesheet staat uit (Formulieren -> Instellingen ->
   "Output CSS" op nee). Alles hieronder tekent de velden met onze tokens.

   De CTA komt in twee omgevingen voor: de volledige variant op een donkere
   band en de compacte op een witte kaart. Daarom eerst een setje variabelen
   per omgeving, en daarna één set regels die daarop leunt -- dat scheelt de
   hele boel twee keer schrijven en houdt de twee varianten in de pas. */
.callback-gf {
	--gf-tekst:     var(--white);
	--gf-label:     var(--white);
	--gf-veld-bg:   rgba(255, 255, 255, .12);
	--gf-veld-rand: rgba(255, 255, 255, .22);
	--gf-veld-tekst:var(--white);
	--gf-plaats:    rgba(255, 255, 255, .55);
	--gf-keuze-bg:  rgba(255, 255, 255, .12);
	--gf-keuze-aan: var(--white);
	--gf-keuze-aan-tekst: var(--primary-deep);
	--gf-fout:      var(--accent-soft);
	--gf-focus:     var(--accent-soft);
}
.callback-gf.callback-compact {
	--gf-tekst:     var(--ink-700);
	--gf-label:     var(--ink-900);
	--gf-veld-bg:   var(--white);
	--gf-veld-rand: var(--border);
	--gf-veld-tekst:var(--ink-900);
	--gf-plaats:    var(--ink-500);
	--gf-keuze-bg:  var(--surface-warm);
	--gf-keuze-aan: var(--primary);
	--gf-keuze-aan-tekst: var(--white);
	--gf-fout:      #B3402F;
	--gf-focus:     var(--primary);
}

.callback-gf .gform_wrapper { color: var(--gf-tekst); }
.callback-gf .gform_wrapper form { display: flex; flex-direction: column; gap: 26px; }
.callback-gf .gform_fields { display: flex; flex-direction: column; gap: 26px; list-style: none; margin: 0; padding: 0; }
.callback-gf .gfield { margin: 0; }

/* Gravity Forms wikkelt radio- en checkboxvelden in een <fieldset> met een
   <legend>. Zonder GF's eigen stylesheet komt daar de browserstandaard door:
   een kader om de vraag met de tekst er half doorheen. Deze reset hoort dus
   bij het uitzetten van die stylesheet, niet los daarvan. min-width:0 staat er
   omdat een fieldset anders niet wil krimpen binnen een flex- of grid-ouder. */
.callback-gf fieldset.gfield,
.callback-gf .gfield fieldset {
	border: 0; margin: 0; padding: 0; min-width: 0;
}
.callback-gf legend.gfield_label { padding: 0; float: none; width: auto; }

/* Labels: zelfde gewicht en maat als de legenda's van het eigen formulier. */
.callback-gf .gfield_label {
	display: block; font-family: var(--font-body); font-weight: 600;
	font-size: 16.5px; color: var(--gf-label); margin: 0 0 14px;
}
.callback-gf.callback-compact .gfield_label { font-size: 16px; margin-bottom: 12px; }
.callback-gf .gfield_required { color: var(--accent); margin-left: 4px; font-weight: 500; }
.callback-gf .gfield_description { font-size: 14px; color: var(--gf-plaats); margin-top: 8px; }

/* Radio's en checkboxes als pillen -- hetzelfde device als .radio-options. */
.callback-gf .gfield_radio, .callback-gf .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 10px; }
.callback-gf .gchoice { margin: 0; }
.callback-gf .gchoice input[type="radio"], .callback-gf .gchoice input[type="checkbox"] {
	position: absolute; opacity: 0; width: 0; height: 0;
}
.callback-gf .gchoice label {
	display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px;
	background: var(--gf-keuze-bg); color: var(--gf-tekst); font-size: 15px; font-weight: 500;
	cursor: pointer; border: 1.5px solid var(--gf-veld-rand); transition: all .2s ease;
	max-width: 100%;
}
.callback-gf .gchoice label:hover { border-color: var(--gf-keuze-aan); }
.callback-gf .gchoice input:checked + label {
	background: var(--gf-keuze-aan); color: var(--gf-keuze-aan-tekst);
	border-color: var(--gf-keuze-aan); font-weight: 600;
}
.callback-gf .gchoice input:focus-visible + label { outline: 2px solid var(--gf-focus); outline-offset: 2px; }

/* Tekst-, telefoon-, e-mail- en tekstvelden. */
.callback-gf .ginput_container input[type="text"],
.callback-gf .ginput_container input[type="email"],
.callback-gf .ginput_container input[type="tel"],
.callback-gf .ginput_container input[type="number"],
.callback-gf .ginput_container textarea,
.callback-gf .ginput_container select {
	width: 100%; box-sizing: border-box;
	font-family: var(--font-body); font-size: 15.5px; line-height: 1.4;
	padding: 14px 18px; border-radius: var(--radius-sm);
	background: var(--gf-veld-bg); color: var(--gf-veld-tekst);
	border: 1.5px solid var(--gf-veld-rand); transition: border-color .2s ease, background .2s ease;
}
.callback-gf .ginput_container ::placeholder { color: var(--gf-plaats); opacity: 1; }
.callback-gf .ginput_container input:focus,
.callback-gf .ginput_container textarea:focus,
.callback-gf .ginput_container select:focus {
	outline: 2px solid var(--gf-focus); outline-offset: 1px; border-color: transparent;
}
.callback-gf .ginput_container textarea { min-height: 130px; resize: vertical; }

/* Samengestelde velden (naam) staan naast elkaar zodra er ruimte is. */
.callback-gf .ginput_complex { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.callback-gf .ginput_complex > span { display: block; }
.callback-gf .ginput_complex label {
	display: block; font-size: 13.5px; font-weight: 500; color: var(--gf-plaats); margin: 6px 0 0;
}

/* Verzendknop: dezelfde koraal knop als 'afspraak maken'. */
.callback-gf .gform_footer { margin: 0; padding: 0; display: flex; }
.callback-gf .gform_button {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-body); font-weight: 700; font-size: 17px;
	padding: 18px 34px; border-radius: 999px; border: none; cursor: pointer;
	background: var(--accent); color: var(--primary-deep);
	transition: all .25s ease; line-height: 1;
}
.callback-gf .gform_button:hover { background: #EE8C81; transform: translateY(-2px); }
.callback-gf .gform_button:focus-visible { outline: 2px solid var(--gf-focus); outline-offset: 3px; }
.callback-gf.callback-compact .gform_button { font-size: 16px; padding: 15px 28px; background: var(--primary); color: var(--white); }
.callback-gf.callback-compact .gform_button:hover { background: var(--primary-dark); }

/* Foutmeldingen. Gravity Forms hangt ze onder het veld en zet een klasse op
   de wrapper; beide krijgen hier hun eigen kleur zodat een fout ook op de
   donkere band leesbaar is. */
.callback-gf .gfield_error .gfield_label { color: var(--gf-fout); }
.callback-gf .gfield_error input, .callback-gf .gfield_error textarea, .callback-gf .gfield_error select {
	border-color: var(--gf-fout);
}
.callback-gf .gfield_validation_message, .callback-gf .validation_message {
	margin-top: 8px; font-size: 14.5px; color: var(--gf-fout); background: none; border: none; padding: 0;
}
.callback-gf .gform_validation_errors {
	margin: 0 0 22px; padding: 14px 18px; border-radius: var(--radius-sm);
	background: var(--gf-veld-bg); border: 1.5px solid var(--gf-fout); color: var(--gf-tekst);
}
.callback-gf .gform_validation_errors h2 { font-family: var(--font-body); font-size: 15.5px; margin: 0; color: inherit; }

/* Poort: zolang niet elke keuzevraag beantwoord is, blijft de rest van het
   formulier weg -- inclusief de verzendknop. Gravity Forms zou de agenda al na
   één antwoord tonen, omdat een 'isnot'-regel ook klopt als het veld nog leeg
   is. Zodra theme.js de klasse se-klaar zet, bepaalt Gravity Forms weer zelf
   welk veld verschijnt.

   Zonder JavaScript staat alles gewoon open: dan valt deze regel weg en werkt
   het formulier als een normaal formulier. */
/* Twee poorten.
   1. se-klaar  -- pas als élke keuzevraag beantwoord is verschijnt het
      uitkomstblok. Gravity Forms zou de agenda al na één antwoord tonen, want
      een 'isnot'-regel klopt ook als het veld nog leeg is.
   2. se-open   -- de agenda en de contactvelden komen pas ná de knop in het
      uitkomstblok, met een scroll ernaartoe. Dat is dezelfde volgorde als het
      eigen formulier had: eerst uitleg, dan pas de handeling.
   Beide klassen worden door theme.js gezet; zonder JavaScript staat het
   formulier gewoon open. */
.callback-gf form.se-poort:not(.se-open) .gfield:not(.gfield--type-radio),
.callback-gf form.se-poort:not(.se-open) .gform_footer {
	/* !important is hier nodig, geen luiheid: Gravity Forms zet de
	   zichtbaarheid van een voorwaardelijk veld met een inline style, en die
	   wint van een klasse. Zodra de poort open is staat hier geen regel meer,
	   zodat GF weer zelf bepaalt wélk veld zichtbaar is. */
	display: none !important;
}

/* Zodra Calendly meldt dat er geboekt is, dient theme.js het formulier zelf in.
   De knop hoeft de bezoeker dan niet meer te zien. */
.callback-gf form.se-geboekt .gform_footer { display: none; }

/* Verzendknop uit tot de route compleet is: een gekozen moment in de agenda,
   of ingevulde contactgegevens. De hint zegt wat er nog mist, zodat een
   uitgeschakelde knop geen raadsel is. */
.callback-gf .gform_button[disabled] {
	opacity: .45; cursor: not-allowed; filter: grayscale(.3);
}
.callback-gf .gform_button[disabled]:hover { background: var(--primary); }
.callback-gf .se-verzend-hint {
	margin: 0 0 12px; font-size: 14.5px; color: var(--gf-plaats);
}
.callback-gf.callback-compact .se-verzend-hint { color: var(--ink-500); }

/* De indeling: vragen en uitkomst links, tijdlijn rechts, en de agenda of de
   contactvelden over de volle breedte daaronder. Het raster ligt op
   .gform_fields omdat dat de directe ouder van alle velden is -- de tijdlijn
   wordt daar door theme.js in gezet. */
.callback-gf .callback-grid { display: block; }
.callback-gf .se-velden {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 30px 44px;
	align-items: start;
}
.callback-gf .se-velden > .gfield--type-radio,
.callback-gf .se-velden > .callback-uitkomst { grid-column: 1; }
.callback-gf .se-velden > .callback-traject { grid-column: 2; grid-row: 1 / span 3; }
.callback-gf .se-velden > .gfield:not(.gfield--type-radio) { grid-column: 1 / -1; }

/* Invulvelden over de volle 1200px zijn onprettig lang voor een naam of een
   telefoonnummer. De agenda mag die breedte wel gebruiken -- die heeft hem
   nodig. */
.callback-gf .se-velden > .gfield--type-name,
.callback-gf .se-velden > .gfield--type-phone,
.callback-gf .se-velden > .gfield--type-email { max-width: 640px; }
.callback-gf .gform_footer { margin-top: 26px; }

@media (max-width: 900px) {
	.callback-gf .se-velden { grid-template-columns: 1fr; }
	.callback-gf .se-velden > .callback-traject { grid-column: 1; grid-row: auto; }
}

/* De compacte variant heeft geen tijdlijn; daar blijft het één kolom. */
/* align-items moet hier terug naar stretch. De rasterregel hierboven zet
   'start', en in een kolom-flexbox betekent dat: krimp naar de eigen breedte.
   Een iframe zonder expliciete breedte is dan 300px, waardoor de agenda in een
   kaart van 750px als een smalle strook links uitkwam. */
.callback-gf.callback-compact .se-velden {
	display: flex; flex-direction: column; gap: 26px; align-items: stretch;
}

/* De compacte kaart staat in twee kolommen: tekst en telefoonnummer links, de
   twee vragen rechts. Dat werkt zolang er alleen vragen staan, maar zodra de
   agenda opengaat zit een Calendly-widget van 1050px hoog in een kolom van
   ongeveer 400px geperst. Vanaf dat moment gaat de kaart naar één kolom: de
   tekst bovenaan, daaronder het formulier over de volle breedte, zodat de
   agenda vanzelf midden onder de vragen uitkomt.

   Dit speelt alleen op desktop -- onder 640px is de kaart al één kolom. */
.callback-gf.callback-compact .callback-kaart:has(form.se-open) { display: block; }
.callback-gf.callback-compact .callback-kaart:has(form.se-open) .callback-kaart-tekst {
	margin-bottom: 30px;
}

/* De agenda in het HTML-blok. */
.callback-gf .se-calendly { margin-top: 6px; }
.callback-gf .se-calendly iframe {
	width: 100%; min-height: 1050px; border: 0; border-radius: var(--radius-md);
	background: var(--white); display: block;
}

/* De honeypot moet verborgen blijven, ook zonder GF's eigen stylesheet. */
.callback-gf .gform_validation_container,
.callback-gf .gfield--type-honeypot { position: absolute !important; left: -9999px; }

/* Bevestiging na verzenden. */
.callback-gf .gform_confirmation_message {
	font-size: 17px; line-height: 1.6; color: var(--gf-tekst);
	border-left: 2px solid var(--accent); padding: 4px 0 4px 18px;
}

/* Het HTML-blok in het formulier draagt de Calendly-link. */
.callback-gf .gfield--type-html { color: var(--gf-tekst); font-size: 15.5px; line-height: 1.65; }
.callback-gf .gfield--type-html a { color: var(--accent); }
.callback-gf.callback-compact .gfield--type-html a { color: var(--primary); }

@media (max-width: 640px) {
	.callback-gf .gchoice label { width: 100%; }
	.callback-gf .gform_footer, .callback-gf .gform_button { width: 100%; justify-content: center; }
}