/*
Theme Name: Studio Élan
Theme URI: https://studioelan.nl
Author: Strila
Author URI: https://strila.nl
Description: Rustig block theme voor Studio Élan, kleur- en stijladvies van Karen Cohen. Beige vlakken, één hoog contrasterende serif en veel lucht; kleur verschijnt alleen waar kleur het product is.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-elan
*/

/* =============================================================================
   Studio Élan — één stylesheet, geen imports.
   Dezelfde file dient de front-end en de blokeditor (add_editor_style).
   Bron van waarheid voor de waarden is theme.json; hieronder staan alleen
   aliassen in de taal van het design system plus de component-CSS.

   1. Tokenaliassen
   2. Basis
   3. Layout, secties en grids
   4. Koptekst, navigatie en voettekst
   5. Knoppen en blokstijlen
   6. Componenten
   7. Responsief
   ========================================================================== */


/* =============================================================================
   1. Tokenaliassen
   Specificiteit 0 en het selectorpaar :root / .editor-styles-wrapper, zodat
   de variabelen zowel op de site als in de editor beschikbaar zijn.
   ========================================================================== */

:where(:root, .editor-styles-wrapper) {

	/* --- Neutralen -------------------------------------------------------- */
	--elan-offwhite: var(--wp--preset--color--offwhite);
	--elan-linen: var(--wp--preset--color--linen);
	--elan-sand: var(--wp--preset--color--sand);
	--elan-beige: var(--wp--preset--color--beige);
	--elan-blush: var(--wp--preset--color--blush);
	--elan-taupe: var(--wp--preset--color--taupe);
	--elan-gold: var(--wp--preset--color--gold);
	--elan-gold-deep: var(--wp--custom--text--gold-deep);
	--elan-charcoal: var(--wp--preset--color--charcoal);
	--elan-ink: var(--wp--preset--color--ink);

	/* --- Seizoenskleuren: alleen als kleurstaal, nooit als UI ------------- */
	--elan-season-winter: var(--wp--preset--color--season-winter);
	--elan-season-teal: var(--wp--preset--color--season-teal);
	--elan-season-olive: var(--wp--preset--color--season-olive);
	--elan-season-sage: var(--wp--preset--color--season-sage);
	--elan-season-blush: var(--wp--preset--color--season-blush);
	--elan-season-terracotta: var(--wp--preset--color--season-terracotta);
	--elan-season-brick: var(--wp--preset--color--season-brick);
	--elan-season-plum: var(--wp--preset--color--season-plum);

	/* --- Vlakken ---------------------------------------------------------- */
	--surface-page: var(--elan-offwhite);
	--surface-raised: var(--elan-linen);
	--surface-muted: var(--elan-sand);
	--surface-contrast: var(--elan-charcoal);
	--surface-accent: var(--elan-blush);
	--surface-card: var(--elan-linen);

	/* --- Tekst ------------------------------------------------------------ */
	--text-body: var(--elan-charcoal);
	--text-heading: var(--elan-ink);
	--text-muted: var(--wp--preset--color--text-muted);
	--text-subtle: var(--wp--custom--text--subtle);
	--text-accent: var(--wp--preset--color--text-accent);
	--text-inverse: var(--elan-offwhite);
	--text-inverse-muted: var(--wp--custom--text--inverse-muted);

	/* --- Lijnen ----------------------------------------------------------- */
	--line-hairline: var(--wp--custom--line--hairline);
	--line-strong: var(--wp--custom--line--strong);
	--line-inverse: var(--wp--custom--line--inverse);

	/* --- Interactie ------------------------------------------------------- */
	--action-solid-bg: var(--elan-charcoal);
	--action-solid-bg-hover: var(--elan-ink);
	--action-solid-fg: var(--elan-offwhite);
	--action-outline-fg: var(--elan-charcoal);
	--action-outline-line: var(--elan-taupe);
	--action-outline-bg-hover: var(--elan-beige);
	--focus-ring: var(--elan-gold);

	/* --- Typografie ------------------------------------------------------- */
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-script: var(--wp--preset--font-family--script);

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;

	--text-hero: var(--wp--preset--font-size--hero);
	--text-display: var(--wp--preset--font-size--display);
	--text-title: var(--wp--preset--font-size--title);
	--text-heading-lg: var(--wp--preset--font-size--heading-lg);
	--text-heading: var(--wp--preset--font-size--heading);
	--text-lead: var(--wp--preset--font-size--lead);
	--text-base: var(--wp--preset--font-size--base);
	--text-small: var(--wp--preset--font-size--small);
	--text-micro: var(--wp--preset--font-size--micro);
	--eyebrow-size: var(--wp--custom--eyebrow-size);

	--leading-tight: var(--wp--custom--leading--tight);
	--leading-display: var(--wp--custom--leading--display);
	--leading-heading: var(--wp--custom--leading--heading);
	--leading-body: var(--wp--custom--leading--body);

	--tracking-hero: var(--wp--custom--tracking--hero);
	--tracking-caps: var(--wp--custom--tracking--caps);
	--tracking-caps-tight: var(--wp--custom--tracking--caps-tight);
	--tracking-body: var(--wp--custom--tracking--body);

	/* --- Ruimte ----------------------------------------------------------- */
	/* WordPress schrijft de slugs 2xs, 2xl, 3xl, 4xl en 5xl als 2-xs, 2-xl, … */
	--space-2xs: var(--wp--preset--spacing--2-xs);
	--space-xs: var(--wp--preset--spacing--xs);
	--space-sm: var(--wp--preset--spacing--sm);
	--space-md: var(--wp--preset--spacing--md);
	--space-lg: var(--wp--preset--spacing--lg);
	--space-xl: var(--wp--preset--spacing--xl);
	--space-2xl: var(--wp--preset--spacing--2-xl);
	--space-3xl: var(--wp--preset--spacing--3-xl);
	--space-4xl: var(--wp--preset--spacing--4-xl);
	--space-5xl: var(--wp--preset--spacing--5-xl);

	--section-y: var(--wp--custom--section-y);
	--section-y-tight: var(--wp--custom--section-y-tight);
	--gutter: var(--wp--custom--gutter);
	--measure: var(--wp--custom--measure);
	--container: var(--wp--custom--container);
	--container-narrow: var(--wp--custom--container-narrow);

	/* --- Vormen en effecten ----------------------------------------------- */
	--radius-none: 0px;
	--radius-pill: var(--wp--custom--radius--pill);
	--radius-arch: var(--wp--custom--radius--arch);

	--shadow-soft: var(--wp--custom--shadow--soft);
	--shadow-raised: var(--wp--custom--shadow--raised);
	--border-hairline: 1px solid var(--line-hairline);
	--border-strong: 1px solid var(--line-strong);

	--ease-standard: var(--wp--custom--ease--standard);
	--ease-gentle: var(--wp--custom--ease--gentle);
	--duration-fast: var(--wp--custom--duration--fast);
	--duration-base: var(--wp--custom--duration--base);
	--duration-slow: var(--wp--custom--duration--slow);

	--veil-light: var(--wp--custom--veil--light);
	--blur-veil: var(--wp--custom--veil--blur);
	--veil-dark: var(--wp--custom--veil--dark);
}


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

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

:where(body, .editor-styles-wrapper) {
	background-color: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-light);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-body);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

/* Koppen: het lettertype en de kleur komen uit theme.json; hier alleen ritme. */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

h1,
h2 {
	letter-spacing: var(--tracking-hero);
}

/* In flex- en grid-containers verzorgt de gap de ruimte. Zonder deze reset
   telt de browsermarge van koppen en alinea's daar bovenop. */
:where(.is-layout-flex, .is-layout-grid) > * {
	margin-block: 0;
}

p {
	text-wrap: pretty;
}

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

figure {
	margin-inline: 0;
}

/* Links in lopende tekst: goudbruin met een haarlijn eronder. */
p a,
li a,
figcaption a,
.wp-block-post-content a,
.elan-details__value a {
	color: var(--text-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 1px;
	transition: color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

p a:hover,
li a:hover,
figcaption a:hover,
.wp-block-post-content a:hover,
.elan-details__value a:hover {
	color: var(--elan-charcoal);
	border-bottom-color: var(--elan-charcoal);
}

/* Uitzonderingen: navigatie, knoppen, kaarten, voettekst, logo en titels
   dragen geen onderlijn. */
.wp-block-navigation a,
.wp-block-button__link,
.wp-block-post-title a,
.wp-block-site-logo a,
.elan-card a,
.elan-post-card a,
.elan-footer a,
.elan-filter a,
.elan-pagination a {
	border-bottom: 0;
	padding-bottom: 0;
}

::selection {
	background-color: var(--elan-beige);
	color: var(--elan-ink);
}

:focus-visible {
	outline: 1px solid var(--focus-ring);
	outline-offset: 3px;
}

/* Alleen bewegen wie dat wil. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}


/* =============================================================================
   3. Layout, secties en grids
   ========================================================================== */

/* De banden sluiten op elkaar aan; de blokafstand geldt binnen een sectie. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.alignfull + .alignfull {
	margin-block-start: 0;
}

.elan-section {
	padding-block: var(--section-y);
}

.elan-section--tight {
	padding-block: var(--section-y-tight);
}

.elan-section--hero {
	padding-block: clamp(64px, 9vw, 128px);
}

.elan-section--pagehead {
	padding-block: clamp(48px, 6vw, 88px);
}

/* De inleiding van een paginakop blijft kort. */
.elan-section--pagehead p.is-style-lead {
	max-width: 50ch;
}

/* Afsluitband met de oproep tot actie. */
.elan-cta {
	padding-block: var(--space-3xl);
}

.elan-cta__inner {
	text-align: center;
}

.elan-cta__inner h2 {
	max-width: 22ch;
}

/* Merknaam in de hero: iets groter, de naam zelf in houtskool. */
.elan-section--hero p.elan-hero__brand {
	font-size: 0.8125rem;
}

.elan-section--hero p.elan-hero__brand strong {
	color: var(--elan-charcoal);
	font-weight: var(--weight-medium);
}

/* De hero-kop blijft kort en houdt de regels bij elkaar. */
.elan-hero__title {
	max-width: 14ch;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-hero);
}

/* Kopregel met titel links en een tekstlink rechts. */
.elan-blog-head {
	width: 100%;
}

/* Kop van een sectie: kopregel, titel, ornament en inleiding onder elkaar. */
.elan-section-heading > h2,
.elan-section-heading > h3 {
	max-width: 20ch;
}

.elan-section-heading--center {
	max-width: 740px;
	margin-inline: auto;
	text-align: center;
}

.elan-section-heading--center > * {
	margin-inline: auto;
}

/* De constrained layout van core centreert elk blok apart met
   margin-inline:auto!important. Een korte kop zou daardoor midden in de
   sectie hangen en de linkerkantlijn rafelen. In plaats daarvan lijnt elk
   kind uit op de linkerrand van de container, terwijl de container zelf
   gecentreerd blijft. In de formule is 100% de content-box van de ouder,
   dus het venster min tweemaal de gutter. --elan-inset erft door, zodat elk
   niveau met zijn eigen breedte rekent. */
.elan-section {
	--elan-inset: max(0px, calc((100% - var(--container)) / 2));
}

/* Binnen een smalle tekstkolom rekent de inzet met de smalle container.
   De variabele staat op de kinderen, zodat de kolom zelf nog met de brede
   container van de sectie meedoet. */
.elan-narrow > *,
.elan-article .wp-block-post-content > *,
.elan-narrow .wp-block-post-content > * {
	--elan-inset: max(0px, calc((100% - var(--container-narrow)) / 2));
}

/* Wat gecentreerd hoort te staan, zet de inzet op auto en komt zo,
   samen met de marge rechts, in het midden van de container. */
.elan-testimonial--center,
.elan-section .elan-section-heading--center,
.elan-section .has-text-align-center,
.elan-narrow .has-text-align-center,
.elan-article .wp-block-post-content .has-text-align-center,
.elan-narrow .wp-block-post-content .has-text-align-center,
.elan-cta .elan-cta__inner,
.has-text-align-center + hr.wp-block-separator[class*="is-style-ornament"] {
	--elan-inset: auto;
}

.elan-section > *:not(.alignfull),
.elan-narrow > *:not(.alignfull),
.elan-article .wp-block-post-content > *:not(.alignfull),
.elan-narrow .wp-block-post-content > *:not(.alignfull) {
	margin-left: var(--elan-inset, 0px) !important;
	margin-right: auto !important;
}

/* Smalle tekstkolom binnen een brede sectie. Alle blokken krijgen dezelfde
   breedte, anders centreert de constrained layout elk blok apart en loopt
   de linkerkantlijn rafelig. */
.elan-narrow > *:not(.alignfull) {
	max-width: var(--container-narrow);
}

/* Rasters voor de blokken die het thema zelf rendert. */
.elan-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xl);
}

/* Kolommen: op mobiel stapelt core zelf, de tussenruimte wordt dan kleiner. */
.wp-block-columns > .wp-block-column > * + * {
	margin-block-start: var(--space-lg);
}


/* =============================================================================
   4. Koptekst, navigatie en voettekst
   ========================================================================== */

/* --- Koptekst ------------------------------------------------------------ */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: var(--border-hairline);
}

/* De sluier zit op een pseudo-element. Een backdrop-filter op de koptekst
   zelf zou een containing block maken en het mobiele menu insluiten. */
header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--veil-light);
	-webkit-backdrop-filter: var(--blur-veil);
	backdrop-filter: var(--blur-veil);
}

.elan-header {
	padding-block: var(--space-md);
}

.elan-header__bar {
	gap: var(--space-xl);
}

.elan-header__logo,
.elan-header__logo a,
.elan-header__logo img {
	display: block;
}

.elan-header__logo img {
	height: 68px;
	width: auto;
}

.elan-header__right {
	gap: var(--space-xl);
	margin-left: auto;
}

/* --- Navigatie ----------------------------------------------------------- */

.elan-nav a,
.elan-nav .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: var(--text-micro);
	font-weight: var(--weight-regular);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	color: var(--elan-charcoal);
	opacity: 0.82;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
	transition: opacity var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.elan-nav a:hover,
.elan-nav .wp-block-navigation-item__content:hover {
	opacity: 1;
}

.elan-nav .current-menu-item > a,
.elan-nav .current_page_item > a,
.elan-nav .current-menu-ancestor > a {
	opacity: 1;
	border-bottom-color: var(--elan-gold);
}

/* Hamburger en overlay op mobiel. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--elan-charcoal);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--space-xl);
}

.elan-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.elan-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.elan-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	align-self: stretch;
	gap: var(--space-lg);
}

.elan-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--space-xl);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--text-small);
	letter-spacing: var(--tracking-caps);
	opacity: 1;
}

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

.elan-footer {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-2xl);
	color: var(--text-inverse);
	/* Haarlijn als scheiding wanneer een houtskoolband eraan voorafgaat. */
	border-top: 1px solid var(--line-inverse);
}

.elan-footer__cols {
	gap: var(--space-2xl);
}

.elan-footer__logo img {
	height: 80px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.elan-footer p {
	color: var(--text-inverse-muted);
	max-width: 30ch;
}

.elan-footer a {
	color: var(--text-inverse-muted);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.elan-footer a:hover {
	color: var(--text-inverse);
}

.elan-footer__nav a,
.elan-footer__nav .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	color: var(--text-inverse-muted);
}

.elan-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--text-inverse);
}

.elan-footer__bottom {
	border-top: 1px solid var(--line-inverse);
	padding-top: var(--space-lg);
	margin-top: var(--space-2xl);
}

.elan-footer__meta {
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	color: var(--text-inverse-muted);
	max-width: none;
}


/* =============================================================================
   5. Knoppen en blokstijlen
   ========================================================================== */

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

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: var(--text-micro);
	font-weight: var(--weight-regular);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	text-decoration: none;
	padding: 17px 34px;
	border: 1px solid var(--action-solid-bg);
	border-radius: var(--radius-none);
	background-color: var(--action-solid-bg);
	color: var(--action-solid-fg);
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease-standard),
		color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard),
		opacity var(--duration-fast) var(--ease-standard);
}

.wp-block-button .wp-block-button__link:hover {
	background-color: var(--action-solid-bg-hover);
	border-color: var(--action-solid-bg-hover);
	color: var(--action-solid-fg);
}

.wp-block-button .wp-block-button__link:active {
	opacity: 0.82;
}

.wp-block-button .wp-block-button__link:disabled,
.wp-block-button .wp-block-button__link[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Omlijnd: vult zich met beige, de rand wordt houtskool. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--action-outline-fg);
	border: 1px solid var(--action-outline-line);
	padding: 17px 34px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--action-outline-bg-hover);
	border-color: var(--elan-charcoal);
	color: var(--action-outline-fg);
}

/* Tekstlink: dezelfde vorm als .elan-link-ghost. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--text-accent);
	border: 1px solid transparent;
	border-bottom: 1px solid var(--line-strong);
	border-radius: 0;
	padding: 0 0 3px;
	letter-spacing: var(--tracking-caps-tight);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--elan-charcoal);
	border-bottom-color: var(--elan-charcoal);
}

/* Licht: voor de houtskoolband. */
.wp-block-button.is-style-light .wp-block-button__link {
	background-color: var(--surface-raised);
	color: var(--elan-charcoal);
	border: 1px solid var(--surface-raised);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background-color: var(--elan-beige);
	border-color: var(--elan-beige);
	color: var(--elan-charcoal);
}

/* Maten. Zonder extra klasse geldt de middelste maat. */
.wp-block-button.elan-button--sm .wp-block-button__link {
	padding: 12px 22px;
}

.wp-block-button.elan-button--lg .wp-block-button__link {
	padding: 21px 46px;
	letter-spacing: 0.3em;
}

.wp-block-button.is-style-ghost.elan-button--sm .wp-block-button__link,
.wp-block-button.is-style-ghost.elan-button--lg .wp-block-button__link {
	padding: 0 0 3px;
	letter-spacing: var(--tracking-caps-tight);
}

/* --- Alinea-stijlen ------------------------------------------------------ */

p.is-style-eyebrow {
	font-family: var(--font-body);
	font-size: var(--eyebrow-size);
	font-weight: var(--weight-regular);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	line-height: 1.6;
	color: var(--text-subtle);
	max-width: none;
}

p.is-style-lead {
	font-size: var(--text-lead);
	color: var(--text-muted);
	max-width: var(--measure);
}

p.is-style-script {
	font-family: var(--font-script);
	font-size: 1.75rem;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--text-accent);
	max-width: none;
}

p.is-style-badge,
p.is-style-badge-gold {
	display: inline-flex;
	align-items: center;
	width: max-content;
	max-width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-micro);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--elan-beige);
	background-color: var(--elan-beige);
	color: var(--elan-charcoal);
}

p.is-style-badge-gold {
	background-color: transparent;
	border-color: var(--elan-gold);
	color: var(--text-accent);
}

/* --- Lijststijlen -------------------------------------------------------- */

ul.is-style-dashes,
ul.is-style-dashes-lead {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

ul.is-style-dashes li,
ul.is-style-dashes-lead li {
	display: flex;
	gap: 10px;
}

ul.is-style-dashes li::before,
ul.is-style-dashes-lead li::before {
	content: "\2014";
	color: var(--text-accent);
	flex: 0 0 auto;
}

ul.is-style-dashes li {
	font-size: var(--text-small);
	color: var(--text-subtle);
	margin-block: 6px;
}

ul.is-style-dashes-lead li {
	gap: var(--space-md);
	font-size: var(--text-lead);
	color: var(--text-body);
	border-bottom: var(--border-hairline);
	padding-bottom: var(--space-lg);
	margin-block: 0 var(--space-lg);
	max-width: var(--measure);
}

ul.is-style-dashes-lead li::before {
	font-family: var(--font-display);
	font-size: 1.4rem;
	line-height: 1.4;
}

/* --- Ornament ------------------------------------------------------------ */

/* Het gouden streepje tussen kop en tekst. De selector is bewust zwaar:
   core zet zelf breedte en hoogte op separators met een achtergrondkleur. */
hr.wp-block-separator.is-style-ornament:not(.is-style-wide):not(.is-style-dots),
hr.wp-block-separator.is-style-ornament-wide:not(.is-style-wide):not(.is-style-dots) {
	border: 0;
	width: 54px;
	height: 1px;
	opacity: 0.85;
	margin-inline: 0;
	background-color: var(--elan-gold);
}

hr.wp-block-separator.is-style-ornament-wide:not(.is-style-wide):not(.is-style-dots) {
	width: 72px;
}

hr.wp-block-separator.is-style-ornament.elan-ornament--xs:not(.is-style-wide):not(.is-style-dots) {
	width: 32px;
}

/* In een gewone sectie krijgt het ornament lucht; in flex-groepen doet de
   gap dat al. theme.json zet de marge van separators op nul. */
.is-layout-flow > hr.wp-block-separator[class*="is-style-ornament"],
.is-layout-constrained > hr.wp-block-separator[class*="is-style-ornament"] {
	margin-block: var(--space-md);
	/* Dezelfde linkerrand als de rest van de sectie; zie sectie 3. */
	margin-left: var(--elan-inset, 0px) !important;
	margin-right: auto !important;
}

/* In een gecentreerde kop staat het ornament wel in het midden. */
.has-text-align-center + hr.wp-block-separator[class*="is-style-ornament"] {
	margin-inline: auto !important;
}

/* --- Kaartstijl voor groepen --------------------------------------------- */

.wp-block-group.is-style-card {
	background-color: var(--surface-card);
	border: var(--border-hairline);
	box-shadow: var(--shadow-soft);
	padding: var(--space-xl);
	height: 100%;
	transition: box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.wp-block-group.is-style-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-raised);
}

.wp-block-group.is-style-card > h3 {
	max-width: none;
}

.wp-block-group.is-style-card p {
	font-size: var(--text-small);
	color: var(--text-muted);
}

/* --- Afbeeldingsstijlen --------------------------------------------------- */

.elan-img,
.wp-block-image.is-style-tint,
.wp-block-image.is-style-arch,
.wp-block-image.is-style-arch-tint {
	position: relative;
	margin: 0;
}

.elan-img img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--surface-muted);
}

.elan-img--1x1 img {
	aspect-ratio: 1 / 1;
}

.elan-img--4x3 img {
	aspect-ratio: 4 / 3;
}

.elan-img--3x4 img {
	aspect-ratio: 3 / 4;
}

.elan-img--4x5 img {
	aspect-ratio: 4 / 5;
}

.elan-img--16x11 img {
	aspect-ratio: 16 / 11;
}

/* Boog: de enige ronding naast de pil. */
.wp-block-image.is-style-arch img,
.wp-block-image.is-style-arch-tint img {
	border-radius: var(--radius-arch);
	overflow: hidden;
}

/* Blush-vlak dat achter de afbeelding uitsteekt. */
.wp-block-image.is-style-tint::before,
.wp-block-image.is-style-arch-tint::before {
	content: "";
	position: absolute;
	inset: auto -18px -18px 18px;
	height: 70%;
	z-index: 0;
	background-color: var(--surface-accent);
}

/* Op een blush band wordt het vlak zand, anders is het onzichtbaar. */
.has-blush-background-color .wp-block-image.is-style-tint::before,
.has-blush-background-color .wp-block-image.is-style-arch-tint::before {
	background-color: var(--surface-muted);
}

/* --- Context: houtskoolband ---------------------------------------------- */

.has-charcoal-background-color {
	color: var(--text-inverse);
}

.has-charcoal-background-color h1,
.has-charcoal-background-color h2,
.has-charcoal-background-color h3,
.has-charcoal-background-color h4 {
	color: var(--text-inverse);
}

.has-charcoal-background-color p {
	color: var(--text-inverse-muted);
}

.has-charcoal-background-color p.is-style-eyebrow {
	color: var(--text-inverse-muted);
}

.has-charcoal-background-color p a {
	color: var(--text-inverse);
	border-bottom-color: var(--line-inverse);
}

.has-charcoal-background-color p a:hover {
	color: var(--text-inverse);
	border-bottom-color: var(--text-inverse);
}

.has-charcoal-background-color hr.wp-block-separator.is-style-ornament:not(.is-style-wide):not(.is-style-dots),
.has-charcoal-background-color hr.wp-block-separator.is-style-ornament-wide:not(.is-style-wide):not(.is-style-dots) {
	background-color: var(--line-inverse);
	opacity: 1;
}


/* =============================================================================
   6. Componenten
   ========================================================================== */

/* --- Label (pil) --------------------------------------------------------- */

.elan-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-micro);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--elan-beige);
	background-color: var(--elan-beige);
	color: var(--elan-charcoal);
}

.elan-badge--outline {
	background-color: transparent;
	border-color: var(--line-hairline);
	color: var(--text-muted);
}

.elan-badge--gold {
	background-color: transparent;
	border-color: var(--elan-gold);
	color: var(--text-accent);
}

.elan-badge--neutral {
	background-color: var(--elan-beige);
	border-color: var(--elan-beige);
	color: var(--elan-charcoal);
}

.elan-badge--contrast {
	background-color: var(--elan-charcoal);
	border-color: var(--elan-charcoal);
	color: var(--text-inverse);
}

/* --- Streepjeslijst ------------------------------------------------------ */

.elan-dashlist {
	list-style: none;
	margin: var(--space-xs) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.elan-dashlist li {
	display: flex;
	gap: 10px;
	font-size: var(--text-small);
	color: var(--text-subtle);
}

.elan-dashlist li::before {
	content: "\2014";
	color: var(--text-accent);
	flex: 0 0 auto;
}

/* --- Tekstlink ----------------------------------------------------------- */

.elan-link-ghost {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	line-height: 1;
	color: var(--text-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 3px;
	transition: color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.elan-link-ghost:hover {
	color: var(--elan-charcoal);
	border-bottom-color: var(--elan-charcoal);
}

/* --- Kaart --------------------------------------------------------------- */

.elan-card {
	display: flex;
	flex-direction: column;
	background-color: var(--surface-card);
	border: var(--border-hairline);
	box-shadow: var(--shadow-soft);
	transition: box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.elan-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-raised);
}

/* --- Dienstenkaart ------------------------------------------------------- */

.elan-dienst-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--surface-muted);
	border-bottom: 0;
}

.elan-dienst-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-gentle);
}

.elan-card:hover .elan-dienst-card__media img {
	transform: scale(1.035);
}

.elan-dienst-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	flex: 1;
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.elan-dienst-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-heading-lg);
	font-weight: var(--weight-light);
	line-height: var(--leading-display);
	color: var(--text-heading);
}

.elan-dienst-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.elan-dienst-card__title a:hover {
	color: var(--text-accent);
}

.elan-dienst-card__text {
	margin: 0;
	font-size: var(--text-small);
	color: var(--text-muted);
}

.elan-dienst-card__cta {
	margin-top: auto;
	padding-top: var(--space-lg);
}

/* Losse dienstgegevens op de dienstpagina. */
.elan-dienst-details {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
}

/* --- Kleurstalen --------------------------------------------------------- */

.elan-swatches {
	gap: 0;
}

.elan-swatch {
	width: 56px;
	flex: 0 0 auto;
	padding: 0;
}

.elan-swatch .wp-block-spacer {
	margin: 0;
	height: 56px;
}

/* --- Aanbeveling --------------------------------------------------------- */

.wp-block-quote.elan-testimonial {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
}

.elan-testimonial p {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-heading-lg);
	line-height: var(--leading-heading);
	color: var(--text-heading);
	max-width: 34ch;
}

.elan-testimonial cite {
	display: block;
	margin: 0;
	font-family: var(--font-body);
	font-style: normal;
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: var(--text-subtle);
}

.elan-testimonial cite::before {
	content: "";
	display: block;
	width: 36px;
	height: 1px;
	margin: var(--space-md) 0;
	background-color: var(--elan-gold);
	opacity: 0.85;
}

.elan-testimonial--center {
	text-align: center;
}

.elan-testimonial--center p {
	margin-inline: auto;
}

.elan-testimonial--center cite::before {
	margin-inline: auto;
}

.has-charcoal-background-color .elan-testimonial p {
	color: var(--text-inverse);
}

.has-charcoal-background-color .elan-testimonial cite {
	color: var(--text-inverse-muted);
}

.has-charcoal-background-color .elan-testimonial cite::before {
	background-color: var(--line-inverse);
	opacity: 1;
}

/* --- Accordeon (core/details) -------------------------------------------- */

.elan-faq .wp-block-details {
	border-bottom: var(--border-hairline);
	margin-block: 0;
}

.elan-faq .wp-block-details:first-child {
	border-top: var(--border-hairline);
}

.wp-block-details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg) 0;
	font-family: var(--font-display);
	font-size: var(--text-heading);
	line-height: var(--leading-heading);
	color: var(--text-heading);
	list-style: none;
	cursor: pointer;
}

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

.wp-block-details > summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1;
	color: var(--text-accent);
	transition: transform var(--duration-base) var(--ease-standard);
}

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

.wp-block-details > :not(summary) {
	font-family: var(--font-body);
	font-size: var(--text-small);
	color: var(--text-muted);
	max-width: var(--measure);
}

.wp-block-details > :last-child:not(summary) {
	padding-bottom: var(--space-lg);
}

/* --- Blogkaart en query loop --------------------------------------------- */

.elan-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.elan-post-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	background-color: var(--surface-muted);
}

.elan-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-gentle);
}

.elan-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.elan-post-card__kicker,
.elan-article__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--font-body);
	font-size: var(--eyebrow-size);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: var(--text-subtle);
	line-height: 1.6;
}

.elan-post-card__kicker a,
.elan-article__kicker a {
	color: inherit;
	text-decoration: none;
}

/* Gouden middot tussen categorie en datum, als eigen alinea in de markup. */
.elan-kicker__dot {
	margin: 0;
	max-width: none;
	color: var(--elan-gold);
}

.elan-post-card .wp-block-post-title {
	margin: 0;
	font-size: var(--text-heading-lg);
}

.elan-post-card .wp-block-post-title a {
	color: var(--text-heading);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.elan-post-card .wp-block-post-title a:hover {
	color: var(--text-accent);
}

.elan-post-card .wp-block-post-excerpt {
	margin: 0;
}

.elan-post-card .wp-block-post-excerpt p,
.elan-post-card .wp-block-post-excerpt__excerpt {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin: 0;
}

.wp-block-post-excerpt__more-link {
	display: none;
}

.elan-post-grid {
	gap: var(--space-xl);
}

/* Categoriefilter boven het blogoverzicht: "Alles" plus de categorieën. */
.elan-filter-row {
	align-items: baseline;
}

.elan-filter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
}

.elan-filter__all,
.elan-filter__all a,
.elan-filter a {
	font-family: var(--font-body);
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	color: var(--text-subtle);
	text-decoration: none;
	border: 0;
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
	transition: color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.elan-filter__all {
	margin: 0;
	max-width: none;
}

.elan-filter a:hover,
.elan-filter .current-cat > a,
.elan-filter__all a:hover,
.elan-filter__all.is-current a {
	color: var(--elan-charcoal);
	border-bottom-color: var(--elan-gold);
}

/* Paginering. */
.elan-pagination {
	font-family: var(--font-body);
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	color: var(--text-subtle);
	margin-top: var(--space-2xl);
}

.elan-pagination a {
	color: var(--text-subtle);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.elan-pagination a:hover,
.elan-pagination .page-numbers.current {
	color: var(--elan-charcoal);
}

/* Zoekveld. */
.elan-search .wp-block-search__input {
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	border-radius: 0;
	background-color: transparent;
	padding: 10px 2px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-light);
	color: var(--text-body);
}

.elan-search .wp-block-search__input:focus {
	border-bottom-color: var(--elan-charcoal);
	outline: none;
}

.elan-search .wp-block-search__button {
	background-color: var(--action-solid-bg);
	color: var(--action-solid-fg);
	border: 1px solid var(--action-solid-bg);
	border-radius: 0;
	padding: 12px 22px;
	font-family: var(--font-body);
	font-size: var(--text-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	cursor: pointer;
}

.elan-search .wp-block-search__button:hover {
	background-color: var(--action-solid-bg-hover);
	border-color: var(--action-solid-bg-hover);
}

/* --- Hulpstrook ---------------------------------------------------------- */

.elan-strip {
	border-top: var(--border-hairline);
	border-bottom: var(--border-hairline);
	padding-block: var(--space-xl);
}

.elan-strip__text {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-heading-lg);
	font-weight: var(--weight-light);
	line-height: var(--leading-display);
	color: var(--text-heading);
	max-width: none;
}

/* --- Gegevensrijen ------------------------------------------------------- */

.elan-details__row {
	border-bottom: var(--border-hairline);
	padding-block: var(--space-md);
}

.elan-details__key {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--eyebrow-size);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: var(--text-subtle);
	line-height: 1.6;
	max-width: none;
}

.elan-details__value {
	margin: 0;
	font-size: var(--text-small);
	color: var(--text-body);
	text-align: right;
	max-width: none;
}

/* --- Formulier (Contact Form 7) ------------------------------------------ */

.elan-form {
	background-color: var(--surface-raised);
	border: var(--border-hairline);
	padding: clamp(24px, 4vw, 48px);
}

.elan-form .wpcf7 form > p,
.elan-form .wpcf7-form > p {
	margin-block: 0 var(--space-lg);
	max-width: none;
}

/* Contact Form 7 scheidt de velden met <br>; de ruimte komt van de labels. */
.elan-form .wpcf7-form br {
	display: none;
}

.elan-form .wpcf7 label {
	display: block;
	margin-bottom: var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--eyebrow-size);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps-tight);
	color: var(--text-muted);
}

/* Het label omsluit het veld; de ruimte ertussen komt van de wrapper. */
.elan-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 10px;
}

/* Twee velden naast elkaar. De alinea die Contact Form 7 eromheen zet valt
   weg, zodat de labels zelf de kolommen vullen. */
.elan-form__grid {
	display: grid;
	gap: 0 var(--space-lg);
}

.elan-form__grid > p {
	display: contents;
}

@media (min-width: 560px) {

	.elan-form__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.elan-form input[type="text"],
.elan-form input[type="email"],
.elan-form input[type="tel"],
.elan-form input[type="url"],
.elan-form select,
.elan-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-light);
	line-height: var(--leading-body);
	color: var(--text-body);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	border-radius: 0;
	padding: 10px 2px;
	transition: border-color var(--duration-base) var(--ease-standard);
}

.elan-form input:focus,
.elan-form select:focus,
.elan-form textarea:focus {
	border-bottom-color: var(--elan-charcoal);
	outline: none;
}

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

.elan-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 28px;
	cursor: pointer;
}

/* Eigen chevron voor het keuzeveld. */
.elan-form .wpcf7-form-control-wrap:has(select) {
	position: relative;
	display: block;
}

.elan-form .wpcf7-form-control-wrap:has(select)::after {
	content: "\25BE";
	position: absolute;
	right: 4px;
	top: 12px;
	font-size: 11px;
	color: var(--text-subtle);
	pointer-events: none;
}

/* Akkoordvinkje: eigen vierkant met een haakje. */
.elan-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.elan-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--text-small);
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: var(--tracking-body);
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: var(--space-lg);
	cursor: pointer;
}

.elan-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.elan-form input[type="checkbox"]:hover {
	border-color: var(--elan-charcoal);
}

.elan-form input[type="checkbox"]:checked {
	background-color: var(--elan-charcoal);
	border-color: var(--elan-charcoal);
}

.elan-form input[type="checkbox"]:checked::after {
	content: "\2713";
	color: var(--elan-offwhite);
	font-size: 10px;
	line-height: 1;
}

/* Verzendknop. */
.elan-form .wpcf7-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: var(--text-micro);
	font-weight: var(--weight-regular);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	padding: 17px 34px;
	border: 1px solid var(--action-solid-bg);
	border-radius: var(--radius-none);
	background-color: var(--action-solid-bg);
	color: var(--action-solid-fg);
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.elan-form .wpcf7-submit:hover {
	background-color: var(--action-solid-bg-hover);
	border-color: var(--action-solid-bg-hover);
}

/* Validatie. Rood is de enige foutkleur; een bevestiging is een zin. */
.elan-form .wpcf7-not-valid {
	border-bottom-color: var(--elan-season-brick);
}

.elan-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-size: var(--text-small);
	color: var(--elan-season-brick);
}

.elan-form .wpcf7-response-output {
	border: 0;
	margin: var(--space-md) 0 0;
	padding: 0;
	font-size: var(--text-small);
	color: var(--text-muted);
}

.elan-form .wpcf7-form.invalid .wpcf7-response-output,
.elan-form .wpcf7-form.failed .wpcf7-response-output {
	color: var(--elan-season-brick);
}

/* --- Artikel ------------------------------------------------------------- */

.elan-lead,
.elan-lead p {
	font-size: var(--text-lead);
	color: var(--text-muted);
	max-width: none;
}

.elan-article .wp-block-post-featured-image {
	margin: 0;
}

.elan-article .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	background-color: var(--surface-muted);
}

/* De constrained layout centreert elk blok apart; met gelijke breedtes
   blijft de linkerkantlijn recht. De contentSize (760px) is de leesmaat. */
.elan-article .wp-block-post-content > *,
.elan-section--pagehead > .wp-block-post-title,
.elan-section--pagehead > .wp-block-post-excerpt {
	max-width: var(--container-narrow);
}

.elan-article .wp-block-post-content h2 {
	font-size: var(--text-title);
}

.elan-article .wp-block-post-content h3 {
	font-size: var(--text-heading-lg);
}


/* =============================================================================
   7. Responsief
   ========================================================================== */

@media (max-width: 900px) {

	.elan-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elan-post-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {

	.elan-section {
		padding-block: 64px;
	}

	.elan-section--tight {
		padding-block: 56px;
	}

	.elan-section--hero {
		padding-block: 56px;
	}

	.elan-section--pagehead {
		padding-block: 48px;
	}

	/* Gestapelde kolommen krijgen een rustiger tussenruimte. */
	.wp-block-columns.is-layout-flex {
		gap: var(--space-2xl);
	}

	.elan-section-heading > h2,
	.elan-section-heading > h3 {
		max-width: none;
	}

	.elan-details__value {
		text-align: left;
	}

	.elan-footer__bottom {
		margin-top: var(--space-xl);
	}
}

@media (max-width: 640px) {

	.elan-grid-3 {
		grid-template-columns: 1fr;
	}

	.elan-post-grid.is-layout-grid {
		grid-template-columns: 1fr;
	}

	/* De knop in de koptekst wijkt op kleine schermen voor het logo. */
	.elan-header .elan-header__cta {
		display: none;
	}

	/* Het logo blijft leesbaar zonder de balk hoog te maken. */
	.elan-header__logo img {
		height: 52px;
	}

	.elan-strip {
		text-align: left;
	}

	.wp-block-button.elan-button--lg .wp-block-button__link {
		padding: 18px 30px;
		letter-spacing: var(--tracking-caps);
	}
}