/**
 * EVBS Full-Height Mobile Menu
 *
 * Structural styles for the Nav Menu ("WordPress Menu") mobile dropdown when the
 * EVBS full-height option is enabled. All colours, padding, offset and button
 * styling come from Elementor controls (scoped inline CSS); this file only owns
 * the layout that must be identical across every instance.
 *
 * The overlay layout is applied only when our JS adds `.evbs-fh-open`, so the
 * dropdown is never forced visible on desktop where the toggle isn't shown.
 */

/* Full-height overlay, positioned below the header via the offset variable. */
.elementor-nav-menu--dropdown.evbs-fh-dropdown.evbs-fh-open {
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	/* !important throughout beats the inline top/left/width Elementor writes while animating. */
	position: fixed !important;
	top: var( --evbs-fh-offset, 0px ) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 !important;
	/* dvh keeps it correct with mobile browser chrome; vh is the fallback. */
	height: calc( 100vh - var( --evbs-fh-offset, 0px ) ) !important;
	height: calc( 100dvh - var( --evbs-fh-offset, 0px ) ) !important;
	max-height: none !important;
	overflow: hidden !important;
	z-index: var( --evbs-fh-z, 998 );
}

/* Stop the page scrolling behind the open overlay. */
body.evbs-fh-lock {
	overflow: hidden;
}

/* Menu list keeps its natural height but shrinks/scrolls if it would overflow. */
.evbs-fh-dropdown.evbs-fh-open > .elementor-nav-menu {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* SmartMenus leaves absolute positioning/width on the list — flatten it. */
	position: static !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

.evbs-fh-dropdown.evbs-fh-open > .elementor-nav-menu > li {
	width: 100%;
}

/* Button wrapper sits at the bottom; space-between pushes it away from the list. */
.evbs-fh-dropdown .evbs-fh-menu-button-wrap {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	width: 100%;
}

/* Baseline button look so it reads as a button before any styling is applied. */
.evbs-fh-menu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.evbs-fh-menu-button:hover,
.evbs-fh-menu-button:focus {
	text-decoration: none;
}