/*
Theme Name:Child Theme for Divi
Theme URI: http://wordpress-style.net
Description: Child Theme For Divi
Author: Eduard Ungureanu
Author URI: http://wordpress-style.net
Template: Divi
Version: 1.0
*/

/* Start your custom CSS bellow this comment
============================================ */

#footer-info a{
	color: #ffb400 !important;
}

/* =====================================================================
   Hafkamp / VSEP mega menu skin (on top of Max Mega Menu Pro)
   ===================================================================== */

:root {
	--vsep-base:    #171d2e;
	--vsep-amber:   #ffab38;
	--vsep-crimson: #bf1f4b;
	--vsep-coral:   #f06441;
	--vsep-white:   #ffffff;
	--vsep-light:   #f5f5f7;
	--vsep-text:    #171d2e;
	--vsep-muted:   #5f6474;
	--vsep-border:  #e0e0e8;
	--vsep-icon-bg: rgba(255,171,56,.12);
}

/* --- Header background & sticky shadow ------------------------------- */
#main-header,
#main-header.et-fixed-header {
	background-color: var(--vsep-base) !important;
	box-shadow: 0 2px 16px rgba(0,0,0,.35);
}

/* --- Top-level menu bar --------------------------------------------- */
#mega-menu-wrap-primary-menu {
	background: transparent;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu {
	background: transparent;
}

/* Hide "Direct betalen" pill (id 12102) — removed in client mock.
   Uses both `.mega-menu-item` AND `.mega-menu-item-12102` to outrank the
   sibling rule that forces `display: flex` on every top-level item. */
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-menu-item-12102 {
	display: none !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
	background: transparent;
	color: rgba(255,255,255,.95);
	font-size: 1.05rem;
	font-weight: 500;
	padding: 0 .85rem;
	height: 100%;
	display: flex;
	align-items: center;
	gap: .28rem;
	border-bottom: 3px solid transparent;
	transition: color .16s, border-color .16s;
	text-transform: none;
	letter-spacing: 0;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current_page_item > a.mega-menu-link {
	color: var(--vsep-white) !important;
	background: transparent !important;
	border-bottom-color: var(--vsep-amber);
}
/* Kill the Divi/MMM default current-item background highlight */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current_page_item {
	background: transparent !important;
}

/* Chevron */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
	transition: transform .22s;
	margin-left: .15rem;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
	transform: rotate(180deg);
}

/* --- Mega panel: full-width relative to #main-header --------------- */
/* Make #main-header the positioning ancestor (it's full viewport width) */
.et_header_style_left #main-header { position: relative; }
.et_header_style_left #main-header.et-fixed-header { position: fixed; }
/* Strip out the wrap/container/nav from positioning chain so panel anchors to #main-header */
.et_header_style_left #main-header .container.et_menu_container,
.et_header_style_left #main-header #et-top-navigation,
.et_header_style_left #main-header nav#top-menu-nav,
.et_header_style_left #main-header #mega-menu-wrap-primary-menu,
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu,
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu {
	position: static !important;
}
/* Panel itself: absolute, full-width of #main-header */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: 2% !important;
	right: 2% !important;
	width: 96% !important;
	max-width: 96% !important;
	background: var(--vsep-white) !important;
	border-top: 3px solid var(--vsep-amber);
	box-shadow: 0 16px 48px rgba(0,0,0,.16);
	padding: 2rem 3rem 2rem 5rem !important;
	box-sizing: border-box;
	z-index: 999;
}

/* Override MMM's float-based 1/6 columns with a real 4-column CSS grid */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu#mega-menu-item-12106 > ul.mega-sub-menu {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 2.5rem;
	row-gap: 2rem;
	align-items: stretch;
}
/* Dark CTA card: discrete rounded card with breathing room (border-radius
   and amber top border come from the base .mega-vsep-cta-column rule) */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu#mega-menu-item-12106 > ul.mega-sub-menu > li.mega-menu-item {
	width: auto !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	clear: none !important;
}

/* --- CTA column (4th column, dark card) ----------------------------- */
/* Selector matches grid-item specificity (3 IDs + extra class) to win against
   the `padding: 0 !important` rule on grid children. */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu#mega-menu-item-12106 > ul.mega-sub-menu > li.mega-vsep-cta-column.vsep-cta-column {
	background: var(--vsep-base);
	border-radius: 10px;
	border-top: 0;
	padding: 1.75rem 1.75rem !important;
	display: flex !important;
	flex-direction: column;
	gap: .9rem;
	color: var(--vsep-white);
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > a.mega-menu-link {
	color: var(--vsep-white) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin-bottom: .25rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > a.mega-menu-link::before { display: none !important; }
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > a.mega-menu-link .mega-description-group {
	color: rgba(255,255,255,.72);
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > a.mega-menu-link .mega-menu-description {
	color: rgba(255,255,255,.72) !important;
	font-size: .8rem !important;
	font-weight: 400 !important;
}

/* CTA action sub-items (phone, mail) — stylized like checklist */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > ul.mega-sub-menu {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: 1.5rem !important;     /* big gap between subtitle and first icon line — matches mock */
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	color: var(--vsep-white) !important;
	background: transparent !important;
	font-size: .95rem !important;
	font-weight: 600 !important;
	padding: .5rem 0 !important;
	border-radius: 4px;
	text-transform: none !important;
	letter-spacing: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: .75rem;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 1.35rem !important;
	height: 1.35rem !important;
	background: transparent !important;
	color: var(--vsep-amber) !important;
	position: static !important;
	font-size: 1.05rem !important;
	margin-right: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > ul.mega-sub-menu > li.vsep-cta-phone > a.mega-menu-link::before { content: "\f095" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > ul.mega-sub-menu > li.vsep-cta-mail > a.mega-menu-link::before { content: "\f0e0" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
	color: var(--vsep-white) !important;
	background: rgba(255,255,255,.05) !important;
}

/* Ruimte tussen items binnen een rubric-kolom */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu {
	display: flex !important;
	flex-direction: column;
	gap: 25px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Column titles */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	font-size: .66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .85px;
	color: var(--vsep-crimson);
	padding-bottom: .4rem;
	margin-bottom: .75rem;
	border-bottom: 2px solid var(--vsep-amber);
	background: transparent !important;
}

/* Word-wrap fix — MMM puts `word-break: break-all` on narrow columns;
   keep words together.                                                 */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item .mega-description-group,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item .mega-menu-description {
	word-break: normal !important;
	overflow-wrap: normal !important;
	white-space: normal !important;
}

/* Sub-menu items (links inside rubrics) */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	padding: .55rem .55rem .55rem 44px !important;
	border-radius: 5px;
	color: var(--vsep-text) !important;
	font-size: .85rem !important;
	line-height: 1.35;
	background: transparent !important;
	transition: background .13s, color .13s;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
	background: #fff8f0 !important;
	color: var(--vsep-base) !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu > li.mega-menu-item ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
	background: #fff8f0 !important;
	color: var(--vsep-base) !important;
}

/* Per-item icon (Font Awesome 6 ::before) — rounded amber-tinted tile  */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	position: relative;
	padding-left: 44px !important;
	min-height: 30px;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
	width: 30px !important;
	height: 30px !important;
	background: var(--vsep-icon-bg) !important;
	border-radius: 5px !important;
	color: var(--vsep-crimson) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	flex-shrink: 0 !important;
	position: absolute !important;
	left: 0 !important;
	top: 4px !important;
	font-weight: 900 !important;
	margin: 0 !important;
	line-height: 1 !important;
}
/* Don't render icon on rubric headers themselves (they have no icon set) */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > a.mega-menu-link {
	padding-left: 0 !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > a.mega-menu-link::before {
	display: none !important;
}

/* Per-item description (MMM Pro) — render under title */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric li.mega-menu-item .mega-description-group {
	display: flex;
	flex-direction: column;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric li.mega-menu-item .mega-description-group .mega-menu-description {
	font-size: .73rem;
	color: var(--vsep-muted);
	font-weight: 400;
	margin-top: 1px;
	letter-spacing: 0;
	text-transform: none;
}

/* Per-item badge inline (override MMM Pro absolute positioning) */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item .mega-menu-badge {
	position: static !important;
	display: inline-block !important;
	font-size: .62rem;
	font-weight: 700;
	padding: .08rem .38rem !important;
	border-radius: 20px !important;
	background: var(--vsep-crimson) !important;
	color: #fff !important;
	margin-left: .35rem !important;
	vertical-align: middle;
	transform: none !important;
	top: auto !important;
	right: auto !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.vsep-badge-new .mega-menu-badge {
	background: #1a7a3c !important;
}

/* --- Flyout submenu position fix (open *under* the header) ---------- */
/* MMM relies on the parent li being position:relative.
   Our flex header neutralizes that — re-assert it.                     */
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-flyout {
	position: relative;
}
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu {
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
}
/* Mega panel: span full header width, drop below header */
.et_header_style_left #main-header #mega-menu-wrap-primary-menu {
	position: relative;
}
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu {
	position: static; /* so panel positions relative to wrap, not li */
}
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
	top: 100% !important;
	left: 2% !important;
	right: 2% !important;
	width: 96% !important;
}

/* --- Flyout submenu styling ----------------------------------------- */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu {
	background: var(--vsep-white);
	border-top: 3px solid var(--vsep-amber);
	box-shadow: 0 16px 48px rgba(0,0,0,.16);
	min-width: 260px;
	padding: .5rem 0;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	color: var(--vsep-text) !important;
	background: transparent !important;
	font-weight: 500;
	font-size: .83rem;
	padding: .55rem 1rem !important;
	text-transform: none;
	letter-spacing: 0;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
	background: #fff8f0 !important;
	color: var(--vsep-base) !important;
}

/* --- "Direct betalen" CTA pill -------------------------------------- */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item-12102 > a.mega-menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: .35rem;
	background: var(--vsep-amber) !important;
	color: var(--vsep-base) !important;
	border-radius: 5px;
	padding: .48rem 1rem !important;
	margin: 0 .15rem;
	height: auto;
	border: 1.5px solid var(--vsep-amber) !important;
	border-bottom: 0 !important;
	font-size: .81rem !important;
	font-weight: 700;
	transition: background .16s, color .16s, border-color .16s;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item-12102 > a.mega-menu-link:hover {
	background: #e89a2a !important;
	border-color: #e89a2a !important;
	color: var(--vsep-base) !important;
}

/* Kill the 80px padding-top Divi adds to make space for a fixed header
   — our header is position:relative on rest, so it needs no spacer.    */
.et_header_style_left #page-container {
	padding-top: 0 !important;
}
/* When sticky kicks in, push the page down by header height to avoid jump */
.et_header_style_left.et_fixed_nav #page-container {
	padding-top: 0;
}

/* --- Header layout: logo links, nav midden, CTA's rechts ------------ */
/* Roomier header (matches client mock proportions): ~100px tall        */
.et_header_style_left #main-header,
.et_header_style_left #main-header.et-fixed-header {
	min-height: 100px;
}
.et_header_style_left #main-header .container.et_menu_container {
	display: flex !important;
	align-items: center;
	gap: 1.5rem;
	height: 100px;
	min-height: 100px;
	width: 96vw;
	max-width: 96vw;
	padding-top: 0;
	padding-bottom: 0;
}
.et_header_style_left #main-header.et-fixed-header .container.et_menu_container {
	height: 70px;
	min-height: 70px;
}

/* Logo */
.et_header_style_left #main-header .logo_container {
	flex-shrink: 0;
	width: auto !important;
	max-width: 320px;
	height: 72px !important;
	position: relative;
	float: none;
	display: flex;
	align-items: center;
	margin: 0;
}
.et_header_style_left #main-header.et-fixed-header .logo_container {
	height: 50px !important;
}
.et_header_style_left #main-header .logo_container a { display: block; line-height: 0; }
.et_header_style_left #main-header #logo {
	max-height: 72px !important;
	height: auto !important;
	width: auto !important;
	display: block;
}
.et_header_style_left #main-header.et-fixed-header #logo {
	max-height: 50px !important;
}
.et_header_style_left #main-header .logo_container .logo_helper { display: none; }

/* Top-navigation wrapper — flex grow, fill the rest */
.et_header_style_left #main-header #et-top-navigation {
	flex: 1 1 auto;
	display: flex !important;
	align-items: stretch;
	padding: 0 !important;
	margin: 0 !important;
	height: 100%;
	width: auto !important;
}
.et_header_style_left #main-header #top-menu-nav,
.et_header_style_left #main-header #mega-menu-wrap-primary-menu {
	flex: 1 1 auto;
	display: flex !important;
	align-items: stretch;
	width: 100%;
	float: none !important;
	height: 100%;
}
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	width: 100%;
	height: 100%;
	gap: 2.5rem;     /* visible breathing room between every top-level item */
}
/* Items pack left after the logo with their own padding for spacing;
   CTAs pinned right via existing `margin-left: auto` on first CTA. */
/* All top-level li's stretch full height */
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item {
	display: flex !important;
	align-items: stretch;
	flex: 0 0 auto;
}
.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
	height: 100%;
	display: flex !important;
	align-items: center;
}

/* Search icon */
.et_header_style_left #main-header #et_top_search {
	display: none !important;
}
.et_header_style_left #main-header #et_search_icon { color: rgba(255,255,255,.7); }
.et_header_style_left #main-header #et_search_icon:hover { color: var(--vsep-amber); }

/* --- CTA pills (right side) ----------------------------------------- */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-header-cta {
	display: flex;
	align-items: center;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-header-cta:first-of-type {
	margin-left: auto;
	padding-left: 3rem;   /* minimum visible gap between Contact and first CTA */
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-header-cta > a.mega-menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: .35rem;
	padding: .85rem 1.5rem !important;
	border-radius: 6px;
	font-size: 1rem !important;
	font-weight: 700;
	border: 1.5px solid transparent;
	height: auto;
	background: transparent !important;
	border-bottom: 0 !important;
	transition: background .16s, color .16s, border-color .16s;
	margin: 0 .25rem;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-cta-ghost > a.mega-menu-link {
	border-color: rgba(255,255,255,.35) !important;
	color: rgba(255,255,255,.85) !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-cta-ghost > a.mega-menu-link:hover {
	border-color: var(--vsep-amber) !important;
	color: var(--vsep-amber) !important;
	background: transparent !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-cta-amber > a.mega-menu-link {
	background: var(--vsep-amber) !important;
	color: var(--vsep-base) !important;
	border-color: var(--vsep-amber) !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-cta-amber > a.mega-menu-link:hover {
	background: #e89a2a !important;
	border-color: #e89a2a !important;
	color: var(--vsep-base) !important;
}

/* Hide CTA's on mobile (where MMM hamburger replaces the nav) */
@media (max-width: 980px) {
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-header-cta {
		display: none;
	}
}

/* =====================================================================
   Responsive: tablet (≤1100px) — collapse 4-col grid to 2 columns
   ===================================================================== */
@media (max-width: 1100px) {
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu#mega-menu-item-12106 > ul.mega-sub-menu {
		grid-template-columns: repeat(2, 1fr) !important;
		column-gap: 2rem;
		row-gap: 2rem;
	}
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu#mega-menu-item-12106 > ul.mega-sub-menu > li.mega-vsep-cta-column.vsep-cta-column {
		margin-left: 0 !important;
		grid-column: 1 / -1;          /* CTA card spans full width on its row */
	}
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
		padding: 2rem 1.75rem !important;
	}
}

/* =====================================================================
   Mobile (≤768px) — MMM hamburger / accordion mode
   Reset all the desktop flex/grid/static-position tricks so MMM's
   built-in mobile layout works.
   ===================================================================== */
@media (max-width: 980px) {
	/* Hide Divi's own mobile menu — MMM provides the hamburger now */
	#et_mobile_nav_menu,
	#main-header .mobile_menu_bar,
	#main-header .mobile_nav {
		display: none !important;
	}
}
@media (max-width: 768px) {
	/* Header: let logo + hamburger stack naturally, no forced 75px row */
	.et_header_style_left #main-header .container.et_menu_container {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 0;
		height: auto;
		min-height: 60px;
		width: 92vw;
		max-width: 92vw;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.et_header_style_left #main-header,
	.et_header_style_left #main-header.et-fixed-header {
		min-height: 60px;
		position: relative !important;
	}
	.et_header_style_left #main-header .logo_container,
	.et_header_style_left #main-header.et-fixed-header .logo_container {
		height: 56px !important;
		max-width: 260px;
	}
	.et_header_style_left #main-header #logo,
	.et_header_style_left #main-header.et-fixed-header #logo {
		max-height: 56px !important;
		max-width: 100% !important;     /* override Divi's default 50% cap */
		width: auto !important;
	}

	/* Top-navigation wrapper: stop pretending to be a flex row */
	.et_header_style_left #main-header #et-top-navigation {
		flex: 0 0 auto;
		display: block !important;
		margin-left: auto !important;
		height: auto;
	}
	.et_header_style_left #main-header #top-menu-nav,
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu {
		display: block !important;
		flex: 0 0 auto;
		width: auto;
		height: auto;
	}

	/* Menu container: HIDE by default on mobile (desktop rule forces
	   display:flex with !important — we need to reverse that). Only show
	   when MMM has marked the toggle as open. */
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu,
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu {
		display: none !important;
		flex-direction: column;
		width: 100%;
		height: auto;
		flex-wrap: wrap !important;
	}
	/* Show menu when MMM toggle has been opened — needs higher specificity
	   than the desktop hide rule (3 IDs + 1 class). */
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu .mega-menu-toggle.mega-menu-open ~ #mega-menu-primary-menu {
		display: block !important;
	}
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item {
		display: block !important;
		flex: 1 1 100%;
		width: 100%;
	}
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
		display: flex !important;
		height: auto;
		padding: .85rem 1rem !important;
		border-bottom: 1px solid rgba(255,255,255,.08);
		justify-content: space-between;
	}

	/* Drop the position-static chain so panel flows in-place (accordion) */
	.et_header_style_left #main-header .container.et_menu_container,
	.et_header_style_left #main-header #et-top-navigation,
	.et_header_style_left #main-header nav#top-menu-nav,
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu,
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu,
	.et_header_style_left #main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu {
		position: relative !important;
	}

	/* Mega panel: full-width in-flow accordion (no absolute) */
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu,
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu#mega-menu-item-12106 > ul.mega-sub-menu {
		position: static !important;
		display: block !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 1rem !important;
		grid-template-columns: 1fr !important;
		box-shadow: none;
		border-top: 0;
		background: rgba(255,255,255,.04) !important;
	}

	/* Diensten rubric columns stack to single column */
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric,
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column {
		width: 100% !important;
		float: none !important;
		margin: 0 0 1rem 0 !important;
		grid-column: auto !important;
	}

	/* Rubric header — visible on accordion dark bg */
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > a.mega-menu-link {
		color: var(--vsep-amber) !important;
		border-bottom: 1px solid rgba(255,171,56,.35);
		padding: .6rem .25rem !important;
		margin-bottom: .25rem;
	}
	/* Rubric child links: light text on dark accordion bg */
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
		color: rgba(255,255,255,.92) !important;
	}
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-rubric li.mega-menu-item .mega-menu-description {
		color: rgba(255,255,255,.55) !important;
	}

	/* CTA card on mobile: no card chrome — just inline text */
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-vsep-cta-column.vsep-cta-column {
		background: transparent !important;
		border-radius: 0 !important;
		border-top: 0 !important;
		padding: .5rem 0 1rem !important;
	}

	/* Show CTA pills inside the mobile menu (re-enable, stack full-width) */
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-header-cta {
		display: block !important;
		width: 100%;
	}
	#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.vsep-header-cta > a.mega-menu-link {
		display: block !important;
		text-align: center;
		margin: .4rem 1rem !important;
		padding: .65rem 1rem !important;
	}

	/* Hamburger toggle — keep visible on the dark header */
	#mega-menu-wrap-primary-menu .mega-menu-toggle,
	#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block,
	#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block .mega-toggle-animated-box {
		background: transparent !important;
	}
	#mega-menu-wrap-primary-menu .mega-menu-toggle {
		min-height: 44px;
	}
	#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block .mega-toggle-label {
		color: var(--vsep-white) !important;
	}
	/* The three hamburger bars (and animated cross when open) */
	#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block .mega-toggle-animated-inner,
	#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block .mega-toggle-animated-inner::before,
	#mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block .mega-toggle-animated-inner::after {
		background-color: var(--vsep-white) !important;
	}

	/* Page padding restore — Divi normally pushes down for fixed header */
	.et_header_style_left #page-container {
		padding-top: 0 !important;
	}
}