/* Mobile Menu dropdown container */

/* Remove bottom border-radius from main header when menu is open (seamless expansion like search results) */
#mainheader.se-mm-open{
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	position: relative;
	z-index: 1001;
}

/* Smoothly tune the header glass when the mobile menu toggles */
#mainheader.glassy1{
	transition:
		background-color 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		backdrop-filter 0.35s ease,
		-webkit-backdrop-filter 0.35s ease;
}

/* Boost blur/brightness on the header while the menu is open */
#mainheader.se-mm-open.glassy1{
	--se-lg-container-bg: var(--se-lg-dd-bg, rgba(255, 255, 255, 0.86));
	--se-lg-container-border: var(--se-lg-dd-border, rgba(255, 255, 255, 0.55));
	--se-lg-container-shadow: var(--se-lg-dd-shadow, 0 8px 26px rgba(0, 0, 0, 0.14));
	--se-lg-container-blur: 44px;
}

/* Dropdown box spanning header width (aligned by JS) */
#se-mobile-menu.se-mobile-menu{
	position: fixed;
	left: 0;
	top: 0;
	width: auto;
	max-width: 100vw;
	z-index: 1000;
	pointer-events: none;

	/* mirror search box glass tuning */
	--blur: 40px;
	--bg-alpha: 0.82;
	--tint: 42%;
	--sheen-opacity: 0.92;

	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	/* Smooth open/close + smooth glass tuning when menu is toggled */
	transition:
		max-height 0.4s ease-out,
		opacity 0.3s ease-out,
		background-color 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		backdrop-filter 0.35s ease,
		-webkit-backdrop-filter 0.35s ease;
}

/* When the mobile menu is open, make the glass brighter + more blurred for readability */
body.se-mm-open #se-mobile-menu.se-mobile-menu.glassy1{
	--se-lg-container-bg: var(--se-lg-dd-bg);
	--se-lg-container-border: var(--se-lg-dd-border);
	--se-lg-container-shadow: var(--se-lg-dd-shadow);
	--se-lg-container-blur: 44px;
}

#se-mobile-menu.se-open{
	display: block;
	max-height: var(--se-mm-max-h, 100vh);
	height: var(--se-mm-max-h, 100vh);
	opacity: 1;
	pointer-events: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#se-mobile-menu .se-mobile-menu__inner{
	padding: 12px 14px;
}

/* Lock background scroll when menu is open (JS also fixes scroll position) */
body.se-mm-open{
	overscroll-behavior: none;
}

/* Allow scrolling only inside the menu panel */
#se-mobile-menu.se-open{
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

/* Fallback background if glassy-container isn't enabled */
#se-mobile-menu:not(.glassy1){
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

/* Prevent Elementor template from adding odd outer spacing */
#se-mobile-menu .elementor-section,
#se-mobile-menu .e-con{
	margin: 0;
}

/* Submenu behavior: Elementor/WP menus are often hover-only; on mobile we toggle via JS. */
@media (max-width: 1024px){
	/* Make menu items full-width so caret doesn't shift when submenu opens */
	#se-mobile-menu li.menu-item{
		display: block;
		width: 100%;
	}

	#se-mobile-menu a.elementor-item,
	#se-mobile-menu a.elementor-item-anchor{
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	/* Ensure dropdowns render as accordion panels inside our fixed menu container */
	#se-mobile-menu ul.sub-menu,
	#se-mobile-menu ul.sub-menu.elementor-nav-menu--dropdown{
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#se-mobile-menu .menu-item-has-children > a{
		position: relative;
		display: block;
		padding-right: 42px; /* space for caret */
	}

	#se-mobile-menu .menu-item-has-children > a .sub-arrow{
		position: absolute;
		top: 50%;
		right: 14px;
		transform: translateY(-50%);
		margin: 0;
		pointer-events: none;
	}

	#se-mobile-menu .menu-item-has-children > ul.sub-menu{
		display: none;
	}

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