/* Desktop dropdown + 2nd-level flyout menus (loaded separately — style.css hits browser rule limits). */

@media screen and (min-width: 992px) {
	/* Allow flyouts to escape any clipping container. */
	nav.main-navigation,
	nav.main-navigation .outer-container,
	nav.main-navigation .main-nav,
	nav.main-navigation .cta-menu,
	nav.main-navigation .main-nav .d-flex,
	#primary-menu,
	#primary-menu-ul,
	#primary-menu-ul > li,
	#primary-menu-ul > li > .sub-menu,
	#primary-menu-ul .sub-menu li {
		overflow: visible !important;
	}

	/* Neutralize parent-theme transforms that shift nested submenus off-screen
	   (parent theme moves them with translateX(±100%) based on .right-side/.left-side). */
	#primary-menu-ul .menu-item-has-children ul.sub-menu,
	#primary-menu-ul.right-side ul.sub-menu li.menu-item-has-children ul.sub-menu,
	#primary-menu-ul.left-side ul.sub-menu li.menu-item-has-children ul.sub-menu,
	.menu-item-has-children.right-side ul.sub-menu li.menu-item-has-children ul.sub-menu,
	.menu-item-has-children.left-side ul.sub-menu li.menu-item-has-children ul.sub-menu {
		transform: none !important;
	}

	#primary-menu-ul > .menu-item-has-children {
		position: relative;
	}

	/* Top-level dropdown */
	#primary-menu-ul > .menu-item-has-children > .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: auto;
		width: auto;
		min-width: 230px;
		margin: 0;
		padding: 8px 0;
		background: #fff;
		border: 0;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
		z-index: 9999;
		list-style: none;
	}

	/* Flip near the right edge of viewport (added by JS on hover). */
	#primary-menu-ul > .menu-item-has-children.flyout-right > .sub-menu {
		left: auto;
		right: 0;
		border-radius: 12px 0 12px 12px;
	}

	#primary-menu-ul > .menu-item-has-children:hover > .sub-menu,
	#primary-menu-ul > .menu-item-has-children.is-hover > .sub-menu {
		display: block !important;
	}

	/* 2nd-level flyout */
	#primary-menu-ul .sub-menu .menu-item-has-children {
		position: relative;
	}

	#primary-menu-ul .sub-menu .menu-item-has-children > .sub-menu {
		display: none;
		position: absolute;
		top: -8px;
		left: 100%;
		right: auto;
		min-width: 210px;
		margin: 0;
		padding: 8px 0;
		background: #fff;
		border: 0;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
		z-index: 10000;
		list-style: none;
	}

	/* When the parent (top-level) opens to the right side of viewport,
	   the nested flyout must open to the LEFT instead. */
	#primary-menu-ul > .menu-item-has-children.flyout-right .sub-menu .menu-item-has-children > .sub-menu {
		left: auto;
		right: 100%;
	}

	#primary-menu-ul .sub-menu .menu-item-has-children:hover > .sub-menu,
	#primary-menu-ul .sub-menu .menu-item-has-children.is-hover > .sub-menu {
		display: block !important;
	}

	/* Reset parent-theme accordion/positioning rules that fire on laptop widths. */
	.main-nav .menu-item-has-children:hover > ul.sub-menu {
		display: block !important;
	}

	.main-nav ul.sub-menu {
		position: absolute !important;
	}

	.main-nav .menu-item-has-children > a {
		position: relative !important;
		width: auto !important;
	}

	.main-nav .menu-item-has-children::after {
		display: none !important;
	}

	/* Kill the parent-theme Font Awesome down-caret on top-level menu links */
	#primary-menu-ul > .menu-item-has-children > a::after {
		content: "" !important;
		font-family: inherit !important;
		background: none !important;
		display: inline-block !important;
		width: 8px !important;
		height: 8px !important;
		border: 0 !important;
		border-right: 2px solid currentColor !important;
		border-bottom: 2px solid currentColor !important;
		margin: 0 0 3px 8px !important;
		padding: 0 !important;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		color: inherit !important;
		opacity: 0.55;
		transform: rotate(45deg);
		transition: transform 0.2s ease, opacity 0.2s ease;
		vertical-align: middle;
		font-size: 0 !important;
	}

	#primary-menu-ul > .menu-item-has-children:hover > a::after,
	#primary-menu-ul > .menu-item-has-children.is-hover > a::after {
		opacity: 1;
		transform: rotate(225deg);
		margin-bottom: -2px !important;
	}

	/* Slightly tighter, balanced top-level menu items */
	#primary-menu-ul > li > a {
		padding: 12px 12px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		letter-spacing: 0.2px !important;
		transition: color 0.2s ease, background 0.2s ease;
		border-radius: 6px;
	}

	/* Hover: subtle white wash + a soft green underline. We deliberately do
	   NOT recolor the text to green — the parent theme has
	   `nav.main-navigation a:hover { color: #56AB40 !important; }` which
	   made the label unreadable against the dark blue nav. Override that
	   here so the text stays white and the accent lives in the underline. */
	#primary-menu-ul > li > a,
	nav.main-navigation #primary-menu-ul > li > a {
		color: #ffffff !important;
	}

	#primary-menu-ul > li > a:hover,
	#primary-menu-ul > li > a:focus,
	#primary-menu-ul > li.current-menu-item > a,
	#primary-menu-ul > li.current-menu-ancestor > a,
	nav.main-navigation #primary-menu-ul > li > a:hover,
	nav.main-navigation #primary-menu-ul > li > a:focus {
		color: #ffffff !important;
		background: rgba(255, 255, 255, 0.08) !important;
		box-shadow: inset 0 -2px 0 0 #56AB40;
	}

	/* Also keep the caret white on hover (parent-theme green tint applied
	   currentColor otherwise pushed it green). */
	#primary-menu-ul > li.menu-item-has-children:hover > a::after,
	#primary-menu-ul > li.menu-item-has-children.is-hover > a::after {
		border-color: #ffffff !important;
	}

	#primary-menu-ul .sub-menu li,
	#primary-menu-ul .sub-menu .sub-menu li {
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	#primary-menu-ul .sub-menu li a,
	#primary-menu-ul .sub-menu .sub-menu li a {
		color: #222 !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
		padding: 9px 18px !important;
		white-space: nowrap;
		display: block;
		width: 100%;
		box-sizing: border-box;
		background: transparent !important;
		border-radius: 0 !important;
	}

	/* Nested (3rd-level) items get a smaller size + lighter weight so the
	   hierarchy stays legible even when a fly-out has grand-children. */
	#primary-menu-ul .sub-menu .sub-menu li a {
		font-size: 12px !important;
		font-weight: 400 !important;
		color: #40506a !important;
	}

	#primary-menu-ul .sub-menu li a:hover,
	#primary-menu-ul .sub-menu .sub-menu li a:hover,
	#primary-menu-ul .sub-menu li.current-menu-item > a,
	#primary-menu-ul .sub-menu .sub-menu li.current-menu-item > a {
		background: #f3f7fb !important;
		color: #003471 !important;
	}

	/* Arrow on items that have nested children */
	#primary-menu-ul .sub-menu .menu-item-has-children > a {
		padding-right: 32px !important;
		position: relative;
	}

	#primary-menu-ul .sub-menu .menu-item-has-children > a::after {
		content: "" !important;
		position: absolute !important;
		top: 50% !important;
		right: 14px !important;
		left: auto !important;
		width: 6px;
		height: 6px;
		margin: 0 !important;
		padding: 0 !important;
		border-top: 2px solid #56AB40;
		border-right: 2px solid #56AB40;
		transform: translateY(-50%) rotate(45deg);
		background: none !important;
		font-family: inherit !important;
		font-weight: normal !important;
		color: transparent !important;
		display: block !important;
	}

	/* When parent opens to the right side, nested arrows flip to point left */
	#primary-menu-ul > .menu-item-has-children.flyout-right .sub-menu .menu-item-has-children > a {
		padding-right: 18px !important;
		padding-left: 32px !important;
	}

	#primary-menu-ul > .menu-item-has-children.flyout-right .sub-menu .menu-item-has-children > a::after {
		right: auto !important;
		left: 14px !important;
		transform: translateY(-50%) rotate(-135deg);
	}

	/* ── Tighter CTA buttons (Contact + Waardebepaling) ───────────────────── */
	.main-nav ul li.btn-green-head + li.btn-green-head,
	.main-nav ul li.btn-green-head + li.contact-menus {
		margin-left: 6px !important;
	}

	.cta-menu #primary-menu-ul {
		gap: 2px;
	}

	/* Give the CTA buttons proper button typography rather than inheriting
	   the plain-menu-link style from #primary-menu-ul > li > a. Slightly
	   smaller font + more horizontal padding = classic pill button feel that
	   pairs cleanly with the plain menu items. */
	#primary-menu-ul > li.btn-green-head > a,
	#primary-menu-ul > li.contact-menus > a {
		padding: 10px 20px !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		letter-spacing: 0.3px !important;
		border-radius: 999px !important;
		line-height: 1.2 !important;
		background: #56AB40 !important;
		color: #ffffff !important;
		box-shadow: 0 4px 12px rgba(86, 171, 64, 0.28);
		transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	}

	#primary-menu-ul > li.btn-green-head > a:hover,
	#primary-menu-ul > li.contact-menus > a:hover {
		background: #4a9636 !important;
		color: #ffffff !important;
		box-shadow: 0 6px 16px rgba(86, 171, 64, 0.4);
		transform: translateY(-1px);
	}

	/* Secondary/first CTA (Contact) — outlined so it reads as a ghost button
	   on the dark-blue nav bar without competing with the primary
	   "Waardebepaling" pill. Outline colour is derived from the nav so it
	   remains visible whether the header is dark (initial) or scrolled. */
	#primary-menu-ul > li.btn-green-head:has(+ li.btn-green-head) > a {
		background: transparent !important;
		color: #ffffff !important;
		box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
	}

	#primary-menu-ul > li.btn-green-head:has(+ li.btn-green-head) > a:hover {
		background: rgba(255, 255, 255, 0.1) !important;
		color: #ffffff !important;
		box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
		transform: translateY(-1px);
	}

	/* Kill the caret pseudo-element on CTA buttons — they never have
	   children in the menu, so no chevron should appear. */
	#primary-menu-ul > li.btn-green-head > a::after,
	#primary-menu-ul > li.contact-menus > a::after {
		display: none !important;
	}

	/* ── Header socials: cleaner pill-style ───────────────────────────────── */
	.cta-menu + .socials.headers,
	nav.main-navigation .socials.headers {
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		margin: 0 0 0 14px !important;
		padding: 0;
		position: static !important;
	}

	/* !important is needed because the parent + child style.css sets
	   `a.social-icon-single { background: transparent !important; }` and we
	   need to override that on the header pill. */
	.socials.headers a.social-icon-single {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 48px !important;
		height: 48px !important;
		border-radius: 50% !important;
		background: rgba(255, 255, 255, 0.18) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
		transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
		padding: 0 !important;
		margin: 0;
	}

	.socials.headers a.social-icon-single:hover {
		background: #56AB40 !important;
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(86, 171, 64, 0.4) !important;
	}

	.socials.headers a.social-icon-single svg {
		width: 22px;
		height: 22px;
	}

	.socials.headers a.social-icon-single svg,
	.socials.headers a.social-icon-single * {
		fill: #ffffff !important;
		transition: fill 0.2s ease;
	}

	.socials.headers a.social-icon-single:hover svg,
	.socials.headers a.social-icon-single:hover * {
		fill: #ffffff !important;
	}

	.cta-menu + .socials.headers,
	nav.main-navigation .socials.headers {
		gap: 10px !important;
	}
}

/* Show socials a bit earlier than full 1450px so they're visible on common
   laptop widths (1366px). The narrow 1280–1365px range we keep hidden so the
   hamburger layout stays clean. */
@media screen and (min-width: 1366px) {
	nav.main-navigation .socials.headers {
		display: inline-flex !important;
	}
}

/* ── Topbar: unified typography across left + right ────────────────────────── */
/* Full-bleed dark-blue background, but the INNER row is constrained to
   width: 90% + auto margins so its content aligns to the same visual gutters
   the nav bar uses (nav uses .outer-container { width: 90% }). Result: the
   bg stretches edge-to-edge, but the topbar text lines up with the logo /
   menu below it. */
.topbar-container {
	background: #00264f;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.topbar-container .row {
	width: 90%;
	margin: 0 auto !important;
	padding: 0 !important;
	box-sizing: border-box;
	max-width: none;
}

/* The topbar's Bootstrap columns add a default 15px gutter that pushes the
   left/right text inward. Zero it out so the topbar text lines up exactly
   with the logo/menu below (which sit flush against the .outer-container
   edges). */
.topbar-container .topbar-left,
.topbar-container .topbar-right {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.topbar-left,
.topbar-right {
	padding: 9px 0 !important;
}

.topbar-container * {
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	color: #d6e4f5 !important;
}

.topbar-right span:nth-child(1) {
	margin-right: 18px !important;
}

.topbar-right .tel a,
.topbar-right .mail a {
	color: #ffffff !important;
	font-weight: 500 !important;
	text-decoration: none;
}

.topbar-right .tel a:hover,
.topbar-right .mail a:hover {
	color: #56AB40 !important;
}

.topbar-right span i,
.topbar-left span i {
	color: #56AB40 !important;
	font-size: 12px !important;
	margin-right: 6px !important;
}

/* ── Mobile menu: cleaner, easier to tap ──────────────────────────────────── */
@media screen and (max-width: 991px) {
	.nav-mob.open-mobile {
		padding-top: 90px !important;
		background: #ffffff !important;
		align-items: stretch !important;
	}

	.nav-mob .container {
		max-width: 100% !important;
		padding: 0 !important;
	}

	.nav-mob .row,
	.nav-mob .col-md-12 {
		margin: 0 !important;
		padding: 0 !important;
	}

	#mobile-menu {
		width: 100%;
	}

	#mobile-menu-ul {
		list-style: none;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	#mobile-menu-ul > li {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		padding: 0 !important;
		margin: 0 !important;
		border-bottom: 1px solid #eef2f7;
		position: relative;
	}

	#mobile-menu-ul > li > a {
		display: block !important;
		padding: 14px 56px 14px 22px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: #003471 !important;
		text-decoration: none;
		line-height: 1.3 !important;
		background: transparent !important;
		border-radius: 0 !important;
	}

	/* Kill the parent-theme SVG arrow on every level so we control them ourselves */
	#mobile-menu-ul .menu-item-has-children::after,
	#mobile-menu-ul .menu-item-has-children::before {
		display: none !important;
		content: none !important;
		background: none !important;
	}

	/* Top-level chevron (added on the <a>) */
	#mobile-menu-ul > li.menu-item-has-children > a::after {
		content: "" !important;
		position: absolute !important;
		right: 24px !important;
		top: 50% !important;
		width: 10px !important;
		height: 10px !important;
		border-right: 2px solid #56AB40 !important;
		border-bottom: 2px solid #56AB40 !important;
		border-top: 0 !important;
		border-left: 0 !important;
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.2s ease;
		background: none !important;
		font-family: inherit !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		color: transparent !important;
		font-size: 0 !important;
	}

	#mobile-menu-ul > li.menu-item-has-children.is-open > a::after {
		transform: translateY(-30%) rotate(225deg);
	}

	#mobile-menu-ul .sub-menu {
		display: none;
		list-style: none;
		margin: 0 !important;
		padding: 4px 0 8px !important;
		background: #f6f9fc !important;
		border-radius: 0 !important;
		position: relative;
	}

	#mobile-menu-ul .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	/* Sub-menu list items: clean rows, no inner borders */
	#mobile-menu-ul .sub-menu li {
		display: block !important;
		width: 100% !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		text-align: left !important;
		position: relative !important;
	}

	/* 2nd-level links — lighter weight than top-level (which is 600 / 14px)
	   so the hierarchy reads at a glance. */
	#mobile-menu-ul .sub-menu > li > a {
		display: block !important;
		padding: 11px 50px 11px 38px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		color: #2f4a72 !important;
		text-decoration: none !important;
		line-height: 1.3 !important;
		background: transparent !important;
		border-radius: 0 !important;
		position: relative;
	}

	/* 3rd-level links — deeper indent, smaller, lightest weight */
	#mobile-menu-ul .sub-menu .sub-menu > li > a {
		padding: 10px 50px 10px 54px !important;
		font-size: 12px !important;
		font-weight: 400 !important;
		color: #50688a !important;
	}

	/* Subtle bullet dot before each sub-menu item — replaces the old vertical
	   guide line which the user flagged as weird. */
	#mobile-menu-ul .sub-menu > li > a::before {
		content: "";
		position: absolute;
		left: 22px;
		top: 50%;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #c7d3e3;
		transform: translateY(-50%);
		transition: background 0.2s ease, transform 0.2s ease;
	}

	#mobile-menu-ul .sub-menu .sub-menu > li > a::before {
		left: 38px;
		width: 3px;
		height: 3px;
		background: #d8e1ec;
	}

	#mobile-menu-ul .sub-menu li a:hover::before,
	#mobile-menu-ul .sub-menu li a:active::before,
	#mobile-menu-ul .sub-menu li.current-menu-item > a::before {
		background: #56AB40;
		transform: translateY(-50%) scale(1.4);
	}

	/* Chevron arrow on sub-menu items that themselves have children */
	#mobile-menu-ul .sub-menu .menu-item-has-children > a::after {
		content: "" !important;
		position: absolute !important;
		right: 24px !important;
		top: 50% !important;
		width: 9px !important;
		height: 9px !important;
		border-right: 2px solid #56AB40 !important;
		border-bottom: 2px solid #56AB40 !important;
		border-top: 0 !important;
		border-left: 0 !important;
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.2s ease;
		background: none !important;
		font-family: inherit !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		color: transparent !important;
		font-size: 0 !important;
	}

	#mobile-menu-ul .sub-menu .menu-item-has-children.is-open > a::after {
		transform: translateY(-30%) rotate(225deg);
	}

	#mobile-menu-ul .sub-menu li a:hover,
	#mobile-menu-ul .sub-menu li a:active,
	#mobile-menu-ul .sub-menu li.current-menu-item > a {
		background: rgba(86, 171, 64, 0.08) !important;
		color: #56AB40 !important;
	}

	/* CTA buttons as full-width pills inside the mobile menu */
	#mobile-menu-ul > li.btn-green-head,
	#mobile-menu-ul > li.contact-menus {
		border-bottom: 0 !important;
		padding: 6px 20px !important;
	}

	#mobile-menu-ul > li.btn-green-head > a,
	#mobile-menu-ul > li.contact-menus > a {
		display: block !important;
		padding: 13px 20px !important;
		background: #56AB40 !important;
		color: #ffffff !important;
		border-radius: 14px !important;
		text-align: center !important;
		font-family: 'Poppins', sans-serif !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		letter-spacing: 0.2px !important;
		text-transform: none !important;
		line-height: 1.2 !important;
		box-shadow: 0 6px 16px rgba(86, 171, 64, 0.28);
		transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	}

	#mobile-menu-ul > li.btn-green-head > a:hover,
	#mobile-menu-ul > li.btn-green-head > a:active,
	#mobile-menu-ul > li.contact-menus > a:hover,
	#mobile-menu-ul > li.contact-menus > a:active {
		background: #4a9636 !important;
		box-shadow: 0 4px 10px rgba(86, 171, 64, 0.35);
		transform: translateY(1px);
	}

	/* The first CTA (Contact) is styled as a secondary outlined button so it
	   doesn't compete visually with the primary "Waardebepaling" (Value
	   assessment) action. Both items share the btn-green-head class in the
	   WordPress menu, so we target using :has() — Contact is the
	   btn-green-head that has another btn-green-head as a next sibling. */
	#mobile-menu-ul > li.btn-green-head:has(+ li.btn-green-head) > a {
		background: transparent !important;
		color: #003471 !important;
		box-shadow: inset 0 0 0 1.5px rgba(0, 52, 113, 0.2);
	}

	#mobile-menu-ul > li.btn-green-head:has(+ li.btn-green-head) > a:hover,
	#mobile-menu-ul > li.btn-green-head:has(+ li.btn-green-head) > a:active {
		background: rgba(0, 52, 113, 0.06) !important;
		color: #003471 !important;
		box-shadow: inset 0 0 0 1.5px rgba(0, 52, 113, 0.4);
	}

	#mobile-menu-ul > li.btn-green-head > a::after,
	#mobile-menu-ul > li.contact-menus > a::after {
		display: none !important;
	}

	#mobile-menu-ul > li.btn-green-head:first-of-type {
		padding-top: 18px !important;
	}

	/* Contact info block in mobile menu */
	.mobile-contact-block {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 22px 22px 12px;
		margin-top: 12px;
		border-top: 1px solid #eef2f7;
	}

	.mobile-contact-link {
		display: flex !important;
		align-items: center;
		gap: 12px;
		padding: 10px 4px;
		color: #003471 !important;
		font-size: 13px !important;
		font-weight: 500;
		text-decoration: none !important;
		border-radius: 6px;
	}

	.mobile-contact-link:hover,
	.mobile-contact-link:active {
		background: rgba(0, 52, 113, 0.04);
		color: #56AB40 !important;
	}

	.mobile-contact-link i {
		color: #56AB40 !important;
		font-size: 16px !important;
		width: 22px;
		text-align: center;
	}

	/* Mobile social icons inside open menu */
	.nav-mob .socials.headers.mobile {
		display: flex !important;
		justify-content: center;
		align-items: center;
		gap: 18px;
		padding: 22px 22px 32px !important;
		margin: 0 !important;
		width: 100% !important;
	}

	.nav-mob .socials.headers.mobile a.social-icon-single {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 16px;
		background: #003471 !important;
		transition: background 0.2s ease, transform 0.15s ease;
	}

	.nav-mob .socials.headers.mobile a.social-icon-single:hover,
	.nav-mob .socials.headers.mobile a.social-icon-single:active {
		background: #56AB40 !important;
		transform: translateY(-1px);
	}

	.nav-mob .socials.headers.mobile a.social-icon-single svg {
		width: 24px;
		height: 24px;
	}

	.nav-mob .socials.headers.mobile a.social-icon-single svg,
	.nav-mob .socials.headers.mobile a.social-icon-single * {
		fill: #ffffff !important;
	}

	/* Hide WPML language picker inside mobile menu (already hidden via id) */
	#mobile-menu-ul .wpml-ls-item {
		display: none !important;
	}

	/* ── Modern hamburger button — clean rounded square ───────────────────── */
	/* Parent theme positions the hamburger with `top: -28px`, which pushes it
	   ABOVE the nav bar — that's why it looked too high AND why it visually
	   overlapped the WP admin bar avatar sitting above the nav. We re-anchor
	   it to the nav bar itself and vertically center it so it always sits
	   comfortably inside the blue header. */
	nav.main-navigation {
		position: relative;
	}

	.main-navigation .hamburger {
		position: absolute !important;
		top: 50% !important;
		right: 15px !important;
		transform: translateY(-50%) !important;
		bottom: auto !important;
		width: 46px !important;
		height: 46px !important;
		padding: 0 !important;
		background: #ffffff !important;
		border-radius: 12px !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		z-index: 10000 !important;
		transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	}

	.main-navigation .hamburger:hover,
	.main-navigation .hamburger:active {
		background: #f4f7fb !important;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24) !important;
	}

	/* Reset the 3 inner divs and rebuild as 2 clean lines */
	.main-navigation .hamburger div {
		min-height: 0 !important;
		margin: 0 !important;
		width: 20px !important;
		height: 2px !important;
		background: #003471 !important;
		border-radius: 2px !important;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	/* Hide the middle line — modern minimal two-line look */
	.main-navigation .hamburger div:nth-child(2) {
		display: none !important;
	}

	/* When menu is open: morph two lines into a clean X. Both lines are
	   absolute-positioned at the exact center of the 46x46 button so they
	   overlap, then each rotates in the opposite direction. */
	.main-navigation .hamburger.open-burger {
		background: #ffffff !important;
	}

	.main-navigation .hamburger.open-burger div {
		background: #003471 !important;
		position: absolute !important;
		top: 22px !important;          /* (46 - 2) / 2 = 22 */
		left: 12px !important;          /* (46 - 22) / 2 = 12 */
		margin: 0 !important;
		width: 22px !important;
		height: 2px !important;
		transform-origin: center center;
	}

	.main-navigation .hamburger.open-burger div:nth-child(1) {
		transform: rotate(45deg);
	}

	.main-navigation .hamburger.open-burger div:nth-child(3) {
		transform: rotate(-45deg);
	}
}