/* =============================================================================
 * Invictus — Header nav dropdown "mega-grid" upgrade.
 *
 * Turns Woodmart's simple-dropdown submenus into wide multi-column grids so
 * long taxonomy lists (33 hookah brands, 30+ bowl brands, etc.) fit the
 * viewport instead of being clipped at the right edge of a narrow column.
 *
 * Scope: only submenus rendered by simple-dropdown items in the main header
 * navigation. Woodmart's own custom mega-menus are left alone.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Dropdown pinned directly under its OWN opener <li>.
 *
 * Previous attempts pinned the dropdown to the whole nav or to the viewport
 * centre. Both caused problems when switching between sibling menu items:
 * the dropdown covered other items' hover regions and Woodmart's own logic
 * kept closing the wrong one.
 *
 * New geometry: each dropdown is a small(ish) panel that sits directly
 * beneath its opener <li>, aligned to that item's left edge. Adjacent
 * items' dropdowns are completely separate — moving between openers just
 * swaps which dropdown is shown, with no overlap.
 * ---------------------------------------------------------------------- */
.wd-nav-main {
	position: relative !important;
}
.wd-nav-main > li.menu-simple-dropdown {
	/* Each <li> is the positioning ancestor for its own dropdown. */
	position: relative !important;
}
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu {
	/* Fixed panel width sized for a comfortable 3-column grid at 180px
	   per column. Long lists (33 brands) fill all 3 columns; short lists
	   just occupy fewer columns within the same panel width but item
	   labels stay fully readable (no ellipsis truncation). */
	width: 620px !important;
	max-width: calc(100vw - 40px) !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	transform: none !important;
	margin-top: 0 !important;
	padding: 16px 0 !important;
	border-radius: 6px;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .35);
}

/* Menu item order is left to WordPress / Woodmart defaults — no CSS
   reordering applied. */

/* Right-edge overflow guard: if the dropdown's left edge is too close to
   the viewport's right side, anchor to the right of the <li> instead. */
.wd-nav-main > li.menu-simple-dropdown.inv-align-right > .wd-dropdown-menu {
	left: auto !important;
	right: 0 !important;
}

/* Invisible hover bridge — small vertical strip flush under the <li>
   that extends the dropdown's hoverable area upward across the <li>'s
   width. Since the dropdown is now pinned directly under its own <li>,
   there is no horizontal gap to bridge — this only exists to smooth
   over sub-pixel gaps and rendering jitter. */
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu::before {
	content: "";
	position: absolute;
	left: 0;
	top: -8px;
	width: 100%;
	height: 8px;
	background: transparent;
	pointer-events: auto;
	z-index: 1;
}

/* When our JS marks the <li> as actively hovered (either the item itself
   or the dropdown), force the dropdown fully visible. Highest specificity
   + !important so it beats Woodmart's own hover-out state. */
.wd-nav-main > li.menu-simple-dropdown.inv-nav-hover > .wd-dropdown-menu {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	display: block !important;
}

/* The inner .container that Woodmart wraps around the submenu — full
   width of the fixed-width panel. */
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 20px !important;
}

/* -------------------------------------------------------------------------
 * The core change: convert the vertical <ul class="wd-sub-menu"> into
 * a CSS-grid with auto-fill columns of ~180px each. That gives:
 *   - 3 cols on narrow laptops (viewport ~1200px effective width)
 *   - 5-6 cols on standard desktops
 *   - 7-8 cols on 1920+ screens
 * All items visible at once — no vertical scroll, no clipping.
 * ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
 * Convert the vertical <ul class="wd-sub-menu"> into a CSS grid.
 *
 * auto-fit + fixed column width (200px) gives us:
 *  - Long lists (33 brands) → 3 columns (600px used of 640px)
 *  - Medium lists (~7-9 items) → 3 columns
 *  - Short lists (2-3 items) → only as many columns as items
 * ---------------------------------------------------------------------- */
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 4px 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu::-webkit-scrollbar { width: 6px; }
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .25);
	border-radius: 3px;
}

/* Each item is a clean grid cell — no left border, tight padding. */
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu > li {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu > li > a {
	display: block !important;
	padding: 8px 10px !important;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
	line-height: 1.35;
	transition: background .12s, color .12s, transform .12s;
}
.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu > li > a:hover {
	background: rgba(255, 255, 255, .08);
	transform: translateX(2px);
}

/* Short lists (≤8 items) still work — auto-fill just uses fewer columns. */

/* -------------------------------------------------------------------------
 * Tablet / small laptop (<1024px): fall back to Woodmart's default, so
 * we don't fight the mobile off-canvas menu.
 * ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.wd-nav-main > li.menu-simple-dropdown {
		position: relative !important;
	}
	.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu {
		width: auto !important;
		max-width: none !important;
		left: auto !important;
		transform: none !important;
	}
	.wd-nav-main > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu {
		display: block !important;
		max-height: none;
		overflow: visible;
	}
}

/* =============================================================================
 * Vertical mega-menu widget (.wd-menu .wd-nav-vertical) — sidebar-style menu
 * where each top-level item flies its dropdown out to the RIGHT of the list,
 * not below it. Same "long brand list gets clipped" problem, different
 * geometry.
 *
 * Scope: only simple-dropdown items rendered inside a wd-nav-vertical widget.
 * The main header nav is handled above and is not affected by these rules.
 * ========================================================================= */
@media (min-width: 1024px) {
	/* The <li> anchors the flyout — must be positioned so the absolute
	   dropdown pins to its right edge. */
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown {
		position: relative !important;
	}

	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu {
		/* Fly out to the right, top-aligned with the <li>. */
		position: absolute !important;
		left: 100% !important;
		right: auto !important;
		top: 0 !important;
		transform: none !important;
		/* Cap width so a huge brand list doesn't run past the viewport edge.
		   Also honour the actual remaining viewport space. */
		width: min(760px, calc(100vw - 100% - 40px)) !important;
		max-width: 760px !important;
		padding: 16px 0 !important;
		border-radius: 6px;
		box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .35);
		z-index: 1000;
	}

	/* Invisible horizontal bridge — covers the gap between the <li> and the
	   flyout so the cursor doesn't cross empty space and trip Woodmart's
	   hover-out handler. */
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu::before {
		content: "";
		position: absolute;
		left: -24px;
		top: 0;
		width: 24px;
		height: 100%;
		background: transparent;
		pointer-events: auto;
		z-index: -1;
	}

	/* Force-open state driven by the shared JS keep-open bridge. */
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown.inv-nav-hover > .wd-dropdown-menu {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		display: block !important;
	}

	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 20px !important;
	}

	/* Convert the vertical brand list into a multi-column grid. Narrower
	   min-column (160px) than the header nav (180px) because the flyout is
	   capped at 760px, so we still get 3-4 columns on typical screens. */
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
		gap: 4px 12px !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		max-height: min(75vh, 560px);
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .25) transparent;
	}
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu::-webkit-scrollbar { width: 6px; }
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, .25);
		border-radius: 3px;
	}

	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu > li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu > li > a {
		display: block !important;
		padding: 8px 10px !important;
		border-radius: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
		line-height: 1.35;
		transition: background .12s, color .12s, transform .12s;
	}
	.wd-menu .wd-nav-vertical > li.menu-simple-dropdown > .wd-dropdown-menu > .container > .wd-sub-menu > li > a:hover {
		background: rgba(255, 255, 255, .08);
		transform: translateX(2px);
	}
}