/*
Theme Name: OBC E-portfolio
Theme URI: https://e-sportfolio.nl
Description: Klassiek thema voor de plugin OBC E-portfolio, met eigen instellingenpagina (menu Thema): kop met menu per rol, voorpagina met inloggen, inlogscherm, voettekst met privacy en contact, en opmaak voor alle schermen van de plugin (dashboard, portfolio, begeleiding, registratie). Huisstijl oranje en blauw.
Version: 2.4.0
Requires at least: 6.4
Requires PHP: 8.1
Author: OBC
Text Domain: obc-eportfolio-thema
License: Proprietary
*/

:root {
	--ep-navy: #0b3a73;
	--ep-navy-donker: #072a55;
	--ep-blauw: #0181c4;
	--ep-link: #0170ab;
	--ep-blauw-licht: #e8f3fa;
	--ep-oranje: #fc6719;
	--ep-oranje-licht: #fff1e8;
	--ep-groen: #2f7d32;
	--ep-groen-licht: #e9f5ea;
	--ep-bruin: #a84300;
	--ep-bruin-licht: #fff3e8;
	--ep-rood: #b42318;
	--ep-rood-licht: #fdecea;
	--ep-inkt: #17212e;
	--ep-inkt-zacht: #3d4753;
	--ep-grijs: #5a6675;
	--ep-lijn: #dde3ea;
	--ep-lijn-licht: #edf1f5;
	--ep-achter: #f4f6f9;
	--ep-wit: #ffffff;
	--ep-radius: 10px;
	--ep-radius-klein: 6px;
	--ep-schaduw: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
	--ep-font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--ep-breed: 72rem;
	/* Overschreven door de thema-instellingen (inc/kleuren.php): */
	--ep-accent-vlak: var(--ep-oranje);
	--ep-accent-tekst: var(--ep-navy-donker);
	--ep-accent-als-tekst: #a84300;
	--ep-voet: var(--ep-navy);
	--ep-held-laag: 11, 58, 115;
}

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ep-achter);
	color: var(--ep-inkt);
	font-family: var(--ep-font);
	font-size: 1.0625rem;
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--ep-navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1875rem; }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--ep-link); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--ep-navy); }
:focus-visible { outline: 3px solid var(--ep-oranje); outline-offset: 2px; border-radius: 2px; }
hr { border: 0; border-top: 1px solid var(--ep-lijn); margin: 2rem 0; }
::selection { background: var(--ep-oranje-licht); }

.screen-reader-text, .ep-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ep-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--ep-navy); color: var(--ep-wit); border-radius: var(--ep-radius-klein); font-weight: 700; }
.ep-skip:focus { top: 1rem; color: var(--ep-wit); }

.ep-breed { width: 100%; max-width: var(--ep-breed); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* Knoppen (ook voor formulieren van WordPress en de plugin) */
.ep-knop,
.wp-block-button__link,
#wp-submit,
input[type="submit"],
button[type="submit"]:not(.obcep-knop-link) {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 2.75rem; padding: .5rem 1.25rem;
	border: 2px solid var(--ep-navy); border-radius: 999px;
	background: var(--ep-navy); color: var(--ep-wit);
	font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none;
	cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.ep-knop:hover,
.wp-block-button__link:hover,
#wp-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.obcep-knop-link):hover { background: var(--ep-navy-donker); border-color: var(--ep-navy-donker); color: var(--ep-wit); }
.ep-knop--oranje { background: var(--ep-accent-vlak); border-color: var(--ep-accent-vlak); color: var(--ep-accent-tekst); }
.ep-knop--oranje:hover { background: color-mix(in srgb, var(--ep-accent-vlak) 88%, #000); border-color: color-mix(in srgb, var(--ep-accent-vlak) 88%, #000); color: var(--ep-accent-tekst); }
.ep-knop--rand { background: transparent; color: var(--ep-navy); }
.ep-knop--rand:hover { background: var(--ep-navy); color: var(--ep-wit); }
.ep-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Velden */
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="date"],
input[type="number"], input[type="search"], input[type="tel"], select, textarea {
	width: 100%; min-height: 2.75rem; padding: .5rem .75rem;
	border: 1px solid #b9c3cf; border-radius: var(--ep-radius-klein);
	background: var(--ep-wit); color: var(--ep-inkt); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ep-blauw); box-shadow: 0 0 0 3px rgba(1, 129, 196, .2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ep-navy); }
label { font-weight: 700; }

/* Kaart */
.ep-kaart { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius); box-shadow: var(--ep-schaduw); padding: clamp(1.25rem, 3vw, 2rem); }

/* Kop */
.ep-kop { background: var(--ep-wit); border-top: 4px solid var(--ep-oranje); border-bottom: 1px solid var(--ep-lijn); position: relative; z-index: 10; }
.ep-kop__binnen { display: flex; align-items: center; gap: 1rem 2rem; min-height: 4.5rem; flex-wrap: wrap; padding-block: .5rem; }
.ep-merk { display: flex; align-items: center; gap: .875rem; text-decoration: none; color: var(--ep-navy); margin-right: auto; }
.ep-merk img { display: block; height: 2.75rem; width: auto; }
.ep-merk__naam { font-size: .875rem; font-weight: 700; line-height: 1.25; color: var(--ep-grijs); padding-left: .875rem; border-left: 1px solid var(--ep-lijn); max-width: 12rem; }
.ep-nav__knop { display: none; }
.ep-nav__lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem 1.5rem; flex-wrap: wrap; }
.ep-nav__lijst a { display: block; padding: .5rem 0; color: var(--ep-inkt); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.ep-nav__lijst a:hover { color: var(--ep-navy); border-bottom-color: var(--ep-lijn); }
.ep-nav__lijst .current-menu-item > a,
.ep-nav__lijst a[aria-current="page"] { color: var(--ep-navy); border-bottom-color: var(--ep-oranje); }
.ep-gebruiker { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; }
.ep-gebruiker__naam { display: grid; line-height: 1.25; text-align: right; }
.ep-gebruiker__naam strong { color: var(--ep-navy); }
.ep-gebruiker__naam a { text-decoration: none; }
.ep-gebruiker__naam a:hover strong { text-decoration: underline; }
.ep-gebruiker__rol { color: var(--ep-grijs); font-size: .8125rem; }
.ep-gebruiker__uit { font-weight: 700; white-space: nowrap; }
.ep-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ep-blauw-licht); color: var(--ep-navy); display: grid; place-items: center; font-weight: 800; font-size: .875rem; flex-shrink: 0; }

@media (max-width: 52rem) {
	.ep-merk__naam { display: none; }
	.ep-nav__knop {
		display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .875rem;
		border: 1px solid var(--ep-lijn); border-radius: 999px; background: var(--ep-wit); color: var(--ep-navy);
		font: inherit; font-weight: 700; cursor: pointer;
	}
	.ep-nav__knop::before { content: ""; width: 1rem; height: .75rem; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
	.ep-nav, .ep-gebruiker { flex-basis: 100%; }
	.ep-js .ep-nav:not(.is-open), .ep-js .ep-nav:not(.is-open) + .ep-gebruiker { display: none; }
	.ep-nav__lijst { flex-direction: column; gap: 0; border-top: 1px solid var(--ep-lijn); }
	.ep-nav__lijst a { padding: .75rem 0; border-bottom: 1px solid var(--ep-lijn-licht); }
	.ep-nav__lijst .current-menu-item > a, .ep-nav__lijst a[aria-current="page"] { border-bottom-color: var(--ep-lijn-licht); box-shadow: inset 4px 0 0 var(--ep-oranje); padding-left: .875rem; }
	.ep-gebruiker { justify-content: space-between; padding-bottom: .5rem; }
	.ep-gebruiker__naam { text-align: left; }
}

/* Inhoud */
.ep-main { flex: 1 0 auto; padding-block: clamp(1.5rem, 4vw, 3rem); }
.ep-pagina__kop { margin-bottom: 1.5rem; }
.ep-inhoud > :first-child { margin-top: 0; }
.ep-inhoud > :last-child { margin-bottom: 0; }
.ep-inhoud ul, .ep-inhoud ol { padding-left: 1.25rem; }
.ep-pagina--tekst .ep-inhoud { max-width: 44rem; }
.ep-pagina--smal { max-width: 40rem; }
.ep-pagina--smal .ep-pagina__kop { text-align: left; }
.ep-berichten { display: grid; gap: 1rem; }
.ep-bericht h2 { font-size: 1.25rem; }
.ep-bericht h2 a { text-decoration: none; color: inherit; }

/* Voorpagina */
.ep-voorpagina .ep-main { padding-block: 0; }
.ep-held { background: var(--ep-wit); border-bottom: 1px solid var(--ep-lijn); }
.ep-held__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 7vw, 5rem); }
.ep-bovenkop { font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-accent-als-tekst); margin-bottom: .75rem; }
.ep-held--beeld { position: relative; isolation: isolate; background: rgb(var(--ep-held-laag)) var(--ep-held-beeld) center / cover no-repeat; border-bottom: 0; }
.ep-held--beeld::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--ep-held-laag), var(--ep-held-donker, .75)); }
.ep-held--beeld .ep-held__tekst, .ep-held--beeld h1, .ep-held--beeld .ep-intro, .ep-held--beeld .ep-bovenkop { color: #fff; }
.ep-held--beeld .ep-knop--rand { border-color: #fff; color: #fff; }
.ep-held--beeld .ep-knop--rand:hover { background: #fff; color: var(--ep-navy); }
.ep-held--zonder-inloggen .ep-held__raster { grid-template-columns: minmax(0, 1fr); }
.ep-held--zonder-inloggen .ep-intro { max-width: 44rem; }
.ep-voorpagina__blok { padding-bottom: clamp(2rem, 5vw, 3rem); }
.ep-voorpagina__blok:first-of-type, .ep-held + .ep-voorpagina__blok { padding-top: clamp(2.5rem, 6vw, 4rem); }
.ep-tekstblok { max-width: 52rem; }
.ep-held h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); margin-bottom: 1rem; }
.ep-intro { font-size: 1.1875rem; color: var(--ep-grijs); max-width: 34rem; margin-bottom: 1.75rem; }
.ep-inloggen h2 { font-size: 1.375rem; }
.ep-inloggen form p { margin-bottom: 1rem; }
.ep-inloggen .login-remember label { font-weight: 400; display: flex; gap: .5rem; align-items: center; }
.ep-inloggen .login-submit { margin-bottom: 0; }
.ep-inloggen__voet { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ep-lijn); font-size: .9375rem; }
.ep-uitleg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; }
.ep-uitleg h2 { font-size: 1.25rem; }
.ep-stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; display: grid; gap: 1rem; }
.ep-stappen li { counter-increment: stap; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.ep-stappen li::before { content: counter(stap); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ep-oranje-licht); color: var(--ep-bruin); font-weight: 800; font-size: .9375rem; }
.ep-voorpagina__inhoud { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
@media (max-width: 52rem) { .ep-held__raster { grid-template-columns: minmax(0, 1fr); } }
.ep-held__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.ep-inloggen, .ep-blok, .ep-blok [id] { scroll-margin-top: 1.5rem; }

/* Voorpagina-blokken (templates/voorpagina/) */
.ep-voorpagina .ep-main { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.ep-blok { padding-top: clamp(3.5rem, 8vw, 6rem); }
.ep-blok .ep-bovenkop { margin-bottom: .5rem; color: var(--ep-accent-als-tekst); }
.ep-blok__titel { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.375rem); line-height: 1.15; font-weight: 900; max-width: 40rem; margin-bottom: 1.75rem; }
.ep-blok h3 { font-size: 1.1875rem; margin-bottom: .25rem; }
.ep-blok p { color: var(--ep-inkt-zacht); }
.ep-blok__intro { font-size: 1.125rem; }
.ep-blok .ep-blok__klein { color: var(--ep-grijs); margin: 0; }
.ep-blok__knoppen { margin-top: 1.5rem; }
/* Contactformulier */
.ep-cform { display: grid; gap: 1.25rem; max-width: 40rem; }
.ep-cform__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
.ep-cform__veld { display: grid; gap: .375rem; align-content: start; }
.ep-cform__veld > label { font-weight: 700; color: var(--ep-inkt); }
.ep-cform__optioneel { font-weight: 400; color: var(--ep-grijs); }
.ep-cform input[type="text"], .ep-cform input[type="email"], .ep-cform input[type="tel"], .ep-cform select, .ep-cform textarea { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; box-sizing: border-box; font: inherit; color: var(--ep-inkt); background: var(--ep-wit); border: 1px solid #b9c3cf; border-radius: var(--ep-radius-klein); }
.ep-cform textarea { min-height: 9rem; resize: vertical; }
.ep-cform input:focus-visible, .ep-cform select:focus-visible, .ep-cform textarea:focus-visible { outline: 2px solid var(--ep-blauw); outline-offset: 1px; border-color: var(--ep-blauw); }
.ep-cform__veld--fout input, .ep-cform__veld--fout select, .ep-cform__veld--fout textarea { border-color: var(--ep-rood); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.ep-cform__fout { margin: 0; color: var(--ep-rood); font-weight: 700; font-size: .9375rem; }
.ep-cform__check { display: flex; gap: .625rem; align-items: flex-start; font-weight: 400; color: var(--ep-inkt-zacht); }
.ep-cform__check input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .25rem; }
.ep-cform__melding { padding: 1rem 1.25rem; border-left: 4px solid var(--ep-blauw); border-radius: var(--ep-radius-klein); background: var(--ep-blauw-licht); color: var(--ep-inkt); }
.ep-cform__melding > :first-child { margin-top: 0; }
.ep-cform__melding > :last-child { margin-bottom: 0; }
.ep-cform__melding--fout { border-left-color: var(--ep-rood); background: var(--ep-rood-licht); }
.ep-cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ep-cform .ep-knop { justify-self: start; }
.ep-beheermelding { padding: .75rem 1rem; border: 1px dashed var(--ep-lijn); color: var(--ep-grijs); }
.ep-blok--vlak { margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: clamp(3.5rem, 8vw, 5.5rem); background: var(--ep-wit); border-block: 1px solid var(--ep-lijn); }
.ep-blok--donker { margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: clamp(3.5rem, 8vw, 5.5rem); background: var(--ep-navy); color: #e6eef8; }
.ep-blok--donker .ep-bovenkop { color: #ffb488; }
.ep-blok--donker h2, .ep-blok--donker h3 { color: #fff; }
.ep-blok--donker p { color: #e6eef8; }
.ep-blok--smal { max-width: 51rem; }
.ep-blok--vlak + .ep-blok--donker, .ep-blok--donker + .ep-blok--vlak { margin-top: 0; }
.ep-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); gap: 1.25rem; }
.ep-raster--ruim { gap: 1.5rem; }
.ep-raster--breed { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.ep-tweeluik { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ep-tweeluik--midden { align-items: center; }

.ep-stapkaarten { list-style: none; margin: 0; padding: 0; counter-reset: stap; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.ep-stapkaart { counter-increment: stap; background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: 12px; padding: 1.5rem; display: grid; gap: .625rem; align-content: start; }
.ep-stapkaart::before { content: counter(stap); width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ep-oranje-licht); color: var(--ep-bruin); font-weight: 900; }
.ep-stapkaart h3, .ep-stapkaart p { margin: 0; }

.ep-functies { display: grid; gap: 1.375rem; }
.ep-functie { display: grid; grid-template-columns: 4px minmax(0, 1fr); column-gap: 1rem; }
.ep-functie::before { content: ""; grid-row: 1 / span 2; background: var(--ep-accent-vlak); border-radius: 4px; }
.ep-functie h3, .ep-functie p { grid-column: 2; margin: 0; }
.ep-functie h3 { margin-bottom: .25rem; }
.ep-schermbeeld img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, .1); background: var(--ep-wit); }
.ep-schermbeeld--groot img { aspect-ratio: 4 / 3; border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, .12); }

.ep-doelgroep { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-top: 4px solid var(--ep-navy); border-radius: 12px; padding: 1.75rem; display: grid; gap: .875rem; align-content: start; }
.ep-doelgroep h3 { font-size: 1.3125rem; margin: 0; }
.ep-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; color: var(--ep-inkt-zacht); }
.ep-punten li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: .625rem; line-height: 1.55; }
.ep-punten li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ep-blauw); margin-top: .55rem; }

.ep-kerntaken { display: grid; gap: .75rem; }
.ep-kerntaken .ep-kerntaken__titel { margin: 0; font-weight: 800; font-size: 1.125rem; color: var(--ep-navy); }
.ep-kerntaken ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ep-kerntaak { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem 1rem; align-items: center; padding: .875rem 1.125rem; border: 1px solid var(--ep-lijn); border-radius: 10px; background: var(--ep-wit); }
.ep-kerntaak strong { color: var(--ep-inkt); }
.ep-kerntaak__label { font-size: .8125rem; font-weight: 800; padding: .125rem .625rem; border-radius: 999px; background: var(--ep-blauw-licht); color: var(--ep-link); }
.ep-kerntaak__sub { grid-column: 1 / -1; font-size: .875rem; color: var(--ep-grijs); }
.ep-kerntaak--verplicht { border-color: #c9d8ea; background: #f4f8fc; }
.ep-kerntaak--verplicht .ep-kerntaak__label { background: var(--ep-navy); color: var(--ep-wit); }

.ep-shot { margin: 0; display: grid; gap: .75rem; }
.ep-shot figcaption { display: grid; gap: .125rem; font-size: 1rem; color: var(--ep-grijs); line-height: 1.5; }
.ep-shot figcaption strong { color: var(--ep-navy); font-size: 1.0625rem; }

.ep-quote { margin: 0; background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: 12px; padding: 1.75rem; display: grid; gap: 1.25rem; align-content: space-between; }
.ep-quote blockquote { margin: 0; }
.ep-quote blockquote p { margin: 0; font-size: 1.125rem; line-height: 1.6; font-style: italic; color: var(--ep-inkt); }
.ep-quote figcaption { display: flex; gap: .875rem; align-items: center; font-size: 1rem; color: var(--ep-inkt); }
.ep-quote figcaption > span { display: grid; line-height: 1.35; }
.ep-quote figcaption > span span { color: var(--ep-grijs); font-size: .875rem; }
.ep-quote__foto { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.ep-privacy { gap: 1.75rem 2.5rem; }
.ep-privacy__punt { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.ep-privacy__punt h3 { font-size: 1.125rem; margin-bottom: .375rem; }
.ep-privacy__punt p { margin: 0; }

.ep-vragen { display: grid; gap: .625rem; }
.ep-vraag { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: 10px; }
.ep-vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 1.375rem; font-weight: 800; color: var(--ep-navy); border-radius: 10px; }
.ep-vraag summary::-webkit-details-marker { display: none; }
.ep-vraag summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--ep-bruin); flex-shrink: 0; transition: transform .15s; }
.ep-vraag[open] summary::after { transform: rotate(45deg); }
.ep-vraag p { margin: 0; padding: 0 1.375rem 1.25rem; line-height: 1.65; }

.ep-cta, .ep-contactkaart { border-radius: 14px; padding: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: .875rem; align-content: start; }
.ep-cta { background: var(--ep-oranje-licht); border: 1px solid color-mix(in srgb, var(--ep-oranje) 30%, #fff); }
.ep-contactkaart { background: var(--ep-wit); border: 1px solid var(--ep-lijn); }
.ep-cta h2, .ep-contactkaart h2 { font-size: 1.75rem; font-weight: 900; margin: 0; }
.ep-cta p, .ep-contactkaart p { margin: 0; }
.ep-cta .ep-knoppen { margin-top: .375rem; }
.ep-contactkaart__gegevens { font-style: normal; display: grid; gap: .25rem; margin-top: .375rem; }
@media (prefers-reduced-motion: reduce) { .ep-vraag summary::after { transition: none; } }

/* WPBakery: sjabloon Volle breedte en pagina's gebouwd met WPBakery.
   Nieuwere WPBakery zet de inhoud in .wpb-content-wrapper; die telt niet mee. */
.ep-vb-pagina .ep-main { padding-top: 0; padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.ep-vb__inhoud > .wpb-content-wrapper { display: block; max-width: none; margin: 0; padding: 0; }
:is(.ep-vb__inhoud, .ep-vb__inhoud > .wpb-content-wrapper) > :not(.wpb-content-wrapper) { max-width: var(--ep-breed); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); box-sizing: border-box; }
:is(.ep-vb__inhoud, .ep-vb__inhoud > .wpb-content-wrapper) > :is(.vc_row, .vc_section) { width: auto; margin-inline: auto; padding-inline: max(0px, calc(clamp(1rem, 4vw, 2rem) - 15px)); }
/* Rijen met een blok van het thema: volle breedte, zonder de marges van WPBakery. */
:is(.ep-vb__inhoud, .ep-vb__inhoud > .wpb-content-wrapper) > :is(.vc_row, .vc_section):has(.ep-vb-blok) { max-width: none; padding-inline: 0; margin-inline: 0; margin-bottom: 0; }
.ep-vb__inhoud .vc_row:has(.ep-vb-blok) > .wpb_column { float: none; width: 100%; padding-inline: 0; }
.ep-vb__inhoud .vc_row:has(.ep-vb-blok) > .wpb_column > .vc_column-inner { padding: 0; }
.ep-vb__inhoud .vc_row:has(.ep-vb-blok) .wpb_wrapper > .ep-vb-blok { margin-bottom: 0; }
.ep-vb-blok.ep-breed { margin-inline: auto; }

/* Voettekst */
.ep-voet { background: var(--ep-voet); color: #d6e2f0; font-size: .9375rem; margin-top: auto; }
.ep-voet__contact, .ep-contact { font-style: normal; display: grid; gap: .125rem; }
.ep-voet__social { gap: .5rem 1rem; }
.ep-voet__klein a { color: inherit; margin-left: .75rem; }
.ep-voet a { color: var(--ep-wit); }
.ep-voet a:hover { color: var(--ep-oranje); }
.ep-voet__binnen { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; justify-content: space-between; padding-block: 2rem; }
.ep-voet__merk { display: flex; align-items: center; gap: .75rem; font-weight: 700; color: var(--ep-wit); }
.ep-voet__merk img { height: 2.25rem; width: auto; background: var(--ep-wit); border-radius: var(--ep-radius-klein); padding: .25rem; }
.ep-voet__naam { display: grid; line-height: 1.25; }
.ep-voet__naam small { font-weight: 400; font-size: .875rem; color: #b3c4d8; }
.ep-voet__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ep-voet__klein { flex-basis: 100%; margin: 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .15); color: #b3c4d8; font-size: .875rem; }

/* Widgets */
.ep-widgets { display: grid; gap: 1.5rem; align-content: start; }
.ep-widget { min-width: 0; }
.ep-widget > :last-child { margin-bottom: 0; }
.ep-widget__titel, .ep-widget .wp-block-heading { font-size: 1.125rem; margin-bottom: .5rem; }
.ep-widget ul { margin: 0; padding-left: 1.25rem; }
.ep-widgets--raster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.5rem 2.5rem; }
.ep-voet__widgets .ep-widgets--raster { grid-template-columns: repeat(var(--ep-kolommen, 3), minmax(0, 1fr)); }
@media (max-width: 52rem) { .ep-voet__widgets .ep-widgets--raster { grid-template-columns: minmax(0, 1fr); } }
.ep-met-zij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.ep-met-zij .ep-pagina--tekst .ep-inhoud { max-width: none; }
.ep-widgets--zij .ep-widget { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius); padding: 1.25rem; }
.ep-widgets--mededeling { margin-bottom: 1.5rem; }
.ep-widgets--mededeling .ep-widget { background: var(--ep-blauw-licht); border-left: 4px solid var(--ep-blauw); border-radius: var(--ep-radius-klein); padding: 1rem 1.25rem; }
.ep-voorpagina__widgets { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.ep-voet__widgets { padding-block: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.ep-voet .ep-widget__titel, .ep-voet .ep-widget .wp-block-heading { color: var(--ep-wit); }
.ep-voet .ep-widget p { color: #d6e2f0; }
@media (max-width: 52rem) { .ep-met-zij { grid-template-columns: minmax(0, 1fr); } }

/* Mededelingsbalk */
.ep-balk { background: var(--ep-blauw-licht); border-bottom: 1px solid color-mix(in srgb, var(--ep-link) 25%, transparent); color: var(--ep-inkt); }
.ep-balk--waarschuwing { background: var(--ep-oranje-licht); border-bottom-color: color-mix(in srgb, var(--ep-oranje) 35%, transparent); }
.ep-balk__binnen { display: flex; align-items: center; gap: 1rem; padding-block: .625rem; }
.ep-balk__binnen p { margin: 0; flex: 1; font-weight: 600; }
.ep-balk__binnen::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ep-link); flex-shrink: 0; }
.ep-balk--waarschuwing .ep-balk__binnen::before { background: var(--ep-oranje); }
.ep-balk__sluit { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: none; color: var(--ep-inkt); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.ep-balk__sluit:hover { background: rgba(0, 0, 0, .06); }
.ep-balk[hidden] { display: none; }

/* Welkom */
.ep-welkom { background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-left: 4px solid var(--ep-oranje); border-radius: var(--ep-radius-klein); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }

/* Cookiemelding */
.ep-cookies { position: fixed; z-index: 50; left: 1rem; right: 1rem; bottom: 1rem; max-width: 36rem; margin-inline: auto; background: var(--ep-wit); border: 1px solid var(--ep-lijn); border-radius: var(--ep-radius); box-shadow: 0 10px 30px rgba(16, 24, 40, .18); padding: 1.25rem 1.5rem; display: grid; gap: 1rem; }
.ep-cookies[hidden] { display: none; }
.ep-cookies__tekst p { margin: 0 0 .5em; }
.ep-cookies__tekst p:last-child { margin: 0; }

/* Onderhoud */
.ep-onderhoud { justify-content: center; }
.ep-onderhoud__binnen { max-width: 36rem; padding-block: 3rem; }
.ep-onderhoud__kaart { display: grid; gap: 1rem; }
.ep-onderhoud__logo { height: 3rem; width: auto; }
.ep-onderhoud__kaart h1 { margin: 0; }
.ep-onderhoud__login { margin: 0; font-size: .9375rem; }

/* 404 */
.ep-leeg { max-width: 36rem; }

/* Editor-uitlijning */
.alignwide { max-width: var(--ep-breed); }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; display: block; }
.wp-caption-text, figcaption { font-size: .875rem; color: var(--ep-grijs); }