/* Europe Medicare — custom theme styles
   Brand presets live in theme.json (color/typography/spacing).
   Component & layout tweaks go here. Klassen volgen de patterns in /patterns/. */

/* ============ Tekstafbreking ============ */
/*
 * Twee regels tegen horizontaal scrollen op smalle schermen, en tegen elkaar afgewogen:
 *
 * `overflow-wrap: break-word` voorkomt wel de overflow, maar hakt een lang woord blind
 * doormidden ("tandartsassis / tenten"). Daarom staat op koppen en labels `hyphens: auto`:
 * de browser breekt dan op een echte lettergreepgrens en zet er een koppelteken bij. Dat
 * werkt alleen met een taalattribuut op <html> — dat levert WordPress zelf via
 * language_attributes(), en Polylang zet het per taal correct (nl-NL / en-US).
 *
 * De harde break blijft als vangnet staan voor wat geen woord is: URL's, e-mailadressen
 * en codes kennen geen afbreekpatroon.
 */
body { overflow-wrap: break-word; }
/* Kleine tekst mag altijd afbreken: een menulink of label die niet past is een echt probleem,
   en op deze korte regels valt een koppelteken nauwelijks op. */
.em-eyebrow,
.em-usp__label,
.em-menu a,
h4, h5, h6 { hyphens: auto; }
/* Knoplabels niet afbreken: een knop hoort op één regel te passen of korter te heten. */
.wp-block-button__link { hyphens: manual; }

/* ============ Kufam (self-hosted, EM-15) ============ */
@font-face {
	font-family: 'Kufam';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/kufam-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Kufam';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/kufam-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Kufam';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/kufam-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Kufam';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/kufam-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ Header (B01) – zwevende balk met scrollgedrag ============ */
/* Sticky op de template-part-wrapper (die is direct kind van .wp-site-blocks en
   dus hoog genoeg); de binnenste .em-header kan niet sticky zijn binnen z'n eigen
   even hoge ouder. Scrollgedrag (header-scroll.js) zet twee klassen op dit element:
   - .is-header-hidden   : voorbij 100px gescrolld én omlaag → balk schuift omhoog weg
   - .is-header-floating : omhoog gescrolld (al bij 1px) → volledig witte, ingesprongen
                            zwevende balk (100vw - 48px), los van de 1440px-grid
   Zonder beide klassen (bovenaan de pagina, ≤100px gescrolld): logo transparant,
   alleen het nav-paneel is een wit zwevend pilletje. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	/* geen flow-ruimte innemen → de header valt over de hero/eerste sectie heen */
	margin-bottom: calc(-1 * var(--em-header-h));
	transition: transform 0.3s ease;
}
header.wp-block-template-part.is-header-hidden { transform: translateY(-100%); }
/* block-gap tussen header en main weghalen zodat de hero exact onder de header begint */
header.wp-block-template-part + * { margin-top: 0 !important; }

.em-header {
	background: transparent;
	padding-block: 1.1rem !important;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, margin 0.25s ease, border-radius 0.25s ease, width 0.25s ease;
}
/* WP genereert voor "constrained"-layout een regel als
   .wp-container-core-group-is-layout-<hash> > :where(...) { max-width: 1440px }
   — die hash wisselt per build/instantie, dus targeten we hem stabiel via de
   eigen klasse. Nav/logo mogen echt de volle breedte gebruiken, niet blijven
   steken op de 1440px wideSize (dat is enkel voor de leesbare contentsecties). */
.em-header__inner, .em-header__inner > * { max-width: 100% !important; }
.em-header__inner { width: 100%; }
/* Het logo komt uit [em_logo] als <a><img style="width:…"></a>. Die inline breedte is de
   gewenste maat op desktop, maar mag geen bodem onder de flexbox leggen: zonder max-width
   kan de <img> niet krimpen en duwt hij de hele header buiten een smal scherm. Dit deed
   core's .wp-block-image-CSS eerder voor ons, toen het logo nog een figuur-blok was. */
.em-logo { display: inline-flex; min-width: 0; text-decoration: none; color: var(--wp--preset--color--primary); margin: 0; }
.em-logo img { max-width: 100%; height: auto; }
/* bovenaan de pagina: alleen het nav-paneel is een wit zwevend pilletje, logo blijft los/transparant */
.em-header__panel {
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 12px 34px rgba(7, 52, 49, 0.12);
	padding: 0.55rem 0.6rem 0.55rem 2rem;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
/* omhoog gescrolld: hele balk (logo + nav) wordt één witte, ingesprongen zwevende kaart.
   position:relative + top (i.p.v. margin-top) zodat de vaste hoogte van de
   sticky-wrapper (--em-header-h) niet verstoord raakt en de balk niet aan
   de bovenkant wordt afgesneden. */
header.wp-block-template-part.is-header-floating .em-header {
	position: relative;
	top: 12px;
	background: #fff;
	width: calc(100% - 48px);
	margin-inline: 24px;
	border-radius: 20px;
	box-shadow: 0 12px 34px rgba(7, 52, 49, 0.16);
}
header.wp-block-template-part.is-header-floating .em-header__panel {
	background: transparent;
	box-shadow: none;
	padding: 0;
}
/* ---- Hoofdmenu (klassiek WP-menu, zie inc/menus.php) ---- */
/* Verving het core/navigation-blok; de linkstyling is bewust ongewijzigd overgenomen,
   alleen de selectors zijn nu die van wp_nav_menu(). */
.em-menu { position: relative; }
.em-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.em-menu__list li { margin: 0; }
.em-menu__leeg { font-size: var(--wp--preset--font-size--small); margin: 0; }
.em-header__panel .em-menu a {
	color: var(--wp--preset--color--heading);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.em-header__panel .em-menu a:hover { color: var(--wp--preset--color--primary); }
.em-menu__list .current-menu-item > a,
.em-menu__list .current-menu-ancestor > a { color: var(--wp--preset--color--primary); }
/* ---- Taalwisselaar (eigen disclosure, zie inc/taalwissel.php) ---- */
/* Alleen de taalcode in de merkkleur met een eigen chevron; het <select>-element dat
   Polylang meebracht liet zich niet zo opmaken en toonde de volledige taalnaam. */
.em-taalwissel { position: relative; display: flex; align-items: center; }
.em-taalwissel__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.2rem;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary);
	line-height: 1;
}
.em-taalwissel__knop:hover { color: var(--wp--preset--color--primary-dark); }
.em-taalwissel__chevron { transition: transform 0.2s ease; }
.em-taalwissel.is-open .em-taalwissel__chevron { transform: rotate(180deg); }

/* Het uitklappaneel hangt onder de knop, met een pijltje dat teruggrijpt naar de knop.
   display:none i.p.v. het hidden-attribuut, zodat de staat volledig in CSS zit en het
   script alleen een klasse hoeft om te zetten. */
.em-taalwissel__lijst {
	display: none;
	position: absolute;
	top: calc(100% + 0.85rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	min-width: 4.5rem;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(7, 52, 49, 0.16);
}
.em-taalwissel.is-open .em-taalwissel__lijst { display: block; }
/* Pijltje: een CSS-driehoek, niet een gedraaid vierkantje — dat laatste vangt de schaduw
   van het paneel op en levert een grijze veeg naast de punt op. */
.em-taalwissel__lijst::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 9px solid transparent;
	border-bottom-color: #fff;
	border-top-width: 0;
}
.em-taalwissel__lijst li { margin: 0; }
.em-taalwissel__lijst a {
	display: block;
	padding: 0.85rem 0.9rem;
	border-radius: 7px;
	text-align: center;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--heading);
	line-height: 1;
}
.em-taalwissel__lijst a:hover,
.em-taalwissel__lijst a:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}
/* telefoon = ronde teal icoonknop; komt uit [em_telefoonknop] (inc/site-gegevens.php).
   Het pictogram is een inline SVG die currentColor volgt, dus de kleur hoeft maar op één
   plek te staan. De 999px maakt hem rond zolang breedte en hoogte gelijk zijn — zo volgt
   hij vanzelf de pilvorm van het navigatiepaneel, dat dezelfde waarde gebruikt. */
.em-telefoonknop {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	text-decoration: none;
}
.em-telefoonknop svg { display: block; }
.em-telefoonknop:hover { background: var(--wp--preset--color--primary-dark); }

/* CTA-knop in de header. Zelfde hoogte als de telefoonknop ernaast, zodat de rij
   uitgelijnd blijft; tekst en link komen uit Site-instellingen (per taal). */
.em-header__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 1.25rem;
	border-radius: 10px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}
.em-header__cta:hover { background: var(--wp--preset--color--primary-dark); }

/* ---- Dropdown (submenu "Voor wie") ---- */
/* Eén niveau uitklap (depth=2 in de shortcode), zodat submenu-items uit Weergave → Menu's
   niet stilletjes verdwijnen. Openen op :hover én :focus-within: zonder die tweede kan een
   toetsenbordgebruiker het submenu niet bereiken. */
.em-menu__list > li { position: relative; }
.em-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 250px;
	margin-top: 0.7rem;
	background: #fff;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(7, 52, 49, 0.16);
	display: none;
}
.em-menu__list > li:hover > .sub-menu,
.em-menu__list > li:focus-within > .sub-menu { display: block; }
/* Onzichtbare brug over de gap, zodat de dropdown openblijft als de muis van het
   hoofditem naar het submenu gaat. */
.em-menu__list .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.7rem;
	height: 0.7rem;
}
.em-menu__list .sub-menu a {
	display: block;
	border-radius: 10px;
	padding: 0.55rem 0.9rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.78;
	font-weight: 400;
	white-space: normal;
}
.em-menu__list .sub-menu li:hover > a,
.em-menu__list .sub-menu li:focus-within > a {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

/* ---- Hamburger (alleen mobiel zichtbaar, zie responsive-blok onderaan) ---- */
.em-menu__toggle {
	display: none;
	flex-shrink: 0;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.5rem;
	line-height: 0;
}
.em-menu__bars, .em-menu__bars::before, .em-menu__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--heading);
	border-radius: 2px;
	content: '';
}
.em-menu__bars { position: relative; }
.em-menu__bars::before { position: absolute; top: -7px; }
.em-menu__bars::after { position: absolute; top: 7px; }

/* ============ Buttons ============ */
/* Pijl-icoon rechts, gelijk aan live (btn-arrow-icon); knop wordt space-between
   zodat label links en pijl rechts staan, ook bij variabele labelbreedte. */
.wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.wp-block-button__link::after {
	content: "\2192"; /* → */
	font-weight: 400;
	line-height: 1;
	flex-shrink: 0;
}

/* ---- Knopniveaus (zie europe_medicare_knopniveaus() in functions.php) ---- */
/*
 * Drie niveaus in plaats van core's vrijblijvende "Vullen"/"Omlijnd", die hiervoor door
 * elkaar werden gebruikt: dezelfde actie stond op de ene pagina gevuld en op de andere
 * omlijnd, waardoor de bezoeker niet ziet wat de hoofdactie is. De regel: één primaire
 * knop per sectie, secundair voor het alternatief ernaast, tertiair voor doorverwijzingen.
 *
 * Primair is bewust géén eigen kleurregel: de gevulde look komt al uit theme.json
 * (styles.elements.button). Een tweede definitie hier zou daarmee uit de pas kunnen lopen
 * zodra de merkkleur wijzigt.
 */
.wp-block-button.is-style-em-secundair .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
}
.wp-block-button.is-style-em-secundair .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
/* Tertiair: leest als een link, houdt de pijl uit de gedeelde knop-CSS hierboven. */
.wp-block-button.is-style-em-tertiair .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 0;
	padding: 0;
	justify-content: flex-start;
	border-radius: 0;
}
.wp-block-button.is-style-em-tertiair .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* Knoppen op een donkere ondergrond: dezelfde niveaus, omgekeerd contrast. */
.em-btn-on-dark .wp-block-button__link { background: #fff; color: var(--wp--preset--color--primary-dark); }
.em-btn-on-dark .wp-block-button__link:hover { background: var(--wp--preset--color--accent-light); }
.em-btn-on-dark-outline .wp-block-button__link { border-color: #fff; color: #fff; background: transparent; }
.em-btn-on-dark-outline .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--primary-dark); }

/* ============ Asymmetrische hoekafronding (EM-15) ============ */
/* Live gebruikt op beelden/kaarten steeds één hoek van 0 als visuele
   handtekening. Toepassen op sectie-afbeeldingen, kaarten en quote-kaarten. */
.em-radius-tl0 { border-radius: 0 20px 20px 20px; }
.em-radius-tr0 { border-radius: 20px 0 20px 20px; }
.em-radius-bl0 { border-radius: 20px 20px 20px 0; }
.em-radius-br0 { border-radius: 20px 20px 0 20px; }
.em-radius-tl0-lg { border-radius: 0 40px 40px 40px; }
.em-radius-tr0-lg { border-radius: 40px 0 40px 40px; }
.em-radius-bl0-lg { border-radius: 40px 40px 40px 0; }
.em-radius-br0-lg { border-radius: 40px 40px 0 40px; }

/* ============ Eyebrow-label ============ */
/* Live schrijft het label gewoon uit ("Een optimale zorgervaring") op 20px/28.
   De kapitalen en letterspacing die hier stonden waren een eigen toevoeging en
   maakten het label op 13,6px ook nog eens de kleinste tekst van de pagina. */
.em-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

/* ============ Fullscreen secties (conventie D7) ============ */
:root { --em-header-h: 97px; }
.em-fs { min-height: 100svh; }

/*
 * Grid-tracks staan overal op minmax(0, 1fr), nooit op kaal 1fr.
 *
 * Een grid-track heeft standaard `min-width: auto`, waardoor de langste ononderbroken
 * inhoud de minimumbreedte bepaalt: één lang woord ("tandartsassistenten") rekt dan de
 * track — en daarmee de hele pagina — buiten het scherm. Dat levert horizontaal scrollen
 * op mobiel op, met steeds een andere zichtbare klacht en telkens dezelfde oorzaak.
 */
/* ============ Hero (B03) – schermvullende split, foto vult rechterkolom ============ */
.em-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	padding: 0;
}
.em-hero.has-surface-background-color {
	background-color: #f1f4f0;
	background-image: radial-gradient(circle at 30% 30%, rgba(241, 244, 240, 0.5) 0%, rgba(5, 149, 141, 0.16) 100%);
}
/* witte variant (bv. werkwijze) i.p.v. de groenige radial-gradient */
.em-hero.is-grey.has-surface-background-color { background-color: #fff; background-image: none; }

/* De header ligt over de hero heen (zie margin-bottom bij header.wp-block-template-part),
   dus de tekstkolom moet zelf de hoogte van de balk vrijhouden. Zonder dit begint de
   inhoud op 3rem terwijl de balk tot 97px doorloopt: de eyebrow schoof dan onder het
   logo door zodra de viewport lager werd dan ~1000px (laptop, zeker mét adminbalk).
   Op hoge schermen is de kolom verticaal gecentreerd en viel het niet op. */
.em-hero__text {
	align-self: center;
	padding: calc(var(--em-header-h) + 1.5rem) var(--wp--style--root--padding-left, 1.5rem) 3rem;
}
.em-hero__text > :where(h1, p, .wp-block-buttons, .em-checklist) { max-width: 560px; }
.em-hero__text h1 { margin-top: 0; }
.em-hero__rule {
	border: 0;
	width: 64px;
	height: 3px;
	background: var(--wp--preset--color--primary);
	opacity: 1;
	margin: 1.5rem 0;
}
.em-hero__media {
	margin: 0;
	height: 100%;
}
.em-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 0 0 60px;
}

/* ============ Pagina-titelband (tekstpagina's / archief) — vrij van de zwevende header ============ */
.em-pagetitle { padding-top: calc(var(--em-header-h) + 2.5rem); }

/* ============ Hero – paginabanner (inner pages) ============ */
.em-pagehero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	overflow: hidden;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}
.em-pagehero__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.em-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-pagehero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(47, 82, 80,0.82) 0%, rgba(47, 82, 80,0.58) 48%, rgba(47, 82, 80,0.12) 100%);
}
.em-pagehero__content { position: relative; z-index: 2; max-width: 600px; padding-block: 2.5rem; }
.em-pagehero__content h1 { margin-top: 0.25rem; color: var(--wp--preset--color--base); }
.em-pagehero__content p:not(.em-eyebrow) { color: var(--wp--preset--color--base); }
.em-pagehero__content .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--base); border-color: rgba(255,255,255,0.6); }
.em-pagehero__content .is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,0.12); }

/* gecentreerde variant (Over ons): foto-kaart links ingesprongen, loopt rechts tot de schermrand;
   hoogte = titel + padding; mint-band loopt tot ~70% (kaart steekt er ~30% onderuit) */
.em-herocenter-wrap {
	--em-card-h: clamp(440px, 58vh, 580px);
	position: relative;
	padding: var(--em-header-h) 0 0 0;
}
.em-herocenter-wrap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--em-header-h) + var(--em-card-h) * 0.7);
	background: var(--wp--preset--color--surface);
	z-index: 0;
}
.em-pagehero--center {
	z-index: 1;
	justify-content: center;
	text-align: center;
	margin-left: clamp(2rem, 8vw, 11rem);
	min-height: var(--em-card-h);
	border-radius: 28px 0 0 28px;
	padding: clamp(3.5rem, 9vh, 6.5rem) clamp(2rem, 5vw, 5rem);
}
.em-pagehero--center::before { background: rgba(47, 82, 80, 0.62); }
.em-pagehero--center .em-pagehero__content {
	max-width: 820px;
	margin-inline: auto;
	/* tekst op het midden van de viewport (compenseer de linker-inspring van de kaart) */
	transform: translateX(calc(clamp(2rem, 8vw, 11rem) * -0.5));
}
.em-pagehero--center .em-hero__rule { margin-inline: auto; }

/* ============ Video-sectie ============ */
/* Het kader is een leeg 16:9-vlak met ronde hoeken waar een core Video- of Embed-blok
   in staat. Er zat hier ook een donkere tint plus een nep-play-knop (::before/::after)
   voor de oude statische placeholder; die placeholder bestaat niet meer, en in de
   editor lagen die twee lagen bovenop de uploadknop van een leeg blok. Weg dus. */
.em-video { padding-inline: clamp(1.5rem, 4vw, 40px); }
.em-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; }
.em-video__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Core levert het Video- en Embed-blok in een <figure>; die moet het kader vullen
   in plaats van zijn eigen marge en hoogte mee te brengen. */
.em-video__frame > figure { margin: 0; height: 100%; }
.em-video__frame .wp-block-embed__wrapper { height: 100%; }
/* Het Embed-blok maakt zijn eigen 16:9 met een ::before-opvulling. Binnen dit kader,
   dat al 16:9 is, levert dat een dubbele verhouding op — dus uitzetten. */
.em-video__frame .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
	content: none;
	padding-top: 0;
}

/* Zolang er geen video gekozen is, staat er alleen een leeg blok in het kader. Op de
   voorkant is dat een leeg vlak, dus die sectie valt weg. In de editor blijft hij
   staan — daar moet je hem juist zien om er een video in te zetten. */
.em-video:not(:has(video, iframe)) { display: none; }
.editor-styles-wrapper .em-video:not(:has(video, iframe)) { display: block; }

/* En in de editor mag het lege kader meegroeien met het keuzescherm van het blok
   ("Uploaden / Mediabibliotheek / Invoegen vanaf URL"). Met een vaste 16:9 en
   overflow:hidden werden die knoppen afgesneden zodra de editor smal staat. */
.editor-styles-wrapper .em-video__frame:not(:has(video, iframe)) {
	aspect-ratio: auto;
	overflow: visible;
}

/* ============ Checklist (algemeen) ============ */
.em-checklist { list-style: none; margin-left: 0; padding-left: 0; }
.em-checklist li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.5rem;
}
.em-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* ============ USP-pills (B04) ============ */
.em-usp__row { gap: 1.5rem; }
.em-usp__item {
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	padding: 1.15rem 1.75rem;
}
.em-usp__inner { gap: 0.85rem; align-items: center; flex-wrap: nowrap; }
.em-usp__icon { margin: 0; flex: 0 0 auto; }
.em-usp__icon img { width: 28px; height: 28px; }
.em-usp__label {
	margin: 0;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--medium);
}
.em-usp__label strong { color: inherit; font-weight: 700; }

/* ============ Tekst + Beeld (B05) – compact, breed beeld met ronde hoeken ============ */
.em-mediatext {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
	padding-block: clamp(4rem, 8vh, 6rem) !important;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}
/* Pagina's met de gecentreerde hero-kaart (hero-pagina-centraal, .em-herocenter-wrap)
   hebben een veel grotere inspring (clamp(2rem,8vw,11rem), zelfde als .em-pagehero--center)
   dan de standaard header/content-marge. Content daaronder lijnt uit met de kaart,
   niet met de kleinere 24px-marge, anders oogt de pagina niet als één grid. */
body:has(.em-herocenter-wrap) .em-mediatext,
body:has(.em-herocenter-wrap) .em-formsection,
body:has(.em-herocenter-wrap) .em-contactform {
	padding-inline: clamp(2rem, 8vw, 11rem);
}
/* min-width:0 op beide grid-items: zonder dit rekt CSS Grid een 1fr-track op
   tot de min-content-breedte van zijn kind (bv. één lang onafbreekbaar
   samengesteld Nederlands woord in de kop), waardoor de kolommen niet meer
   gelijk 50/50 verdelen maar de andere kolom (de afbeelding) inklemt. */
.em-mediatext__media, .em-mediatext__text { min-width: 0; }
.em-mediatext__media { margin: 0; aspect-ratio: 4 / 3; }
.em-mediatext__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 40px 40px 0 40px;
}
.em-mediatext__text { align-self: center; }
.em-mediatext__text > :where(h2, p, .wp-block-buttons, .em-checklist) { max-width: 560px; }
.em-mediatext__text h2 { margin-top: 0.25rem; }

/* ============ Voor wie wij werken (B06) – horizontale image-accordion ============ */
.em-panels {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	align-items: stretch;
	height: min(100svh, 800px);
	border-radius: 100px 0 0 0;
	overflow: hidden;
}
.em-panel {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-basis: 0;
	flex-shrink: 1;
	flex-grow: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	transition: flex-grow 0.45s ease;
}
/* achtergrondfoto vult het paneel */
.em-panel__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.em-panel__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* leesbaarheids-overlay onderaan */
.em-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(7, 52, 49, 0) 30%, rgba(7, 52, 49, 0.85) 100%);
}
.em-panel__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 460px;
	padding: 2.5rem;
	transition: opacity 0.35s ease;
}
.em-panel h3 {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
	margin: 0 0 0.5rem;
}
.em-panel .em-hero__rule { margin: 0.75rem 0 1rem; }
/* "+"-icoon op ingeklapte panelen */
.em-panel::after {
	content: "+";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 300 1.9rem/1 var(--wp--preset--font-family--heading);
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 3;
}
/* breedte-logica (gelijke specificiteit → bronvolgorde beslist) */
.em-panels .em-panel:first-child { flex-grow: 5; }
.em-panels:hover .em-panel { flex-grow: 1; }
.em-panels .em-panel:hover { flex-grow: 5; }
/* content + "+" zichtbaarheid: open (breed) vs ingeklapt (smal) */
.em-panel__content { opacity: 0; }
.em-panels .em-panel:first-child .em-panel__content { opacity: 1; }
.em-panels .em-panel:first-child::after { opacity: 0; }
.em-panels:hover .em-panel .em-panel__content { opacity: 0; }
.em-panels:hover .em-panel::after { opacity: 1; }
.em-panels .em-panel:hover .em-panel__content { opacity: 1; }
.em-panels .em-panel:hover::after { opacity: 0; }

/* ---- Editor (achterkant): accordion bewerkbaar tonen, geen hover-inklap ---- */
.editor-styles-wrapper .em-panels {
	flex-wrap: wrap;
	min-height: 0 !important;
	border-radius: 0;
	overflow: visible;
	gap: 12px;
}
.editor-styles-wrapper .em-panel {
	flex: 1 1 30% !important;
	min-height: 340px;
}
.editor-styles-wrapper .em-panel__content { opacity: 1 !important; max-width: none; }
.editor-styles-wrapper .em-panel::after { display: none !important; }
/* in de editor de bg-foto en overlay normaal tonen */
.editor-styles-wrapper .em-panel__bg { position: absolute; }
.is-style-em-doelgroep,
.em-doelgroep {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}
.em-doelgroep summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary-darker);
	cursor: pointer;
}
.em-doelgroep[open] summary { margin-bottom: 1rem; }
.em-doelgroep .wp-block-media-text__media img { border-radius: 10px; }

/* ============ Stappenplan (B07) ============ */
.em-stappen__row { gap: 1.5rem; flex-wrap: wrap; }
.em-stap {
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: 1.75rem;
}
.em-stap__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	margin: 0 0 0.75rem;
}
.em-stap h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--large); }

/* donkere variant (doelgroeppagina's) — live toont het stappenplan overal op
   een donkergroene band, niet alleen op de werkwijze-slider-variant. */
.em-stappen.em-stappen--dark {
	background: var(--wp--preset--color--primary-darker);
	border-radius: 0 0 clamp(40px, 6vw, 80px) 0;
}
.em-stappen--dark > .wp-block-heading { color: var(--wp--preset--color--base); }
.em-stappen--dark .em-stap { background: rgba(255, 255, 255, 0.06); }
.em-stappen--dark .em-stap h3 { color: var(--wp--preset--color--base); }
.em-stappen--dark .em-stap p { color: var(--wp--preset--color--base) !important; }
.em-stappen--dark .em-stap__num { background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary-darker); }

/* stappenplan – slider variant (werkwijze-pagina)
   Vaste afbeelding links, tekst-slides rechts. */
.em-stappen--slider {
	background: var(--wp--preset--color--primary-darker);
	padding: 4rem 0 5rem;
	border-radius: 0 0 clamp(60px, 8vw, 120px) 0;
	position: relative;
	overflow: hidden;
}
/* fade-overlay rechts: volgende tekst-slide piept zichtbaar maar vervaagt */
.em-stappen--slider::after {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 28%;
	background: linear-gradient(to right, transparent, var(--wp--preset--color--primary-darker) 70%);
	pointer-events: none;
	z-index: 10;
}
.em-stappen--slider .em-stappen__header {
	text-align: center;
	max-width: 860px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
}
.em-stappen__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas: "img text" "img nav";
	column-gap: 3rem;
	row-gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem;
	align-items: start;
}
/* afbeelding-panel (links): strekt zich uit over text- én nav-rij */
.em-stappen__image-panel {
	grid-area: img;
	align-self: stretch;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	min-height: 320px;
	min-width: 0;
}
.em-stappen__image-panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.em-stappen__image-panel .em-stap__num {
	position: absolute;
	top: 1rem; left: 1rem;
	width: 2.75rem; height: 2.75rem;
	margin: 0;
	z-index: 2;
	display: inline-flex;
}
/* tekst-slider (rechts) */
.em-stappen__text-track {
	grid-area: text;
	overflow: hidden; /* bug: stond op 'visible', waardoor niet-actieve stap-teksten
	                      zichtbaar bleven naast/over de actieve stap heen i.p.v.
	                      te verdwijnen buiten het geclipte venster. */
	min-width: 0; /* voorkomt dat overflow-content de gridkolom uitrekt */
}
.em-stappen__text-inner {
	display: flex;
	transition: transform 0.35s ease;
}
.em-stap__text-slide {
	flex: 0 0 100%;
	min-width: 0;
}
.em-stap__text-slide h3 {
	color: var(--wp--preset--color--base);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	line-height: 1.5;
	margin: 0 0 1rem;
}
.em-stap__text-slide p {
	color: var(--wp--preset--color--base);
	margin: 0;
}
/* navigatie-pijlen (rechts-onder) */
.em-stappen__nav {
	grid-area: nav;
	display: flex;
	gap: 0.75rem;
}
.em-stappen--slider .em-slider__arrow {
	position: static;
	transform: none;
	box-shadow: none;
}
@media (max-width: 768px) {
	.em-stappen__layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "img" "text" "nav";
	}
}

/* ============ Testimonials / reviews-slider (B08) ============ */
.em-reviews { position: relative; padding-block: 4rem; }
/* ingesprongen achtergrondpaneel dat rechts doorloopt */
.em-reviews::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 2.5rem;
	left: clamp(2rem, 8vw, 11rem);
	right: 0;
	background: var(--wp--preset--color--surface);
	border-radius: 40px 0 0 40px;
	height: 100%;
}
/* slider-track: overflowt rechts, scrollbaar */
.em-reviews__track {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 1rem 0 1.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.em-reviews__track::-webkit-scrollbar { display: none; }
/* inspring eerste card + trailing ruimte laatste card (betrouwbaar via marges) */
.em-reviews__track > .em-quote:first-child { margin-left: clamp(1.25rem, 4vw, 4rem); }
.em-reviews__track > .em-quote:last-child { margin-right: clamp(1.5rem, 5vw, 5rem); }
.em-reviews__track { scroll-padding-left: clamp(1.25rem, 4vw, 4rem); }
/* navigatiepijlen (door JS toegevoegd) — generiek voor alle sliders */
.em-slider-host { position: relative; }
.em-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(7, 52, 49, 0.18);
	transition: background 0.2s ease, opacity 0.2s ease;
}
.em-slider__arrow:hover { background: var(--wp--preset--color--primary-dark); }
.em-slider__arrow--prev { left: clamp(0.5rem, 2vw, 2rem); }
.em-slider__arrow--next { right: clamp(0.5rem, 2vw, 2rem); }
.em-slider__arrow:disabled { opacity: 0.35; cursor: default; }

.em-quote {
	flex: 0 0 clamp(280px, 31%, 420px);
	scroll-snap-align: start;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(7, 52, 49, 0.08);
	padding: 2rem;
}
.em-quote__name {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 0.75rem;
}
.em-quote__text {
	color: var(--wp--preset--color--heading);
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 1.4;
	margin: 0;
}
.em-quote__hearts {
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.18em;
	font-size: var(--wp--preset--font-size--medium);
	margin: 1.5rem 0 0;
}
/* editor: track als wrappend grid, geen paneel/overflow (cards bewerkbaar) */
.editor-styles-wrapper .em-reviews::before { display: none; }
.editor-styles-wrapper .em-reviews__track { flex-wrap: wrap; overflow: visible; padding: 0; }
.editor-styles-wrapper .em-quote { flex: 1 1 30%; }

/* ============ Team-galerij (B09) – slider met foto-overlay ============ */
.em-team {
	position: relative;
	--em-g: max(var(--wp--style--root--padding-left), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}
.em-team__heading {
	padding-inline: var(--em-g);
	margin-bottom: 2rem !important;
}
.em-team__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--em-g);
	scrollbar-width: none;
	padding-bottom: 1rem;
}
.em-team__track::before,
.em-team__track::after {
	content: '';
	flex: 0 0 var(--em-g);
}
.em-team__track::-webkit-scrollbar { display: none; }
/* kaart: full-bleed foto + wit label-overlay */
.em-team__card {
	flex: 0 0 clamp(240px, 26vw, 360px);
	scroll-snap-align: start;
	position: relative;
	border-radius: 20px 20px 20px 0;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	margin: 0;
}
.em-team__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
.em-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.em-team__label {
	position: absolute;
	bottom: 1.1rem;
	left: 1.1rem;
	z-index: 2;
	background: #fff;
	border-radius: 10px 10px 10px 0;
	padding: 0.55rem 0.85rem;
	max-width: calc(100% - 2.25rem);
}
.em-team__name strong { font-weight: inherit; }
.em-team__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 600;
	color: var(--wp--preset--color--heading);
	line-height: 1.4;
}
.em-team__role {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	line-height: 1.4;
}
/* pijlen voor teamslider: rechtsbovenin naast de heading */
.em-team .em-slider__arrow {
	top: 1.8rem;
	transform: none;
}
.em-team .em-slider__arrow--prev {
	left: auto;
	right: calc(var(--em-g) + 56px);
}
.em-team .em-slider__arrow--next {
	right: var(--em-g);
}
/* editor: wrappend grid zodat kaarten bewerkbaar blijven */
.editor-styles-wrapper .em-team__track { flex-wrap: wrap; overflow: visible; }
.editor-styles-wrapper .em-team__card { flex: 1 1 28%; aspect-ratio: 3 / 4; }

/* ============ Contactpersoon (B10) – zelfde grid als tekst+beeld-secties ============ */
.em-contactpersoon {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
	padding-block: clamp(4rem, 8vh, 6rem);
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}
.em-contactpersoon__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}
.em-contactpersoon__content h3 { margin: 0; }
.em-contactpersoon__content .wp-block-buttons { margin-top: 0.5rem; }
/* foto: normale, contained afbeelding met dezelfde afronding als overal
   (border-radius 40px 40px 0 40px) — géén full-bleed stretch meer. De
   kaart wordt er met position:absolute overheen gelegd (media = anker). */
.em-contactpersoon__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	min-width: 0;
}
.em-contactpersoon__foto { margin: 0; width: 100%; height: 100%; }
.em-contactpersoon__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 40px 40px 0 40px;
}
/* zwevende contactkaart over de foto — matcht live exact (gemeten via
   computed styles): surface-kleur (niet wit), geen schaduw, asymmetrische
   afronding (rechtsboven scherp), labels normaal gewicht/geen hoofdletters. */
.em-contactpersoon__kaart {
	position: absolute;
	bottom: 3rem;
	left: 2rem;
	z-index: 2;
	background: var(--wp--preset--color--surface);
	border-radius: 40px 0 40px 40px;
	padding: 2.5rem;
	box-shadow: none;
	min-width: 220px;
}
.em-contactpersoon__kaart-label {
	margin: 0 0 0.2rem !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--primary) !important;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.3;
}
.em-contactpersoon__kaart-waarde {
	margin: 0 0 1.25rem !important;
	font-weight: 600 !important;
	font-size: 1.125rem !important;
	color: var(--wp--preset--color--heading) !important;
	line-height: 1.35;
}
.em-contactpersoon__kaart-waarde:last-child { margin-bottom: 0 !important; }
.em-contactpersoon__kaart-waarde a {
	color: inherit;
	text-decoration: none;
}

/* ============ Beeldbanner (B16) – group+image ============ */
.em-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	overflow: hidden;
	padding: 2rem;
}
.em-banner__bg { position: absolute; inset: 0; margin: 0; z-index: 0; }
.em-banner__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(47, 82, 80, 0.42); }
.em-banner__title { position: relative; z-index: 2; margin: 0; }

/* ============ Dubbele CTA (B11) ============ */
.em-dualcta__row { gap: 1.5rem; }
.em-ctacard { border-radius: 16px; padding: 2.5rem; }
.em-ctacard :where(h3, p) { color: #fff; }
.em-ctacard p, .em-cta p { font-size: var(--wp--preset--font-size--large); }

/* ============ Enkele CTA / Purpose (B12/B13) ============ */
.em-cta :where(h2, p) { color: #fff; }

/* Samenwerken-kaart: inset card met golfpatroon, geen rechtsonder-radius */
.em-cta--kaart {
	margin-inline: clamp(1.5rem, 4vw, 3rem) !important;
	border-radius: 24px 24px 0 24px !important;
	background-color: var(--wp--preset--color--primary-darker) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M-100 80C100 55 300 125 500 90S900 50 1300 78' opacity='.22'/%3E%3Cpath d='M-100 170C130 145 320 210 530 175S920 140 1300 165' opacity='.19'/%3E%3Cpath d='M-100 265C110 240 330 295 540 265S940 235 1300 255' opacity='.16'/%3E%3Cpath d='M-100 360C120 338 310 385 520 358S940 331 1300 345' opacity='.13'/%3E%3Cpath d='M-100 440C150 420 340 460 560 440S980 410 1300 432' opacity='.10'/%3E%3Cpath d='M-100 20C180 8 380 55 600 30S1020 5 1300 22' opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
}
.em-cta--kaart .em-hero__rule {
	background: var(--wp--preset--color--primary);
	margin-inline: auto;
	margin-block: 1rem 1.75rem;
}

/* ============ Ankernavigatie (B14) ============ */
html { scroll-behavior: smooth; }
.em-anchornav { position: sticky; top: 73px; z-index: 50; }
.em-anchornav .wp-block-button__link { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* "Direct naar"-kaart + afbeelding eronder (werkwijze e.d.): scrollen als één
   vast blok mee tijdens het scrollen langs de langere contentkolom ernaast;
   scroll-margin voorkomt dat de sticky header een sectiekop na het springen
   verbergt. Sticky staat rechtstreeks op de bestaande wp:column (geen extra
   wrapper-block nodig — dat gaf "Block contains unexpected or invalid
   content" in de editor). De kolom wordt door flex-stretch normaal even hoog
   als de content ernaast, wat een sticky element geen "speelruimte" geeft om
   in te bewegen — opgelost door align-items:flex-start op de columns-rij,
   zodat de kolom zelf op zijn eigen (kortere) inhoudshoogte blijft terwijl de
   rij als geheel wel de hoogte van de langere contentkolom aanhoudt. */
.wp-block-columns:has(.em-directnaar-col) { align-items: flex-start !important; }
.em-directnaar-col { position: sticky; top: calc(var(--em-header-h) + 1.5rem); }
/* Onder de kolom-breakpoint van WordPress (781px) stapelen de kolommen en staat het
   blok bóven de tekst in plaats van ernaast. Sticky heeft dan geen naastliggende
   kolom meer om langs te bewegen, maar wél de volle hoogte van de rij als speelruimte:
   het blok bleef daardoor over de doorlopende tekst heen hangen. Op mobiel dus gewoon
   meescrollen. */
@media (max-width: 781px) {
	.em-directnaar-col { position: static; }
}
#samenwerking, #voor-wie, #zo-werken-wij, #specialisten, #praktijk,
#waarom, #veilige-praktijk, #werkwijze, #outsourcing, #ouderenzorg,
#gehandicaptenzorg, #ggz, #mirjam {
	scroll-margin-top: calc(var(--em-header-h) + 1.5rem);
}

/* ============ Keurmerken (B17) – witte chip op donkere footer ============ */
.em-keurmerken { gap: 1.5rem; align-items: center; justify-content: flex-start; }
.em-keurmerk img { border-radius: 6px; }

/* ============ Route (B22) ============ */
.em-route__map { min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 2rem; }

/* ============ Contactpagina: kaart + kaartafbeelding + formulier ============ */
.em-contactcard {
	background: var(--wp--preset--color--surface);
	border-radius: 24px;
	padding: 2.5rem;
}
.em-contactcard__rule { margin: 1.25rem 0; opacity: 1; border-color: rgba(47, 82, 80, 0.1); }
.em-contactcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.em-contactcard__label { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--wp--preset--color--primary); }
.em-contactcard__value { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.333; font-weight: 600; color: var(--wp--preset--color--heading); }
.em-contactcard__value a { color: inherit; text-decoration: none; }

.em-contactmap { position: relative; margin-top: 1.5rem; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; }
.em-contactmap__img { margin: 0; height: 100%; }
.em-contactmap__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-contactmap__btn {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
}

/* Gravity Forms (contact + sollicitatie): teal huisstijl i.p.v. GF-standaardblauw,
   sitebreed toegepast (niet per sectie) zodat elk formulier meteen op-brand oogt. */
.gform_wrapper.gravity-theme { --gf-color-primary: var(--wp--preset--color--primary); }
.gform_required_legend { display: none; }
/* GF levert zijn eigen labeltypografie mee: 14px, gewicht 500, in een donkerblauw
   (#112337) dat nergens in de huisstijl voorkomt. Live zet formulierlabels gewoon
   in de bodytekststijl (18/32). Het framework-thema van GF stuurt die opmaak via
   eigen custom properties aan — een gewone font-size-regel wordt daardoor
   overschreven, dus zetten we de tokens zelf. */
/* `body` ervoor omdat GF dezelfde tokens op `.gform-theme--framework` zet en zijn
   stylesheet ná deze inlaadt — zonder dat extra stukje specificiteit wint GF. */
body .gform-theme--framework,
body .gform_wrapper.gravity-theme {
	--gf-ctrl-label-font-family-primary: var(--wp--preset--font-family--body);
	--gf-ctrl-label-font-family-secondary: var(--wp--preset--font-family--body);
	--gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--medium);
	--gf-ctrl-label-font-size-secondary: var(--wp--preset--font-size--medium);
	--gf-ctrl-label-font-weight-primary: 400;
	--gf-ctrl-label-font-weight-secondary: 400;
	--gf-ctrl-label-line-height-primary: 1.78;
	--gf-ctrl-label-line-height-secondary: 1.78;
	--gf-ctrl-label-color-primary: var(--wp--preset--color--heading);
	--gf-ctrl-label-color-secondary: var(--wp--preset--color--heading);
	--gf-ctrl-label-color-tertiary: var(--wp--preset--color--heading);
	--gf-ctrl-label-color-quaternary: var(--wp--preset--color--heading);
	--gf-color-out-ctrl-dark-darker: var(--wp--preset--color--heading);
	--gf-color-out-ctrl-dark: var(--wp--preset--color--heading);
	--gf-ctrl-font-family: var(--wp--preset--font-family--body);
	--gf-ctrl-size-font-size: var(--wp--preset--font-size--medium);
	--gf-ctrl-color: var(--wp--preset--color--heading);
}
/* GF zet per formulier ook nog een inline <style> met een ID-selector; die wint van
   elke token-override hierboven. De kleur zelf zetten we daarom rechtstreeks op het
   label — dat is een gewone eigenschap en dus niet aan die tokens gebonden. */
body .gform_wrapper .gfield_label,
body .gform_wrapper legend.gfield_label,
body .gform_wrapper .gform-field-label {
	color: var(--wp--preset--color--heading);
}
.em-contactform .gform_fields { row-gap: 1.5rem !important; column-gap: 1.5rem !important; }
.ginput_container input,
.ginput_container textarea {
	border-radius: 12px !important;
	border-color: rgba(47, 82, 80, 0.15) !important;
}
.gform_button.button {
	background: var(--wp--preset--color--primary) !important;
	border: none !important;
	border-radius: 32px !important;
	padding: 0.9rem 1.75rem !important;
	font-weight: 600;
	cursor: pointer;
}
.gform_button.button:hover { background: var(--wp--preset--color--primary-darker) !important; }
.gform_fields .gfield--type-fileupload input[type="file"] { font-size: var(--wp--preset--font-size--small); }

/* ============ Footer (B02) – licht ============ */
.em-footer { padding-block: 4rem 2rem; }
.em-footer__cols { gap: 2rem; }
.em-footer__logo { display: inline-block; margin-top: 0; }
/* Live houdt in de footer drie tinten aan: kolomlinks in warm grijs, de
   routeverwijzing in de merkkleur en de onderbalk in lichtgrijs. Die twee grijzen
   staan bewust niet in het palet — ze horen alleen hier. */
.em-footer a { color: #4a4a4a; text-decoration: none; }
.em-footer a:hover { color: var(--wp--preset--color--primary); }
.em-footer__title { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--large); line-height: 1.6; }
.em-adres__route a, .em-footer__social a { color: var(--wp--preset--color--primary); }
.em-footer__social { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; gap: 1.25rem; }
/* Footer-menu's ([em_menu location="footer-*"]): onder elkaar, zelfde look als de
   hardgecodeerde lijsten die ze vervangen. */
.em-menu--footer .em-menu__list { display: block; }
.em-menu--footer .em-menu__list li { margin: 0 0 0.5rem; }
/* De onderbalk (disclaimer/privacy) staat juist wél op één regel. */
.em-menu--footer-legal .em-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}
.em-menu--footer-legal .em-menu__list li { margin: 0; }
.em-footer__bottom, .em-footer__bottom p, .em-menu--footer-legal a { color: #9c9ea1; }
.em-menu--footer-legal a:hover { color: var(--wp--preset--color--primary); }
.em-adres { margin: 0; color: var(--wp--preset--color--heading); }
.em-adres__route { margin: 0.75rem 0 0; }
.em-gegevens__leeg { font-size: var(--wp--preset--font-size--small); }
.em-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ============ Vacature-overzicht ============ */
.em-vacature-filters { margin-bottom: 2rem; }
.em-vacature-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
/* Drie gelijkvormige dropdowns; de chips en het zoekveld zijn vervallen (zie
   europe_medicare_vacature_filterbar_shortcode). Een eigen pijltje via background-image,
   want een <select> laat zijn standaardpijl niet stylen — zelfde aanpak als de taalkiezer
   in de header. */
.em-vacature-filters__select {
	appearance: none; -webkit-appearance: none;
	padding: 0.55rem 2.2rem 0.55rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a68' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 12px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--heading);
	cursor: pointer;
}
.em-vacature-filters__select:hover,
.em-vacature-filters__select:focus { border-color: var(--wp--preset--color--primary); outline: none; }
.em-vacature-filters__count { margin: 1rem 0 0; font-size: 1rem; color: var(--wp--preset--color--heading); }

/* De kop, het bovenkopje en de introtekst van het vacature-overzicht komen uit
   Vacatures → Kop & introtekst. Maakt de klant er één leeg, dan blijft het lege
   element staan — met bijbehorende marge. Die halen we hier weg. */
.em-pagetitle > p:empty,
.em-pagetitle > h1:empty { display: none; }

.em-vacature-grid { row-gap: 1.75rem !important; column-gap: 1.5rem !important; }
/* eigen display:flex hieronder wint anders van de browser-standaard [hidden]{display:none},
   want auteur-CSS gaat altijd vóór user-agent-CSS — nodig voor het filter-script. */
.wp-block-post-template.em-vacature-grid > li.wp-block-post[hidden] { display: none !important; }
.wp-block-post-template.em-vacature-grid > li.wp-block-post {
	list-style: none; margin: 0; border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px; overflow: hidden; background: var(--wp--preset--color--base);
	display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
	position: relative;
}
/* Hele kaart klikbaar. De titellink wordt met een pseudo-element over de kaart
   uitgerekt, dus er blijft één link per kaart: voor toetsenbord en schermlezer
   verandert er niets, en er komt geen JS aan te pas. De focusring verhuist mee
   naar de kaart, anders licht alleen de titel op. */
.em-vacature-card__body .wp-block-post-title a::after {
	content: ""; position: absolute; inset: 0;
}
.wp-block-post-template.em-vacature-grid > li.wp-block-post:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px;
}
.em-vacature-card__body .wp-block-post-title a:focus-visible { outline: none; }
.wp-block-post-template.em-vacature-grid > li.wp-block-post:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(18,42,40,.28); }
.em-vacature-card__media { position: relative; margin: 0; }
.em-vacature-card__media .wp-block-post-featured-image { margin: 0; }
.em-vacature-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.em-vacature-card__media:not(:has(img)) { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-darker)); }
.em-vacature-badge:empty { display: none; }
.em-vacature-badge:not(:empty) {
	position: absolute; top: 0.8rem; right: 0.8rem; background: var(--wp--preset--color--accent);
	color: #fff; font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: 0.25rem 0.6rem; border-radius: 999px; margin: 0;
}
.em-vacature-card__body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.em-vacature-card__body .wp-block-post-title { margin: 0; font-size: var(--wp--preset--font-size--large); }
.em-vacature-card__body .wp-block-post-title a { color: var(--wp--preset--color--heading); text-decoration: none; }
.em-vacature-card__loc { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--heading); gap: 0.4rem !important; }
.em-vacature-card__loc p { margin: 0; }
.em-vacature-card__loc .wp-block-post-terms { margin: 0; }
.em-vacature-card__loc .wp-block-post-terms::before { content: "· "; }
.em-vacature-card__tags { margin-top: auto; padding-top: 0.4rem; gap: 0.4rem !important; }
.em-vacature-card__tags a, .em-vacature-card__tags p {
	margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--accent-light); padding: 0.2rem 0.55rem; border-radius: 6px; text-decoration: none;
}

/* ============ Vacature-detail ============ */
.em-vacature-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
/* De hero-group heeft layout "constrained", en die regel geeft élk direct kind
   max-width: contentSize + auto-marges. Bij een absoluut gepositioneerde laag
   telt die max-width gewoon mee: de foto bleef daardoor op contentbreedte in het
   midden hangen met lege randen ernaast. Kindselector = specifieker dan de
   layoutregel, dus geen !important nodig. */
.em-vacature-hero > .em-vacature-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	margin: 0; max-width: none; width: 100%;
}
.em-vacature-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.em-vacature-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(0deg, rgba(47, 82, 80,.85), rgba(47, 82, 80,.35));
}
.em-vacature-hero:not(:has(.em-vacature-hero__bg img))::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-darker));
}
.em-vacature-hero__content { position: relative; z-index: 2; padding: 2.5rem clamp(1.5rem, 5vw, 4rem) 3rem; color: #fff; width: 100%; }
.em-vacature-hero__badges { gap: 0.5rem !important; margin-bottom: 1rem; }
.em-vacature-hero__badges .wp-block-post-terms { display: contents; }
.em-vacature-hero__badges a, .em-vacature-hero__badges p {
	display: inline-flex; align-items: center; line-height: 1;
	margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	background: rgba(255,255,255,.18); color: #fff; padding: 0.3rem 0.7rem; border-radius: 999px; text-decoration: none;
}
.em-vacature-hero__content h1 { color: #fff; font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); margin: 0; }
.em-vacature-hero__loc { margin-top: 0.5rem; opacity: 0.9; font-size: 1rem; }

.em-vacature-layout { gap: 3rem !important; }
.em-vacature-apply-section { border-top: 1px solid var(--wp--preset--color--border); }
.em-related-vacatures { border-top: 1px solid var(--wp--preset--color--border); }
.em-related-vacatures__query .wp-block-post-template { row-gap: 1.25rem !important; column-gap: 1.25rem !important; }
.em-related-vacatures__query li.wp-block-post {
	list-style: none; margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}
.em-related-vacatures__query .wp-block-post-title { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--medium); }
.em-related-vacatures__query .wp-block-post-title a { color: var(--wp--preset--color--heading); text-decoration: none; }
.em-related-vacatures__query .wp-block-group { gap: 0.35rem !important; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--heading); }
.em-related-vacatures__query .wp-block-post-terms { margin: 0; }
.em-related-vacatures__query .wp-block-post-terms::before { content: "· "; }

/* zelfde bewezen patroon als "Direct naar" (werkwijze e.d.): sticky rechtstreeks
   op de wp:column + align-items:flex-start op de rij, zodat de kolom niet door
   flex-stretch exact even hoog wordt als de langere contentkolom ernaast. */
.wp-block-columns.em-vacature-layout:has(.em-vacature-sidebar-col) { align-items: flex-start !important; }
.em-vacature-sidebar-col { position: sticky; top: calc(var(--em-header-h) + 1.5rem); }
.em-vacature-apply-btn .wp-block-button__link { width: 100%; justify-content: center; }

/* ============ Mobile ============ */
@media (max-width: 781px) {
	/* op mobiel header gewoon in flow (geen overlap) */
	header.wp-block-template-part { margin-bottom: 0; }

	/* Hoofdmenu klapt uit onder de hamburger. Het paneel hangt onder de héle header
	   (position: static op de nav zelf), niet onder de smalle nav — anders steekt het bij
	   een smal scherm buiten beeld. .em-header is al een positioned element door de
	   zwevende-balk-styling, dus daar haakt het paneel op aan. */
	/* Pas hier breken ook de grote koppen af.
	   Op desktop is een kolom breed genoeg dat "mondzorg" gewoon past, en dan leest een
	   display-kop met koppeltekens ("Mobiele mond-/zorg voor kwets-/bare mensen") duidelijk
	   slechter dan een normale regelafbreking. Op een smal scherm draait die afweging om:
	   daar is één lang woord wél breed genoeg om de pagina buiten beeld te duwen. */
	h1, h2, h3, .wp-block-heading { hyphens: auto; }

	.em-header { position: relative; }
	/* Logo en paneel moeten allebei kunnen krimpen; anders bepaalt de som van hun
	   natuurlijke breedtes de paginabreedte en scrollt de hele site horizontaal. */
	.em-header__inner { gap: 0.5rem; min-width: 0; }
	.em-header__inner > * { min-width: 0; }
	/* De taalwisselaar toont sinds het nieuwe ontwerp alleen de code ("NL") in plaats van de
	   volledige naam ("Nederlands"). Dat scheelt zo'n 70px in de balk, dus het logo hoeft
	   veel minder in te leveren dan eerst. */
	.em-logo img { width: 150px !important; }
	.em-header__panel { padding: 0.35rem 0.4rem; gap: 0.25rem !important; min-width: 0; }
	.em-taalwissel { flex-shrink: 0; }
	.em-telefoonknop { width: 40px; height: 40px; }

	/* Onder ~360px (iPhone SE en smaller) levert het logo nog wat extra in. */
	@media (max-width: 360px) {
		.em-logo img { width: 122px !important; }
	}

	.em-menu--hoofdmenu { position: static; }
	.em-menu--hoofdmenu .em-menu__toggle { display: block; }
	.em-menu--hoofdmenu .em-menu__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 1rem;
		right: 1rem;
		z-index: 30;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.75rem 0;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 18px 44px rgba(7, 52, 49, 0.16);
	}
	.em-menu--hoofdmenu.is-open .em-menu__list { display: flex; }
	.em-menu--hoofdmenu .em-menu__list > li { width: 100%; }
	.em-menu--hoofdmenu .em-menu__list a { display: block; padding: 0.5rem 1.25rem; }
	/* Submenu op mobiel gewoon ingesprongen open: een hover-dropdown bestaat hier niet. */
	.em-menu--hoofdmenu .em-menu__list .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		border-radius: 0;
		min-width: 0;
		margin-top: 0;
		padding: 0 0 0 0.75rem;
	}
	.em-menu--hoofdmenu .em-menu__list .sub-menu::before { content: none; }

	/* paginabanner: lichte overlay over volle breedte + compacter */
	.em-pagehero { min-height: 70svh; }
	.em-pagehero::before { background: rgba(241, 243, 240, 0.88); }
	/* fullscreen secties krijgen op mobiel natuurlijke hoogte (content stapelt) */
	.em-hero, .em-mediatext, .em-doelgroepen { min-height: 0; }
	/* hero: tekst boven, foto eronder met vaste verhouding */
	.em-hero { grid-template-columns: minmax(0, 1fr); }
	.em-hero__text { padding: 2.5rem 1.25rem; }
	.em-hero__media img { height: auto; aspect-ratio: 4/3; border-radius: 0 0 0 40px; }
	/* tekst+beeld: één kolom, tekst boven, foto eronder */
	.em-mediatext { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.em-mediatext__media { order: 2; aspect-ratio: 4 / 3; }
	.em-mediatext__text { order: 1; }
	/* image-accordion: verticaal stapelen, alles open, geen "+" */
	.em-panels { flex-direction: column; height: auto; min-height: 0; gap: 4px; border-radius: 40px 0 0 0; }
	.em-panel { flex: none; min-height: 56vw; }
	.em-panel__content { opacity: 1 !important; max-width: none; }
	.em-panel::after { display: none; }
	.em-stappen__row, .em-quotes__row, .em-dualcta__row { gap: 1rem; }
	.em-usp__row { gap: 0.75rem; }
	.em-team__card { flex: 0 0 72vw; }
	.em-team .em-slider__arrow { top: 1.5rem; }
	.em-anchornav { position: static; }
	.em-contactpersoon { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	/* De kaart ligt absoluut over de foto. Met alleen een `left` en een min-width bepaalt
	   haar eigen inhoud de breedte, en op een smal scherm steekt ze daarmee buiten de
	   pagina — de laatste overgebleven bron van horizontaal scrollen op 375px. Een `right`
	   erbij geeft haar twee ankers, zodat ze meekrimpt in plaats van uit te dijen. */
	.em-contactpersoon__kaart {
		bottom: 1.5rem;
		left: 1.25rem;
		right: 1.25rem;
		min-width: 0;
		padding: var(--wp--preset--spacing--40);
	}
	.em-contactcard { padding: 1.75rem; }
	.em-contactform .gform_fields { grid-template-columns: minmax(0, 1fr) !important; }
	.em-contactform .gfield--width-half { grid-column: span 12 !important; }
	.em-vacature-grid { grid-template-columns: minmax(0, 1fr) !important; }
	/* Onder elkaar en volle breedte: drie pillen naast elkaar passen niet op een telefoon,
	   en half afgekapte dropdowns zijn lastiger te raken dan volle-breedte rijen. */
	.em-vacature-filters__row { flex-direction: column; align-items: stretch; }
	.em-vacature-filters__select { width: 100%; }
	.em-vacature-sidebar-col { position: static; margin-top: 2rem; }
	.em-related-vacatures__query .wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============ Elementen-pagina (patternoverzicht voor beheerders) ============ */
/* Labels boven elke sectie, zodat het overzicht te scannen is zonder in de code te kijken.
   Bewust nadrukkelijk anders vormgegeven dan de site zelf: het zijn bijschriften bij de
   secties, geen onderdeel ervan. */
.em-elementen__cat {
	margin: var(--wp--preset--spacing--80) auto var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1rem;
}
.em-elementen__label {
	margin: var(--wp--preset--spacing--70) auto var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}
.em-elementen__slug { margin: 0 auto var(--wp--preset--spacing--30); }
.em-elementen__slug code {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.15em 0.5em;
	font-size: 0.85em;
}