/*
 * Category navigation row + desktop mega-menu (Phase 3B —
 * docs/MEGA-MENU-IMPLEMENTATION.md). Builds on the .bholats-menu-panel /
 * .bholats-menu-columns primitives from components/navigation.css (Phase 3A)
 * rather than redefining panel chrome. Desktop only (>=1024px) — the mobile
 * header + drawer (components/mobile-nav.css) take over below that.
 */

.bholats-category-nav {
	display: none;
	background: var(--color-surface-sunken);
	border-bottom: var(--border-default);
}

@media (min-width: 1024px) {
	.bholats-category-nav { display: block; }
}

.bholats-category-nav__row {
	display: flex;
	align-items: stretch;
	gap: var(--space-6);
	min-height: 44px;
}

.bholats-mega-trigger-group {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* --- "Shop by Category" trigger --- */

.bholats-category-nav__shop-btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: none;
	padding: var(--space-3) var(--space-4);
	margin-inline: calc(var(--space-4) * -1) 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-brand-deep);
	cursor: pointer;
	white-space: nowrap;
}

.bholats-category-nav__shop-btn:hover { color: var(--color-brand-blue); }

.bholats-category-nav__shop-btn svg:first-child { width: var(--icon-sm); height: var(--icon-sm); }
.bholats-category-nav__shop-btn svg:last-child {
	width: var(--icon-sm);
	height: var(--icon-sm);
	transition: transform var(--duration-base) var(--ease-standard);
}
.bholats-category-nav__shop-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

/* --- Shortcut category links --- */

.bholats-category-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.bholats-category-nav__link {
	display: flex;
	align-items: center;
	padding: var(--space-3) 0;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-decoration: none;
	position: relative;
	white-space: nowrap;
}

/* Trace-motif underline on hover/focus/open — docs/DESIGN-SYSTEM.md §6, reusing
   the same pattern as components/navigation.css tabs. */
.bholats-category-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--color-brand-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-base) var(--ease-standard);
}
.bholats-category-nav__link:hover::after,
.bholats-category-nav__link[aria-expanded="true"]::after {
	transform: scaleX(1);
}
.bholats-category-nav__link[aria-expanded="true"] { color: var(--color-brand-deep); }

/* --- Panels --- */

.bholats-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
}

/*
 * Right-edge overflow fix: the shortcut row (.bholats-category-nav__list)
 * is a plain left-to-right flex list, and every .bholats-mega-panel opens
 * `left: 0` — flush with its own trigger's left edge. That's fine for
 * every trigger except the LAST one: it sits closest to the row's own
 * right edge by definition, so its panel is the first (and, measured
 * across every shortcut at 1024–1920px, the ONLY) one that runs out of
 * viewport room — confirmed live: at 1024/1050px the last trigger's panel
 * (currently Point of Sale, 312px wide) overshot the right edge of the
 * viewport by 43px/17px and caused real horizontal page scroll; every
 * other trigger — including the two 561px flyout-capable panels, which
 * are wider still — never came within reach of the right edge at any of
 * the 8 widths tested, because they sit far enough left in the row.
 * Targeted structurally via :last-child, not by category name/slug or a
 * fixed pixel offset: whichever shortcut ends up last in the list (today
 * Point of Sale; automatically whatever replaces it if the shortcut list
 * is ever reordered) opens flush with its own RIGHT edge instead — the
 * same fix a real right-aligned dropdown uses, not a one-off hack for
 * one label. Unconditional (not width-gated): right-aligning the last
 * trigger's panel looks equally natural at every width, including where
 * the overflow never happened, so no extra breakpoint logic is needed.
 */
.bholats-category-nav__list > .bholats-mega-trigger-group:last-child .bholats-mega-panel {
	left: auto;
	right: 0;
}

/*
 * Regression fix, round 2 (round 1 — a flat 497px — was proven insufficient
 * on real staging content and is superseded here; see git history / prior
 * report for that first attempt's own reasoning, still correct as far as
 * it went).
 *
 * Two separate bugs, both real, found by measuring the ACTUAL deployed
 * page rather than trusting the CSS in isolation:
 *
 * Bug 1 — the 497px figure never accounted for .bholats-container's OWN
 * inline padding. Every .bholats-mega-panel wraps its columns in a nested
 * <div class="bholats-container"> (category-nav.php) purely for the
 * horizontal-alignment reasons documented in layout.css — but that same
 * container also carries `padding-inline: var(--container-pad-desktop)`
 * (var(--space-8), 32px per side at >=1024px, the only width the mega
 * menu ever renders at). The first fix's calc summed the panel's own
 * --space-6 padding but never this second, larger, nested padding layer
 * — measured live on staging: primary column started 32px further right
 * than the first calc assumed, on both sides, a 64px shortfall the first
 * fix's own math had no term for at all.
 *
 * Bug 2 — .bholats-menu-column--secondary's `white-space: nowrap` plus an
 * open-ended `min-width: 200px` means its real rendered width is however
 * wide its LONGEST label's unwrapped text needs — not a fixed, sizeable
 * quantity at all. "Laptop replacement keyboard" (a real subcategory,
 * confirmed live on staging) needs more single-line width than "Laptop
 * Batteries" does, so any fixed min-width chosen today is one long label
 * away from breaking again tomorrow — confirmed exactly this way: the
 * first fix's 497px happened to be *coincidentally* close for short
 * labels and still failed the moment a longer one shipped.
 *
 * Fix: (1) correct the calc below to include .bholats-container's real
 * padding, so the panel reserves the space that actually exists between
 * its own edge and where the columns really start; (2) give the
 * secondary column a fixed `width` (not `min-width`) and allow normal
 * wrapping (removed `white-space: nowrap`, see that rule below) — a
 * label of any length now wraps onto a second line inside a column of
 * fixed, predictable width instead of demanding an ever-growing box.
 * Together, the panel's required width becomes a fixed constant again,
 * independent of category-name length, present or future — the actual
 * architectural property this needs, not a bigger guess.
 */
.bholats-mega-panel--flyout {
	min-width: calc(
		var(--space-6) + var(--space-8) +
		200px +
		var(--space-6) + 1px + var(--space-6) +
		200px +
		var(--space-8) + var(--space-6)
	);
}

.bholats-mega-panel--all {
	left: 0;
	right: 0;
	width: max-content;
	max-width: calc(100vw - var(--space-8));
}

.bholats-menu-columns--all {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--space-6);
	min-width: 640px;
}

.bholats-menu-column__heading--link {
	text-decoration: none;
	cursor: pointer;
}
.bholats-menu-column__heading--link:hover { color: var(--color-text-on-brand); text-decoration: underline; }

/* --- Two-level (column1 -> column2) reveal ---
   Regression fix, round 3: column 2 used to be position:absolute, nested
   inside its own triggering row, revealed by :hover/:focus-within — see
   the .bholats-mega-panel--flyout docblock above for why that was already
   wrong for WIDTH. It was also wrong for HEIGHT, for the same underlying
   reason: an absolutely positioned element never contributes to its
   ancestor's own rendered size. Whichever column was actually taller —
   Computer Parts' 7 rows are taller than Computers' own 3-row primary
   column — never grew the panel; it only ever overflowed into
   .bholats-mega-panel's overflow-y:auto safety net, which then clipped it
   into a small internal scrollbar EVEN THOUGH the real viewport (any
   normal desktop/laptop screen) had plenty of room to show it without
   scrolling at all — confirmed live: panel clientHeight 162-185px vs a
   real scrollHeight of 191-260px once a flyout was revealed, at a 900px-
   tall viewport with no genuine height constraint anywhere close.
   Column 2 is now a real, normal-flow SIBLING of column 1 inside
   .bholats-menu-columns (category-nav.php) — a plain flex row's own
   height is simply the height of its tallest child, which is exactly
   the "size to content, no magic number" behaviour this needs. Revealing
   the correct one is now assets/js/mega-menu.js's job (a sibling can't be
   reached by :hover/:focus-within through DOM nesting) — mirrors the
   exact same hover-with-close-delay pattern this file's own outer
   trigger groups already use, one level down. .bholats-mega-panel's
   overflow-y:auto + max-height stay exactly as they were: a genuine
   safety net for the "Shop by Category" --all panel's own, much longer
   content, not something this fix needed to touch. */

.bholats-menu-column--primary {
	width: 200px;
	flex-shrink: 0;
}

.bholats-mega-submenu-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}
.bholats-mega-submenu-item > a svg { width: var(--icon-xs); height: var(--icon-xs); opacity: 0.7; }

.bholats-menu-column--secondary {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-left: var(--space-6);
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	/* No margin-left of its own: .bholats-menu-columns' existing `gap`
	   (navigation.css) already spaces every real flex child, primary and
	   secondary alike — an extra margin here would double it. */
	flex-shrink: 0;
	/* Fixed width (not min-width) + normal wrapping, not nowrap: a label
	   longer than this column's own width wraps onto a second line rather
	   than forcing the box wider than the panel reserved for it — see the
	   .bholats-mega-panel--flyout docblock above for the failure this
	   replaces. overflow-wrap guards the one remaining edge case (a single
	   word longer than the column itself), breaking it rather than
	   overflowing. */
	width: 200px;
	white-space: normal;
	overflow-wrap: break-word;
}
/* Native [hidden] normally needs no help, but an explicit `display: flex`
   right above (needed since the un-hidden state must be flex, not the
   default block) has equal specificity and would otherwise win over the
   UA stylesheet's `[hidden]{display:none}` — this restates it explicitly
   so toggling the attribute (assets/js/mega-menu.js) actually hides it. */
.bholats-menu-column--secondary[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bholats-category-nav__link::after,
	.bholats-category-nav__shop-btn svg:last-child { transition: none; }
}