/**
 * Site header: transparent-over-hero on the front page, solid+sticky on
 * every interior template. Mega menu opens on hover/focus with CSS alone;
 * assets/js/header.js only adds the scroll-driven fill fade and the mobile
 * panel toggle — both progressive enhancements, not required for the header
 * to function.
 */

.k-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--k-z-header);
	background: var(--k-color-bg);
	border-bottom: 1px solid var(--k-border-hairline);
}

/* Front page overrides: fixed + transparent, solid fill fades in on scroll */
.k-header--transparent {
	position: fixed;
	background: transparent;
	border-bottom-color: transparent;
}

.k-header__fill {
	position: absolute;
	inset: 0;
	background: var(--k-color-bg);
	border-bottom: 1px solid var(--k-border-hairline);
	opacity: 0;
	transition: opacity var(--k-duration-base) var(--k-ease);
	pointer-events: none;
}

.k-header--transparent.is-filled .k-header__fill {
	opacity: 1;
}

.k-header__bar {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 22px var(--k-gutter);
}

/* Cart / Checkout / order-received transactional header (Phase 6.2) —
   reuses the same .k-header__bar 1fr/auto/1fr grid as the storefront
   header, just with different content in the outer two cells: a "Secure
   checkout" label (left) and the real "Bag (N)" link (right) instead of
   nav/search/account. */
.k-header__secure-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
	color: var(--k-color-muted-2);
}

.k-header__bag-link {
	justify-self: end;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
	color: var(--k-color-text);
}

@media (max-width: 480px) {
	/* Keep the 3-column bar from cramming on very narrow phones — the
	   wordmark + real Bag count stay, the label is the one safe thing to
	   drop since it's decorative context, not a control. */
	.k-header__secure-label {
		display: none;
	}
}

.k-header__nav,
.k-header__utility {
	display: flex;
	gap: clamp(14px, 2vw, 30px);
	align-items: center;
	color: var(--k-color-text);
}

/* Mega_Menu_Walker's items_wrap is overridden to '%3$s' (no <ul>, see
   class-mega-menu-walker.php) so each item is a bare <li> with no list
   parent — the base/reset.css ul[class] rule never matches it, so the
   browser's own UA default (list-item + disc marker) was showing. Approved
   reference has no <li>/<ul> at all in the nav (plain <a> siblings), so
   there should be no marker either. */
.k-header__nav li {
	list-style: none;
}

/* Fixed-light, not the theme's --k-color-text: while un-filled, this text
   sits directly on the hero photo below, which is always dark regardless
   of the active page theme — near-black light-mode text would disappear
   into it (same reasoning as .k-hero in components/home.css). Scoped to
   :not(.is-filled) only: once the solid fill fades in on scroll, this text
   sits on the page's own --k-color-bg instead (ivory in light mode), where
   fixed-light ink would just as invisibly blend in — it needs to hand back
   to the theme's real --k-color-text at exactly that point. */
.k-header--transparent:not(.is-filled) .k-header__nav,
.k-header--transparent:not(.is-filled) .k-header__utility,
.k-header--transparent:not(.is-filled) .k-wordmark,
.k-header--transparent:not(.is-filled) .k-header__menu-toggle {
	color: var(--k-color-fixed-ink-light);
	text-shadow: 0 1px 10px rgba(10, 10, 9, 0.45);
}

.k-header__utility {
	justify-content: flex-end;
}

/* My Account utility link — was an inline style="opacity:.85;" (Phase 14B
   cleanup); same reduced-emphasis look, now a reusable class. */
.k-header__account-link {
	opacity: .85;
}

.k-header__nav-link {
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: border-color var(--k-duration-base), color var(--k-duration-base);
}

.k-header__nav-link:hover,
.k-header__nav-link:focus-visible,
.k-nav-item:hover > .k-header__nav-link,
.k-nav-item:focus-within > .k-header__nav-link {
	border-bottom-color: var(--k-color-accent);
	color: var(--k-color-accent);
}

.k-header__cart-count {
	font-variant-numeric: tabular-nums;
	color: var(--k-color-accent);
}

/* Theme toggle (Phase 6.4) — a plain button styled to match the
   adjacent Search/Account/Cart text links exactly, so it reads as one
   more utility item rather than a distinct control. Gets the same
   font-size/weight/letter-spacing/text-transform as those links via the
   k-nav-link class on the element itself (site-header.php) rather than
   inherit: :inherit here would only ever resolve against .k-header__utility,
   which deliberately carries no typography of its own (see base/typography.css)
   so that its .k-search descendant's input/results text isn't affected too. */
.k-theme-toggle {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	cursor: pointer;
}

.k-theme-toggle:hover,
.k-theme-toggle:focus-visible {
	color: var(--k-color-accent);
}

.k-theme-toggle:focus-visible {
	outline: 1px solid var(--k-color-accent);
	outline-offset: 4px;
}

/* Mega menu */
.k-nav-item {
	position: relative;
}

.k-mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--k-color-bg);
	border-bottom: 1px solid var(--k-border-hairline);
	z-index: var(--k-z-mega-menu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--k-duration-base) var(--k-ease), transform var(--k-duration-base) var(--k-ease), visibility var(--k-duration-base);
}

.k-nav-item:hover > .k-mega-menu,
.k-nav-item:focus-within > .k-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.k-mega-menu__grid {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(260px, 1.6fr) minmax(260px, 1.6fr);
	gap: clamp(20px, 3vw, 56px);
	padding: clamp(22px, 3vw, 46px) var(--k-gutter) clamp(30px, 4vw, 56px);
}

.k-mega-menu__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.k-mega-menu__col a {
	font-family: var(--k-font-serif);
	font-size: 20px;
}

.k-mega-menu__col--edit a {
	font-family: var(--k-font-sans);
	font-size: 14px;
	color: var(--k-color-muted-1);
}

.k-mega-menu__feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	transition: transform var(--k-duration-slow) var(--k-ease);
}

.k-mega-menu__feature:hover img {
	transform: scale(1.04);
}

/* Mobile nav toggle + panel */
.k-header__menu-toggle {
	display: none;
}

@media (max-width: 899px) {
	.k-header__nav {
		display: none;
	}

	.k-header__menu-toggle {
		display: inline-flex;
	}

	.k-mega-menu {
		display: none;
	}

	/* The theme toggle moves into the mobile panel below this width (see
	   mobile-panel.php) — a 4th item in .k-header__utility pushes the
	   header bar past the hamburger button at phone widths, so it's
	   hidden here rather than shrinking the whole utility bar. */
	.k-header__utility .k-theme-toggle {
		display: none;
	}
}

.k-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: var(--k-z-drawer);
	background: var(--k-color-bg);
	color: var(--k-color-text);
	padding: 22px var(--k-gutter);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform var(--k-duration-base) var(--k-ease);
}

.k-mobile-panel.is-open {
	transform: translateX(0);
}

/* This is the only reuse of .k-header__bar outside the real site header,
   and it only ever holds these two controls — a simple flex row keeps
   Close/theme-toggle at opposite ends without touching the grid the real
   header relies on. */
.k-mobile-panel .k-header__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.k-mobile-panel__close {
	font-size: 11px;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
}

.k-mobile-panel__theme-toggle {
	font-size: 11px;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
}

.k-mobile-panel__links {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.k-mobile-panel__links a {
	font-family: var(--k-font-serif);
	font-size: 32px;
}