/*
 * Smart Mega Menu — Frontend Styles
 * Author: Tenbit Solutions (https://tenbitsolutions.com)
 * Version: 1.0.0
 */

/* =========================================================
   Custom properties (overridden by Elementor style controls)
   ========================================================= */
.emmb-wrap {
	--emmb-menu-color:          #333333;
	--emmb-menu-hover:          #0073aa;
	--emmb-menu-active:         #0073aa;
	--emmb-menu-bg:             transparent;
	--emmb-item-padding:        12px 18px;
	--emmb-dropdown-bg:         #ffffff;
	--emmb-dropdown-color:      #333333;
	--emmb-dropdown-hover:      #0073aa;
	--emmb-dropdown-shadow:     0 8px 30px rgba(0, 0, 0, .12);
	--emmb-mega-bg:             #ffffff;
	--emmb-mega-shadow:         0 8px 40px rgba(0, 0, 0, .14);
	--emmb-radius:              6px;
	--emmb-transition:          .22s ease;
	--emmb-z:                   9999;
	--emmb-mega-width:          100vw;   /* overridden inline by walker for custom width */
	position: relative;
	font-family: inherit;
}

/* =========================================================
   Wrapper / layout
   ========================================================= */
.emmb-wrap.emmb-layout-horizontal { display: flex; align-items: center; flex-wrap: wrap; }
.emmb-wrap.emmb-layout-vertical   { display: block; }

/* =========================================================
   Mobile mode — actual visual hide/show (aria-hidden alone
   only affects screen readers, not layout)
   ========================================================= */
.emmb-wrap.emmb-is-mobile > .emmb-nav {
	display: none !important;
}

.emmb-wrap.emmb-is-mobile {
	justify-content: space-between;
}

.emmb-wrap.emmb-is-mobile .emmb-hamburger {
	margin-left: auto;
}

/* =========================================================
   Top-level <ul>
   ========================================================= */
.emmb-nav { flex: 1; }
.emmb-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.emmb-layout-vertical .emmb-nav > ul {
	flex-direction: column;
	align-items: stretch;
}

/* =========================================================
   Menu items
   ========================================================= */
.emmb-menu-item {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.emmb-menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--emmb-item-padding);
	color: var(--emmb-menu-color);
	background: var(--emmb-menu-bg);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--emmb-transition), background var(--emmb-transition);
	font-family: inherit;
	line-height: 1.4;
}

.emmb-menu-item > a:hover,
.emmb-menu-item:hover > a {
	color: var(--emmb-menu-hover);
}

.emmb-menu-item.emmb-current > a,
.emmb-menu-item.current-menu-item > a,
.emmb-menu-item.current_page_item > a {
	color: var(--emmb-menu-active);
}

/* =========================================================
   Caret arrow
   ========================================================= */
.emmb-caret {
	display: inline-block;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--emmb-transition);
	flex-shrink: 0;
}

.emmb-menu-item:hover > a .emmb-caret,
.emmb-menu-item.emmb-open > a .emmb-caret {
	transform: rotate(180deg);
}

/* =========================================================
   Icon
   ========================================================= */
.emmb-icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	flex-shrink: 0;
}

/* =========================================================
   Badge
   ========================================================= */
.emmb-badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	color: #ffffff;
	white-space: nowrap;
	background: #e74c3c;
	margin-left: 4px;
	flex-shrink: 0;
}

/* =========================================================
   Standard dropdown
   ========================================================= */
.emmb-sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--emmb-dropdown-bg);
	border-radius: var(--emmb-radius);
	box-shadow: var(--emmb-dropdown-shadow);
	z-index: var(--emmb-z);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--emmb-transition),
	            visibility var(--emmb-transition),
	            transform var(--emmb-transition);
	pointer-events: none;
}

/* Third-level and deeper drop to the right */
.emmb-sub-menu .emmb-sub-menu {
	top: 0;
	left: 100%;
}

/* Scoped to .emmb-nav (the desktop nav container — see mega-menu.js
   `$desktopNav = $wrap.find('.emmb-nav')`) rather than bare .emmb-menu-item.
   The mobile off-canvas panel (.emmb-mobile-menu) renders its own separate
   copy of .emmb-menu-item/.emmb-sub-menu, and on touch devices — iOS Safari
   especially — a tapped element keeps matching :hover until something else
   is tapped. Without this scope, that lingering :hover here has the same
   specificity as the mobile-open rule below and can win the cascade even
   after JS removes .emmb-mobile-open, leaving the mobile panel stuck
   visually open and tappable. Scoping to .emmb-nav makes the selector
   structurally unable to match a mobile-panel element at all — no
   specificity fight to lose, regardless of :hover state. */
.emmb-nav .emmb-menu-item:hover > .emmb-sub-menu,
.emmb-nav .emmb-menu-item.emmb-open > .emmb-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.emmb-sub-menu .emmb-menu-item { position: relative; }
.emmb-sub-menu .emmb-menu-item > a {
	display: flex;
	width: 100%;
	padding: 9px 20px;
	color: var(--emmb-dropdown-color);
	white-space: normal;
}

.emmb-sub-menu .emmb-menu-item > a:hover {
	color: var(--emmb-dropdown-hover);
	background: rgba(0, 0, 0, .04);
}

/* =========================================================
   Mega menu panel
   ========================================================= */
.emmb-mega-panel {
	position: absolute;
	top: 100%;
	background: var(--emmb-mega-bg);
	box-shadow: var(--emmb-mega-shadow);
	border-radius: var(--emmb-radius);
	z-index: var(--emmb-z);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--emmb-transition),
	            visibility var(--emmb-transition),
	            transform var(--emmb-transition);
	pointer-events: none;
	overflow: hidden;
}

/* Same fix as the .emmb-sub-menu rule above — scoped to .emmb-nav so it
   can't match the mobile off-canvas panel's own .emmb-mega-panel copy. */
.emmb-nav .emmb-has-mega:hover > .emmb-mega-panel,
.emmb-nav .emmb-has-mega.emmb-open > .emmb-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Full width — stretches from the left edge of the viewport */
.emmb-mega-panel.emmb-mega-full {
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: 100vw;
}

.emmb-nav .emmb-has-mega:hover > .emmb-mega-panel.emmb-mega-full,
.emmb-nav .emmb-has-mega.emmb-open > .emmb-mega-panel.emmb-mega-full {
	transform: translateX(-50%) translateY(0);
}

/* Container width */
.emmb-mega-panel.emmb-mega-container {
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: 1200px;
	max-width: 96vw;
}

.emmb-nav .emmb-has-mega:hover > .emmb-mega-panel.emmb-mega-container,
.emmb-nav .emmb-has-mega.emmb-open > .emmb-mega-panel.emmb-mega-container {
	transform: translateX(-50%) translateY(0);
}

/* Custom width — uses CSS var set inline by walker */
.emmb-mega-panel.emmb-mega-custom {
	left: 0;
	width: var(--emmb-mega-width, 900px);
}

.emmb-mega-inner {
	width: 100%;
}

/* =========================================================
   Hamburger
   ========================================================= */
.emmb-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 4px;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* When JS marks the wrap as mobile, force flex regardless of theme/plugin CSS
   that might otherwise win on specificity (e.g. "button{display:inline-block}"
   from a theme reset loaded after this stylesheet). */
.emmb-wrap.emmb-is-mobile .emmb-hamburger {
	display: flex !important;
}

.emmb-hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: #333333;
	border-radius: 2px;
	transition: transform .22s ease, opacity .22s ease;
}

/* Animated to ✕ when open */
.emmb-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.emmb-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.emmb-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Mobile menu — right-side off-canvas panel
   ========================================================= */
.emmb-mobile-menu {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	right: 0;
	width: min(85vw, 360px);
	height: 100vh;
	height: 100dvh;
	background: var(--emmb-dropdown-bg);
	box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .35s ease, visibility 0s linear .35s;
	/* Must beat the WP admin bar (z-index: 99999, fixed to the viewport top)
	   and typical theme sticky headers, or the close button becomes visually
	   covered and un-tappable even though the panel is "open". */
	z-index: 999999;
	overflow: hidden;
}

.emmb-mobile-menu.emmb-mobile-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform .35s ease, visibility 0s linear 0s;
}

/* Dimmed backdrop behind the panel */
.emmb-mobile-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
	z-index: 999998;
}

.emmb-mobile-backdrop.emmb-mobile-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s linear 0s;
}

/* Prevent the page from scrolling behind the open panel */
body.emmb-mobile-scroll-lock {
	overflow: hidden;
}

.emmb-mobile-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 8px 10px;
	flex-shrink: 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.emmb-mobile-close {
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--emmb-dropdown-color);
	border-radius: 4px;
}

.emmb-mobile-close:hover { background: rgba(0, 0, 0, .05); }

.emmb-mobile-scroll {
	position: relative; /* containing block for absolute drill-down panels */
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Neutralize desktop's "li { position: relative }" so the absolute
   overlay panels below anchor to .emmb-mobile-scroll (or their parent
   overlay, for nested levels) — not to wherever the clicked row sits. */
.emmb-mobile-menu .emmb-menu-item {
	position: static;
}

.emmb-mobile-list,
.emmb-mobile-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.emmb-mobile-list li {
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.emmb-mobile-list li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 18px;
	color: var(--emmb-dropdown-color);
	text-decoration: none;
	font-family: inherit;
}

.emmb-mobile-list li > a:hover {
	color: var(--emmb-menu-hover);
	background: rgba(0, 0, 0, .03);
}

/* Sub-menus and mega panels are absolute overlays that cover the
   list — they do NOT push sibling items down. Each level slides in
   from the right over the level below it (drill-down navigation). */
.emmb-mobile-menu .emmb-sub-menu,
.emmb-mobile-menu .emmb-mega-panel {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background: var(--emmb-dropdown-bg);
	box-shadow: none;
	border-radius: 0;
	opacity: 1;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform .3s ease, visibility 0s linear .3s;
	pointer-events: none;
	z-index: 2;
	overflow-y: auto;
}

.emmb-mobile-menu .emmb-sub-menu.emmb-mobile-open,
.emmb-mobile-menu .emmb-mega-panel.emmb-mobile-open {
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
	transition: transform .3s ease, visibility 0s linear 0s;
}

/* Mobile carets point right (drill-in) instead of down */
.emmb-mobile-list .emmb-has-dropdown > a .emmb-caret,
.emmb-mobile-list .emmb-has-mega > a .emmb-caret {
	transform: rotate(-90deg);
	margin-left: auto;
}

/* "Back" row injected by JS at the top of an opened submenu */
.emmb-mobile-back {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	font-weight: 600;
	color: var(--emmb-dropdown-color);
	background: rgba(0, 0, 0, .03);
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	cursor: pointer;
}

.emmb-mobile-back-arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
}

.emmb-mobile-back:hover { background: rgba(0, 0, 0, .05); }

/* Nested indent no longer needed — every level is its own full-width
   overlay screen — but keep mega-panel content readable. */
.emmb-mega-panel-content { padding: 16px 18px; }

/* =========================================================
   Vertical layout adjustments
   ========================================================= */
.emmb-layout-vertical .emmb-sub-menu,
.emmb-layout-vertical .emmb-mega-panel {
	top: 0;
	left: 100%;
}

.emmb-layout-vertical .emmb-mega-panel.emmb-mega-full {
	left: 100%;
	transform: translateY(0);
}

.emmb-layout-vertical .emmb-menu-item > a { width: 100%; justify-content: space-between; }

/* =========================================================
   Admin — menu fields styling
   ========================================================= */
.emmb-menu-item-fields { font-size: 13px; }
.emmb-menu-item-fields label { display: block; margin-top: 8px; }
.emmb-menu-item-fields input,
.emmb-menu-item-fields select { font-size: 13px; }

/* =========================================================
   Accessibility: keyboard focus visible
   ========================================================= */
.emmb-menu-item > a:focus-visible {
	outline: 2px solid var(--emmb-menu-hover);
	outline-offset: 2px;
}

.emmb-hamburger:focus-visible {
	outline: 2px solid var(--emmb-menu-hover);
}

/* -------------------------------------------------------
   Hide sub-menu dropdowns on mega menu items.
   The mega panel itself handles the dropdown content —
   the <ul> sub-menu is suppressed entirely.
------------------------------------------------------- */
.emmb-has-mega > .emmb-sub-menu,
.emmb-has-mega > .emmb-sub-menu * {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}