/**
 * Header en footer.
 */

/* ==========================================================================
   1. Header
   ========================================================================== */

.drieo-header {
	position: relative;
	z-index: 100;
	background: var(--drieo-wit);
}

/*
 * Alleen de witte balk blijft boven in beeld staan. De blauwe bovenbalk mag
 * wegscrollen: de hele header plakt precies zo ver naar boven als die balk hoog is,
 * dus die schuift eronderuit terwijl het menu blijft staan. De hoogte wordt door
 * chrome.js gemeten en als --drieo-bovenbalk-hoogte gezet.
 */
.drieo-header--sticky {
	position: sticky;
	top: calc(var(--drieo-bovenbalk-hoogte, 0px) * -1);
}

.drieo-header--sticky .drieo-header__balk {
	transition: box-shadow .25s ease;
}

.drieo-header--sticky.is-vastgezet .drieo-header__balk {
	box-shadow: 0 2px 12px rgba(36, 45, 84, .08);
}

.drieo-header__balk {
	border-bottom: 1px solid var(--drieo-lijn);
	background: var(--drieo-wit);
}

.drieo-header__binnen {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-block: 14px;
}

.drieo-header__binnen--landing {
	justify-content: space-between;
	padding-block: 16px;
}

.drieo-logo {
	flex: none;
	display: block;
	text-decoration: none;
}

.drieo-logo__beeld {
	display: block;
	width: auto;
}

.drieo-logo__tekst {
	font-family: var(--drieo-font-kop);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--drieo-marine);
}

/*
 * Geen tweede margin-left:auto hier: bij twee automarges verdeelt flexbox de vrije
 * ruimte over allebei, waardoor het menu in het midden bleef hangen. De marge op
 * .drieo-nav duwt nu het hele blok (menu + knop) naar rechts, zoals in het ontwerp.
 */
.drieo-header__cta {
	flex: none;
	/* In het ontwerp is de knop in de header iets compacter dan de standaardknop. */
	padding: 14px 26px;
}

/* Bovenbalk */

.drieo-bovenbalk {
	background: var(--drieo-blauw);
	color: var(--drieo-wit);
	font-size: var(--drieo-meta);
}

.drieo-bovenbalk__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 10px;
}

.drieo-bovenbalk__tekst {
	margin: 0;
}

.drieo-bovenbalk__rechts {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.drieo-bovenbalk__menu {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drieo-bovenbalk a,
.drieo-bovenbalk__telefoon,
.drieo-bovenbalk__terug {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	color: var(--drieo-wit);
	text-decoration: none;
	transition: opacity var(--drieo-transitie);
}

.drieo-bovenbalk a:hover,
.drieo-bovenbalk__telefoon:hover,
.drieo-bovenbalk__terug:hover {
	color: var(--drieo-wit);
	opacity: .78;
}

.drieo-bovenbalk__telefoon {
	font-weight: 700;
}

/* Uitklapmenu in de bovenbalk */

.drieo-bovenbalk__item {
	position: relative;
	display: flex;
	align-items: center;
}

.drieo-bovenbalk__rij {
	display: flex;
	align-items: center;
	gap: 6px;
}

.drieo-bovenbalk__knop {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.drieo-bovenbalk__pijl {
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--drieo-transitie);
}

.drieo-bovenbalk__item.is-open .drieo-bovenbalk__pijl {
	transform: rotate(180deg);
}

/*
 * Wit kaartje zoals in het hoofdmenu, maar rechts uitgelijnd: deze items staan aan
 * de rechterkant van het scherm, dus links uitlijnen duwt het menu eruit. De 10px
 * is precies de onderruimte van de balk, zodat het kaartje op de rand ervan begint.
 */
.drieo-bovenbalk__submenu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;
	display: grid;
	width: 240px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--drieo-lijn);
	border-radius: 10px;
	background: var(--drieo-wit);
	box-shadow: var(--drieo-schaduw-menu);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.drieo-bovenbalk__item.is-open > .drieo-bovenbalk__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Twee klassen diep, anders wint de witte tekstkleur van `.drieo-bovenbalk a`. */
.drieo-bovenbalk .drieo-bovenbalk__sublink {
	display: block;
	padding: 9px 12px;
	border-radius: 7px;
	color: var(--drieo-tekst-kop);
	line-height: 1.4;
	transition: background var(--drieo-transitie), color var(--drieo-transitie);
}

.drieo-bovenbalk .drieo-bovenbalk__sublink:hover,
.drieo-bovenbalk .drieo-bovenbalk__subitem.is-actief .drieo-bovenbalk__sublink {
	background: var(--drieo-vlak-tint);
	color: var(--drieo-blauw);
	opacity: 1;
}

/* Hoofdmenu */

.drieo-nav {
	/* De binnenruimte van een menu-item. Het uitklapmenu schuift er evenveel mee op,
	   zodat het links uitlijnt met het label en niet met de rand van het vlak. */
	--drieo-nav-pad-x: 16px;

	margin-left: auto;
}

/*
 * De items staan strak naast elkaar: de binnenruimte van het item zelf zorgt voor
 * de tussenruimte, want aanwijzen en de actieve pagina krijgen een gevuld vlak en
 * dat vlak moet de tekst omsluiten in plaats van er los onder te zweven.
 */
.drieo-nav__lijst {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drieo-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

/*
 * De aanraakzone van een item: bij een item mét uitklapmenu is dat de rij (link en
 * pijl samen), anders de link zelf. Daar ligt de achtergrond op, zodat de pijl bij
 * een dropdown binnen hetzelfde vlak valt.
 */
.drieo-nav__rij,
.drieo-nav__item > .drieo-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px var(--drieo-nav-pad-x);
	border-radius: 8px;
	transition: background var(--drieo-transitie);
}

.drieo-nav__link {
	display: flex;
	align-items: center;
	padding: 0;
	color: var(--drieo-tekst-kop);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--drieo-transitie);
}

/* Aanwijzen en de actieve pagina delen hetzelfde lichtblauwe vlak. */
.drieo-nav__item:hover > .drieo-nav__rij,
.drieo-nav__item:focus-within > .drieo-nav__rij,
.drieo-nav__item.is-open > .drieo-nav__rij,
.drieo-nav__item.is-actief > .drieo-nav__rij,
.drieo-nav__item > .drieo-nav__link:hover,
.drieo-nav__item > .drieo-nav__link:focus-visible,
.drieo-nav__item.is-actief > .drieo-nav__link {
	background: var(--drieo-vlak-tint);
}

.drieo-nav__item:hover > .drieo-nav__rij > .drieo-nav__link,
.drieo-nav__item:focus-within > .drieo-nav__rij > .drieo-nav__link,
.drieo-nav__item.is-open > .drieo-nav__rij > .drieo-nav__link,
.drieo-nav__item.is-actief > .drieo-nav__rij > .drieo-nav__link,
.drieo-nav__item > .drieo-nav__link:hover,
.drieo-nav__item > .drieo-nav__link:focus-visible,
.drieo-nav__item.is-actief > .drieo-nav__link {
	color: var(--drieo-blauw);
}

/* Alleen de pagina waar je nú bent staat dikgedrukt; aanwijzen verandert de dikte
   niet, anders verspringt het menu onder je muis. */
.drieo-nav__item.is-actief > .drieo-nav__rij > .drieo-nav__link,
.drieo-nav__item.is-actief > .drieo-nav__link {
	font-weight: 700;
}

.drieo-nav__knop {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.drieo-nav__pijl {
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--drieo-blauw);
	transition: transform var(--drieo-transitie);
}

.drieo-nav__item.is-open .drieo-nav__pijl {
	transform: rotate(180deg);
}

/* Uitklapmenu */

.drieo-nav__submenu {
	position: absolute;
	top: 100%;
	left: var(--drieo-nav-pad-x);
	z-index: 20;
	display: grid;
	width: 280px;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--drieo-lijn);
	border-radius: 10px;
	background: var(--drieo-wit);
	box-shadow: var(--drieo-schaduw-menu);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.drieo-nav__item.is-open > .drieo-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.drieo-nav__sublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: 12px 14px;
	border-radius: 7px;
	color: var(--drieo-tekst-kop);
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--drieo-transitie), color var(--drieo-transitie);
}

.drieo-nav__sublink:hover,
.drieo-nav__subitem.is-actief .drieo-nav__sublink {
	background: var(--drieo-vlak-tint);
	color: var(--drieo-blauw);
	font-weight: 600;
}

/* De oranje uitgelichte rij, bv. NIS2-check onder Beveiliging */
.drieo-nav__subitem--uitgelicht {
	margin-top: 6px;
}

.drieo-nav__subitem--uitgelicht .drieo-nav__sublink {
	background: var(--drieo-vlak-oranje);
	color: var(--drieo-oranje);
	font-weight: 700;
}

.drieo-nav__subitem--uitgelicht .drieo-nav__sublink:hover {
	background: var(--drieo-oranje);
	color: var(--drieo-wit);
}

/* Hamburger */

.drieo-hamburger {
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--drieo-lijn);
	border-radius: var(--drieo-radius-klein);
	background: var(--drieo-wit);
	cursor: pointer;
}

.drieo-hamburger__streepjes,
.drieo-hamburger__streepjes::before,
.drieo-hamburger__streepjes::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	border-radius: 1px;
	background: var(--drieo-marine);
	transition: transform .2s ease, opacity .2s ease;
}

.drieo-hamburger__streepjes::before,
.drieo-hamburger__streepjes::after {
	content: "";
	position: relative;
}

.drieo-hamburger__streepjes::before { top: -6px; }
.drieo-hamburger__streepjes::after  { top: 4px; }

.is-lade-open .drieo-hamburger__streepjes {
	background: transparent;
}

.is-lade-open .drieo-hamburger__streepjes::before {
	transform: translateY(6px) rotate(45deg);
}

.is-lade-open .drieo-hamburger__streepjes::after {
	transform: translateY(-4px) rotate(-45deg);
}

/* Schuiflade */

.drieo-lade {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.drieo-lade__achtergrond {
	position: absolute;
	inset: 0;
	background: rgba(36, 45, 84, .45);
}

.drieo-lade__paneel {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	width: min(400px, 88vw);
	padding: 1.25rem;
	background: var(--drieo-wit);
	overflow-y: auto;
	animation: drieoLadeIn .25s ease both;
}

@keyframes drieoLadeIn {
	from { transform: translateX(100%); }
	to   { transform: none; }
}

.drieo-lade__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--drieo-lijn);
}

.drieo-lade__sluit {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--drieo-marine);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
}

.drieo-lade__lijst,
.drieo-lade__submenu,
.drieo-lade__snel {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drieo-lade__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--drieo-lijn);
}

.drieo-lade__link {
	flex: 1;
	padding: 1rem 0;
	color: var(--drieo-tekst-kop);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.drieo-lade__knop {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--drieo-blauw);
	cursor: pointer;
	font-size: 1.25rem;
}

.drieo-lade__item.is-open .drieo-lade__knop span[aria-hidden]::before {
	content: "\2212";
}

.drieo-lade__item.is-open .drieo-lade__knop span[aria-hidden] {
	font-size: 0;
}

.drieo-lade__item.is-open .drieo-lade__knop span[aria-hidden]::before {
	font-size: 1.25rem;
}

.drieo-lade__submenu {
	flex-basis: 100%;
	display: none;
	padding: 0 0 .75rem .75rem;
}

.drieo-lade__item.is-open .drieo-lade__submenu {
	display: block;
}

.drieo-lade__subitem .drieo-lade__link {
	padding: .625rem 0;
	font-size: .9375rem;
	font-weight: 400;
	color: var(--drieo-tekst);
}

.drieo-lade__subitem.is-uitgelicht .drieo-lade__link {
	color: var(--drieo-oranje);
	font-weight: 700;
}

.drieo-lade__voet {
	display: grid;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.drieo-lade__telefoon {
	font-family: var(--drieo-font-kop);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--drieo-marine);
	text-decoration: none;
}

.drieo-lade__snel {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--drieo-lijn);
	font-size: var(--drieo-meta);
}

body.drieo-lade-open {
	overflow: hidden;
}

/* ==========================================================================
   2. Footer
   ========================================================================== */

.drieo-footer {
	background: var(--drieo-marine);
	color: var(--drieo-cyaan);
}

.drieo-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--drieo-transitie);
}

.drieo-footer a:hover {
	color: var(--drieo-wit);
}

.drieo-footer__boven {
	padding-block: 52px 34px;
}

.drieo-footer__raster {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 2.75rem;
	padding-bottom: 2.125rem;
	border-bottom: 1px solid var(--drieo-lijn-op-donker);
}

.drieo-footer__contact .drieo-logo {
	display: block;
	/* Het witte logo heeft veel loze ruimte; de negatieve marges uit het ontwerp
	   trekken het optisch gelijk met de tekst eronder. */
	margin: -16px 0 .875rem -6px;
}

.drieo-footer__telefoon {
	margin: 0 0 .625rem;
}

.drieo-footer__telefoonlink {
	font-family: var(--drieo-font-kop);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--drieo-wit);
}

.drieo-footer__adres {
	font-style: normal;
	line-height: 1.8;
	font-size: var(--drieo-body-klein);
}

.drieo-footer__tijden {
	margin-top: .875rem;
	color: var(--drieo-tekst-op-donker-zacht);
	font-size: var(--drieo-meta);
}

.drieo-footer__kop {
	margin-bottom: 1rem;
	color: var(--drieo-wit);
	font-family: var(--drieo-font-tekst);
	font-size: .71875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.drieo-footer__lijst {
	display: grid;
	gap: .6875rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--drieo-body-klein);
}

/* Een menu-item de class drieo-uitgelicht geven maakt hem oranje */
.drieo-footer__lijst .drieo-uitgelicht > a {
	color: var(--drieo-oranje-op-donker);
}

.drieo-footer__partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding-top: 1.625rem;
}

.drieo-footer__partnerlabel {
	margin-right: .5rem;
	color: var(--drieo-tekst-op-donker-zacht);
	font-size: var(--drieo-meta);
}

.drieo-footer__partnerlijst {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drieo-footer__partner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	height: 34px;
	padding: 4px 10px;
	border: 1px solid var(--drieo-lijn-op-donker-sterk);
	border-radius: var(--drieo-radius-klein);
}

.drieo-footer__partnerlogo {
	max-height: 24px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .85;
}

.drieo-footer__partnernaam {
	color: var(--drieo-tekst-op-donker-zacht);
	font-size: .65625rem;
	font-weight: 600;
}

.drieo-footer__onder {
	background: var(--drieo-marine-diep);
	color: var(--drieo-tekst-op-donker-zacht);
	font-size: .78125rem;
}

.drieo-footer__onderbinnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

.drieo-footer__copyright {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

.drieo-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drieo-footer__slogan {
	margin: 0;
	color: var(--drieo-wit);
	font-weight: 600;
}

/* Landingsfooter */

.drieo-footer__actie {
	padding-block: 52px;
}

.drieo-footer__actiebinnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 3.5rem;
	align-items: center;
}

.drieo-footer__actiekop {
	margin-bottom: .625rem;
	color: var(--drieo-wit);
	font-size: 1.625rem;
	letter-spacing: -.02em;
}

.drieo-footer__actielead {
	max-width: 520px;
	color: var(--drieo-tekst-op-donker);
}

.drieo-footer__actieknoppen {
	display: grid;
	gap: .75rem;
	justify-items: start;
}

.drieo-footer__actietelefoon {
	margin: 0;
}

/* ==========================================================================
   3. Responsief
   ========================================================================== */

@media (max-width: 1199px) {
	/* Smaller scherm: de items schuiven dichter op elkaar via hun binnenruimte,
	   niet via de tussenruimte — anders raken de vlakken elkaar. */
	.drieo-nav {
		--drieo-nav-pad-x: 11px;
	}

	.drieo-nav__link {
		font-size: .875rem;
	}
}

@media (max-width: 1023px) {
	.drieo-nav,
	.drieo-header__cta {
		display: none;
	}

	.drieo-hamburger {
		display: block;
	}

	.drieo-bovenbalk__menu {
		display: none;
	}

	.drieo-footer__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}

	.drieo-footer__contact {
		grid-column: 1 / -1;
	}

	.drieo-footer__actiebinnen {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}
}

@media (max-width: 767px) {
	.drieo-bovenbalk__tekst {
		display: none;
	}

	.drieo-bovenbalk__binnen {
		justify-content: flex-end;
	}

	.drieo-footer__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.drieo-footer__onderbinnen {
		flex-direction: column;
		align-items: flex-start;
	}

	.drieo-footer__partner {
		min-width: 88px;
	}
}