/* =====================================================================
 * Unusual Menu — namespaced styles
 *
 * Alle selectors beginnen met .unusual-menu om conflicten met Divi
 * (en andere themes/plugins) te voorkomen. Pas kleuren/spacing aan
 * via CSS custom properties op .unusual-menu zelf of een ancestor.
 * ===================================================================== */

.unusual-menu {
	--um-bg: #000;
	--um-fg: #fff;
	--um-accent: #fff;
	--um-muted: rgba(255, 255, 255, 0.65);
	--um-pad-x: 2rem;
	--um-pad-y: 1.25rem;
	--um-gap-x: 2rem;
	--um-breakpoint: 981px;
	/* Zeer hoge z-index zodat sticky Divi-secties (bv. sticky-to-bottom
	   buttons) onder het mobiele menu verdwijnen. Override via shortcode
	   attribuut z_index of via een eigen CSS-regel. */
	--um-z: 2147483600;
	--um-panel-bg: #000;
	--um-panel-fg: #fff;
	--um-panel-py: 2.5rem;
	--um-panel-px: 3rem;
	--um-col-gap: 2.5rem;
	--um-col-min: 180px;
	--um-font-size: 0.95rem;
	--um-sub-font-size: 0.9rem;
	--um-letter-spacing: 0.08em;
	--um-transition: 200ms ease;
	--um-hamburger-size: 44px;
	--um-drawer-bg: #000;
	--um-drawer-fg: #fff;
	--um-backdrop: rgba(0, 0, 0, 0.5);
	--um-logo-gap: 1.25rem;

	/* Dividers: aanpasbaar via .unusual-menu--divider-{off|thin|thick}. */
	--um-divider-width: 1px;
	--um-divider-color: rgba(255, 255, 255, 0.15);

	position: relative;
	background: var(--um-bg);
	color: var(--um-fg);
	font-family: inherit;
	line-height: 1.4;
	box-sizing: border-box;
}

.unusual-menu--divider-off {
	--um-divider-width: 0;
}
.unusual-menu--divider-thin {
	--um-divider-width: 1px;
}
.unusual-menu--divider-thick {
	--um-divider-width: 3px;
}

.unusual-menu *,
.unusual-menu *::before,
.unusual-menu *::after {
	box-sizing: border-box;
}

.unusual-menu a {
	color: inherit;
	text-decoration: none;
}

.unusual-menu button {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}

/* Reset Divi: geen bullets, geen ::before content. */
.unusual-menu ul,
.unusual-menu li {
	list-style: none !important;
	list-style-type: none !important;
}

.unusual-menu li::before {
	content: none !important;
	display: none !important;
}
.unusual-menu li::marker {
	content: '' !important;
}

/* Margin/padding-reset ALLEEN voor de menu-lijsten die geen eigen padding
   willen, zodat de dropdown (die wél padding nodig heeft) en de bar (die
   eigen horizontale padding heeft) ongemoeid blijven. */
.unusual-menu__inline-sub,
.unusual-menu__drawer-list,
.unusual-menu__drawer-sublist,
.unusual-menu__inline-subitem,
.unusual-menu__subitem {
	margin: 0 !important;
	padding: 0 !important;
}

/* De top-bar heeft horizontale padding nodig, maar margin moet 0 zijn. */
.unusual-menu__bar {
	margin: 0 !important;
}

[hidden].unusual-menu__panel,
[hidden].unusual-menu__mobile,
[hidden].unusual-menu__drawer-sublist {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Logo (optioneel)
 * ------------------------------------------------------------------- */

.unusual-menu__logo {
	display: none;
	padding: var(--um-pad-y) var(--um-pad-x) 0;
	text-align: left;
}
.unusual-menu__logo-link,
.unusual-menu__logo-img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}
.unusual-menu__logo-img {
	max-height: 80px;
}

.unusual-menu--has-logo .unusual-menu__logo {
	display: block;
}

/* ---------------------------------------------------------------------
 * Top-bar (desktop, hover-modus)
 * ------------------------------------------------------------------- */

.unusual-menu__bar {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 var(--um-pad-x);
	gap: var(--um-gap-x);
	align-items: center;
	min-height: calc(var(--um-pad-y) * 2 + 1em);
}

.unusual-menu__item {
	position: static;
	display: flex;
	align-items: center;
	padding: var(--um-pad-y) 0;
}

.unusual-menu__link {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	font-size: var(--um-font-size);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--um-letter-spacing);
	color: var(--um-fg);
	transition: opacity var(--um-transition);
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.unusual-menu__item:hover .unusual-menu__link,
.unusual-menu__item:focus-within .unusual-menu__link,
.unusual-menu__item--current > .unusual-menu__link {
	opacity: 0.75;
}

.unusual-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 0.4rem;
	color: var(--um-fg);
}

.unusual-menu__chevron {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--um-transition);
}

.unusual-menu__toggle[aria-expanded="true"] .unusual-menu__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* ---------------------------------------------------------------------
 * Mega panel (hover-modus)
 * ------------------------------------------------------------------- */

.unusual-menu__panel {
	position: absolute;
	left: 50%;
	right: auto;
	top: 100%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--um-panel-bg);
	color: var(--um-panel-fg);
	z-index: var(--um-z);
	padding: var(--um-panel-py) var(--um-panel-px);
	border-top: var(--um-divider-width) solid var(--um-divider-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--um-transition);
}

.unusual-menu__panel:not([hidden]) {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

.unusual-menu__panel-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--um-col-min), 1fr));
	gap: var(--um-col-gap);
	max-width: 1400px;
	margin: 0 auto;
}

.unusual-menu__column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.unusual-menu__column-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--um-letter-spacing);
	font-size: var(--um-font-size);
	color: var(--um-panel-fg);
	padding-bottom: 0.4rem;
	border-bottom: var(--um-divider-width) solid var(--um-divider-color);
	transition: opacity var(--um-transition);
}

.unusual-menu__column-title:hover {
	opacity: 0.75;
}

.unusual-menu__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.unusual-menu__sublist--nested {
	margin-top: 0.4rem;
	padding-left: 0.75rem;
	border-left: var(--um-divider-width) solid var(--um-divider-color);
}

.unusual-menu__subitem {
	margin: 0;
	padding: 0;
}

.unusual-menu__sublink {
	display: inline-block;
	font-size: var(--um-sub-font-size);
	color: var(--um-muted);
	transition: color var(--um-transition);
}

.unusual-menu__sublink:hover,
.unusual-menu__sublink:focus-visible {
	color: var(--um-panel-fg);
}

/* ---------------------------------------------------------------------
 * Sub-link styling (gedeeld door always_open en hover_expanded)
 *
 * Submenu-items hebben volle witte tekst zodat ze leesbaar zijn op de
 * zwarte achtergrond. Hover dimt licht naar de muted-kleur voor feedback.
 * ------------------------------------------------------------------- */

.unusual-menu__inline-sub,
.unusual-menu__overlay-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}

.unusual-menu__inline-sub--nested {
	margin-top: 0.4rem;
	padding-left: 0.75rem;
	border-left: var(--um-divider-width) solid var(--um-divider-color);
}

/* Specifieke selector + !important zodat Divi's a-color regels het niet
   overschrijven (witte tekst op zwarte achtergrond moet leesbaar zijn). */
.unusual-menu .unusual-menu__inline-sublink,
.unusual-menu__dropdown .unusual-menu__inline-sublink {
	display: inline-block;
	max-width: 100%;
	font-size: var(--um-sub-font-size);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--um-panel-fg) !important;
	opacity: 1;
	transition: opacity var(--um-transition);
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.unusual-menu .unusual-menu__inline-sublink:hover,
.unusual-menu .unusual-menu__inline-sublink:focus-visible {
	opacity: 0.65;
}

/* always_open — submenu's nemen ruimte in onder hun parent. */
.unusual-menu--mode-always-open .unusual-menu__item--inline {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: var(--um-pad-y) 0;
}

/* hover_expanded — kleine dropdown per top-item, verschijnt alleen bij
   hover/focus op DAT specifieke item; geen overlap tussen items omdat
   elke dropdown een directe child is van zijn eigen <li>. */
.unusual-menu--mode-hover-expanded .unusual-menu__bar > .unusual-menu__item {
	position: relative;
}

/* Specifiekere selector (0-2-0) + !important verslaat zelfs een Divi
   .et_pb_section ul { padding: ... !important } regel (0-1-1). */
.unusual-menu .unusual-menu__dropdown,
.unusual-menu__dropdown {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	width: max-content;
	padding: 2rem 2.25rem !important;
	margin: 0 !important;
	background: var(--um-panel-bg) !important;
	color: var(--um-panel-fg) !important;
	z-index: var(--um-z);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity var(--um-transition), transform var(--um-transition), visibility 0s var(--um-transition);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.unusual-menu__dropdown .unusual-menu__inline-subitem {
	display: block;
	white-space: nowrap;
}

.unusual-menu__dropdown .unusual-menu__inline-sublink {
	display: block;
	padding: 0.25rem 0;
	font-size: calc(var(--um-sub-font-size) + 0.05rem);
}

@media (min-width: 981px) {
	.unusual-menu--mode-hover-expanded .unusual-menu__item--has-children:hover > .unusual-menu__dropdown,
	.unusual-menu--mode-hover-expanded .unusual-menu__item--has-children:focus-within > .unusual-menu__dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition: opacity var(--um-transition), transform var(--um-transition);
	}
}

/* ---------------------------------------------------------------------
 * Alignment-modifiers (desktop)
 * ------------------------------------------------------------------- */

.unusual-menu--align-center .unusual-menu__bar {
	justify-content: center;
}
.unusual-menu--align-right .unusual-menu__bar {
	justify-content: flex-end;
}
.unusual-menu--align-center .unusual-menu__logo {
	text-align: center;
}
.unusual-menu--align-right .unusual-menu__logo {
	text-align: right;
}

/* ---------------------------------------------------------------------
 * Hamburger / mobile drawer
 * ------------------------------------------------------------------- */

.unusual-menu__hamburger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: var(--um-hamburger-size);
	height: var(--um-hamburger-size);
	margin: 0.5rem var(--um-pad-x);
	gap: 5px;
	color: var(--um-fg);
}

.unusual-menu--align-center .unusual-menu__hamburger {
	margin-left: auto;
	margin-right: auto;
}
.unusual-menu--align-right .unusual-menu__hamburger {
	margin-left: auto;
}

.unusual-menu__hamburger-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform var(--um-transition), opacity var(--um-transition);
}

.unusual-menu__hamburger[aria-expanded="true"] .unusual-menu__hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.unusual-menu__hamburger[aria-expanded="true"] .unusual-menu__hamburger-bar:nth-child(2) {
	opacity: 0;
}
.unusual-menu__hamburger[aria-expanded="true"] .unusual-menu__hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.unusual-menu__mobile {
	position: fixed;
	inset: 0;
	/* Iets boven --um-z zodat sticky elementen er gegarandeerd onder zitten. */
	z-index: calc(var(--um-z) + 10);
}

.unusual-menu__mobile[hidden] {
	display: none !important;
}

.unusual-menu__backdrop {
	position: absolute;
	inset: 0;
	background: var(--um-backdrop);
}

.unusual-menu__drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(100%, 420px);
	background: var(--um-drawer-bg);
	color: var(--um-drawer-fg);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0.75rem 1.25rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.unusual-menu__drawer-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	min-height: 64px;
}

.unusual-menu__drawer-logo,
.unusual-menu__drawer-spacer {
	grid-column: 2;
	justify-self: center;
	min-width: 0;
}

.unusual-menu__drawer-logo {
	display: flex;
	align-items: center;
}

.unusual-menu__drawer-close {
	grid-column: 3;
	justify-self: end;
}

/* Forceer aspect-ratio behoud — Divi forceert vaak img { width: 100% }
   binnen secties. !important + specifieke selector + max-height-cascade
   zorgt dat het logo niet wordt uitgerekt. */
.unusual-menu__drawer-logo-img {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: var(--um-drawer-logo-h, 48px) !important;
	object-fit: contain !important;
}

.unusual-menu__drawer-spacer {
	display: block;
	flex: 1 1 auto;
}

.unusual-menu__drawer-close {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	color: var(--um-drawer-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color var(--um-transition);
}

.unusual-menu__drawer-close svg {
	width: 32px;
	height: 32px;
	display: block;
}

.unusual-menu__drawer-close:hover,
.unusual-menu__drawer-close:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
}

.unusual-menu__drawer-list,
.unusual-menu__drawer-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.unusual-menu__drawer-sublist {
	margin: 0.25rem 0 0.5rem;
	padding-left: 0.9rem;
	border-left: var(--um-divider-width) solid var(--um-divider-color);
}

.unusual-menu__drawer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0;
	border-bottom: var(--um-divider-width) solid var(--um-divider-color);
}

.unusual-menu__drawer-item--depth-0 > .unusual-menu__drawer-row .unusual-menu__drawer-link {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--um-letter-spacing);
}

.unusual-menu__drawer-link {
	flex: 1 1 auto;
	font-size: 1rem;
	color: var(--um-drawer-fg);
	padding: 0.25rem 0;
}

.unusual-menu__acc {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	color: var(--um-drawer-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.unusual-menu__acc[aria-expanded="true"] .unusual-menu__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* Body scroll-lock + sticky-suppression wanneer drawer open is. */
body.unusual-menu-locked {
	overflow: hidden;
}

/* Verberg bekende Divi sticky/floating elementen wanneer drawer open is, zodat
   bv. een sticky-to-bottom CTA niet boven het menu uitsteekt. Gebruik je een
   eigen sticky-element met andere class? Voeg dan je eigen regel toe. */
body.unusual-menu-locked .et_pb_section.et_pb_sticky,
body.unusual-menu-locked .et_pb_sticky_module,
body.unusual-menu-locked .et-l--header .et_pb_section_sticky,
body.unusual-menu-locked [data-unusual-menu-hide-on-open] {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ---------------------------------------------------------------------
 * Empty / placeholder
 * ------------------------------------------------------------------- */

.unusual-menu--empty {
	padding: 1rem;
	background: #fff5d6;
	color: #5a4400;
	border: 1px solid #f0d678;
	font-size: 0.9rem;
}

.unusual-menu--empty p {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Breakpoints
 * ------------------------------------------------------------------- */

@media (min-width: 981px) {
	.unusual-menu__bar {
		display: flex;
	}

	/* Items behouden hun natuurlijke breedte met een consistente gap; ze
	   worden niet evenredig over de volle header-breedte verdeeld (dat
	   veroorzaakte eerder te grote tussenruimtes). */
	.unusual-menu--mode-always-open .unusual-menu__bar {
		align-items: flex-start;
	}
	.unusual-menu--mode-hover-expanded .unusual-menu__bar {
		align-items: center;
	}

	.unusual-menu__hamburger {
		display: none;
	}
	.unusual-menu__mobile {
		display: none !important;
	}

	/* -------------------------------------------------------------
	 * hamburger="always" — hamburger blijft op desktop zichtbaar,
	 * helemaal rechts tegen de rand (met --um-pad-x marge). De
	 * drawer wordt fullscreen met grid-layout en submenu's altijd
	 * zichtbaar (geen accordion op desktop).
	 * ----------------------------------------------------------- */
	.unusual-menu--hamburger-always {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.unusual-menu--hamburger-always .unusual-menu__logo {
		flex: 1 1 100%;
		order: 0;
	}
	.unusual-menu--hamburger-always .unusual-menu__bar {
		flex: 1 1 auto;
		order: 1;
	}
	.unusual-menu--hamburger-always .unusual-menu__hamburger {
		display: inline-flex;
		flex: 0 0 auto;
		order: 2;
		margin: 0.5rem var(--um-pad-x) 0.5rem auto;
	}
	/* Drawer-overlay overrulet de algemene "display: none !important"
	   regel op desktop zodat klik op de hamburger hem zichtbaar maakt. */
	.unusual-menu--hamburger-always .unusual-menu__mobile {
		display: block !important;
	}
	.unusual-menu--hamburger-always .unusual-menu__mobile[hidden] {
		display: none !important;
	}
	.unusual-menu--hamburger-always .unusual-menu__drawer {
		width: 100vw;
		max-width: 100vw;
		padding: 1rem 3rem 3rem;
	}
	.unusual-menu--hamburger-always .unusual-menu__drawer-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
		gap: 2rem 2.5rem;
		align-items: start;
		justify-content: center;
	}
	.unusual-menu--hamburger-always .unusual-menu__drawer-row {
		border-bottom: none;
		padding: 0 0 0.5rem;
	}
	.unusual-menu--hamburger-always .unusual-menu__acc {
		display: none;
	}
	.unusual-menu--hamburger-always .unusual-menu__drawer-sublist {
		display: block !important;
		margin: 0;
		padding: 0;
		border-left: none;
	}
	.unusual-menu--hamburger-always .unusual-menu__drawer-sublist .unusual-menu__drawer-row {
		padding: 0.35rem 0;
	}
	.unusual-menu--hamburger-always .unusual-menu__drawer-sublist .unusual-menu__drawer-link {
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		font-size: 0.95rem;
		opacity: 0.85;
	}
}

@media (max-width: 980px) {
	.unusual-menu__bar {
		display: none !important;
	}
	.unusual-menu__panel {
		display: none !important;
	}
}