/* DPM Signage huisstijl 2026: header, footer, iconen (17 okt 2026)
   Homepage-secties staan in de WPBakery custom CSS van de homepage (.hp-*) */

:root {
	--dpm-navy-dark: #0d2c41;
	--dpm-navy: #13314b;
	--dpm-blue: #0074a3;
	--dpm-orange: #ffb82a;
	--dpm-orange-hover: #ffc957;
	--dpm-text: #4a5560;
	--dpm-muted: #8a97a3;
	--dpm-on-navy: #c9d8e4;
	--dpm-on-navy-2: #a9bccb;
	--dpm-line: #e8edf1;
}

.dpm-icon { width: 1em; height: 1em; display: inline-block; flex: none; fill: currentColor; vertical-align: -0.125em; }

/* ── Header ───────────────────────────── */
#header.dpm-hdr {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(255,255,255,.96);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid #eef1f4;
	box-shadow: none; margin: 0; padding: 0; height: auto;
}
/* Fortuna's sticky-header-JS zet margin-top op .content_body; niet nodig bij position:sticky */
#header.dpm-hdr ~ .content_body { margin-top: 0 !important; }
body.admin-bar #header.dpm-hdr { top: 32px; }
@media (max-width: 782px) { body.admin-bar #header.dpm-hdr { top: 0; } }

.dpm-hdr__in {
	max-width: 1240px; margin: 0 auto; padding: 14px 24px; min-height: 80px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	box-sizing: border-box; position: relative;
}
.dpm-hdr__logo { display: block; line-height: 0; }
.dpm-hdr__logo img { height: 34px; width: auto; display: block; }

.dpm-hdr__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
.dpm-hdr__menu li { list-style: none; margin: 0; padding: 0; position: relative; }
.dpm-hdr__menu a {
	font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
	color: var(--dpm-navy); text-decoration: none; display: inline-block; transition: color .15s, background .15s, border-color .15s;
}
.dpm-hdr__menu > li > a { padding: 6px 0; }
.dpm-hdr__menu a:hover, .dpm-hdr__menu a:focus-visible { color: var(--dpm-blue); }
.dpm-hdr__menu > li.current-menu-item:not(.dpm-nav-btn) > a { color: var(--dpm-blue); }

/* Dropdowns */
.dpm-hdr__menu .sub-menu {
	list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: -18px; min-width: 250px;
	background: #fff; border: 1px solid var(--dpm-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(19,49,75,.10);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 10;
}
.dpm-hdr__menu li:hover > .sub-menu, .dpm-hdr__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.dpm-hdr__menu .sub-menu a { display: block; padding: 8px 18px; }
.dpm-hdr__menu .sub-menu a:hover { background: #f7f9fb; }
.dpm-hdr__menu .boc_search_toggle_li { display: none; }

/* Knoppen in het menu: CSS-klasse dpm-nav-btn + dpm-nav-btn--outline / --primary op het menu-item */
.dpm-hdr__menu > li.dpm-nav-btn + li.dpm-nav-btn { margin-left: -18px; }
.dpm-hdr__menu > li.dpm-nav-btn--outline > a { border: 1px solid #cfd8e0; padding: 9px 16px; border-radius: 30px; }
.dpm-hdr__menu > li.dpm-nav-btn--outline > a:hover { border-color: var(--dpm-navy); color: var(--dpm-navy); }
.dpm-hdr__menu > li.dpm-nav-btn--primary > a { background: var(--dpm-orange); font-weight: 600; padding: 10px 18px; border-radius: 30px; }
.dpm-hdr__menu > li.dpm-nav-btn--primary > a:hover { background: var(--dpm-orange-hover); color: var(--dpm-navy); }

.dpm-hdr a:focus-visible, .dpm-ftr a:focus-visible { outline: 2px solid var(--dpm-blue); outline-offset: 3px; border-radius: 4px; }

/* Mobiel menu van het thema */
#header.dpm-hdr #mobile_menu_toggler { display: none; position: static; float: none; margin: 0; }
@media (max-width: 1100px) {
	.dpm-hdr__nav { display: none; }
	#header.dpm-hdr #mobile_menu_toggler { display: block; }
}
@media (min-width: 1101px) {
	#header.dpm-hdr #mobile_menu { display: none !important; }
}

/* ── Footer ───────────────────────────── */
#footer.dpm-ftr {
	background: var(--dpm-navy); color: var(--dpm-on-navy-2); padding: 60px 24px 50px; margin: 0; border: 0;
	font-family: Lato, sans-serif; font-size: 13px; line-height: 1.5;
}
#footer.dpm-ftr a { color: var(--dpm-on-navy-2); text-decoration: none; transition: color .15s; }
#footer.dpm-ftr a:hover { color: var(--dpm-orange); }
#footer.dpm-ftr ul { list-style: none; margin: 0; padding: 0; }
#footer.dpm-ftr li { list-style: none; margin: 0; padding: 0; }

.dpm-ftr__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.dpm-ftr__logo { height: 34px; width: auto; display: block; margin-bottom: 20px; }
/* Imagify verpakt het logo in <picture> en zet de class daarop */
#footer.dpm-ftr .dpm-ftr__logo { width: auto; max-width: none; }
#footer.dpm-ftr .dpm-ftr__logo img { height: 34px; width: auto; display: block; }
#footer.dpm-ftr .dpm-ftr__about p { font-size: 13px; line-height: 1.9; margin: 0 0 20px; max-width: 270px; color: var(--dpm-on-navy-2); }
#footer.dpm-ftr .dpm-ftr__contact { display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.dpm-ftr__contact li { display: flex; gap: 10px; align-items: flex-start; }
.dpm-ftr__contact .dpm-icon { color: #fff; font-size: 15px; margin-top: 2px; }
#footer.dpm-ftr h4 { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #fff; margin: 0 0 18px; padding: 0; }
#footer.dpm-ftr .dpm-ftr__col ul { display: flex; flex-direction: column; gap: 9px; }

.dpm-ftr__regio { max-width: 1240px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.dpm-ftr__regio-title { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 13px; color: #fff; margin: 0 0 12px; }
#footer.dpm-ftr .dpm-ftr__regio ul { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }

.dpm-ftr__btm { max-width: 1240px; margin: 30px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; }
#footer.dpm-ftr .dpm-ftr__social { color: #fff; font-size: 16px; line-height: 0; }