/* ==========================================================================
   Header en footer (handgeschreven; waarden gemeten op de oude site, zie
   _ebnbreda_migratie/reports/probe-old.json en Elementor-templates 9 en 79)
   Breekpunten: desktop > 1024, tablet 768-1024, mobiel <= 767.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 99;
	background: #fff;
}
.hdr { background: #fff; }
.hdr--desktop {
	padding: 0 40px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.site-header.is-stuck .hdr { box-shadow: 0 2px 16px rgba(0, 0, 0, .16); }
.hdr--desktop .hdr-in {
	max-width: 1360px;
	margin: 0 auto;
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px 0;
}
.hdr-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 32px;
}
.hdr-logo { display: flex; }
.hdr-logo img { width: 106px; height: auto; display: block; }
.hdr-right {
	display: flex;
	align-items: center;
	gap: 0 24px;
	width: fit-content;
}
.hdr-tools {
	display: flex;
	align-items: center;
	gap: 0 16px;
}
/* Knop-primitief: blok met de body-regelhoogte, daarin een inline-block met regelhoogte 1 (zoals Elementor) */
.hdr-mail { line-height: 1.65; font-size: 16px; }
.hdr-mail-link,
.hdr-phone,
.ftr-totop,
.btn-cta {
	display: inline-block;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
}
.btn-in { display: flex; flex-direction: row; gap: 5px; justify-content: center; }
.btn-ico { display: flex; align-items: center; }
.btn-ico svg { width: 1em; height: 1em; fill: currentColor; }
.btn-txt { display: inline-block; }
.hdr-mail-link {
	font: 500 16px/1 Montserrat, sans-serif;
	color: #333;
	fill: #333;
	padding: 0;
	border-radius: 0;
	background: transparent;
}
.hdr-mail-link:hover, .hdr-mail-link:focus { color: #333; }
.hdr-div { display: flex; width: 1px; padding: 4px 0; }
.hdr-div span { display: block; width: 1px; height: 16px; background: #333; }
.hdr-search { position: relative; line-height: 1.65; font-size: 16px; text-align: center; }
.hdr-search-link { display: inline-block; cursor: pointer; }
.hdr-search-link svg { display: inline-block; vertical-align: middle; width: 20px; height: 21px; }
.hdr-phone {
	font: 600 16px/1 Montserrat, sans-serif;
	color: #fff;
	fill: #fff;
	background: #054695;
	border-radius: 4px;
	padding: 12px 24px;
	white-space: nowrap;
}
.hdr-phone:hover, .hdr-phone:focus { color: #fff; }
.hdr-toggle-wrap { display: none; }
.hdr-nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 24px;
	padding: 18px 0;
}

/* Zoekveld (opent bij klik op het vergrootglas) */
.search-pop {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 9999;
	display: none;
	gap: 8px;
	background: #fff;
	padding: 12px;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
	text-align: left;
	line-height: 1.65;
}
.search-pop.is-open { display: flex; }
.search-pop input[type="search"] {
	border: 1px solid #C3C3C3;
	border-radius: 4px;
	padding: 8px 12px;
	min-width: 220px;
	width: 220px;
	height: 40px;
	font: 400 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #333;
	background: #fff;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
.search-pop button {
	background: #054695;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 8px 16px;
	font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	margin: 0;
}
@media (max-width: 921px) {
	.search-pop button { font-size: 14.6px; line-height: 14.6px; }
}
@media (max-width: 544px) {
	.search-pop input[type="search"] { min-width: 140px; width: 140px; }
}

/* Hoofdmenu (desktop) */
.nav .menu,
.nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.nav--main { width: 100%; display: flex; }
.nav--main .menu {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	line-height: normal;
}
.nav--main .menu > li { display: flex; flex-grow: 1; position: relative; }
.nav--main .menu-link {
	display: flex;
	align-items: center;
	position: relative;
	font: 500 16px/20px Montserrat, sans-serif;
	color: #333;
	fill: #333;
	text-decoration: none;
	white-space: nowrap;
	transition: .4s;
}
.nav--main .menu > li > .menu-link { flex-grow: 1; justify-content: center; padding: 0; }
.nav--main .menu > li > .menu-link:hover,
.nav--main .menu > li > .menu-link:focus,
.nav--main .menu > li.is-open > .menu-link,
.nav--main .menu > li.current-menu-item > .menu-link { color: #054695; fill: #054695; }
/* Geen kleur voor current-menu-ancestor: oud liet het bovenliggende item grijs op onderliggende pagina's. */
.nav .sub-arrow {
	display: flex;
	align-items: center;
	line-height: 1;
	margin: -10px 0;
	padding: 10px 0 10px 10px;
}
.nav .sub-arrow svg { width: .7em; height: .7em; fill: currentColor; }
.nav .sub-toggle { display: none; }
.nav--main .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	width: max-content;
	min-width: 10em;
	max-width: 20em;
	font-size: 13px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	z-index: 5;
}
.nav--main li:hover > .sub-menu,
.nav--main li.is-open > .sub-menu { display: block; }
.nav--main .sub-menu li { display: block; position: relative; }
.nav--main .sub-menu .menu-link {
	padding: 10px 12px;
	border-left: 8px solid transparent;
	color: #333;
	background: #fff;
}
.nav--main .sub-menu .menu-link:hover,
.nav--main .sub-menu .menu-link:focus,
.nav--main .sub-menu li.current-menu-item > .menu-link { background: #054695; color: #fff; }

/* Menuknop (tablet en mobiel) */
.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .25em;
	font-size: 22px;
	line-height: 1;
	border: 0 solid;
	border-radius: 3px;
	background: rgba(0, 0, 0, .05);
	color: #333;
	cursor: pointer;
	margin: 0;
}
.menu-toggle svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.menu-toggle .menu-toggle-close,
.menu-toggle[aria-expanded="true"] .menu-toggle-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle-close { display: block; }
.menu-toggle--mobile {
	font-size: 27px;
	background: #fff;
	color: #054695;
	border-radius: 0;
	margin-right: -6.5px; /* de oude widget was 34px breed; de knop van 40,5px stak rechts uit */
}

/* Uitklapmenu (tablet en mobiel) */
.nav--dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 9997;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	font-size: 13px;
	max-height: 0;
	overflow: hidden;
	transform: scaleY(0);
	transform-origin: top;
	transition: max-height .3s, transform .3s;
}
.nav--dropdown[hidden] { display: none; }
.nav--dropdown.is-open {
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	transform: scaleY(1);
}
.nav--dropdown .menu > li { margin-bottom: 6px; position: relative; }
.nav--dropdown .menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	font: 600 18px/24px Montserrat, sans-serif;
	color: #333;
	fill: #333;
	text-decoration: none;
	transition: .4s;
}
.nav--dropdown .menu-link:hover,
.nav--dropdown .menu-link:focus,
.nav--dropdown li.current-menu-item > .menu-link,
.nav--dropdown li.is-open > .menu-link { background: #054695; color: #fff; fill: #fff; }
.nav--dropdown li.is-open > .menu-link { margin-bottom: 8px; }
.nav--dropdown .sub-arrow {
	width: 32px;
	height: 32px;
	justify-content: flex-end;
	padding: 0;
}
.nav--dropdown .sub-arrow svg { width: 1em; height: 1em; }
.nav--dropdown li.is-open > .menu-link .sub-arrow svg { transform: rotate(180deg); }
.nav--dropdown .sub-toggle {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 64px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 2; /* boven de pijl in de link, anders vangt de link de tik */
}
.nav--dropdown .sub-toggle:focus-visible { outline: 2px solid #054695; outline-offset: -2px; }
.nav--dropdown .sub-menu { display: none; background: #fff; }
.nav--dropdown li.is-open > .sub-menu { display: block; }
.nav--dropdown .sub-menu li { margin-bottom: 6px; }
.nav--dropdown .sub-menu .menu-link {
	padding: 8px 16px;
	border-left: 8px solid transparent;
	font: 500 16px/20px Montserrat, sans-serif;
}
.nav--dropdown .sub-menu .menu-link:hover,
.nav--dropdown .sub-menu .menu-link:focus,
.nav--dropdown .sub-menu li.current-menu-item > .menu-link { background: #054695d1; color: #fff; }

/* Mobiele header */
.hdr--mobile {
	display: none;
	padding: 0 15px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
.hdr--mobile .hdr-in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 0;
}
.hdr--mobile .hdr-logo img { width: 80px; }
.hdr-m-right {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.hdr-m-tools {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 14px;
	/* Oud: 26,078125px (inline-block icoon van 20px op de basislijn van een regel van 24,0768px: 14,592px x 1,65).
	   Met exact deze hoogte valt de tekst verderop op dezelfde pixel als op de oude site. */
	height: 26.078125px;
}
.hdr-m-icon {
	display: block;
	font-size: 20px;
	line-height: 1;
	color: #054695;
	fill: #054695;
}
.hdr-m-icon svg { display: block; width: 1em; height: 1em; }
.hdr-div--m { padding: 0; margin-top: 4px; }
.hdr-div--m span { height: 18px; background: #8F8F8F; }
.hdr-search--m { line-height: 1; margin-top: 4px; }
.hdr-search--m .hdr-search-link svg { vertical-align: top; }
.hdr-toggle-wrap--mobile { display: flex; justify-content: flex-end; width: 100%; }

/* Tablet */
@media (max-width: 1024px) {
	.hdr--desktop { padding: 0 16px; }
	.hdr--desktop .hdr-in { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
	.hdr-top { gap: 32px; }
	.hdr-logo img { width: 82px; }
	.hdr-right { gap: 16px; align-items: center; }
	.hdr-tools { justify-content: center; gap: 0 10px; }
	.hdr-nav { display: none; }
	.hdr-toggle-wrap--tablet { display: flex; justify-content: center; align-items: center; width: 34px; align-self: center; }
	.nav--dropdown { left: auto; right: 16px; width: 320px; max-width: calc(100% - 32px); }
	.nav--dropdown .menu-link { padding: 10px 12px; font: 500 16px/20px Montserrat, sans-serif; }
	.nav--dropdown .sub-menu .menu-link { padding: 10px 12px; }
	.nav--dropdown .sub-toggle { height: 40px; }
}

/* Mobiel */
@media (max-width: 767px) {
	.hdr--desktop { display: none; }
	.hdr--mobile { display: block; }
	.site-header.is-stuck .hdr--mobile { box-shadow: 0 2px 16px rgba(0, 0, 0, .16); }
	.nav--dropdown { left: 0; right: 0; width: auto; max-width: 100%; }
	.nav--dropdown .menu-link { padding: 8px 16px; font: 600 18px/24px Montserrat, sans-serif; }
	.nav--dropdown .sub-menu .menu-link { padding: 8px 16px; font: 500 16px/20px Montserrat, sans-serif; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { display: block; }
.ftr-cta {
	position: relative;
	z-index: 1;
	padding: 0 20px;
}
.ftr-cta--grey { background: #FBFBFB; }
/* flow-root: eigen opmaakcontext (de oude e-con-inner was een flexbox), zodat de negatieve ondermarge van het
   blok de hoogte van dit element verkleint in plaats van erdoorheen te vallen. De achtergrond (grijs op pagina
   169) stopt dan 96px boven de onderkant van het blok en de donkere footer komt daar achter het blok. */
.ftr-cta-in { display: flow-root; max-width: 1140px; margin: 0 auto; }
.ftr-cta-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 40px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 0 60px rgba(5, 70, 149, .1);
	padding: 40px 60px;
	margin-bottom: -96px;
}
.ftr-cta-text {
	width: 65%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px 0;
}
.ftr-cta-title {
	margin: 0;
	padding: 0;
	font: 700 48px/1 Montserrat, sans-serif;
	color: #333;
	hyphens: manual;
	overflow-wrap: normal; /* koppen breken nooit in een woord (bewuste wijziging, zie mobile.css) */
}
.ftr-cta-sub {
	margin: 0;
	font: 400 18px/1.5 Montserrat, sans-serif;
	color: #666;
}
.btn-cta {
	font: 600 18px/1 Montserrat, sans-serif;
	color: #fff;
	background: #0a84ff;
	border-radius: 4px;
	padding: 14px 24px;
	white-space: nowrap;
}
.btn-cta:hover, .btn-cta:focus { color: #fff; }

.ftr {
	position: relative;
	background: #0b1a33 url(../../../../uploads/2025/10/image-8-6271243.png) center center / cover no-repeat; /* relatief aan assets/css/: werkt ook in een submap */
	padding: 0 110px 0 150px;
}
.ftr-in {
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding: 165px 0 67px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px 0;
}
.ftr-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 32px;
}
.ftr-logo { display: flex; }
.ftr-logo img { width: 90px; height: auto; display: block; }
/* Oud: widget (blok, systeemfont, regelhoogte 1,65) met daarin de knop als inline-block (regelhoogte 26px) op de
   basislijn: het blok wordt 28,390625px hoog (27,078125 onder 921px) en de knop staat bovenin. Zo landt de knop
   op dezelfde subpixel als op de oude site. */
.ftr-totop-w { display: block; }
.ftr-totop {
	font: 500 16px/26px Montserrat, sans-serif;
	color: #fff;
	fill: #fff;
	background: transparent;
	padding: 0;
	border-radius: 0;
}
.ftr-totop svg { width: 1em; height: 1em; fill: currentColor; }
.ftr-totop:hover, .ftr-totop:focus { color: #fff; }
.ftr-divider { width: 100%; height: 0; border-top: 1px solid #404D5D; }
/* Kolommen + copyrightregel in een blok met gap 24 (zoals de oude opbouw; de sectiegap is op tablet/mobiel 25) */
.ftr-main {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px 0;
}
.ftr-cols {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.ftr-col {
	width: 220px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px 0;
}
.ftr-col--contact { width: 300px; }
/* 21px in plaats van 24px: "Veiligheidsdiensten" is bij 24px 244px breed en brak in de kolom van 220px midden in het woord
   ("Veiligheidsdienste-n", ook op de oude site); bij 21px (gemeten 21,6px) past het op een regel. Bewuste wijziging (a). */
.ftr-h {
	width: 100%;
	margin: 0;
	padding: 0;
	font: 600 21px/38px Montserrat, sans-serif;
	color: #fff;
	hyphens: manual;
	overflow-wrap: normal;
}
/* De dienstenkop had eerst op desktop nog de hoogte van de oude twee regels (min-height 76px) om de footer
   pixelgelijk te houden; dat liet een lege regel boven de links staan. Weggehaald: alle kolommen beginnen nu
   op dezelfde hoogte. */
.nav--footer { display: block; width: 100%; }
.nav--footer .menu { line-height: normal; }
.nav--footer .menu > li { display: block; margin: 0 0 10px; }
.nav--footer .menu > li:last-child { margin-bottom: 0; }
.nav--footer .menu-link {
	display: flex;
	align-items: center;
	font: 400 16px/26px Montserrat, sans-serif;
	color: #fff;
	fill: #fff;
	text-decoration: none;
	transition: .4s;
}
.nav--footer .menu-link:hover,
.nav--footer .menu-link:focus { color: #054695; }
/* Actieve pagina in de footer: wit met onderstreping (bewuste wijziging d; #054695 op navy was 1,9:1 en onleesbaar) */
.nav--footer li.current-menu-item > .menu-link { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ftr-p { margin: 0; font: 400 16px/26px Montserrat, sans-serif; color: #fff; }
.ftr-p a { color: #fff; text-decoration: none; }
.ftr-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px 0;
}
.fc {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
}
.fc-icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 36px;
	height: 36px;
	padding: 9px;
	border-radius: 50%;
	background: #054695;
	line-height: 0;
	transition: all .3s;
}
.fc-icon svg { display: block; width: 18px; height: 18px; fill: #fff; }
.fc-title { font: 400 16px/24px Montserrat, sans-serif; color: #fff; }
.fc:hover .fc-title, .fc:focus .fc-title { color: #fff; }
.ftr-bottom {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 32px;
}
.ftr-copy { margin: 0; font: 400 16px/26px Montserrat, sans-serif; color: #fff; }
.ftr-copy a { color: #fff; text-decoration: none; }
.ftr-social { display: flex; gap: 10px; }
.ftr-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(118, 114, 114, .2);
	color: #fff;
	transition: all .3s;
}
.ftr-soc svg { width: 20px; height: 20px; fill: #fff; display: block; }
.ftr-soc:hover, .ftr-soc:focus { background: #054695; color: #fff; opacity: .9; }

@media (max-width: 1024px) {
	.ftr-cta-box { padding: 34px 24px; margin-bottom: -44px; }
	.ftr-cta-text { width: 64%; gap: 12px; }
	.ftr-cta-title { font-size: 36px; }
	.ftr-cta-sub { font-size: 16px; }
	.btn-cta { font-size: 16px; }
	.ftr { padding: 0 20px; }
	.ftr-in { max-width: 100%; padding: 80px 0 20px; gap: 25px; }
	.ftr-top { gap: 32px; }
	.ftr-cols { flex-wrap: wrap; gap: 32px 0; }
	.ftr-h { font-size: 18px; line-height: 24px; }
	.fc-icon { width: 28px; height: 28px; padding: 7px; }
	.fc-icon svg { width: 14px; height: 14px; }
	.ftr-bottom { gap: 32px; }
}
@media (max-width: 767px) {
	.ftr-cta-box {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px 0;
		padding: 24px 20px;
		margin-bottom: -50px;
	}
	.ftr-cta-text { width: 100%; align-items: center; text-align: center; }
	.ftr-cta-title { font-size: 29px; line-height: 1.2; }
	.ftr-cta-sub { font-size: 16px; text-align: center; }
	.btn-cta { font-size: 16px; }
	.ftr-in { padding: 80px 0 24px; }
	.ftr-cols { gap: 24px 16px; }
	.ftr-col { gap: 12px 0; }
	.ftr-col--services { width: 50%; }
	.ftr-col--links { width: 44%; }
	.ftr-col--legal, .ftr-col--contact { width: 100%; }
	.ftr-h { font-size: 18px; line-height: 38px; }
	.ftr-col--services .ftr-h { line-height: 32px; }
	.ftr-p { font-size: 14px; }
	.ftr-bottom { flex-wrap: wrap; gap: 32px; }
	.ftr-copy { font-size: 14px; }
}