/* EasyGarage Core - Mega Menu (desktop only) */

:root {
	--egc-mega-panel-bg: #ffffff;
	--egc-mega-panel-shadow: 0 24px 40px rgba(0, 0, 0, 0.16);
	--egc-mega-submenu-bg: #ffffff;
	--egc-mega-submenu-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------------------------------------
   Navigation wrapper
   ---------------------------------------------------------------------- */
.egc-mega-menu-nav {
	position: relative;
}

/* -------------------------------------------------------------------------
   Top-level list (flex bar)
   ---------------------------------------------------------------------- */
.egc-mega-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: space-between;
	gap: clamp(0.5rem, 0.375rem + 0.15625vw, 0.75rem);
}

/* -------------------------------------------------------------------------
   Top-level items
   ---------------------------------------------------------------------- */
.egc-mega-menu > li {
	position: relative;
}

/* -------------------------------------------------------------------------
   Top-level links — base color for all items
   ---------------------------------------------------------------------- */
.egc-mega-menu > li > a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: clamp(0.875rem, 0.625rem + 0.3125vw, 1.0625rem);
	color: #FFFFFFBF;
	transition: color 0.2s ease;
	font-weight: 500;
}

.egc-mega-menu > li > a:hover,
.egc-mega-menu > li > a:focus,
.egc-menu-item--mega.is-open > a {
	color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   Chevron — inline SVG inside the link for mega items only
   ---------------------------------------------------------------------- */
.egc-mega-chevron {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	margin-left: 4px;
	color: inherit;
	transition: transform 0.2s ease;
	pointer-events: none;
}

.egc-menu-item--mega.is-open > a .egc-mega-chevron {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Spacer — invisible anchor so the <li> keeps its height when the panel
   gets position:fixed. Without it the <li> collapses to zero height.
   ---------------------------------------------------------------------- */
.egc-mega-panel-spacer {
	position: absolute;
	inset: 0;
	visibility: hidden;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Mega panel — fixed to the viewport so it always spans the full
   visible width regardless of Elementor containers, overflow:hidden
   ancestors, or scrollbar presence. JS sets top dynamically.
   ---------------------------------------------------------------------- */
.egc-mega-panel {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100dvw;
	box-sizing: border-box;
	background: var(--egc-mega-panel-bg);
	box-shadow: var(--egc-mega-panel-shadow);
	z-index: 9999;
	pointer-events: none;
}

.egc-menu-item--mega.is-open > .egc-mega-panel {
	display: block;
	pointer-events: auto;
	animation: egcMegaIn 0.15s ease-out;
}

@keyframes egcMegaIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Native submenus for normal (non-mega) items
   ---------------------------------------------------------------------- */
.egc-mega-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--egc-mega-submenu-bg);
	box-shadow: var(--egc-mega-submenu-shadow);
	z-index: 9990;
	min-width: 180px;
}

.egc-mega-menu li:focus-within > .sub-menu {
	display: block;
}