/* =============================================================================
   Empire Menu — ewmp-menu.css  v1.1
   Desktop nav · Sub-menu dropdowns (4 animation styles) · Hamburger (6 icons)
   Mobile panels (7 open styles) · Close button · RTL · iOS scroll lock
   ============================================================================= */

/* ── Reset / base ──────────────────────────────────────────────────────────── */
.ewmp-menu-wrap *,
.ewmp-menu-wrap *::before,
.ewmp-menu-wrap *::after {
	box-sizing: border-box;
}

.ewmp-menu-wrap {
	position: relative;
}

/* ── Nav list base (shared desktop + mobile) ───────────────────────────────── */
.ewmp-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ewmp-nav-list a {
	text-decoration: none;
	display: block;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* =============================================================================
   DESKTOP NAV
   ============================================================================= */

.ewmp-nav-desktop {
	display: flex;
	align-items: center;
}

.ewmp-nav-desktop .ewmp-nav-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ewmp-nav-desktop .ewmp-nav-list > li {
	position: relative;
}

/* ── Sub-menu base ──────────────────────────────────────────────────────────── */
.ewmp-nav-desktop .ewmp-nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000; /* above sticky headers */
	min-width: 220px;
	background-color: #fff;
	pointer-events: none;
	/* All animation properties present; active class switches them on */
	opacity: 0;
	visibility: hidden;
	list-style: none; /* Remove default list bullets */
	margin: 0;
	padding: 0;
}

/* Remove bullet dots from desktop submenu items - styling controlled via Elementor */
.ewmp-nav-desktop .sub-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Animation: fade (default) ──────────────────────────────────────────────── */
.ewmp-dropdown--fade .ewmp-nav-list .sub-menu,
.ewmp-dropdown--fade-slide .ewmp-nav-list .sub-menu,
.ewmp-dropdown--fade-scale .ewmp-nav-list .sub-menu,
.ewmp-dropdown--slide .ewmp-nav-list .sub-menu {
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

/* fade */
.ewmp-dropdown--fade .ewmp-nav-list .sub-menu {
	transform: none;
}

/* fade-slide (default) */
.ewmp-dropdown--fade-slide .ewmp-nav-list .sub-menu {
	transform: translateY(0);
}

/* fade-scale */
.ewmp-dropdown--fade-scale .ewmp-nav-list .sub-menu {
	transform: scale(0.95);
	transform-origin: top left;
}

/* slide (no fade, just slide) */
.ewmp-dropdown--slide .ewmp-nav-list .sub-menu {
	opacity: 1;
	transform: translateY(0);
	clip-path: inset(0 0 100% 0);
	transition: transform 0.22s ease, clip-path 0.22s ease, visibility 0.22s ease;
}

/* ── Open states (hover / focus-within / click-open class) ─────────────────── */
.ewmp-nav-desktop .ewmp-nav-list > li:hover > .sub-menu,
.ewmp-nav-desktop .ewmp-nav-list > li:focus-within > .sub-menu,
.ewmp-nav-desktop .ewmp-nav-list > li.ewmp-dropdown-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	clip-path: none;
}

/* Click mode: disable hover-opening so only JS-added class opens it */
.ewmp-dropdown-click .ewmp-nav-desktop .ewmp-nav-list > li:hover > .sub-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(0);
	pointer-events: none;
}
.ewmp-dropdown-click .ewmp-nav-desktop .ewmp-nav-list > li.ewmp-dropdown-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* ── 3rd-level flyout ───────────────────────────────────────────────────────── */
.ewmp-nav-desktop .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* RTL flips */
[dir="rtl"] .ewmp-nav-desktop .sub-menu .sub-menu {
	left: auto;
	right: 100%;
}

/* =============================================================================
   HAMBURGER WRAP
   ============================================================================= */

.ewmp-hamburger-wrap {
	display: none;
	align-items: center;
}

/* Hide hamburger when panel is open - only show the panel's close button */
.ewmp-menu-wrap:has(.ewmp-mobile-panel.ewmp-active) .ewmp-hamburger-wrap {
	display: none !important;
}

/* Fallback for browsers without :has() support - use JS-added class */
.ewmp-menu-wrap.ewmp-panel-active .ewmp-hamburger-wrap {
	display: none !important;
}

/* =============================================================================
   HAMBURGER BUTTON
   ============================================================================= */

.ewmp-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	position: relative;
	z-index: 10001;
	transition: background-color 0.2s ease;
}

.ewmp-hamburger__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ewmp-hamburger__bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: #333;
	border-radius: 2px;
	transform-origin: center;
	transition:
		transform         0.3s ease-in-out,
		opacity           0.3s ease-in-out,
		width             0.3s ease-in-out,
		background-color  0.2s ease;
}

/* ─── 1. Lines → Cross ──────────────────────────────────────────────────────── */
.ewmp-hamburger--lines.ewmp-active .ewmp-hamburger__bar--1 {
	transform: translateY(calc(var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px))) rotate(45deg);
}
.ewmp-hamburger--lines.ewmp-active .ewmp-hamburger__bar--2 {
	opacity: 0;
	transform: scaleX(0);
}
.ewmp-hamburger--lines.ewmp-active .ewmp-hamburger__bar--3 {
	transform: translateY(calc(-1 * (var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px)))) rotate(-45deg);
}

/* ─── 2. Arrow / Squeeze ────────────────────────────────────────────────────── */
.ewmp-hamburger--arrow .ewmp-hamburger__bar--1,
.ewmp-hamburger--arrow .ewmp-hamburger__bar--3 {
	width: var(--ewmp-arrow-short, 18px);
	align-self: flex-start;
}
.ewmp-hamburger--arrow.ewmp-active .ewmp-hamburger__bar--1 {
	transform: translateY(calc((var(--ewmp-bar-gap, 5px) + var(--ewmp-bar-h, 2px)) * 0.5)) rotate(45deg);
}
.ewmp-hamburger--arrow.ewmp-active .ewmp-hamburger__bar--2 {
	transform: none;
}
.ewmp-hamburger--arrow.ewmp-active .ewmp-hamburger__bar--3 {
	transform: translateY(calc(-1 * (var(--ewmp-bar-gap, 5px) + var(--ewmp-bar-h, 2px)) * 0.5)) rotate(-45deg);
}

/* ─── 3. Spin 90° ───────────────────────────────────────────────────────────── */
.ewmp-hamburger--spin .ewmp-hamburger__inner {
	transition: transform 0.4s ease;
}
.ewmp-hamburger--spin.ewmp-active .ewmp-hamburger__inner {
	transform: rotate(90deg);
}
.ewmp-hamburger--spin.ewmp-active .ewmp-hamburger__bar--1 {
	transform: translateY(calc(var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px))) rotate(45deg);
}
.ewmp-hamburger--spin.ewmp-active .ewmp-hamburger__bar--2 {
	opacity: 0;
}
.ewmp-hamburger--spin.ewmp-active .ewmp-hamburger__bar--3 {
	transform: translateY(calc(-1 * (var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px)))) rotate(-45deg);
}

/* ─── 4. Elastic Bounce ─────────────────────────────────────────────────────── */
.ewmp-hamburger--elastic .ewmp-hamburger__bar {
	transition:
		transform        0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55),
		opacity          0.2s  ease,
		background-color 0.2s  ease;
}
.ewmp-hamburger--elastic.ewmp-active .ewmp-hamburger__bar--1 {
	transform: translateY(calc(var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px))) rotate(45deg);
}
.ewmp-hamburger--elastic.ewmp-active .ewmp-hamburger__bar--2 {
	opacity: 0;
	transform: scaleX(0);
}
.ewmp-hamburger--elastic.ewmp-active .ewmp-hamburger__bar--3 {
	transform: translateY(calc(-1 * (var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px)))) rotate(-45deg);
}

/* ─── 5. Minus → Cross ──────────────────────────────────────────────────────── */
/* Bars 1 & 3 slide to center and disappear; bar 2 (minus) rotates to × */
.ewmp-hamburger--minus .ewmp-hamburger__bar--1,
.ewmp-hamburger--minus .ewmp-hamburger__bar--3 {
	transition: transform 0.3s ease, opacity 0.2s ease 0.1s, background-color 0.2s ease;
}
.ewmp-hamburger--minus.ewmp-active .ewmp-hamburger__bar--1 {
	transform: translateY(calc(var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px)));
	opacity: 0;
}
.ewmp-hamburger--minus.ewmp-active .ewmp-hamburger__bar--2 {
	transform: rotate(45deg);
}
.ewmp-hamburger--minus.ewmp-active .ewmp-hamburger__bar--3 {
	transform: translateY(calc(-1 * (var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px))));
	opacity: 0;
}

/* ─── 6. Vortex (360° morph) ────────────────────────────────────────────────── */
.ewmp-hamburger--vortex .ewmp-hamburger__inner {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ewmp-hamburger--vortex .ewmp-hamburger__bar {
	transition:
		transform        0.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity          0.3s ease,
		background-color 0.2s ease;
}
.ewmp-hamburger--vortex.ewmp-active .ewmp-hamburger__inner {
	transform: rotate(360deg);
}
.ewmp-hamburger--vortex.ewmp-active .ewmp-hamburger__bar--1 {
	transform: translateY(calc(var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px))) rotate(45deg);
}
.ewmp-hamburger--vortex.ewmp-active .ewmp-hamburger__bar--2 {
	opacity: 0;
	transform: scaleX(0);
}
.ewmp-hamburger--vortex.ewmp-active .ewmp-hamburger__bar--3 {
	transform: translateY(calc(-1 * (var(--ewmp-bar-gap, 7px) + var(--ewmp-bar-h, 2px)))) rotate(-45deg);
}

/* =============================================================================
   OVERLAY
   ============================================================================= */

.ewmp-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ewmp-duration, 300ms) var(--ewmp-easing, ease-in-out);
}
.ewmp-overlay.ewmp-active {
	opacity: 1;
	pointer-events: auto;
}

/* =============================================================================
   MOBILE PANEL — BASE
   ============================================================================= */

.ewmp-mobile-panel {
	position: fixed;
	top: 0;
	z-index: 9999;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch; /* smooth iOS scroll within panel */
	background-color: #fff;
	padding: 24px;
	transition:
		transform  var(--ewmp-duration, 300ms) var(--ewmp-easing, ease-in-out),
		opacity    var(--ewmp-duration, 300ms) var(--ewmp-easing, ease-in-out),
		visibility 0s linear var(--ewmp-duration, 300ms);
	visibility: hidden;
	display: block; /* Ensure panel is rendered even when not active */
}
.ewmp-mobile-panel.ewmp-active {
	transition:
		transform  var(--ewmp-duration, 300ms) var(--ewmp-easing, ease-in-out),
		opacity    var(--ewmp-duration, 300ms) var(--ewmp-easing, ease-in-out),
		visibility 0s linear 0s;
	visibility: visible;
}

/* ── 1. Slide From Left ─────────────────────────────────────────────────────── */
.ewmp-mobile-panel--slide-left {
	left: 0 !important;
	right: auto !important;
	top: 0 !important;
	bottom: auto !important;
	height: 100% !important;
	transform: translateX(-100%);
}
.ewmp-mobile-panel--slide-left.ewmp-active { transform: translateX(0); }

/* ── 2. Slide From Right ────────────────────────────────────────────────────── */
.ewmp-mobile-panel--slide-right {
	right: 0 !important;
	left: auto !important;
	top: 0 !important;
	bottom: auto !important;
	height: 100% !important;
	transform: translateX(100%);
}
.ewmp-mobile-panel--slide-right.ewmp-active { transform: translateX(0); }

/* ── 3. Slide From Top ──────────────────────────────────────────────────────── */
.ewmp-mobile-panel--slide-top {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	width: 100% !important;
	height: auto !important;
	max-height: 50vh;
	transform: translateY(-100%);
}
.ewmp-mobile-panel--slide-top.ewmp-active { transform: translateY(0); }

/* ── 4. Slide From Bottom ───────────────────────────────────────────────────── */
.ewmp-mobile-panel--slide-bottom {
	bottom: 0 !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: auto !important;
	max-height: 50vh;
	transform: translateY(100%);
}
.ewmp-mobile-panel--slide-bottom.ewmp-active { transform: translateY(0); }

/* ── 5. Fullscreen Overlay ──────────────────────────────────────────────────── */
.ewmp-mobile-panel--fullscreen {
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	padding-top: 72px !important; /* room for close button header */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	opacity: 0;
	transform: scale(0.97);
}
.ewmp-mobile-panel--fullscreen.ewmp-active {
	opacity: 1;
	transform: scale(1);
}
.ewmp-mobile-panel--fullscreen .ewmp-nav-list {
	align-items: flex-start;
	width: 100%;
}
.ewmp-mobile-panel--fullscreen .ewmp-panel-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	padding: 16px 24px;
}

/* ── 6. Push Left ───────────────────────────────────────────────────────────── */
.ewmp-mobile-panel--push-left {
	left: 0 !important;
	right: auto !important;
	top: 0 !important;
	bottom: auto !important;
	height: 100% !important;
	transform: translateX(-100%);
}
.ewmp-mobile-panel--push-left.ewmp-active { transform: translateX(0); }

/* ── 7. Push Right ──────────────────────────────────────────────────────────── */
.ewmp-mobile-panel--push-right {
	right: 0 !important;
	left: auto !important;
	top: 0 !important;
	bottom: auto !important;
	height: 100% !important;
	transform: translateX(100%);
}
.ewmp-mobile-panel--push-right.ewmp-active { transform: translateX(0); }

/* ── 8. Dropdown (drops straight down below the bar, full width of the widget) ── */
.ewmp-mobile-panel--dropdown {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	bottom: auto !important;
	width: 100% !important;
	height: auto !important;
	max-height: 80vh;
	opacity: 0;
	transform: translateY(-10px);
}
.ewmp-mobile-panel--dropdown.ewmp-active {
	opacity: 1;
	transform: translateY(0);
}

/* Push page-wrapper shift — class added by JS */
.ewmp-push-shift {
	transition: transform var(--ewmp-duration, 300ms) var(--ewmp-easing, ease-in-out);
}

/* =============================================================================
   PANEL HEADER (close button + logo row)
   ============================================================================= */

.ewmp-panel-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 16px;
	gap: 12px;
	min-height: 40px; /* Ensure header has height even with just close button */
}

.ewmp-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #333;
	line-height: 1;
	flex-shrink: 0;
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.ewmp-panel-close:hover {
	color: #000;
	transform: rotate(90deg);
}
.ewmp-panel-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =============================================================================
   MOBILE NAV ITEMS
   ============================================================================= */

.ewmp-mobile-panel .ewmp-nav-list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ewmp-mobile-panel .ewmp-nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	width: 100%;
}

/* =============================================================================
   SUB-MENU INDICATOR ICON (injected by JS into every parent item)
   Works on desktop nav AND mobile panel. Colour follows currentColor, driven
   by the "Indicator Color" control which sets `color` on .ewmp-submenu-icon.
   Rotation on open is per-icon via the --ewmp-subicon-rot custom property,
   so adding a new icon needs no new open-state rules.
   ============================================================================= */
.ewmp-submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	line-height: 0;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.ewmp-submenu-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Default open rotation = 180°; per-icon overrides below. */
.ewmp-subicon--angle { --ewmp-subicon-rot: 90deg; }
.ewmp-subicon--plus  { --ewmp-subicon-rot: 45deg; }
.ewmp-subicon--dash  { --ewmp-subicon-rot: 90deg; }

/* Desktop: place the icon beside the label inside parent anchors. */
.ewmp-nav-desktop .menu-item-has-children > a,
.ewmp-nav-desktop .page_item_has_children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Open states — desktop (hover/focus only when NOT click-mode, + click-open)
   and mobile accordion open. One grouped rule drives all icons. */
.ewmp-menu-wrap:not(.ewmp-dropdown-click) .ewmp-nav-desktop .ewmp-nav-list > li:hover > a > .ewmp-submenu-icon,
.ewmp-menu-wrap:not(.ewmp-dropdown-click) .ewmp-nav-desktop .ewmp-nav-list > li:focus-within > a > .ewmp-submenu-icon,
.ewmp-nav-desktop .ewmp-nav-list > li.ewmp-dropdown-open > a > .ewmp-submenu-icon,
.ewmp-mobile-panel .ewmp-has-children.ewmp-submenu-open > a > .ewmp-submenu-icon {
	transform: rotate(var(--ewmp-subicon-rot, 180deg));
}

/* Sub-menu accordion */
.ewmp-mobile-panel .sub-menu {
	display: block;
	height: 0;
	overflow: hidden;
	transition: height var(--ewmp-duration, 300ms) var(--ewmp-easing, ease-in-out);
}
.ewmp-mobile-panel .sub-menu a {
	padding-left: 36px;
	font-size: 0.9em;
}

/* =============================================================================
   RESPONSIVE: SHOW HAMBURGER, HIDE DESKTOP NAV
   Classes set by JS on resize — no dependency on media queries so it works
   regardless of Elementor's responsive preview scale.
   ============================================================================= */

.ewmp-menu-wrap.ewmp-bp-tablet .ewmp-nav-desktop,
.ewmp-menu-wrap.ewmp-bp-mobile .ewmp-nav-desktop,
.ewmp-menu-wrap.ewmp-bp-always .ewmp-nav-desktop {
	display: none;
}

.ewmp-menu-wrap.ewmp-bp-tablet .ewmp-hamburger-wrap,
.ewmp-menu-wrap.ewmp-bp-mobile .ewmp-hamburger-wrap,
.ewmp-menu-wrap.ewmp-bp-always .ewmp-hamburger-wrap {
	display: flex;
}

/* ── Progressive-enhancement fallback ──────────────────────────────────────────
   Before ewmp-menu.js attaches (or if JS is disabled) there are no ewmp-bp-*
   classes yet. These viewport media queries give a correct mobile layout in
   that window so phones never flash a full desktop menu. The moment JS runs it
   adds .ewmp-js to the wrap, which switches these rules off and hands control to
   the data-driven classes above (which read the real, per-widget breakpoint and
   are accurate inside Elementor's scaled editor preview). 100% self-contained —
   no library, no CDN, no JS fallback shim. */

/* Tablet fallback (<=1024px) */
@media (max-width: 1024px) {
	.ewmp-menu-wrap:not(.ewmp-js) .ewmp-nav-desktop { display: none !important; }
	.ewmp-menu-wrap:not(.ewmp-js) .ewmp-hamburger-wrap { display: flex !important; }
}

/* Mobile-only fallback (<=767px) - for mobile breakpoint setting */
@media (max-width: 767px) {
	.ewmp-menu-wrap[data-breakpoint="767"]:not(.ewmp-js) .ewmp-nav-desktop { display: none !important; }
	.ewmp-menu-wrap[data-breakpoint="767"]:not(.ewmp-js) .ewmp-hamburger-wrap { display: flex !important; }
}

/* =============================================================================
   BODY SCROLL LOCK — iOS safe
   We fix the body to its current scroll position in JS before adding this class.
   ============================================================================= */

body.ewmp-panel-open {
	overflow: hidden;
	position: fixed;   /* required for iOS Safari — overflow:hidden alone is ignored */
	width: 100%;
	/* top is set inline by JS: top: -scrollY */
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

.ewmp-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ewmp-hamburger:focus-visible,
.ewmp-panel-close:focus-visible,
.ewmp-mobile-panel a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}