/**
 * Desktop/mobile navigation appearance, layered on top of GeneratePress's
 * own accessible nav markup and toggle behavior (assets/js/menu.js in the
 * parent theme) — no nav behavior is reimplemented here.
 */
/*
 * GeneratePress already centers .inside-navigation / .menu-bar-items
 * (align-items: center in its own CSS), but our global body line-height
 * (1.6) was making the nav-link text sit in a taller line box than the
 * 44px icon buttons next to it, throwing off the visual baseline even
 * though both were technically "centered". Pinning line-height: 1 here
 * and centering the link itself removes that mismatch.
 */
.main-nav ul li a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	color: var(--color-text);
}

.main-nav ul li a:hover {
	color: var(--color-primary);
}

.main-nav .sub-menu {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
}

.main-nav,
.main-nav > ul {
	display: flex;
	align-items: center;
}

/* Right-aligned container GeneratePress renders our header actions into. */
.menu-bar-items {
	margin-inline-start: auto;
	align-items: center;
}

.menu-toggle {
	color: var(--color-text);
}

/**
 * Category navigation bar + mega menu / mobile accordion.
 * Markup: template-parts/header/category-nav.php
 * Behavior: assets/js/modules/category-nav.js
 * Data: inc/header/category-data.php (+ mock/woocommerce providers)
 */
.myshop-category-nav {
	position: relative;
	background-color: var(--color-background);
	border-block-end: 1px solid var(--color-border);
}

/*
 * Selector is `ul.myshop-category-nav__list`, not just the class, on
 * purpose: assets/css/base/reset.css has `ul[class] { margin:0; padding:0 }`,
 * which is an element+attribute selector — higher specificity than a
 * plain class, so it would otherwise win regardless of load order.
 *
 * No max-width/nowrap/scroll here on purpose: constraining this to the
 * ~1200px site container was cutting categories off once the larger
 * font-size made the row wider than that. The row now spans the full
 * header width and centers its items within that — if it's ever wider
 * than the viewport, it wraps to a second line instead of clipping or
 * silently scrolling.
 */
ul.myshop-category-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--myshop-space-sm) clamp(28px, 3vw, 56px);
	list-style: none;
	width: 100%;
	margin-inline: auto;
	/* No block padding here on top of .myshop-category-nav__item's own
	   min-height below — the two stacked (8px + 8px + 54px) pushed this
	   row to ~70px, past the 52-58px target. The item's min-height alone
	   already gives a comfortable click target. */
	padding-inline: var(--layout-gutter);
}

.myshop-category-nav__item {
	display: flex;
	align-items: center;
	min-height: 54px;
}

/*
 * text-decoration: none is stated explicitly (not just left to inherit)
 * because neither reset.css nor the global `a{}` rule in typography.css
 * resets it — browsers underline <a href> by default, and that default
 * was winning on every one of these links in every state (hover/focus/
 * active/visited all inherit it unless overridden). Stating it once here
 * covers all of them; no state re-introduces it.
 */
.myshop-category-nav__link,
.myshop-category-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding-block: var(--myshop-space-sm);
	color: var(--color-text);
	/* --font-size-base (16px) is the clamp floor — unchanged at
	   1200-1440px, growing to the 17px cap by ~1700px viewport width.
	   Typography-only change (spacing/gaps/chevrons/hover/mega-menu
	   untouched) — the nav was reading as too delicate next to the rest
	   of the now-wider, now-larger-type header. */
	font-size: clamp(var(--font-size-base), 1vw, 17px);
	/* Raised from 500 — still within the 500-600 target range, and closer
	   to the rest of the header's now-heavier label weight. */
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.myshop-category-nav__link {
	padding-inline-end: 0;
}

.myshop-category-nav__toggle {
	padding-inline: 0.25rem;
	min-width: 1.5rem;
}

.myshop-category-nav__link:hover,
.myshop-category-nav__link:focus,
.myshop-category-nav__link:active,
.myshop-category-nav__link:visited,
.myshop-category-nav__toggle:hover {
	text-decoration: none;
}

/*
 * background-color: transparent is the actual fix for the "black box on
 * hover" bug — GeneratePress's own dynamic Customizer CSS declares
 * `button:hover, button:focus { background-color: #3f4047; ... }`
 * (element + pseudo-class, specificity 0-1-1). .myshop-category-nav__toggle
 * is a real <button> (the chevron/disclosure control), so that rule
 * matched it. The base (non-hover) state was already fine — background:
 * none in the rule above resets background-color to transparent at
 * specificity 0-1-0, which already outranks GP's plain `button {}` — but
 * neither that rule nor the old .toggle:hover rule declared
 * background-color at all, so GP's button:hover/:focus rule was the only
 * declaration for that property in those states and applied unopposed.
 * .myshop-category-nav__toggle:hover/:focus (class + pseudo, 0-2-0)
 * outranks GP's button:hover/:focus (0-1-1) once background-color is
 * actually declared here, closing the gap for both mouse and keyboard
 * interaction (:focus, not just :focus-visible, since GP's rule matches
 * plain :focus too).
 */
.myshop-category-nav__link:hover,
.myshop-category-nav__link:focus,
.myshop-category-nav__toggle:hover,
.myshop-category-nav__toggle:focus {
	color: var(--color-primary);
	background-color: transparent;
}

.myshop-category-nav__link:focus-visible,
.myshop-category-nav__toggle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/*
 * A restrained "open" state — text color + weight + a zero-layout-shift
 * underline accent. box-shadow (not border-bottom/text-decoration) is
 * deliberate: a real border or underline would either shift the text up
 * by its own thickness or require a compensating margin/padding change
 * elsewhere; a non-inset box-shadow paints outside the box without
 * affecting layout at all.
 */
.myshop-category-nav__item.is-open .myshop-category-nav__link {
	color: var(--color-primary);
	font-weight: 600;
	box-shadow: 0 2px 0 0 var(--color-accent);
}

/*
 * The chevron SVG stays in the DOM (the toggle button it's in still
 * carries aria-expanded/aria-controls and is still what mobile taps to
 * open the accordion — see assets/js/modules/category-nav.js, unchanged)
 * — it's just not drawn. Hovering or focusing the category label itself
 * already opens the panel via the existing mouseenter/focusin handling
 * on the parent <li>, so no visible arrow is needed to signal or trigger
 * the dropdown on desktop.
 */
.myshop-category-nav__chevron {
	display: none;
}

/* Mega menu panel — background spans full width below the category bar;
   the content inside (.myshop-mega-menu__grid) is what's capped and
   centered to the site container, so text never touches the viewport
   edge even though the panel itself does. */
/*
 * background-color: var(--color-surface) (a warm cream), not
 * --color-background (the page's own background) — the panel was using
 * the exact same color as the page behind it, which read as "blending
 * into the page" even though the color itself was already warm/on-palette.
 * A full border (was border-block-end only) + a wider, softer shadow and
 * a slightly tighter bottom radius give the panel a defined but still
 * light, integrated edge instead of a heavy floating-card look.
 */
.myshop-mega-menu {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 20;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
}

.myshop-mega-menu[hidden] {
	display: none;
}

.myshop-mega-menu .myshop-container {
	max-width: none;
}

/*
 * A single flat grid — every child category column AND the promo card
 * are direct grid items (template-parts/header/category-nav.php no
 * longer wraps the columns in their own inner container). That's what
 * lets the promo card behave like "one more column" instead of a
 * separately-floated block, and what makes justify-content: center
 * actually center the *whole group* as one unit.
 *
 * grid-template-columns uses minmax(9rem, 14rem) — a cap, not `1fr` —
 * on purpose: `1fr` tracks always stretch to consume 100% of the row,
 * which is what was making columns spread edge-to-edge with a big gap
 * before the promo card once the row got wider than the columns
 * actually needed. Bounding the track size means the grid's *total*
 * width is only ever as wide as its content requires (up to the column
 * count that fits), and justify-content: center centers that block
 * within the wider .myshop-mega-menu__grid box — balanced empty space
 * on both sides instead of the columns being left-biased, regardless of
 * whether a category has 3, 4, 5 or 6 children.
 *
 * width: min(...) is the exact same formula as .myshop-container (see
 * containers.css) — same --layout-gutter, same --layout-max-width — so
 * this grid's left/right edges land exactly where the header's,
 * homepage's and footer's do.
 */
.myshop-mega-menu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 14rem));
	justify-content: center;
	align-items: start;
	gap: var(--myshop-space-lg);
	padding-block: var(--section-spacing-block-small);
	width: min(100% - (2 * var(--layout-gutter)), var(--layout-max-width, 80rem));
	margin-inline: auto;
}

.myshop-mega-menu__column {
	display: flex;
	flex-direction: column;
}

.myshop-mega-menu__column-title {
	/* No exact-15px token exists (--font-size-sm is 14px, --font-size-base
	   is 16px) — a literal value here, same reasoning as the promo title's
	   font-size below. */
	font-size: 15px;
	/* Eased from 700 — still clearly stronger than the 400-weight child
	   links below it, just not as heavy. */
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-heading);
	/* Raised from var(--myshop-space-sm) (16px) to give the child links
	   slightly more visual separation from the heading above them. */
	margin-block-end: 18px;
}

.myshop-mega-menu__links {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.myshop-mega-menu__links a {
	display: inline-block;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease;
}

/* Subtle 2px nudge on hover/focus — small enough to read as refined
   rather than a large animation. display: inline-block above is what
   keeps the transform from affecting surrounding layout (list gap,
   sibling positions) — a translateX on an inline element wouldn't
   reliably do the same. */
.myshop-mega-menu__links a:hover,
.myshop-mega-menu__links a:focus {
	color: var(--color-primary);
	text-decoration: none;
	transform: translateX(2px);
}

/* Separate from :hover/:focus above (which also fire on mouse click) —
   this only draws for keyboard focus, matching the same pattern already
   used on .myshop-category-nav__link/__toggle. */
.myshop-mega-menu__links a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* One per column (see template-parts/header/category-nav.php), not one
   for the whole panel — that's also what keeps it inside the capped
   grid instead of the old single bottom-of-panel link, which lived
   outside .myshop-mega-menu__grid and rendered at the raw viewport-left
   edge once the panel itself became full width. */
.myshop-mega-menu__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-block-start: var(--myshop-space-sm);
	color: var(--color-accent);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-decoration: none;
}

.myshop-mega-menu__view-all:hover,
.myshop-mega-menu__view-all:focus {
	color: var(--color-primary);
	text-decoration: none;
}

.myshop-mega-menu__view-all-arrow {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: transform 0.18s ease;
}

.myshop-mega-menu__view-all:hover .myshop-mega-menu__view-all-arrow,
.myshop-mega-menu__view-all:focus .myshop-mega-menu__view-all-arrow {
	transform: translateX(2px);
}

/*
 * background-color: var(--color-surface-alt) — one step warmer/deeper
 * than the panel's own var(--color-surface) background (see .myshop-mega-menu
 * above), so the card still reads as visually separate now that the panel
 * itself is no longer the plain page background. border-radius: 8px, not
 * the shared 4px --myshop-radius token — closer to (without copying) the
 * panel's own 10px bottom corners, so the card doesn't look sharper-cornered
 * than the panel that contains it.
 */
.myshop-mega-menu__promo {
	display: flex;
	flex-direction: column;
	align-self: start;
	gap: var(--myshop-space-xs);
	/* var(--myshop-space-md) (32px) read as too roomy for a card this
	   size relative to the rest of the menu — 22px keeps it comfortable
	   without ballooning the card. */
	padding: 22px;
	background-color: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.myshop-mega-menu__promo:hover,
.myshop-mega-menu__promo:focus {
	border-color: var(--color-accent);
}

.myshop-mega-menu__promo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--myshop-radius);
}

.myshop-mega-menu__promo-title {
	/* Eased from 700, and stays clearly below the top-level category
	   nav's own weight (600) in visual importance — the promo is
	   secondary to primary navigation, not competing with it. */
	font-weight: 600;
	/* var(--font-size-base) is exactly 16px — already the token for this
	   target range, no literal value needed here. */
	font-size: var(--font-size-base);
	line-height: 1.3;
	color: var(--color-heading);
}

.myshop-mega-menu__promo-text {
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--color-text-muted);
}

/* No tablet/medium-desktop override needed here anymore: auto-fit
   already reduces how many 9-14rem columns fit per row as the viewport
   narrows, and justify-content: center keeps re-centering the result at
   every width — that's the point of using auto-fit instead of a fixed
   column count. */

/* Mobile: accordion instead of hover mega menu. */
@media (max-width: 47.99rem) {
	.myshop-category-nav__list {
		flex-direction: column;
		overflow-x: visible;
		white-space: normal;
		gap: 0;
	}

	.myshop-category-nav__item {
		flex-wrap: wrap;
		justify-content: space-between;
		border-block-end: 1px solid var(--color-border);
	}

	.myshop-category-nav__link {
		flex: 1;
		padding-block: var(--myshop-space-sm);
	}

	.myshop-category-nav__toggle {
		min-width: 44px;
		min-height: 44px;
		padding: var(--myshop-space-sm);
	}

	.myshop-mega-menu {
		position: static;
		inset-inline: auto;
		width: 100%;
		box-shadow: none;
		/* Was border-block-end: 0 — the desktop rule only had a bottom
		   border back then. It's a full border now (see the desktop rule
		   above), so this needs to zero out all four sides to keep the
		   mobile accordion panel exactly as borderless as before. */
		border: 0;
		border-radius: 0;
	}

	.myshop-mega-menu__grid {
		grid-template-columns: 1fr;
		padding-block: var(--myshop-space-sm);
	}

	.myshop-mega-menu__promo {
		width: 100%;
	}
}