/* =================================================================
   File:    08-mega-menu.css
   Purpose: Two dropdown systems for the primary nav:

     1. .liqui-menu .sub-menu    → standard WP dropdown (when a menu
                                    item has child items but mega is
                                    NOT enabled).
     2. .liqui-mega              → custom mega panel (auto-grid /
                                    Elementor template / brand grid).

   Mobile (< 1024px): both collapse into the off-canvas drawer.

   IMPORTANT: every `.sub-menu` rule below has explicit
   `list-style: none` + zero padding so WP / browser defaults can't
   leak bullets through, no matter what specificity another stylesheet
   has.
   ================================================================= */


/* ---------------------------------------------------------------
   Reset menu defaults — applied to BOTH the top-level <ul> and any
   nested <ul.sub-menu> at any depth.
   --------------------------------------------------------------- */
.liqui-menu,
.liqui-menu ul,
.liqui-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.liqui-menu li,
.liqui-menu .sub-menu li { list-style: none; margin-block: 0; }   /* margin-block:0 kills a generic li margin-top that misaligned nav items */
.liqui-menu li::marker,
.liqui-menu .sub-menu li::marker { content: ""; }   /* nukes any leftover bullet */


/* ---------------------------------------------------------------
   1) Standard sub-menu — hidden by default, shows on hover/focus
   --------------------------------------------------------------- */
.liqui-menu > li > .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 240px;
	padding: var(--space-2);
	background: var(--menu-bg, var(--glass-bg-strong));
	border: var(--glass-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--glass-shadow-lg);
	-webkit-backdrop-filter: blur(var(--menu-blur, 22px)) saturate(140%);
	backdrop-filter:         blur(var(--menu-blur, 22px)) saturate(140%);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease),
	            transform var(--dur) var(--ease),
	            visibility 0s linear var(--dur);
	z-index: var(--z-header);
	pointer-events: none;
}

.liqui-menu > li:hover > .sub-menu,
.liqui-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity var(--dur) var(--ease),
	            transform var(--dur) var(--ease),
	            visibility 0s;
}

.liqui-menu .sub-menu a {
	display: block;
	padding: 8px 12px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	white-space: nowrap;
}
.liqui-menu .sub-menu a:hover { background: var(--c-surface-2); color: var(--c-accent); }

/* Level-2 sub-menu — flyout to the side */
.liqui-menu .sub-menu .sub-menu {
	position: absolute;
	top: 0;
	inset-inline-start: 100%;
	margin-inline-start: 4px;
	padding: var(--space-2);
	min-width: 220px;
	background: var(--menu-bg, var(--glass-bg-strong));
	border: var(--glass-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--glass-shadow-lg);
	-webkit-backdrop-filter: blur(var(--menu-blur, 22px)) saturate(140%);
	backdrop-filter:         blur(var(--menu-blur, 22px)) saturate(140%);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.liqui-menu .sub-menu li:hover > .sub-menu,
.liqui-menu .sub-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--dur) var(--ease), visibility 0s;
}

/* Make sure every <li> that has a sub-menu is the positioning context */
.liqui-menu li { position: relative; }


/* ---------------------------------------------------------------
   2) Mega menu — custom full-bleed panel
   --------------------------------------------------------------- */
.liqui-menu > li > .liqui-mega {
	position: absolute;
	inset-inline-start: 0;
	right: 0;
	top: 100%;
	width: 100vw;
	max-width: 100vw;
	padding: var(--space-6) var(--fullbleed-padding);
	background: var(--menu-bg, var(--glass-bg-strong));
	border-block-start: 1px solid var(--c-line);
	box-shadow: var(--glass-shadow-lg);
	-webkit-backdrop-filter: blur(var(--menu-blur, 28px)) saturate(150%);
	backdrop-filter:         blur(var(--menu-blur, 28px)) saturate(150%);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity var(--dur) var(--ease),
	            transform var(--dur) var(--ease),
	            visibility 0s linear var(--dur);
	z-index: var(--z-header);
}

.liqui-menu > li:hover > .liqui-mega,
.liqui-menu > li:focus-within > .liqui-mega,
.liqui-mega.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity var(--dur) var(--ease),
	            transform var(--dur) var(--ease),
	            visibility 0s;
}

.liqui-mega__inner {
	width: 100%;
	max-width: var(--mega-menu-max);
	margin-inline: auto;
}

.liqui-mega__caret {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 6px;
	transition: transform var(--dur-fast) var(--ease);
}
.liqui-mega__caret svg { display: block; }
.liqui-menu > li.has-liqui-mega:hover > a .liqui-mega__caret,
.liqui-menu > li.menu-item-has-children:hover > a .liqui-mega__caret { transform: rotate(180deg); }


/* Auto-grid layout (mega layout = "auto") */
.liqui-mega__grid {
	display: grid;
	gap: var(--space-5);
}
.liqui-mega__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liqui-mega__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.liqui-mega__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.liqui-mega__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.liqui-mega__grid > li > a {
	display: block;
	padding: 8px 10px;
	font-weight: var(--fw-semi);
	color: var(--c-ink);
	text-decoration: none;
	border-radius: var(--radius-sm);
}
.liqui-mega__grid > li > a:hover { color: var(--c-accent); background: var(--c-surface-2); }

/* Inside a mega panel, nested <ul> renders as a static list (no dropdown) */
.liqui-mega .sub-menu,
.liqui-mega ul {
	position: static;
	display: grid;
	gap: 2px;
	margin: var(--space-1) 0 0;
	padding: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	min-width: 0;
}
.liqui-mega .sub-menu a {
	padding: 6px 10px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	color: var(--c-ink-muted);
	white-space: normal;
}


/* Brand-grid layout (mega layout = "brands") */
.liqui-mega__brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-3);
	padding: 0;
}
.liqui-mega__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4);
	text-decoration: none;
	color: var(--c-ink);
	text-align: center;
}
.liqui-mega__brand-logo img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
	filter: grayscale(0.4);
	transition: filter var(--dur-fast) var(--ease);
}
.liqui-mega__brand:hover .liqui-mega__brand-logo img { filter: grayscale(0); }
.liqui-mega__brand-name {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.liqui-mega__empty {
	color: var(--c-ink-muted);
	font-size: var(--fs-sm);
	margin: 0;
	padding: var(--space-3);
}


/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1280px) {
	.liqui-mega__grid--cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.liqui-mega__grid--cols-3,
	.liqui-mega__grid--cols-4,
	.liqui-mega__grid--cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.liqui-mega__grid--cols-2,
	.liqui-mega__grid--cols-3,
	.liqui-mega__grid--cols-4,
	.liqui-mega__grid--cols-5 { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------
   Mobile drawer — dropdowns flow inline, no glass panel
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
	.liqui-mobile-menu .sub-menu,
	.liqui-mobile-menu .liqui-mega {
		position: static;
		width: 100%;
		max-width: none;
		min-width: 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}
}