/*
 * Main menu - Elementor Nested Menu (e-n-menu).
 * Mobile/tablet: fixed overlay, scroll lock, book CTA (.book-mobile-menu).
 *
 * html.faddom-el-edit / body.faddom-el-edit = Elementor editor canvas.
 * Frontend-only overlay rules use :not(.faddom-el-edit).
 */

/* Same chevron everywhere (frontend + editor): one icon, rotate when open.
 * Without this, Elementor hides the closed icon and shows an empty "opened" icon. */
.e-n-menu-dropdown-icon-closed {
	display: inline-flex !important;
}

.e-n-menu-dropdown-icon-opened {
	display: none !important;
}

.e-n-menu-dropdown-icon-closed svg {
	transition: transform 0.3s ease;
}

.e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed svg {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------- */
/* Elementor editor: don’t clip; show panel when the item is expanded           */
/* -------------------------------------------------------------------------- */
html.faddom-el-edit .elementor-widget-n-menu .e-n-menu-wrapper,
html.faddom-el-edit .elementor-widget-n-menu .e-n-menu,
html.faddom-el-edit .elementor-widget-n-menu .e-n-menu-heading,
html.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item,
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu-wrapper,
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu,
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu-heading,
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item {
	overflow: visible !important;
}

html.faddom-el-edit .elementor-widget-n-menu .e-n-menu-wrapper,
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu-wrapper {
	position: static !important;
	inset: auto !important;
	height: auto !important;
	max-height: none !important;
	--n-menu-dropdown-content-box-height: auto !important;
}

/* Closed by default; open only the clicked item */
html.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item:not(.faddom-menu-open) > .e-n-menu-content,
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item:not(.faddom-menu-open) > .e-n-menu-content {
	display: none !important;
}

html.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item.faddom-menu-open > .e-n-menu-content,
html.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item.faddom-menu-open > .e-n-menu-content > [id^="e-n-menu-content-"],
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item.faddom-menu-open > .e-n-menu-content,
body.faddom-el-edit .elementor-widget-n-menu .e-n-menu-item.faddom-menu-open > .e-n-menu-content > [id^="e-n-menu-content-"] {
	display: block !important;
	position: relative !important;
	inset: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: none !important;
	clip: auto !important;
	clip-path: none !important;
	z-index: 20 !important;
}

html.faddom-el-edit .book-mobile-menu,
body.faddom-el-edit .book-mobile-menu {
	display: none !important;
	position: static !important;
}

/* -------------------------------------------------------------------------- */
/* Frontend mobile/tablet (<=1024px)                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	html:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]),
	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) {
		overflow: hidden !important;
		overscroll-behavior: none;
	}

	body:not(.faddom-el-edit) .e-con:has(.e-n-menu-toggle) {
		background-color: transparent;
		border-bottom: 1px solid #0623231a !important;
		transition: background-color 0.2s ease;
	}

	/*
	 * Keep logo + close (X) above the full-bleed white panel. The panel lives in
	 * the menu column (later in DOM); without an explicit stack, it can paint over
	 * the logo when --faddom-mobile-header-height is too small / sticky-shifted.
	 */
	body:not(.faddom-el-edit) .e-con:has(.e-n-menu-toggle[aria-expanded="true"]) {
		background-color: #ffffff;
		border-bottom: 1px solid #0623231a !important;
		position: relative;
		z-index: 9999;
	}

	body:not(.faddom-el-edit)
		.e-con:has(.e-n-menu-toggle[aria-expanded="true"])
		> .e-con-inner
		> .elementor-element:not(:has(.e-n-menu-toggle)) {
		position: relative;
		z-index: 10002;
	}

	body:not(.faddom-el-edit)
		.e-con:has(.e-n-menu-toggle[aria-expanded="true"])
		> .e-con-inner
		> .elementor-element:has(.e-n-menu-toggle) {
		position: relative;
		z-index: 10001;
	}

	/* Fallbacks when logo/menu aren't direct e-con-inner children */
	body:not(.faddom-el-edit)
		.e-con:has(.e-n-menu-toggle[aria-expanded="true"])
		.elementor-widget-image,
	body:not(.faddom-el-edit)
		.e-con:has(.e-n-menu-toggle[aria-expanded="true"])
		.elementor-widget-theme-site-logo {
		position: relative;
		z-index: 10002;
	}

	body:not(.faddom-el-edit)
		.elementor-widget-n-menu:has(.e-n-menu-toggle[aria-expanded="true"])
		.e-n-menu-toggle {
		position: relative;
		z-index: 2;
	}

	/*
	 * Sticky/motion parents (transform, filter, overflow) make position:fixed
	 * resolve against the short header instead of the viewport. After scroll
	 * that clips the overlay / covers the top bar — neutralize while open.
	 */
	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) .e-con:has(.e-n-menu-toggle),
	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) .elementor-element:has(.e-n-menu-toggle),
	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) .elementor-widget-n-menu,
	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) .e-n-menu,
	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) .elementor-sticky,
	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) .elementor-sticky--active {
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		contain: none !important;
		transform: none !important;
		filter: none !important;
		perspective: none !important;
		will-change: auto !important;
	}

	body:not(.faddom-el-edit) .e-n-menu-wrapper {
		background-color: #ffffff !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	body:not(.faddom-el-edit)
		.elementor-widget-n-menu:has(.e-n-menu-toggle[aria-expanded="true"])
		.e-n-menu-wrapper {
		--n-menu-dropdown-content-box-height: var(
			--faddom-mobile-overlay-h,
			calc(100dvh - var(--faddom-mobile-header-height, 51px))
		) !important;
		position: fixed !important;
		top: var(--faddom-mobile-header-height, 51px) !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: var(--faddom-mobile-overlay-h, calc(100dvh - var(--faddom-mobile-header-height, 51px))) !important;
		min-height: var(--faddom-mobile-overlay-h, calc(100dvh - var(--faddom-mobile-header-height, 51px))) !important;
		max-height: var(--faddom-mobile-overlay-h, calc(100dvh - var(--faddom-mobile-header-height, 51px))) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		/* Below logo column + toggle within the header stacking context */
		z-index: 1 !important;
		padding-top: 0 !important;
		padding-bottom: 80px !important;
		border-top: 1px solid #0623231a !important;
		box-sizing: border-box !important;
	}

	body:not(.faddom-el-edit) .e-n-menu-content > [id^="e-n-menu-content-"] {
		width: 100% !important;
		max-width: 100vw !important;
		box-sizing: border-box !important;
		height: auto !important;
		max-height: none !important;
		overflow-y: visible !important;
	}

	body:not(.faddom-el-edit) .e-n-menu-content > [id^="e-n-menu-content-"] > .e-con-inner {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body:not(.faddom-el-edit) .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-content {
		width: auto;
	}

	body:not(.faddom-el-edit) .e-n-menu-item:last-child::after {
		display: none;
	}

	body:not(.faddom-el-edit) .e-n-menu-item:last-child {
		padding-bottom: 20px !important;
	}

	body:not(.faddom-el-edit) .e-n-menu-heading {
		padding: 40px 0 0 0 !important;
	}

	body:not(.faddom-el-edit) .e-n-menu-item {
		padding-left: 24px !important;
		padding-right: 24px !important;
		box-sizing: border-box;
	}

	body:not(.faddom-el-edit) .e-n-menu-item::after {
		content: "";
		display: block;
		height: 1px;
		background-color: #0623231a;
	}

	body:not(.faddom-el-edit) .e-n-menu-title {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center;
		padding: 20px 0 !important;
		box-sizing: border-box;
	}

	body:not(.faddom-el-edit) .e-n-menu-item:first-child .e-n-menu-title {
		padding-top: 0 !important;
	}

	body:not(.faddom-el-edit) .book-mobile-menu {
		position: fixed !important;
		bottom: 0;
		left: 0;
		width: 100%;
		display: none;
		z-index: 9999;
		background-color: #ffffff;
	}

	body:not(.faddom-el-edit):has(.e-n-menu-toggle[aria-expanded="true"]) .book-mobile-menu {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

/*
 * Demo CTA in sticky nav: hidden by default on pages that have .hide-button-demo.
 * JS adds .is-visible after the page CTA (.hide-button-demo) scrolls under the header.
 * .book-mobile-menu is handled separately (always visible when the mobile menu is open).
 */
body:has(.hide-button-demo) .show-button-demo:not(.book-mobile-menu) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

body:has(.hide-button-demo) .show-button-demo.is-visible:not(.book-mobile-menu) {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body:has(.hide-button-demo) .book-mobile-menu .show-button-demo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Desktop: opacity on menu links (frontend only) */
@media (min-width: 1025px) {
	body:not(.faddom-el-edit) .e-n-menu .e-n-menu-title {
		opacity: 1;
		transition: opacity 0.3s ease;
	}

	body:not(.faddom-el-edit) .e-n-menu:hover .e-n-menu-title {
		opacity: 0.2;
	}

	body:not(.faddom-el-edit) .e-n-menu li.e-n-menu-item:hover .e-n-menu-title {
		opacity: 1;
	}

	body:not(.faddom-el-edit) .e-n-menu .e-n-menu-title.e-current,
	body:not(.faddom-el-edit) .e-n-menu .e-n-menu-title[aria-current="page"] {
		opacity: 1;
	}
}