/**
 * Mobiele navigatie: zijpaneel dat van rechts inschuift, met achtergrond-overlay,
 * grote tikvlakken en uitklapbare submenu's (accordion).
 *
 * De desktopnavigatie en dropdowns gebruiken de gecompileerde Tailwind-classes uit
 * theme.css; dit bestand voegt enkel het mobiele paneel toe.
 */

/* Scroll van de pagina vergrendelen zolang het menu open is. */
body.eu-no-scroll {
	overflow: hidden;
}

/* Achtergrond-overlay. */
.eu-m-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(22, 22, 23, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 60;
}
/* CSS-only schakelaar (checkbox-hack). */
.eu-m-toggle-input {
	position: fixed;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.eu-m-backdrop {
	visibility: hidden;
	cursor: pointer;
}
.eu-m-toggle-input:checked ~ .eu-m-backdrop {
	opacity: 1;
	visibility: visible;
}
.eu-m-toggle-input:checked ~ .eu-m-panel {
	transform: translateX(0);
}
/* Scroll van de pagina vergrendelen zolang het menu open is. */
html:has(.eu-m-toggle-input:checked) {
	overflow: hidden;
}

/* Het zijpaneel zelf. */
.eu-m-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 86%;
	max-width: 360px;
	background: #fff;
	z-index: 70;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	overscroll-behavior: contain;
}
/* (paneel schuift in via .eu-m-toggle-input:checked ~ .eu-m-panel) */

/* Kop met logo + sluitknop. */
.eu-m-panel__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #ececec;
}
.eu-m-panel__logo {
	display: inline-flex;
}
.eu-m-panel__logo img {
	height: 44px;
	width: auto;
	display: block;
}
.eu-m-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	color: #161617;
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.eu-m-close:hover {
	background: #f3f1ee;
	color: #e3292b;
}

/* Schuifbare lijst met menu-items. */
.eu-m-nav {
	flex: 1 1 auto;
	min-height: 0; /* zodat de lijst kan scrollen i.p.v. de flexbox op te rekken */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px 0;
}

.eu-m-link,
.eu-m-sublink {
	display: block;
	font-family: Montserrat, Arial, sans-serif;
	color: #161617;
	text-decoration: none;
	transition: color 0.15s ease;
}
.eu-m-link {
	font-size: 16px;
	font-weight: 600;
	padding: 14px 20px;
}
.eu-m-link--solo {
	border-bottom: 1px solid #f1efec;
}
.eu-m-link:hover,
.eu-m-sublink:hover {
	color: #e3292b;
}

/* ------------------------------------------------------------------ *
 * Schuifmenu met twee niveaus.
 *
 * Tik je op een item met sub-items, dan schuift het menu naar links en komt
 * het volgende niveau in beeld, met bovenin een terugknop. Puur CSS: elke
 * radio hoort bij één scherm, dus het werkt ook zonder JavaScript.
 * ------------------------------------------------------------------ */

/* De radio's zelf zijn onzichtbaar maar blijven bereikbaar met het toetsenbord. */
.eu-m-niveau {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.eu-m-views {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.eu-m-view {
	position: absolute;
	inset: 0;
	background: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}

/* Het hoofdmenu staat standaard in beeld. */
.eu-m-view--root {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staat er een tweede niveau open, dan schuift het hoofdmenu een stukje weg. */
.eu-m-niveau:not(#eu-m-niveau-root):checked ~ .eu-m-views .eu-m-view--root {
	transform: translateX(-24%);
}

/* Radio n hoort bij scherm n. Acht niveaus is ruim voldoende voor dit menu. */
.eu-m-niveau:nth-of-type(2):checked ~ .eu-m-views .eu-m-view:nth-of-type(2),
.eu-m-niveau:nth-of-type(3):checked ~ .eu-m-views .eu-m-view:nth-of-type(3),
.eu-m-niveau:nth-of-type(4):checked ~ .eu-m-views .eu-m-view:nth-of-type(4),
.eu-m-niveau:nth-of-type(5):checked ~ .eu-m-views .eu-m-view:nth-of-type(5),
.eu-m-niveau:nth-of-type(6):checked ~ .eu-m-views .eu-m-view:nth-of-type(6),
.eu-m-niveau:nth-of-type(7):checked ~ .eu-m-views .eu-m-view:nth-of-type(7),
.eu-m-niveau:nth-of-type(8):checked ~ .eu-m-views .eu-m-view:nth-of-type(8),
.eu-m-niveau:nth-of-type(9):checked ~ .eu-m-views .eu-m-view:nth-of-type(9) {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rij met een doorklik. */
.eu-m-row {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 1px solid #f1efec;
}
.eu-m-row .eu-m-link {
	flex: 1 1 auto;
}
.eu-m-link--door {
	cursor: pointer;
}
.eu-m-expand {
	flex: none;
	width: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #6b6b6b;
	background: none;
	border: 0;
	border-left: 1px solid #f1efec;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}
.eu-m-expand:hover,
.eu-m-niveau:focus-visible + .eu-m-views .eu-m-expand {
	color: #e3292b;
	background: #faf8f5;
}

/* Terugknop en kop van het tweede niveau. */
.eu-m-terug {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6b6b;
	cursor: pointer;
	border-bottom: 1px solid #f1efec;
	transition: color 0.15s ease;
}
.eu-m-terug:hover {
	color: #e3292b;
}
.eu-m-titel {
	margin: 0;
	padding: 18px 20px 10px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.01em;
	color: #161617;
}

/* Wie liever geen beweging ziet, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
	.eu-m-view,
	.eu-m-view--root {
		transition: none;
	}
}

.eu-m-actions {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #ececec;
}
.eu-m-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 20px;
	border-radius: 8px;
	transition: background 0.15s ease;
}
.eu-m-btn--primary {
	background: #e3292b;
	color: #fff;
}
.eu-m-btn--primary:hover {
	background: #c81f21;
}
.eu-m-btn--move {
	background: #161617;
	color: #fff;
}
.eu-m-btn--move:hover {
	background: #000;
}

/* Op desktop nooit tonen (de hamburger is daar verborgen). */
@media (min-width: 1024px) {
	.eu-m-panel,
	.eu-m-backdrop,
	.eu-m-toggle-input {
		display: none !important;
	}
}

/* Klanttevredenheid-kaart: dropdown als overlay (schaalt de kaart niet op). */
.eu-kt-dd { position: relative; }
.eu-kt-dd > summary { list-style: none; cursor: pointer; }
.eu-kt-dd > summary::-webkit-details-marker { display: none; }
.eu-kt-dd > summary::marker { content: ""; }
.eu-kt-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	padding: 14px 22px;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #fff;
	transition: background 0.15s ease;
}
.eu-kt-trigger:hover { background: rgba(255, 255, 255, 0.22); }
.eu-kt-chevron { flex: none; transition: transform 0.25s ease; }
.eu-kt-dd[open] .eu-kt-chevron { transform: rotate(180deg); }
.eu-kt-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 60;
	background: #fff;
	border-radius: 14px;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
}
.eu-kt-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	color: #161617;
	text-decoration: none;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 15px;
	border-top: 1px solid #f0eeec;
}
.eu-kt-opt:first-child { border-top: 0; }
.eu-kt-opt:hover { background: #f7f6f4; }
.eu-kt-opt-score { font-weight: 800; font-size: 18px; color: #c60f2b; }
.eu-kt-pill[hidden] { display: none; }
.eu-kt-pill {
	display: inline-block;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding: 6px 16px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

/* Hamburger-toggle: afmeting NIET afhankelijk van Tailwind-utilities (w-7/h-7
   bestaan niet in de gecompileerde CSS). Forceer een zichtbaar, tikbaar icoon. */
.eu-mobile-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #161617;
}
.eu-mobile-toggle svg {
	width: 28px !important;
	height: 28px !important;
}
@media (min-width: 1024px) {
	.eu-mobile-toggle { display: none !important; }
}

/* Hamburger nooit wegdrukken + logo iets kleiner op mobiel, zodat de toggle
   altijd ruimte heeft (voorkomt dat een breed logo hem van het scherm duwt). */
.eu-mobile-toggle { flex: none; margin-left: auto; }
@media (max-width: 1023.98px) {
	.eu-navbar a img { max-height: 2.7rem; width: auto; }
}

/* ===== Klanttevredenheid + woningwaarde-kaarten (eigen opmaak, niet afhankelijk
   van Tailwind-utilities die niet in de gecompileerde CSS zitten). ===== */
.eu-kt-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
}
@media (max-width: 1023.98px) {
	.eu-kt-grid { grid-template-columns: 1fr; }
}
.eu-kt-card {
	box-sizing: border-box;
	border-radius: 18px;
	padding: 34px 36px;
	display: flex;
	flex-direction: column;
	font-family: Montserrat, Arial, sans-serif;
}
.eu-kt-card--red { background: #c60f2b; color: #fff; justify-content: space-between; }
.eu-kt-card--white { background: #fff; color: #161617; justify-content: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); }
@media (max-width: 600px) {
	.eu-kt-card { padding: 26px; }
}
.eu-kt-title { font-weight: 900; line-height: 1.05; margin: 0; font-size: 31px; }
.eu-kt-title--dark { color: #161617; margin-bottom: 14px; }
.eu-kt-sub { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.eu-kt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.eu-kt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; padding: 22px 0; }
.eu-kt-stat { display: flex; flex-direction: column; }
.eu-kt-stat-value { font-weight: 900; line-height: 1; font-size: 44px; }
.eu-kt-stat-label { margin-top: 7px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 600px) {
	.eu-kt-stats { gap: 18px 18px; }
	.eu-kt-stat-value { font-size: 38px; }
}
.eu-kt-foot { display: flex; flex-direction: column; gap: 16px; }
.eu-kt-btn-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #fff; text-decoration: none; }
.eu-kt-btn-link:hover { opacity: 0.85; }
.eu-kt-wb-body { font-size: 16px; line-height: 1.65; color: #6b6b6b; margin: 0 0 18px; max-width: 420px; }
.eu-kt-points { list-style: none; margin: 0 0 24px; padding: 0; }
.eu-kt-points li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 11px; font-size: 15px; color: #161617; }
.eu-kt-check { flex: none; color: #c60f2b; display: inline-flex; margin-top: 1px; }
.eu-kt-wb-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #c60f2b;
	color: #fff;
	border-radius: 6px;
	padding: 14px 26px;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.eu-kt-wb-btn:hover { opacity: 0.92; }

/* ===== Kopbalk: hoogte, logo en menu (wens september 2026) =====
   Het logo stond niet in verhouding tot de menuwoorden. Het logo is nu groter
   en de balk groeit mee, zodat er lucht omheen blijft. Eén variabele stuurt de
   hoogte van de balk, de positie van de tickerbalk en de ruimte boven de
   content; die stonden eerder als vaste waarden in header.php. */
:root {
	--eu-nav-h: 72px;
}
@media (min-width: 1360px) {
	:root {
		--eu-nav-h: 92px;
	}
}
.eu-navbar {
	height: var(--eu-nav-h);
}
.eu-logo {
	height: 3.1rem;
	width: auto;
	display: block;
}
@media (min-width: 1360px) {
	.eu-logo {
		height: 4rem;
	}
}
.eu-ticker {
	top: var(--eu-nav-h);
}
.eu-site-content {
	padding-top: var(--eu-nav-h);
}
.eu-site-content--ticker {
	padding-top: calc(var(--eu-nav-h) + 36px);
}

/* Het menu is vet geworden en het logo groter. Zes menu-items plus de twee
   knoppen passen daardoor pas vanaf 1280px naast elkaar; daaronder paste het
   eerder trouwens ook al net niet (op een 1280px-scherm liep de balk over).
   Daarom schuift de grens voor het uitgeschreven menu op van 1024 naar 1280px:
   daaronder verschijnt hetzelfde schuifmenu als op mobiel. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.eu-navbar .eu-desktop-nav,
	.eu-navbar .eu-desktop-acties {
		display: none !important;
	}
	.eu-mobile-toggle {
		display: inline-flex !important;
	}
	.eu-m-panel {
		display: flex !important;
	}
	.eu-m-backdrop {
		display: block !important;
	}
	.eu-m-toggle-input {
		display: block !important;
	}
}

/* 1280 t/m 1359px: het menu past hier nog wel, maar alleen op de oude
   logohoogte en met minder ruimte tussen de woorden. De vette letters blijven;
   het grotere logo komt pas vanaf 1360px. */
@media (min-width: 1280px) and (max-width: 1359.98px) {
	.eu-navbar .eu-desktop-nav {
		gap: 0.7rem;
	}
	.eu-navbar .eu-nav-link,
	.eu-navbar .eu-dropdown-toggle {
		font-size: 13px;
		letter-spacing: 0.02em !important;
	}
	.eu-logo {
		height: 3.3rem;
	}
}

/* Vanaf 1280px: menuwoorden iets strakker tegen elkaar, zodat het grotere logo
   en de vette letters samen binnen de balk blijven. */
@media (min-width: 1360px) {
	.eu-navbar .eu-desktop-nav {
		gap: 1rem;
	}
	.eu-navbar .eu-nav-link,
	.eu-navbar .eu-dropdown-toggle {
		font-size: 13px;
		letter-spacing: 0.04em !important;
	}
}

/* ===== Zoekopdracht-formulier (/diensten/zoekopdracht) =====
   Eigen opmaak in gewone CSS, zodat het formulier niet afhankelijk is van
   Tailwind-classes die niet in de gecompileerde theme.css zitten. */
.eu-zoekopdracht .eu-zo-blok {
	padding-top: 18px;
	border-top: 1px solid #e8e4e0;
}
.eu-zoekopdracht .eu-zo-blok:first-of-type {
	padding-top: 0;
	border-top: 0;
}
.eu-zoekopdracht .eu-zo-blok > * + * {
	margin-top: 14px;
}
.eu-zo-kop {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #161617;
}
.eu-zo-rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.eu-zo-rij--drie {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
	.eu-zo-rij,
	.eu-zo-rij--drie {
		grid-template-columns: 1fr;
	}
}
.eu-zo-keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.eu-zo-keuze {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid #e8e4e0;
	border-radius: 999px;
	background: #fafafa;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	color: #161617;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.eu-zo-keuze:hover {
	border-color: #c9c2b8;
	background: #fff;
}
.eu-zo-keuze input {
	accent-color: #c8102e;
	width: 16px;
	height: 16px;
	flex: none;
	margin: 0;
}
.eu-zo-akkoord {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #55534f;
	cursor: pointer;
}
.eu-zo-akkoord input {
	accent-color: #c8102e;
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 2px;
}

/* ===== Sollicitatieformulier (/vacatures) ===== */
.eu-zo-uitleg {
	margin: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	color: #6b6b6b;
}
.eu-verplicht {
	color: #c8102e;
}
.eu-zo-hint {
	margin: 6px 0 0;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	color: #6b6b6b;
}
/* Bestandsveld in dezelfde stijl als de andere velden: het eigen knopje van de
   browser blijft, maar het vak eromheen doet mee met het formulier. */
.eu-bestand {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #e8e4e0;
	border-radius: 8px;
	background: #fafafa;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 14px;
	color: #3d3d3d;
	cursor: pointer;
}
.eu-bestand:focus {
	outline: none;
	border-color: #c8102e;
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08);
}
.eu-bestand::file-selector-button {
	margin-right: 12px;
	padding: 7px 14px;
	border: 0;
	border-radius: 999px;
	background: #161617;
	color: #fff;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.eu-bestand::file-selector-button:hover {
	background: #c8102e;
}

/* ===== Tekstblok op Werken bij =====
   De tekst komt uit de gewone editor. Deze regels geven koppen, alinea's en
   lijstjes dezelfde maatvoering als de dienstenpagina's, zonder afhankelijk te
   zijn van Tailwind-classes die niet in de gecompileerde CSS zitten. */
.eu-vac-tekst {
	color: #6b6b6b;
	font-size: 17px;
	line-height: 1.65;
}
.eu-vac-tekst > *:first-child {
	margin-top: 0;
}
/* Ook h1: in de editor heet die "Kop 1" en wordt gewoon gekozen voor de titel
   boven de tekst. Zonder deze regel viel hij terug op de Tailwind-reset en stond
   de titel op broodtekstformaat. */
.eu-vac-tekst h1,
.eu-vac-tekst h2 {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #161617;
	margin: 0 0 18px;
}
.eu-vac-tekst h3,
.eu-vac-tekst h4 {
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	color: #161617;
	margin: 26px 0 10px;
}
.eu-vac-tekst p {
	margin: 0 0 16px;
}
.eu-vac-tekst p:last-child {
	margin-bottom: 0;
}
.eu-vac-tekst ul,
.eu-vac-tekst ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.eu-vac-tekst li {
	margin-bottom: 7px;
}
.eu-vac-tekst a {
	color: #c8102e;
}
.eu-vac-tekst strong {
	color: #161617;
}

/* v1.27.0: ankers als #formulier op de dienstpagina's vallen niet meer onder de
   vaste menubalk + ticker. theme.js rekent het precies uit; dit is het vangnet
   zonder JS. */
.eu-anker {
	scroll-margin-top: calc(var(--eu-nav-h) + 36px + 16px);
}