/*
Theme Name: Elevate AI
Theme URI: https://elevate-ai.nl/
Author: Melsen & Vermunt | Elevate AI
Description: Child theme op Twenty Twenty-Five voor Melsen & Vermunt | Elevate AI. Ink en Cream per sectie, Playfair Display en Jost (zelf gehost), rechte hoeken. Laadt geen externe diensten.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elevate-ai
*/

/* ==========================================================================
   Inhoud
   0. Aliassen voor presets van het parent theme
   1. Kleurcontext: licht (standaard) en donker
   2. Basis: tekst, koppen, links, focus
   3. Opbouw: secties, ritme, uitlijning
   4. Onderdelen uit het contract
   5. Knoppen en lijnen
   6. Kop van de site (woordmerk en navigatie)
   7. Voet van de site
   8. Formulieren (.elevate-form)
   9. Beweging, hoog contrast
   ========================================================================== */


/* 0. Aliassen ---------------------------------------------------------------
   Twenty Twenty-Five verwijst in zijn theme.json naar presets die dit child
   theme vervangt (base, contrast, accent-1 t/m 6, Manrope, Fira Code). Zonder
   deze aliassen zouden die verwijzingen leeg zijn. */
:root {
	--wp--preset--color--base: var(--wp--preset--color--cream);
	--wp--preset--color--contrast: var(--wp--preset--color--ink);
	--wp--preset--color--accent-1: var(--wp--preset--color--sage);
	--wp--preset--color--accent-2: var(--wp--preset--color--line-light);
	--wp--preset--color--accent-3: var(--wp--preset--color--olive);
	--wp--preset--color--accent-4: var(--wp--preset--color--text-on-light);
	--wp--preset--color--accent-5: var(--wp--preset--color--line-light);
	--wp--preset--color--accent-6: color-mix(in srgb, currentColor 20%, transparent);
	--wp--preset--font-family--manrope: var(--wp--preset--font-family--text);
	--wp--preset--font-family--fira-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* 1. Kleurcontext -----------------------------------------------------------
   Elke context zet dezelfde set variabelen. Onderdelen gebruiken alleen de
   variabelen, zodat de dichtstbijzijnde context wint (ook een donkere
   prijskaart binnen een lichte sectie). */
:root,
.section-light {
	--elevate-bg: var(--wp--preset--color--cream);
	--elevate-text: var(--wp--preset--color--text-on-light);
	--elevate-heading: var(--wp--preset--color--ink);
	--elevate-label: var(--wp--preset--color--olive);
	--elevate-muted: var(--wp--preset--color--text-on-light);
	--elevate-line: var(--wp--preset--color--line-light);
	--elevate-link: var(--wp--preset--color--ink);
	--elevate-link-hover: var(--wp--preset--color--olive);
	--elevate-card-bg: transparent;
	--elevate-btn-bg: var(--wp--preset--color--ink);
	--elevate-btn-fg: var(--wp--preset--color--cream);
	--elevate-btn-hover-bg: var(--wp--preset--color--olive);
	--elevate-btn-hover-fg: var(--wp--preset--color--cream);
	--elevate-focus: var(--wp--preset--color--ink);
	--elevate-field-bg: color-mix(in srgb, var(--wp--preset--color--cream), #fff 55%);
	--elevate-field-fg: var(--wp--preset--color--ink);
	--elevate-field-border: var(--wp--preset--color--text-on-light);
	--elevate-placeholder: var(--wp--preset--color--olive);
	/* Foutkleur: geen huisstijltoken, gekozen op contrast (6,1 op Cream). */
	--elevate-error: #9a3b26;
}

.section-dark,
.price-card,
.site-header,
.site-footer,
.is-dark {
	--elevate-bg: var(--wp--preset--color--ink);
	--elevate-text: var(--wp--preset--color--text-on-dark);
	--elevate-heading: var(--wp--preset--color--cream);
	--elevate-label: var(--wp--preset--color--sage);
	--elevate-muted: var(--wp--preset--color--muted-on-dark);
	--elevate-line: var(--wp--preset--color--line-dark);
	--elevate-link: var(--wp--preset--color--cream);
	--elevate-link-hover: var(--wp--preset--color--sage);
	--elevate-card-bg: var(--wp--preset--color--surface);
	--elevate-btn-bg: var(--wp--preset--color--cream);
	--elevate-btn-fg: var(--wp--preset--color--ink);
	--elevate-btn-hover-bg: var(--wp--preset--color--sage);
	--elevate-btn-hover-fg: var(--wp--preset--color--ink);
	--elevate-focus: var(--wp--preset--color--cream);
	--elevate-field-bg: var(--wp--preset--color--surface);
	--elevate-field-fg: var(--wp--preset--color--cream);
	--elevate-field-border: var(--wp--preset--color--muted-on-dark);
	--elevate-placeholder: var(--wp--preset--color--muted-on-dark);
	/* Foutkleur op donker: 8,6 op Ink, 7,2 op Surface. */
	--elevate-error: #e9a48f;
}

.section-dark,
.section-light,
.site-header,
.site-footer,
.is-dark {
	background-color: var(--elevate-bg);
	color: var(--elevate-text);
}


/* 2. Basis ------------------------------------------------------------------ */
body {
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

strong,
b {
	font-weight: 600;
}

:root :is(h1, h2, h3, h4, h5, h6) {
	color: var(--elevate-heading);
	overflow-wrap: break-word;
}

:root :is(h1, h2, h3) {
	text-wrap: balance;
}

/* Kop in twee delen: het cursieve tweede deel begint op een eigen regel. */
:root :is(h1, h2) > em:last-child {
	display: block;
}

:root :is(h1, h2, h3, h4, h5, h6) em {
	font-style: italic;
}

/* Lange samenstellingen (Privéproeverij) mogen met een afbreekstreepje
   afbreken. Dat geldt op elke breedte: ook in de hero-kolom op een tablet of
   laptop kan een lang woord breder zijn dan de kolom, en dan breekt
   overflow-wrap het anders zonder streepje af. Alleen woorden vanaf tien
   letters, met minstens vier letters voor en na het streepje. Werkt alleen
   met lang="nl-NL" (sitetaal Nederlands, zie README). */
:root :is(h1, h2) {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}

:root a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--elevate-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:root a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--elevate-link-hover);
}

:root :focus-visible {
	outline: 2px solid var(--elevate-focus);
	outline-offset: 3px;
}

:root :focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--ink);
}


/* Privacypagina: een lange verklaring met veel H2's. Kleiner dan de
   sectiekop elders, maar groter dan de H3's op die pagina (x-large), zodat de
   rangorde blijft. De klasse privacy-policy zet WordPress op de pagina die
   onder Instellingen > Privacy is gekozen; functions.php zet hem ook op de
   pagina met slug "privacy", als vangnet. */
body.privacy-policy h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.15;
}


/* 3. Opbouw ----------------------------------------------------------------- */

/* Kop, inhoud en voet sluiten zonder kier op elkaar aan. */
.wp-site-blocks > :is(header, main, footer, .wp-block-template-part, .wp-block-group) {
	margin-block: 0;
}

/* Secties: volle breedte, geen ruimte ertussen, ruim binnenin. */
.section-dark,
.section-light {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

:is(.section-dark, .section-light).alignfull {
	margin-block: 0;
}

/* Twee secties van dezelfde toon achter elkaar: dunne lijn ertussen. */
.section-dark + .section-dark,
.section-light + .section-light {
	border-top: 1px solid var(--elevate-line);
}

/* Tekstkolom (760px) links uitgelijnd binnen het brede kader (1170px), zoals
   op de Plug&Pay-pagina. Brede blokken (alignwide) staan in hetzelfde kader.
   Wil je een sectie gecentreerd: voeg className "section-centered" toe. */
:is(.section-dark, .section-light):not(.section-centered).is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) {
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size, 1170px)) / 2) !important;
	margin-right: auto !important;
}

/* Ritme binnen een sectie. */
.eyebrow + :is(h1, h2, h3, h4) {
	margin-block-start: 0.75rem;
}

:is(h1, h2) + .lead {
	margin-block-start: 1.5rem;
}

:is(.numbered-3, .steps, .profiles, .facts, .faq, .price-card, .line-list, .elevate-form):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-buttons:not(:first-child) {
	margin-block-start: 2rem;
}

.wp-block-buttons + .fineprint {
	margin-block-start: 1rem;
}


/* 4. Onderdelen ------------------------------------------------------------- */

/* Eyebrow: label boven een kop. Sage op donker, Olive op licht. */
.eyebrow {
	color: var(--elevate-label);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-style: normal;
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--label, 0.24em);
	line-height: 1.5;
	text-transform: uppercase;
}

/* Lead: grotere intro. */
.lead {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.65;
}

/* Fineprint: prijsregel, voorbehoud. */
.fineprint {
	color: var(--elevate-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Hero-split: twee kolommen met een dunne lijn ertussen. Op mobiel ligt de
   lijn horizontaal tussen de kop en de intro. */
.hero-split > .wp-block-column {
	box-sizing: border-box;
	min-width: 0;
}

.hero-split > .wp-block-column + .wp-block-column {
	border-top: 1px solid var(--elevate-line);
	padding-top: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.hero-split > .wp-block-column + .wp-block-column {
		border-top: 0;
		border-left: 1px solid var(--elevate-line);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-top: 0;
		padding-left: var(--wp--preset--spacing--50);
	}
}

/* Numbered-3: drie kolommen, elk met een lijn erboven. */
.numbered-3 > .wp-block-column {
	border-top: 1px solid var(--elevate-line);
	padding-top: var(--wp--preset--spacing--40);
}

.numbered-3 :is(h3, h4) + p {
	margin-block-start: 0.75rem;
}

/* Line-list: geen bullets, items gescheiden door dunne lijnen. */
:root .line-list {
	list-style: none;
	padding-left: 0;
	padding-inline-start: 0;
}

.line-list > li {
	border-top: 1px solid var(--elevate-line);
	margin: 0;
	padding-block: 0.875rem;
}

.line-list > li:last-child {
	border-bottom: 1px solid var(--elevate-line);
}

/* Steps: genummerde stappen. 1 kolom, vanaf 600px 2, breed vanaf 1024px 4
   (of 3 als er precies drie stappen zijn). */
.wp-block-group.steps {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
}

.wp-block-group.steps > * {
	margin: 0 !important;
	max-width: none !important;
}

.wp-block-group.steps > :not(.step) {
	grid-column: 1 / -1;
}

@media (min-width: 600px) {
	.wp-block-group.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wp-block-group.steps:is(.alignwide, .alignfull) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wp-block-group.steps:is(.alignwide, .alignfull):has(> .step:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.step {
	border-top: 1px solid var(--elevate-line);
	padding-top: var(--wp--preset--spacing--40);
}

.step-number {
	color: var(--elevate-label);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-variant-numeric: lining-nums;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
}

.step-number + :is(h3, h4) {
	margin-block-start: 1rem;
}

.step :is(h3, h4) {
	font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
}

.step :is(h3, h4) + p {
	margin-block-start: 0.75rem;
}

/* Profiles: twee profielkaarten. */
.wp-block-columns.profiles {
	row-gap: var(--wp--preset--spacing--60);
}

.profile .wp-block-image {
	margin-block-end: 0;
	max-width: 26rem;
}

.profile .wp-block-image img {
	aspect-ratio: 4 / 5;
	background-color: var(--elevate-line);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.profile .wp-block-image figcaption {
	color: var(--elevate-muted);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.08em;
	margin-top: 0.5rem;
	text-transform: uppercase;
}

.profile .wp-block-image + .eyebrow {
	margin-block-start: 1.5rem;
}

.profile :is(h3, h4) + p {
	margin-block-start: 1rem;
}

/* Price-card: donkere kaart (op licht Ink, op donker Surface). */
.wp-block-group.price-card,
.price-card {
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	box-sizing: border-box;
	color: var(--elevate-text);
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

.section-dark .price-card {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line-dark);
}

.price {
	color: var(--elevate-heading);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 2.2rem + 3.5vw, 4.5rem);
	font-variant-numeric: lining-nums;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
}

.eyebrow + .price {
	margin-block-start: 1rem;
}

.price + .fineprint {
	margin-block-start: 0.5rem;
}

/* FAQ: accordeon, items met dunne rand en een + rechts. */
.faq > .wp-block-details + .wp-block-details {
	margin-block-start: 0.75rem;
}

.faq .wp-block-details {
	background-color: var(--elevate-card-bg);
	border: 1px solid var(--elevate-line);
	box-sizing: border-box;
	padding: 0;
}

.faq .wp-block-details > summary {
	align-items: flex-start;
	color: var(--elevate-heading);
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	font-weight: 400;
	gap: 1.5rem;
	justify-content: space-between;
	line-height: 1.35;
	list-style: none;
	padding: 1.25rem 1.5rem;
}

.faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.faq .wp-block-details > summary::after {
	color: var(--elevate-label);
	content: "+";
	content: "+" / "";
	flex: none;
	font-family: var(--wp--preset--font-family--text);
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 0.8;
	transform-origin: 50% 50%;
}

.faq .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.faq .wp-block-details > :not(summary) {
	padding-inline: 1.5rem;
}

.faq .wp-block-details > summary + * {
	margin-block-start: 0;
}

.faq .wp-block-details > :last-child:not(summary) {
	margin-block-end: 0;
	padding-bottom: 1.5rem;
}

/* Facts: vier korte feiten (WANNEER, WAAR, ...). 1 kolom, 2 vanaf 480px,
   4 naast elkaar vanaf 782px. */
.wp-block-columns.facts {
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
}

.facts > .wp-block-column {
	border-top: 1px solid var(--elevate-line);
	box-sizing: border-box;
	padding-top: 1rem;
}

.facts .eyebrow + p {
	margin-block-start: 0.375rem;
}

@media (min-width: 480px) and (max-width: 781.98px) {
	.wp-block-columns.facts:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40) / 2) !important;
		flex-grow: 0;
	}
}


/* 5. Knoppen en lijnen ------------------------------------------------------ */
:root .wp-block-button__link,
:root .wp-element-button {
	background-color: var(--elevate-btn-bg);
	border: 1px solid var(--elevate-btn-bg);
	border-radius: 0;
	box-shadow: none;
	color: var(--elevate-btn-fg);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--button, 0.2em);
	line-height: 1.3;
	padding: 1.0625rem 2rem;
	text-decoration: none;
	text-transform: uppercase;
}

:root .wp-block-button__link:hover,
:root .wp-element-button:hover {
	background-color: var(--elevate-btn-hover-bg);
	border-color: var(--elevate-btn-hover-bg);
	color: var(--elevate-btn-hover-fg);
}

/* Secundaire knop: omlijnd, in de tekstkleur van de context. */
:root .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--elevate-heading);
	padding: 1.0625rem 2rem;
}

:root .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--elevate-btn-bg);
	border-color: var(--elevate-btn-bg);
	color: var(--elevate-btn-fg);
}

/* Op een telefoon: knoppen over de volle breedte, iets minder spatiëring. */
@media (max-width: 599.98px) {
	:root .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	:root .wp-block-buttons > .wp-block-button > .wp-block-button__link,
	:root .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
		letter-spacing: 0.16em;
		padding-inline: 1.25rem;
		width: 100%;
	}
}

:root .wp-block-separator {
	background: none;
	border: 0;
	border-top: 1px solid currentColor;
	color: var(--elevate-line);
	opacity: 1;
}

:root .wp-block-separator:not(.is-style-dots) {
	width: auto;
}


/* 6. Kop van de site -------------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--wp--preset--color--line-dark);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.site-header__inner {
	gap: var(--wp--preset--spacing--40);
}

.brand {
	flex: 0 1 auto;
	min-width: 0;
}

.brand .eyebrow {
	margin: 0;
}

/* Woordmerk als tekst: "Melsen & Vermunt" romein, streep, "Elevate AI"
   cursief. Op mobiel twee regels zonder streep. */
.wordmark {
	color: var(--elevate-heading);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0;
}

:root .wordmark a,
:root .wordmark a:hover {
	color: inherit;
	text-decoration: none;
}

.wordmark em {
	display: block;
	font-style: italic;
}

@media (min-width: 600px) {
	.wordmark em {
		display: inline;
	}

	.wordmark em::before {
		background-color: var(--elevate-label);
		content: "";
		display: inline-block;
		height: 0.95em;
		margin: 0 0.55em 0 0.3em;
		vertical-align: -0.14em;
		width: 1px;
	}
}

.site-nav {
	flex: none;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--label, 0.24em);
	text-transform: uppercase;
}

:root .site-nav .wp-block-navigation-item__content {
	color: var(--elevate-link);
	padding-block: 0.5rem;
	text-decoration: none;
}

:root .site-nav .wp-block-navigation-item__content:hover,
:root .site-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--elevate-link-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.5em;
}

.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--cream);
	margin: -0.5rem;
	padding: 0.5rem;
}

/* Overlay-menu (open): Ink, links groter en met meer ruimte. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	padding: 1.25rem clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	padding-block: 0.75rem;
}

/* Het menu past pas vanaf 1100px naast het woordmerk. Tussen 600 en 1100px
   gebruikt de navigatie daarom ook het overlay-menu (core doet dat alleen
   onder 600px). */
@media (min-width: 600px) and (max-width: 1099.98px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}


/* 7. Voet van de site ------------------------------------------------------- */
.site-footer {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.site-footer .wordmark {
	font-size: 1.125rem;
}


.site-footer__about {
	color: var(--elevate-muted);
	font-size: var(--wp--preset--font-size--small);
	max-width: 36rem;
}

.site-footer .eyebrow + p {
	margin-block-start: 0.5rem;
}

/* Wie factureert: twee regels met de gegevens van beide eenmanszaken. */
.site-footer__about + .site-footer__seller {
	margin-block-start: 1rem;
}

.site-footer__seller + .site-footer__seller {
	margin-block-start: 0.25rem;
}

.wp-block-group.site-footer__bottom {
	border-top: 1px solid var(--elevate-line);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-top: 1.25rem;
}

.site-footer__bottom p {
	margin: 0;
}


/* 8. Formulieren -------------------------------------------------------------
   Opmaak voor de uitvoer van [elevate_form]. De selectors zijn ruim gekozen,
   zodat de shortcode niet aan exacte klassen vastzit; zie README. */
.elevate-form {
	display: grid;
	gap: 1.25rem;
	max-width: 40rem;
	position: relative;
}

.elevate-form > *,
.elevate-form p {
	margin: 0;
}

.elevate-form fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.elevate-form label,
.elevate-form legend {
	color: var(--elevate-heading);
	display: block;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.5;
	margin-bottom: 0.5rem;
	padding: 0;
	text-transform: uppercase;
}

/* Eén veld: label, toelichting, foutmelding en invoer onder elkaar. De
   ruimte ertussen komt alleen uit de gap, niet ook nog uit marges. Staat hier
   ook (en niet alleen in de basis-CSS van de plugin), zodat het thema niet
   afhangt van die basis-CSS. Vinkjesvelden krijgen verderop flex. */
.elevate-form .elevate-form__field {
	display: grid;
	gap: 0.4rem;
}

.elevate-form .elevate-form__field > label {
	margin-bottom: 0;
}

.elevate-form .elevate-form__field > :is(.elevate-form__hint, .elevate-form__help, .elevate-form__error) {
	margin-top: 0;
}

/* "(niet verplicht)" in het label: gewone tekst, geen hoofdletters. */
.elevate-form .elevate-form__optional {
	color: var(--elevate-muted);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* :where houdt de specificiteit laag, zodat :focus en aria-invalid winnen. */
.elevate-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea) {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--elevate-field-bg);
	border: 1px solid var(--elevate-field-border);
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	color: var(--elevate-field-fg);
	display: block;
	font-family: var(--wp--preset--font-family--text);
	font-size: max(16px, 1rem);
	font-weight: 400;
	line-height: 1.4;
	padding: 0.8rem 1rem;
	width: 100%;
}

.elevate-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.elevate-form select {
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.3rem) 50%,
		calc(100% - 0.95rem) 50%;
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem;
	padding-right: 2.75rem;
}

.elevate-form ::placeholder {
	color: var(--elevate-placeholder);
	opacity: 1;
}

.elevate-form :is(input, select, textarea):focus {
	border-color: var(--elevate-focus);
	outline: 2px solid var(--elevate-focus);
	outline-offset: 2px;
}

/* Vinkjes: vierkant, rechte hoeken. Het label ernaast is gewone tekst. */
.elevate-form input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--elevate-field-bg);
	border: 1px solid var(--elevate-field-border);
	border-radius: 0;
	cursor: pointer;
	display: inline-grid;
	flex: none;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	place-content: center;
	width: 1.25rem;
}

.elevate-form input[type="checkbox"]::before {
	background-color: var(--elevate-field-fg);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	content: "";
	height: 0.7rem;
	transform: scale(0);
	width: 0.7rem;
}

.elevate-form input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.elevate-form input[type="radio"] {
	accent-color: var(--elevate-field-fg);
	height: 1.125rem;
	margin: 0.2rem 0 0;
	width: 1.125rem;
}

/* De wrapper om de toestemmingsvakjes zet ze onder elkaar. Elk vakje is
   daarbinnen een rij: vakje, label, en daaronder toelichting of fout. */
.elevate-form .elevate-form__consent {
	display: grid;
	gap: 0.75rem;
}

.elevate-form :is(.elevate-form__check, .elevate-form__field--checkbox, .elevate-form__field--radio),
.elevate-form label:has(> input[type="checkbox"]),
.elevate-form label:has(> input[type="radio"]) {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
}

.elevate-form :is(.elevate-form__field--checkbox, .elevate-form__field--radio) > label {
	flex: 1 1 0;
	min-width: 0;
}

/* Toelichting en fout onder het label, ingesprongen tot de labeltekst
   (vakje 1,25rem plus gap 0,75rem). */
.elevate-form :is(.elevate-form__field--checkbox, .elevate-form__field--radio) > :is(.elevate-form__hint, .elevate-form__help, .elevate-form__error) {
	flex-basis: 100%;
	padding-left: 2rem;
}

.elevate-form :is(.elevate-form__check, .elevate-form__field--checkbox, .elevate-form__field--radio) label,
.elevate-form label:has(> input[type="checkbox"]),
.elevate-form label:has(> input[type="radio"]),
.elevate-form input[type="checkbox"] + label,
.elevate-form input[type="radio"] + label {
	color: var(--elevate-text);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	margin-bottom: 0;
	text-transform: none;
}

.elevate-form :is(.elevate-form__required, abbr[title]) {
	color: var(--elevate-label);
	text-decoration: none;
}

.elevate-form :is(.elevate-form__help, .elevate-form__hint, .description) {
	color: var(--elevate-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin-top: 0.5rem;
}

/* Foutmeldingen: kleur plus tekst, nooit alleen kleur. */
.elevate-form :is(.elevate-form__error, .error, .is-error) {
	color: var(--elevate-error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	margin-top: 0.5rem;
}

.elevate-form :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--elevate-error);
	border-width: 2px;
}

.elevate-form :is(.elevate-form__summary, .elevate-form__notice, .elevate-form__errors, [role="alert"]):not(.elevate-form__error) {
	border: 1px solid var(--elevate-line);
	border-left: 3px solid var(--elevate-error);
	color: var(--elevate-text);
	padding: 1rem 1.25rem;
}

.elevate-form :is(.elevate-form__notice--ok, .elevate-form__success) {
	border-left-color: var(--elevate-label);
}

/* Verzendknop: zelfde stijl als de knop van de context. */
.elevate-form :is(button[type="submit"], input[type="submit"], .elevate-form__submit) {
	background-color: var(--elevate-btn-bg);
	border: 1px solid var(--elevate-btn-bg);
	border-radius: 0;
	color: var(--elevate-btn-fg);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	justify-self: start;
	letter-spacing: var(--wp--custom--tracking--button, 0.2em);
	line-height: 1.3;
	padding: 1.0625rem 2rem;
	text-transform: uppercase;
}

.elevate-form :is(button[type="submit"], input[type="submit"], .elevate-form__submit):hover {
	background-color: var(--elevate-btn-hover-bg);
	border-color: var(--elevate-btn-hover-bg);
	color: var(--elevate-btn-hover-fg);
}

@media (max-width: 599.98px) {
	.elevate-form :is(button[type="submit"], input[type="submit"], .elevate-form__submit) {
		justify-self: stretch;
		letter-spacing: 0.16em;
		width: 100%;
	}
}

/* Honeypot: buiten beeld, niet display:none. */
.elevate-form :is(.elevate-form__hp, .elevate-hp, .hp, .honeypot, [data-honeypot]) {
	height: 1px !important;
	left: -9999px !important;
	overflow: hidden !important;
	position: absolute !important;
	top: auto !important;
	width: 1px !important;
}


/* 9. Beweging en hoog contrast ---------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	:root a,
	:root .wp-block-button__link,
	:root .wp-element-button,
	.elevate-form :is(input, select, textarea, button) {
		transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
	}

	.faq .wp-block-details > summary::after,
	.elevate-form input[type="checkbox"]::before {
		transition: transform 0.2s ease;
	}
}

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

@media (forced-colors: active) {
	:root .wp-block-button__link,
	:root .wp-element-button {
		border: 1px solid ButtonText;
	}

	.elevate-form input[type="checkbox"]::before {
		background-color: CanvasText;
	}

	.wordmark em::before {
		background-color: CanvasText;
	}
}