/**
 * Easycount Lead – component styling.
 * Design tokens komen uit theme.json (--wp--preset--*).
 */

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

/*
 * WordPress laadt zijn eigen reset (met border-box) alleen in de editor, niet
 * op de site zelf. Zonder deze regel telt padding en rand bij de breedte op en
 * lopen formuliervelden met width:100% buiten hun kaart.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--ec-radius-sm: 10px;
	--ec-radius: 16px;
	--ec-radius-lg: 24px;
	--ec-ring: 0 0 0 3px rgba(19, 81, 216, 0.22);
	--ec-t: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	/* Linkkleur op donkere vlakken: 12,8:1 contrast op ink (#0E1726). */
	--ec-link-on-dark: #c7dbff;
}

html {
	scroll-behavior: smooth;
	/*
	 * Ruimte voor de meelopende header (topbalk 37px + logobalk 73px = 110px)
	 * plus wat lucht. Zonder deze marge verdwijnt de bovenkant van een
	 * ankerdoel achter de header.
	 */
	scroll-padding-top: calc(var(--ec-header-h, 130px) + 16px);
}

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

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img { height: auto; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text,
.ec-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Header
 * ------------------------------------------------------------- */

.wp-block-template-part > .ec-header,
.ec-header {
	transition: box-shadow var(--ec-t), background-color var(--ec-t);
}

header.wp-block-template-part.is-scrolled,
.ec-header.is-scrolled {
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 8px 28px rgba(14, 23, 38, 0.07);
}

/*
 * Het matglas-effect zit op een laagje áchter de header, niet op de header
 * zelf.
 *
 * backdrop-filter maakt van een element een houvast voor alles wat erbinnen
 * `position: fixed` is. Het mobiele menu is zo'n element. Stond het filter op
 * de header, dan werd het opengeklapte menu zodra je gescrold had niet
 * schermvullend maar precies zo groot als de headerbalk: een strook van 127px
 * waarin de menu-items niet pasten. Bovenaan de pagina ging het wel goed, want
 * dan staat het filter nog uit. Op een los laagje heeft het filter hetzelfde
 * uiterlijk zonder die bijwerking.
 */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
	background-color: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(180%) blur(12px);
	transition: opacity var(--ec-t);
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled::before {
	opacity: 1;
}

/*
 * De header is zelf een volle band. De twee rijen erin (de donkere topbalk en
 * de logobalk) hebben allebei al hun eigen binnenmarge via has-global-padding.
 * Liet je de header die marge óók toepassen, dan telde hij dubbel: de donkere
 * balk en de onderrand liepen dan niet door tot de schermranden.
 */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part,
.ec-header {
	padding-left: 0;
	padding-right: 0;
}

/*
 * Meelopende header.
 *
 * WordPress zet wel `position: sticky` op de header, maar geen drempelwaarde.
 * Zonder `top` doet sticky niets: de header schoof gewoon mee omhoog. Voor
 * ingelogde beheerders viel dat niet op, omdat de adminbalk wél een top-waarde
 * meegeeft; uitgelogde bezoekers hadden dus helemaal geen meelopende header.
 *
 * De variabele houdt rekening met de adminbalk: 0 voor bezoekers, 32px als de
 * balk in beeld staat.
 *
 * De z-index gaat naar 100. De secties eronder maken eigen stapelcontexten
 * (de hero gebruikt isolation: isolate), en met de oude waarde 10 kon een
 * uitklapmenu daar net achter vallen.
 */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .ec-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 100;
}

/*
 * Het plakken hoort op het <header>-element te zitten, niet op de band
 * erbinnen.
 *
 * WordPress zette `position: sticky` op de binnenste groep. Zo'n element kan
 * alleen binnen zijn eigen ouder meelopen, en die ouder is precies zo hoog als
 * de header zelf: nul ruimte om in mee te schuiven. De header bleef dus
 * gewoon bovenaan de pagina staan en verdween uit beeld zodra je scrolde.
 * Het buitenste <header> hangt wél direct onder .wp-site-blocks en kan de hele
 * pagina meelopen.
 */
.wp-site-blocks > header.wp-block-template-part > .ec-header {
	position: relative;
	top: auto;
	z-index: auto;
}

.ec-topbar {
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
}

.ec-topbar a { text-decoration: none; }
.ec-topbar a:hover { text-decoration: underline; }

/* Navigatie – submenu's */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ec-radius);
	box-shadow: 0 18px 44px rgba(14, 23, 38, 0.13);
	padding: 8px;
	min-width: 264px;
	overflow: hidden;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 10px;
	padding: 10px 12px;
	transition: background-color var(--ec-t), color var(--ec-t);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 6vw, 3rem);
}

/*
 * Mobiele header.
 * Zonder deze regels breekt de bovenste balk in vier regels: logo, hamburger
 * en daaronder de twee knoppen onder elkaar. Dat kost bijna een half scherm.
 * We houden logo en hamburger op één regel en verbergen de twee knoppen: die
 * staan al in de vaste actiebalk onderaan en in de hero zelf.
 */
@media (max-width: 900px) {
	.ec-header > .wp-block-group:not(.ec-topbar) > .wp-block-group.alignwide {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
	}

	.ec-header .wp-block-buttons {
		display: none;
	}

	.ec-header .wp-block-navigation {
		margin-left: auto;
	}

	.ec-header .wp-block-site-logo img {
		width: 150px;
	}
}

/*
 * Topbalk: altijd één regel hoog.
 *
 * De balk zit in de sticky header, dus elke regel die hij erbij pakt gaat van
 * het zichtbare scherm af. Claim + telefoon + e-mail vragen samen ongeveer
 * 740px; onder die breedte brak de balk in twee regels en werd de header 171px
 * hoog op een tablet. We laten daarom stap voor stap onderdelen vallen in
 * plaats van te laten teruglopen.
 */
@media (max-width: 1023px) {
	.ec-topbar > .wp-block-group > p {
		display: none;
	}

	.ec-topbar > .wp-block-group {
		justify-content: center;
	}
}

/* Onder ~380px past e-mail er niet meer bij; het telefoonnummer wel. */
@media (max-width: 399px) {
	.ec-topbar > .wp-block-group > .wp-block-group > p:last-child {
		display: none;
	}
}

/* Vangnet: wat er ook in de balk staat, hij blijft één regel. */
.ec-topbar > .wp-block-group {
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Knoppen
 * ------------------------------------------------------------- */

.wp-block-button__link {
	transition: transform var(--ec-t), box-shadow var(--ec-t), background-color var(--ec-t);
	box-shadow: 0 1px 2px rgba(14, 23, 38, 0.06);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	line-height: 1.2;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(19, 81, 216, 0.26);
}

.wp-block-button__link:active { transform: translateY(0); }

.is-style-ec-arrow .wp-block-button__link::after,
.wp-block-button.is-style-ec-arrow > .wp-block-button__link::after {
	content: "→";
	transition: transform var(--ec-t);
	font-weight: 400;
}

.is-style-ec-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-ec-arrow > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/*
 * Transparante knop. Bewust géén eigen `color`: de tekstkleur die in de editor
 * is gekozen (has-*-color) moet leidend blijven. Zette deze regel zelf een
 * kleur, dan won die van de keuze van de redacteur en werd de knop op donkere
 * secties donker-op-donker.
 */
.wp-block-button.is-style-ec-ghost > .wp-block-button__link {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Alleen als er géén tekstkleur is gekozen vallen we terug op ink. */
.wp-block-button.is-style-ec-ghost > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--ink);
}

/*
 * Bij hover vullen we licht op met de eigen tekstkleur en laten we die kleur
 * staan. De vorige versie zette de achtergrond op currentColor én de tekst op
 * wit, wat op een donkere sectie wit-op-wit opleverde.
 */
.wp-block-button.is-style-ec-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-ec-ghost > .wp-block-button__link:focus-visible {
	background: rgba(19, 81, 216, 0.1);
	background: color-mix(in srgb, currentColor 12%, transparent);
	box-shadow: inset 0 0 0 1.5px currentColor;
	filter: none;
}

.wp-block-button.is-style-ec-accent > .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-ec-accent > .wp-block-button__link:hover {
	background: #ffd54a;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	box-shadow: none;
}

/* ---------------------------------------------------------------
 * Blokstijlen: groepen en kaarten
 * ------------------------------------------------------------- */

/*
 * Kaarten hebben de hoogte van hun inhoud.
 *
 * Eerder stond hier height: 100%. Bedoeld voor kaarten die naast elkaar staan
 * en even hoog moeten zijn, maar het gold voor élke kaart. Stond er boven of
 * onder de kaart nog iets anders in dezelfde kolom - zoals op de contactpagina,
 * waar de kaart met telefoonnummer en e-mailadressen tussen de introtekst en
 * een opsomming staat - dan rekte de kaart uit tot de volledige kolomhoogte.
 * Die hoogte wordt bepaald door de langste kolom (het formulier), dus de kaart
 * werd 852px terwijl zijn inhoud 243px is. Alles eronder werd de sectie uit
 * geduwd en kwam over de secties daarna heen te liggen.
 *
 * Even hoge kaarten naast elkaar blijven werken: in een raster rekken items
 * standaard al mee, en staat een kaart als enige in een kolom, dan mag hij die
 * kolom nog steeds vullen (de regel hieronder).
 */
.wp-block-group.is-style-ec-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 2px 4px rgba(14, 23, 38, 0.04), 0 14px 36px rgba(14, 23, 38, 0.07);
	height: auto;
}

.wp-block-column > .wp-block-group.is-style-ec-card:only-child,
.wp-block-column > .wp-block-group.is-style-ec-card-outline:only-child,
.wp-block-column > .wp-block-group.is-style-ec-card-hover:only-child,
.wp-block-column > .wp-block-group.is-style-ec-panel:only-child,
.wp-block-column > .wp-block-group.is-style-ec-highlight:only-child,
.wp-block-column > .wp-block-quote.is-style-ec-testimonial:only-child {
	height: 100%;
}

.wp-block-group.is-style-ec-card-outline {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: auto;
}

.wp-block-group.is-style-ec-card-hover {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: auto;
	transition: transform var(--ec-t), box-shadow var(--ec-t), border-color var(--ec-t);
}

.wp-block-group.is-style-ec-card-hover:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 10px 20px rgba(19, 81, 216, 0.08), 0 26px 60px rgba(19, 81, 216, 0.14);
}

.wp-block-group.is-style-ec-panel {
	background: var(--wp--preset--color--tint);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	height: auto;
}

.wp-block-group.is-style-ec-highlight {
	background: var(--wp--preset--color--base);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 2px solid var(--wp--preset--color--primary);
	box-shadow: 0 14px 40px rgba(19, 81, 216, 0.14);
	position: relative;
	height: auto;
}

.wp-block-columns.is-style-ec-cards > .wp-block-column {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.35rem, 2.5vw, 2rem);
}

/* ---------------------------------------------------------------
 * Blokstijlen: koppen en tekst
 * ------------------------------------------------------------- */

.is-style-ec-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem !important;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.6rem;
}

.is-style-ec-underline {
	position: relative;
	padding-bottom: 0.5em;
}

.is-style-ec-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
}

.has-text-align-center.is-style-ec-underline::after {
	left: 50%;
	transform: translateX(-50%);
}

p.is-style-ec-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}

p.is-style-ec-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

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

ul.is-style-ec-checklist,
ul.is-style-ec-checklist-light,
ul.is-style-ec-crosslist,
ul.is-style-ec-arrowlist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	display: grid;
	gap: 0.7rem;
}

ul.is-style-ec-checklist li,
ul.is-style-ec-checklist-light li,
ul.is-style-ec-crosslist li,
ul.is-style-ec-arrowlist li {
	position: relative;
	padding-left: 2.15rem;
	line-height: 1.55;
}

/*
 * Kruisjeslijst: het spiegelbeeld van de checklist. Zelfde maatvoering, maar
 * een kruisje in een zacht rood rondje, zodat in de vergelijking direct te
 * zien is wat je mist zonder betrouwbare telling.
 */
ul.is-style-ec-crosslist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background-color: #fdeceb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D92D20' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
	background-size: 0.75rem;
	background-repeat: no-repeat;
	background-position: center;
}

ul.is-style-ec-checklist li::before,
ul.is-style-ec-checklist-light li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231351D8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 0.85rem;
	background-repeat: no-repeat;
	background-position: center;
}

ul.is-style-ec-checklist-light li::before {
	background-color: rgba(255, 255, 255, 0.16);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

ul.is-style-ec-arrowlist li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ---------------------------------------------------------------
 * Afbeeldingen
 * ------------------------------------------------------------- */

.wp-block-image.is-style-ec-shadow img {
	border-radius: var(--ec-radius-lg);
	box-shadow: 0 12px 28px rgba(14, 23, 38, 0.10), 0 30px 70px rgba(14, 23, 38, 0.12);
}

.wp-block-image.is-style-ec-screenshot {
	position: relative;
	padding-top: 34px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ec-radius);
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(14, 23, 38, 0.14);
}

.wp-block-image.is-style-ec-screenshot::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 34px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-image.is-style-ec-screenshot::after {
	content: "";
	position: absolute;
	top: 12px;
	left: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}

.wp-block-image.is-style-ec-screenshot img {
	display: block;
	width: 100%;
	border-radius: 0;
}

.wp-block-image.is-style-ec-logo img {
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter var(--ec-t), opacity var(--ec-t);
	max-height: 44px;
	width: auto;
	object-fit: contain;
}

.wp-block-image.is-style-ec-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------------------------------------------------------------
 * Logo wall
 * ------------------------------------------------------------- */

.ec-logowall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.75rem, 5vw, 3.75rem);
}

.ec-logowall .wp-block-image { margin: 0; }

/*
 * Klantlogo's schalen op bréédte, niet op hoogte.
 *
 * De aangeleverde bestanden zijn alle zes 250x140 en op breedte genormaliseerd:
 * het beeldmerk raakt links en rechts de rand, en de hoogte verschilt sterk.
 * Colliers vult 99% van de hoogte, het Rijksmuseum maar 21%. Begrensden we op
 * hoogte, dan werd het hele blikveld teruggeschaald tot de hoogste past en
 * bleef van de Rijksmuseum-letters nog geen 9px over: onleesbaar.
 * Op breedte begrenzen geeft ze allemaal hetzelfde optische gewicht.
 *
 * De selector noemt ook is-style-ec-logo, omdat die regel verderop specifieker
 * is en anders zijn max-height zou blijven opleggen.
 */
.ec-logowall img,
.ec-logowall .wp-block-image.is-style-ec-logo img {
	width: clamp(92px, 10vw, 128px);
	height: auto;
	max-height: none;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter var(--ec-t), opacity var(--ec-t);
}

.ec-logowall:hover img { opacity: 0.75; }
.ec-logowall img:hover { filter: grayscale(0); opacity: 1; }

/* ---------------------------------------------------------------
 * Statistieken / tellers
 * ------------------------------------------------------------- */

.ec-stat__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--primary);
	display: block;
}

.has-ink-background-color .ec-stat__number,
.has-brand-diagonal-gradient-background .ec-stat__number,
.has-primary-background-color .ec-stat__number {
	color: var(--wp--preset--color--accent);
}

.ec-stat__label {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 0.45rem;
	display: block;
	line-height: 1.4;
}

.has-ink-background-color .ec-stat__label,
.has-brand-diagonal-gradient-background .ec-stat__label,
.has-primary-background-color .ec-stat__label {
	color: rgba(255, 255, 255, 0.78);
}

/* ---------------------------------------------------------------
 * FAQ (core/details)
 * ------------------------------------------------------------- */

.wp-block-details.is-style-ec-faq {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ec-radius);
	padding: 0;
	background: var(--wp--preset--color--base);
	transition: border-color var(--ec-t), box-shadow var(--ec-t);
}

.wp-block-details.is-style-ec-faq[open] {
	border-color: rgba(19, 81, 216, 0.35);
	box-shadow: 0 8px 26px rgba(19, 81, 216, 0.08);
}

.wp-block-details.is-style-ec-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 3.25rem 1.15rem 1.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
	position: relative;
}

.wp-block-details.is-style-ec-faq summary::-webkit-details-marker { display: none; }

.wp-block-details.is-style-ec-faq summary::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -8px;
	border-right: 2.5px solid var(--wp--preset--color--primary);
	border-bottom: 2.5px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform var(--ec-t);
}

.wp-block-details.is-style-ec-faq[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -3px;
}

.wp-block-details.is-style-ec-faq > *:not(summary) {
	padding: 0 1.35rem;
	color: var(--wp--preset--color--ink-soft);
}

.wp-block-details.is-style-ec-faq > *:last-child { padding-bottom: 1.35rem; }

/* ---------------------------------------------------------------
 * Testimonial
 * ------------------------------------------------------------- */

.wp-block-quote.is-style-ec-testimonial {
	border: 0;
	background: var(--wp--preset--color--base);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	box-shadow: 0 2px 4px rgba(14, 23, 38, 0.04), 0 16px 40px rgba(14, 23, 38, 0.08);
	position: relative;
	height: auto;
	margin: 0;
}

.wp-block-quote.is-style-ec-testimonial::before {
	content: "\201C";
	font-family: Georgia, serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--wp--preset--color--tint);
	position: absolute;
	top: 0.35rem;
	right: 1.25rem;
}

.wp-block-quote.is-style-ec-testimonial p {
	font-size: 1.0625rem;
	line-height: 1.65;
	position: relative;
	z-index: 1;
	font-style: normal;
}

.wp-block-quote.is-style-ec-testimonial cite {
	display: block;
	margin-top: 1.15rem;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}

.ec-rating {
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.12em;
	font-size: 1.05rem;
	margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------------
 * Stappenplan
 * ------------------------------------------------------------- */

.ec-step {
	position: relative;
	padding-top: 0.35rem;
}

.ec-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 1rem;
	box-shadow: 0 6px 18px rgba(19, 81, 216, 0.3);
}

/* ---------------------------------------------------------------
 * Iconen in feature-kaarten
 * ------------------------------------------------------------- */

.ec-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.15rem;
	font-size: 1.4rem;
	line-height: 1;
}

.ec-icon svg { width: 1.5rem; height: 1.5rem; }

/* Compacte variant voor dichte rasters, zoals de sectorenkaarten. */
.ec-icon--sm {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 11px;
	margin-bottom: 0.8rem;
}

.ec-icon--sm svg { width: 1.2rem; height: 1.2rem; }

/* Logo op donkere vlakken (footer). */
.ec-logo-light {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Sectortegels: compact, icoon boven de naam. */
.wp-block-group.is-style-ec-panel.ec-market {
	padding: 1.15rem 1.15rem 1.25rem;
}

.ec-market .ec-icon--sm { margin-bottom: 0.65rem; }

.ec-market h3 {
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------- */

.ec-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ec-badge--light {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.ec-badge--live::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.6);
	animation: ec-pulse 2s infinite;
}

@keyframes ec-pulse {
	70% { box-shadow: 0 0 0 8px rgba(14, 159, 110, 0); }
	100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0); }
}

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

.ec-leadform {
	--ec-form-bg: var(--wp--preset--color--base);
	--ec-form-fg: var(--wp--preset--color--ink);
	--ec-form-border: var(--wp--preset--color--line);
	--ec-form-input-bg: #fff;
}

.ec-leadform--card {
	background: var(--ec-form-bg);
	border-radius: var(--ec-radius-lg);
	padding: clamp(1.35rem, 2.4vw, 2rem);
	box-shadow: 0 4px 8px rgba(14, 23, 38, 0.04), 0 24px 64px rgba(14, 23, 38, 0.12);
}

.ec-leadform--dark {
	--ec-form-fg: #fff;
	--ec-form-border: rgba(255, 255, 255, 0.22);
	--ec-form-input-bg: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.ec-leadform--dark .ec-leadform__title,
.ec-leadform--dark label { color: #fff; }

.ec-leadform__title {
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	margin: 0 0 0.45rem;
	letter-spacing: -0.028em;
}

.ec-leadform__intro {
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ec-leadform--dark .ec-leadform__intro { color: rgba(255, 255, 255, 0.8); }

/*
 * De kolommen volgen de breedte van het formulier zelf, niet die van het
 * scherm. Met een media query op schermbreedte ging het mis zodra het
 * formulier in een smalle kolom stond: op een tablet bleef het dan twee
 * kolommen van ~100px breed, waardoor labels en velden op elkaar liepen.
 */
.ec-leadform__grid {
	display: grid;
	/*
	 * Elke kolom is minstens de helft van het formulier breed, dus maximaal
	 * twee kolommen. Wordt het formulier smaller dan 2 x 11rem, dan klapt het
	 * vanzelf terug naar één kolom.
	 */
	grid-template-columns: repeat(auto-fit, minmax(max(11rem, (100% - 0.9rem) / 2), 1fr));
	gap: 0.8rem 0.9rem;
}

.ec-leadform.is-compact .ec-leadform__grid { grid-template-columns: 1fr; }

/*
 * Op tablets blijft een 56/44-kolom te smal voor een formulier: dan houdt de
 * formulierkolom nog geen 250px over. Onder 1000px zetten we de hero en de
 * CTA-band daarom onder elkaar, zodat het formulier de volle breedte krijgt.
 */
@media (max-width: 1000px) {
	.ec-glow > .wp-block-columns,
	.has-ink-deep-gradient-background > .wp-block-columns {
		flex-wrap: wrap;
	}

	.ec-glow > .wp-block-columns > .wp-block-column,
	.has-ink-deep-gradient-background > .wp-block-columns > .wp-block-column {
		flex-basis: 100%;
		flex-grow: 1;
	}
}

.ec-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.ec-field--full { grid-column: 1 / -1; }

/*
 * Loopt een label over twee regels (bijvoorbeeld "Waar kunnen we mee helpen?"
 * in een smalle kolom), dan zou het invoerveld eronder lager komen te staan dan
 * dat van de buurkolom. Het raster rekt elke cel even hoog; met margin-top:auto
 * schuift het invoerveld altijd naar de onderkant, zodat de velden op één lijn
 * blijven staan.
 */
.ec-field > input,
.ec-field > select,
.ec-field > textarea {
	margin-top: auto;
}

.ec-field label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ec-form-fg);
}

.ec-req { color: #d92d20; }

.ec-field input[type="text"],
.ec-field input[type="email"],
.ec-field input[type="tel"],
.ec-field select,
.ec-field textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	font: inherit;
	font-size: 1rem;
	color: var(--ec-form-fg);
	background: var(--ec-form-input-bg);
	border: 1.5px solid var(--ec-form-border);
	border-radius: var(--ec-radius-sm);
	transition: border-color var(--ec-t), box-shadow var(--ec-t);
	-webkit-appearance: none;
	appearance: none;
}

.ec-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1rem;
	padding-right: 2.6rem;
}

.ec-field textarea { resize: vertical; min-height: 88px; }

.ec-field input:focus,
.ec-field select:focus,
.ec-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--ec-ring);
}

.ec-field.has-error input,
.ec-field.has-error select,
.ec-field.has-error textarea {
	border-color: #d92d20;
}

.ec-field__error {
	font-size: 0.8125rem;
	color: #d92d20;
	font-weight: 600;
}

.ec-field--consent {
	margin-top: 0.85rem;
	flex-direction: row;
}

.ec-field--consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink-soft);
	cursor: pointer;
}

.ec-leadform--dark .ec-field--consent label { color: rgba(255, 255, 255, 0.78); }

.ec-field--consent input[type="checkbox"] {
	margin-top: 0.15rem;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--wp--preset--color--primary);
	flex: none;
}

/* Verwijzing naar de privacyverklaring, als alternatief voor het vinkje. */
.ec-leadform__privacy {
	margin: 0.9rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

.ec-leadform--dark .ec-leadform__privacy {
	color: rgba(255, 255, 255, 0.72);
}

.ec-leadform__submit {
	margin-top: 1rem;
	width: 100%;
	justify-content: center;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 999px;
	padding: 0.9rem 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	transition: background-color var(--ec-t), transform var(--ec-t), box-shadow var(--ec-t);
}

.ec-leadform__submit:hover:not(:disabled) {
	background: var(--wp--preset--color--primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(19, 81, 216, 0.32);
}

.ec-leadform__submit:disabled { opacity: 0.7; cursor: progress; }

.ec-spinner { display: none; }

.is-sending .ec-spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ec-spin 0.7s linear infinite;
}

@keyframes ec-spin { to { transform: rotate(360deg); } }

/*
 * De drie geruststellingen horen op één regel te passen. Met de oude teksten
 * was 528px nodig terwijl de kaart er 454px bood. De teksten zijn ingekort en
 * de regel is strakker gezet: kleiner lettertype, minder tussenruimte en een
 * compacter vinkje. Past het onverhoopt toch niet, dan valt de regel netjes
 * terug op twee regels in plaats van dat er iets uitsteekt.
 */
.ec-leadform__reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.75rem;
	margin: 0.9rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-soft);
}

.ec-leadform__reassurance .ec-tick {
	white-space: nowrap;
}

/* Op telefoons is de kaart smaller; daar mag het net iets compacter. */
@media (max-width: 460px) {
	.ec-leadform__reassurance {
		gap: 0.3rem 0.55rem;
		font-size: 0.6875rem;
	}

	.ec-leadform__reassurance .ec-tick::before {
		width: 0.8125rem;
		height: 0.8125rem;
	}
}

.ec-leadform--dark .ec-leadform__reassurance { color: rgba(255, 255, 255, 0.72); }

.ec-tick {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.ec-tick::before {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9F6E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-leadform__alt {
	margin: 0.65rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-soft);
}

.ec-leadform--dark .ec-leadform__alt,
.ec-leadform--dark .ec-leadform__alt a { color: #fff; }

.ec-leadform__status {
	margin-top: 1rem;
	font-size: 0.9375rem;
	border-radius: var(--ec-radius-sm);
}

.ec-leadform__status.is-error {
	color: #b42318;
	background: #fef3f2;
	border: 1px solid #fecdca;
	padding: 0.85rem 1rem;
}

.ec-leadform__status.is-success {
	color: #05603a;
	background: #ecfdf3;
	border: 1px solid #abefc6;
	padding: 1.15rem 1.25rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Mobiele actiebalk
 * ------------------------------------------------------------- */

.ec-mobile-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--wp--preset--color--line);
	transform: translateY(110%);
	transition: transform var(--ec-t);
}

.ec-mobile-cta.is-visible { transform: translateY(0); }

.ec-mobile-cta a {
	flex: 1;
	text-align: center;
	padding: 0.85rem 0.75rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}

.ec-mobile-cta .ec-mobile-cta__call {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}

.ec-mobile-cta .ec-mobile-cta__quote {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/*
 * De vaste actiebalk dekt nu ook tablets af. Vanaf 620px verdwijnen de
 * knoppen uit de header, dus daaronder moet deze balk de call-to-action
 * overnemen.
 */
@media (max-width: 900px) {
	.ec-mobile-cta { display: flex; }

	/*
	 * Ruimte onderaan de pagina reserveren zolang de balk in beeld kan komen.
	 * De balk staat vast onder in het scherm en dekt daarmee de laatste ~75px
	 * af. Onderaan de footer stonden precies daar de links naar de
	 * privacyverklaring, de algemene voorwaarden en het cookiebeleid: die waren
	 * op een telefoon niet aan te tikken, hoe ver je ook doorscrolde.
	 */
	.wp-site-blocks {
		padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
	}
	body { padding-bottom: 0; }
}

/* ---------------------------------------------------------------
 * Reveal-animatie
 * ------------------------------------------------------------- */

/*
 * Belangrijk: de begintoestand (onzichtbaar) wordt alleen toegepast wanneer
 * JavaScript daadwerkelijk draait (html.ec-js). Zonder die voorwaarde blijft
 * de inhoud permanent onzichtbaar als JS geblokkeerd wordt of faalt.
 */
.ec-reveal {
	opacity: 1;
	transform: none;
}

.ec-js .ec-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-js .ec-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Bezoekers met "verminder beweging" krijgen de inhoud direct te zien. */
@media (prefers-reduced-motion: reduce) {
	.ec-js .ec-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------
 * Diversen
 * ------------------------------------------------------------- */

/*
 * Hero-dichtheid.
 * De patronen zetten hun ruimte als inline stijl in de pagina-inhoud
 * (padding-top:var(--wp--preset--spacing--60) enzovoort). Die inline waarden
 * kun je niet met een gewone CSS-regel overschrijven, maar wél door de
 * variabelen zelf binnen de hero opnieuw te definiëren: de inline var()
 * pakt dan deze waarden op. Zo blijft de knop ook op een 13-inch laptop
 * boven de vouw, zonder !important en zonder bestaande pagina's te bewerken.
 */
@media (min-width: 782px) {
	.ec-glow {
		--wp--preset--spacing--60: 1.75rem;
		--wp--preset--spacing--40: 1.25rem;
		--wp--preset--spacing--30: 0.875rem;
	}
}

.ec-glow {
	position: relative;
	isolation: isolate;
	/*
	 * De gloed hieronder steekt bewust 20% buiten de sectie uit, zodat het
	 * verloop niet abrupt bij de rand stopt. Zonder deze clip telt die
	 * overhang mee voor de paginabreedte en kun je de hele site zijwaarts
	 * scrollen: op een telefoon van 375px was dat 75px extra.
	 */
	overflow: clip;
}

.ec-glow::before {
	content: "";
	position: absolute;
	inset: -10% -20%;
	z-index: -1;
	background: radial-gradient(60% 60% at 70% 30%, rgba(79, 141, 255, 0.28), transparent 70%);
	pointer-events: none;
}

/*
 * Links op donkere vlakken.
 * De globale linkkleur (primary, #1351D8) haalt op een donkere achtergrond
 * maar 2,7:1 contrast en zakt daarmee door de WCAG AA-eis van 4,5:1.
 * Op elk donker vlak gebruiken we daarom een lichte linkkleur (12,8:1).
 *
 * Knoppen (.wp-element-button) blijven hier bewust buiten: die hebben hun
 * eigen achtergrond en tekstkleur, die de redacteur in de editor instelt.
 */
.ec-footer a:not(.wp-element-button),
.ec-topbar a:not(.wp-element-button),
.has-ink-background-color a:not(.wp-element-button),
.has-ink-deep-gradient-background a:not(.wp-element-button),
.ec-leadform--dark a:not(.wp-element-button) {
	color: var(--ec-link-local, var(--ec-link-on-dark));
}

.ec-footer a:not(.wp-element-button):hover,
.ec-footer a:not(.wp-element-button):focus-visible,
.ec-topbar a:not(.wp-element-button):hover,
.ec-topbar a:not(.wp-element-button):focus-visible,
.has-ink-background-color a:not(.wp-element-button):hover,
.has-ink-background-color a:not(.wp-element-button):focus-visible,
.has-ink-deep-gradient-background a:not(.wp-element-button):hover,
.has-ink-deep-gradient-background a:not(.wp-element-button):focus-visible,
.ec-leadform--dark a:not(.wp-element-button):hover,
.ec-leadform--dark a:not(.wp-element-button):focus-visible {
	color: var(--ec-link-hover-local, #ffffff);
}

/*
 * Lichte vlakken die bínnen een donkere sectie staan (zoals de witte
 * formulierkaart op de donkere CTA-band) zetten de linkkleur terug naar de
 * normale merkkleur. Zonder dit zouden die links lichtblauw op wit worden.
 */
.has-ink-background-color .ec-leadform--card,
.has-ink-deep-gradient-background .ec-leadform--card,
.has-ink-background-color .is-style-ec-card,
.has-ink-deep-gradient-background .is-style-ec-card,
.has-ink-background-color .is-style-ec-card-outline,
.has-ink-deep-gradient-background .is-style-ec-card-outline,
.has-ink-background-color .has-base-background-color,
.has-ink-deep-gradient-background .has-base-background-color,
.has-ink-background-color .has-surface-background-color,
.has-ink-deep-gradient-background .has-surface-background-color,
.has-ink-background-color .has-tint-background-color,
.has-ink-deep-gradient-background .has-tint-background-color {
	--ec-link-local: var(--wp--preset--color--primary);
	--ec-link-hover-local: var(--wp--preset--color--primary-hover);
}

.ec-footer a { text-decoration: none; }
.ec-footer a:hover { text-decoration: underline; }

.wp-block-separator.is-style-ec-spacer-line {
	border: 0;
	height: 1px;
	background: var(--wp--preset--color--line);
	opacity: 1;
	max-width: none;
}

.ec-eyebrow-light { color: var(--wp--preset--color--accent) !important; }

.ec-nowrap { white-space: nowrap; }

/* Cover-blokken: iets ruimer op mobiel */
@media (max-width: 600px) {
	.wp-block-cover.is-style-ec-hero {
		padding-top: 3.5rem !important;
		padding-bottom: 3.5rem !important;
	}
}

/* Tabel */
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	background: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------------
 * Fijnafstemming: hoogtes, ritme en kleur
 * ------------------------------------------------------------- */

/*
 * 1. Navigatiebalk iets lager, en optisch in balans.
 * Het logobestand heeft bovenin 33px transparante ruimte en onderin 9px.
 * Bij gelijke padding oogt de balk daardoor topzwaar. We compenseren met
 * minder ruimte boven dan onder. !important is nodig omdat de padding als
 * inline stijl in het opgeslagen headerblok staat.
 */
.ec-header > .wp-block-group:not(.ec-topbar) {
	padding-top: 0.5rem !important;
	padding-bottom: 0.875rem !important;
}

/*
 * 2. Aankondigingsbalk: rustiger en compacter.
 * De USP-regel wordt iets gedempt, telefoon en e-mail krijgen juist nadruk,
 * met een fijne scheiding ertussen.
 */
.ec-topbar {
	font-size: 0.8125rem;
	letter-spacing: 0.005em;
}

.ec-topbar > .wp-block-group {
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
}

.ec-topbar p {
	margin: 0;
	line-height: 1.5;
}

/* De USP-regel: gedempt wit, zodat contactgegevens de aandacht krijgen. */
.ec-topbar > .wp-block-group > p:first-child {
	color: rgba(255, 255, 255, 0.72);
}

/* Telefoon en e-mail: helder, met een subtiele scheidingslijn ertussen. */
.ec-topbar a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.ec-topbar a:hover {
	color: var(--ec-link-on-dark);
	text-decoration: none;
}

.ec-topbar .wp-block-group .wp-block-group {
	gap: 0;
}

.ec-topbar .wp-block-group .wp-block-group > p + p {
	padding-left: 1.15rem;
	margin-left: 1.15rem;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/*
 * 3. Geen witte strook meer tussen de laatste sectie en de footer.
 * WordPress zet standaard een marge tussen de blokken op het hoogste niveau
 * (header, main, footer). Die marge laat hier de achtergrond doorschijnen.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/*
 * 4 en 5. Compactere secties.
 * De ruimte staat als inline stijl in de pagina-inhoud, dus we herdefiniëren
 * de variabele binnen de sectie; de inline var() pakt die waarde dan op.
 */
.has-ink-deep-gradient-background {
	--wp--preset--spacing--60: 2.75rem;
}

/* Het toelichtingsveld in de afsluitende CTA mag korter. */
.has-ink-deep-gradient-background .ec-leadform textarea {
	min-height: 64px;
}

/*
 * FAQ-items dichter op elkaar.
 * De hoogte zat niet in de padding van het details-blok (die is 0) maar in de
 * samenvatting: 18,4px boven en onder, plus 16px marge tussen de items.
 * Acht vragen leverden zo ruim 200px extra op.
 */
.wp-block-details.is-style-ec-faq {
	padding-top: 0;
	padding-bottom: 0;
}

.wp-block-details.is-style-ec-faq + .wp-block-details.is-style-ec-faq {
	margin-block-start: 0.375rem;
}

.wp-block-details.is-style-ec-faq > summary {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	font-size: 1rem;
}

.wp-block-details.is-style-ec-faq p {
	margin-top: 0.35rem;
	padding-bottom: 0.6rem;
}


/*
 * 6. Meer kleur en diepte.
 * De secties wisselden alleen tussen wit, surface en tint, waardoor de pagina
 * vlak oogde. Zachte verlopen en een subtiele merkgloed geven ritme, zonder
 * dat de tekst minder leesbaar wordt.
 */
.has-tint-background-color {
	background-image: linear-gradient(180deg, #EDF2FE 0%, #F7F9FE 62%, #FFFFFF 100%);
}

.has-surface-background-color {
	background-image:
		radial-gradient(60rem 26rem at 82% -12%, rgba(79, 141, 255, 0.13), transparent 62%),
		linear-gradient(180deg, #FFFFFF 0%, #F4F7FC 58%, #EDF2F9 100%);
}

/* De cijferbalk krijgt het merkverloop in plaats van vlak donkerblauw. */
.wp-site-blocks .has-ink-background-color:not(.ec-footer):not(.ec-topbar) {
	background-image: linear-gradient(120deg, #0E1726 0%, #16294D 52%, #123A82 100%);
}

/* Fijne scheidingslijn tussen twee opeenvolgende witte secties. */
.has-base-background-color + .has-base-background-color {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------
 * Belknop met telefoonicoon
 * ------------------------------------------------------------- */

/*
 * De tweede call-to-action toont alleen nog het telefoonnummer; het woord
 * "Bel" is vervangen door een icoon. Het icoon is een masker in currentColor,
 * zodat het automatisch meekleurt met de knop: donker op een lichte
 * achtergrond, wit op de donkere CTA-band.
 */
.wp-block-button__link[href^="tel:"]::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * In de header niet: daar staat "Bel direct" zonder nummer en is elke pixel
 * nodig om de balk op één regel te houden.
 */
.ec-header .wp-block-button__link[href^="tel:"]::before {
	content: none;
}

/* ---------------------------------------------------------------
 * Opsomming in twee kolommen
 * ------------------------------------------------------------- */

/*
 * De lijsten met "wat het je oplevert" lopen per pagina van zes tot negen
 * punten. Onder elkaar wordt dat een sliert die het scherm uit loopt; naast
 * elkaar blijft de sectie compact en scanbaar. Het raster vult zichzelf: drie
 * kolommen op een breed scherm, twee op een tablet, één op een telefoon. De
 * leesvolgorde blijft van links naar rechts, dus ook een schermlezer loopt de
 * punten in de bedoelde volgorde af.
 */
.ec-twocol ul.is-style-ec-checklist {
	display: grid;
	/*
	 * min() erbij: zonder dat kan een kolom niet smaller worden dan 19rem en
	 * loopt de lijst op een telefoon van 320px een paar pixels buiten beeld,
	 * met een horizontale schuifbalk op de hele pagina tot gevolg.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	column-gap: clamp(1.5rem, 4vw, 3rem);
	row-gap: 0.7rem;
	align-items: start;
}

/* ---------------------------------------------------------------
 * Adminbalk – vangnet voor het site-icoon
 * ------------------------------------------------------------- */

/*
 * WordPress zet in zijn eigen adminbalk-CSS `#wpadminbar * { width: auto;
 * height: auto }` en rekent erop dat een specifiekere regel elk plaatje daarna
 * weer klein maakt. Slaat die specifiekere regel niet aan, dan verschijnt het
 * icoon op ware grootte: een favicon van 128px die over de balk en de pagina
 * heen valt. Deze grens houdt elk plaatje in de balk binnen de hoogte van de
 * balk zelf. Avatars zijn uitgezonderd, want die maakt WordPress bewust groter
 * in het uitklapmenu van je account.
 */
#wpadminbar img:not(.avatar) {
	max-width: 26px;
	max-height: 26px;
}

/*
 * Het pijltje naast een menu-item met submenu is een echte knop waar je met
 * Tab op landt, maar hij was 9x9 pixels. WCAG 2.2 vraagt minimaal 24x24 voor
 * een aanraakdoel, en met een vinger raak je 9 pixels sowieso niet. Het
 * pijltje blijft even groot; alleen het gebied eromheen groeit, en de negatieve
 * marges houden de menubalk precies even breed.
 */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	margin-block: -8px;
	margin-inline: -4px -8px;
}

/* ---------------------------------------------------------------
 * Portret bij een tekst (Over ons)
 * ------------------------------------------------------------- */

/*
 * Het portret houdt zijn eigen verhouding. De breedte en hoogte van het
 * werkelijke bestand staan in de HTML, dus de browser reserveert de juiste
 * ruimte en de pagina verspringt niet tijdens het laden. Een vaste verhouding
 * met object-fit zou het beeld bijsnijden, en bij een portret betekent dat al
 * snel een half hoofd.
 */
.wp-block-image.is-style-ec-portrait img {
	border-radius: var(--ec-radius-lg);
	box-shadow: 0 2px 4px rgba(14, 23, 38, 0.05), 0 18px 44px rgba(14, 23, 38, 0.12);
	width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------
 * Foto achter de hero op de homepage
 * ------------------------------------------------------------- */

/*
 * Alleen op de voorpagina: WordPress zet daar de class "home" op de body en
 * nergens anders. Zo hoeft er niets aan de opmaak van de pagina te veranderen
 * en is het effect met één regel weer weg te halen.
 *
 * Over de foto ligt een verloop in de tintkleur van het thema. Links, waar de
 * kop en de opsomming staan, is dat vlak bijna dekkend; naar rechts wordt het
 * doorzichtiger, zodat de foto zichtbaar blijft rondom de witte formulierkaart.
 * De donkere tekst houdt daardoor overal ruim voldoende contrast.
 */
.home .ec-glow {
	background-image:
		linear-gradient(
			105deg,
			rgba(243, 246, 253, 0.98) 0%,
			rgba(243, 246, 253, 0.96) 40%,
			rgba(243, 246, 253, 0.82) 64%,
			rgba(243, 246, 253, 0.62) 100%
		),
		url("../images/hero/passanten.jpg");
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
}

/* De radiale gloed maakt de foto troebel; op de homepage laten we hem weg. */
.home .ec-glow::before {
	content: none;
}

/*
 * Op een telefoon staat de tekst over de volle breedte, dus daar kan geen kant
 * doorzichtig blijven. Het verloop wordt gelijkmatiger en dekkender, met net
 * genoeg foto om herkenbaar te blijven.
 */
@media (max-width: 781px) {
	.home .ec-glow {
		/* Kleinere foto op een telefoon: 820px in plaats van 1200px scheelt de
		   helft aan gewicht en is op dat scherm niet te zien. */
		background-image:
			linear-gradient(
				180deg,
				rgba(243, 246, 253, 0.95) 0%,
				rgba(243, 246, 253, 0.92) 58%,
				rgba(243, 246, 253, 0.86) 100%
			),
			url("../images/hero/passanten-820.jpg");
		background-position: center 30%;
	}
}

/* Wie "verminder beweging" of een datalimiet aan heeft, krijgt geen foto. */
@media (prefers-reduced-data: reduce) {
	.home .ec-glow {
		background-image: none;
	}
}