/**
 * Component — Site Header (customer site)
 *
 * Markup: modules/frontend/views/site-header.php. Behaviour:
 * assets/js/components/site-header.js. Frontend Stage 1, 2026-10-01 —
 * the customer site's own header; HQ keeps the shared `.ec-nav`
 * (nav.css) unchanged.
 *
 * Layout by breakpoint (EC-STANDARDS.md scale, hardcoded by
 * breakpoints.css's documented convention):
 * - <640    64px bar: brand · account · basket · menu. Menu opens a
 *           full-width sheet under the bar.
 * - 640–1023 same bar; menu opens a right-hand drawer over a dimmed,
 *           blurred page.
 * - ≥1024   72px bar: brand · inline primary nav · labelled Account
 *           and Basket. No menu toggle.
 *
 * Surface: navy glass (glass is an EC-DESIGN.md navigation context),
 * a hairline energy line along the bottom edge, and a firmer, shadowed
 * surface once the page scrolls (`--scrolled`, set by JS). The only
 * glow on the bar is the active-page indicator and the basket count —
 * energy marks state, it isn't spread over the chrome.
 */

.ec-site-header {
	--ec-site-header-bg: rgba(6, 12, 22, 0.74);
	--ec-site-header-bg-scrolled: rgba(6, 12, 22, 0.92);
	--ec-site-header-hover: rgba(237, 245, 251, 0.06);

	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--ec-z-sticky);
	border-bottom: 1px solid var(--ec-color-border);
	transition: box-shadow var(--ec-duration-slow) var(--ec-ease-standard);
}

/* The glass lives on its own layer, never on the header element: a
   backdrop-filter makes its element the containing block for every
   position:fixed descendant, which would trap the menu panel inside
   the 64px bar instead of the viewport. */
.ec-site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--ec-site-header-bg);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	transition: background-color var(--ec-duration-slow) var(--ec-ease-standard);
	pointer-events: none;
}

/* The "charged" hairline along the bottom edge */
.ec-site-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--ec-charge-line);
	opacity: 0.55;
	pointer-events: none;
}

.ec-site-header--scrolled {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ec-site-header--scrolled::before {
	background-color: var(--ec-site-header-bg-scrolled);
}

/* Above the page's own overlays while its menu is open */
.ec-site-header--open {
	z-index: var(--ec-z-overlay);
}

/* ----- Bar --------------------------------------------------------- */

.ec-site-header__bar {
	display: flex;
	align-items: center;
	gap: var(--ec-space-3);
	height: var(--ec-header-height);
	max-width: var(--ec-container-max);
	margin-inline: auto;
	padding-inline: var(--ec-gutter);
	box-sizing: border-box;
}

/* Brand — the V2 logo (6 Oct 2026). The artwork is never cropped,
   squashed or recoloured: a fixed height per breakpoint, width from its
   own aspect ratio, and it never shrinks inside the bar. */
.ec-site-header__brand {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	min-width: 0;
	min-height: 2.75rem;
	margin-right: auto;
	color: var(--ec-color-text-primary);
	text-decoration: none;
	border-radius: var(--ec-radius-sm);
}

.ec-site-header__logo {
	--ec-logo-h: 2rem; /* 32px of artwork — 161px wide */
}

@media (max-width: 359px) {
	.ec-site-header__logo {
		--ec-logo-h: 1.75rem; /* 28px — 141px wide */
	}
}

/* ----- Primary nav (desktop) -------------------------------------- */

.ec-site-header__nav {
	display: none;
}

.ec-site-header__links {
	display: flex;
	align-items: center;
	gap: var(--ec-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-site-header__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--ec-space-3);
	border-radius: var(--ec-radius-md);
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-semibold);
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-site-header__link::after {
	content: '';
	position: absolute;
	left: var(--ec-space-3);
	right: var(--ec-space-3);
	bottom: 0.3rem;
	height: 2px;
	border-radius: var(--ec-radius-full);
	background-color: var(--ec-color-accent);
	box-shadow: var(--ec-glow-accent-sm);
	opacity: 0;
	transform: scaleX(0.3);
	transition:
		opacity var(--ec-duration-base) var(--ec-ease-enter),
		transform var(--ec-duration-base) var(--ec-ease-enter);
}

.ec-site-header__link:hover {
	color: var(--ec-color-text-primary);
}

.ec-site-header__link:hover::after {
	opacity: 0.45;
	transform: scaleX(0.6);
}

.ec-site-header__link[aria-current='page'] {
	color: var(--ec-color-text-primary);
}

.ec-site-header__link[aria-current='page']::after {
	opacity: 1;
	transform: scaleX(1);
}

/* ----- Utilities -------------------------------------------------- */

.ec-site-header__utilities {
	display: flex;
	align-items: center;
	gap: var(--ec-space-1);
	flex-shrink: 0;
}

.ec-site-header__account {
	position: relative;
}

.ec-site-header__utility,
.ec-site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ec-space-2);
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--ec-space-2);
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--ec-radius-md);
	background: none;
	color: var(--ec-color-text-primary);
	font: inherit;
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-semibold);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--ec-duration-fast) var(--ec-ease-standard),
		color var(--ec-duration-fast) var(--ec-ease-standard),
		border-color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-site-header__utility:hover,
.ec-site-header__toggle:hover {
	background-color: var(--ec-site-header-hover);
}

.ec-site-header__utility--active {
	color: var(--ec-color-accent-strong);
}

.ec-site-header__utility--signed-in > .ec-icon:first-child {
	color: var(--ec-color-accent);
}

.ec-site-header__utility[aria-expanded='true'] {
	background-color: var(--ec-site-header-hover);
	border-color: var(--ec-color-border-strong);
}

/* Labels: visible from desktop; below it the icon carries the meaning
   and the label stays in the accessibility tree (visually hidden, not
   display:none). */
.ec-site-header__utility-label,
.ec-site-header__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ec-site-header__caret {
	display: none;
	color: var(--ec-color-text-tertiary);
	transition: transform var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-site-header__utility[aria-expanded='true'] .ec-site-header__caret {
	transform: rotate(180deg);
}

/* Basket */
.ec-site-header__basket-icon {
	position: relative;
	display: inline-flex;
}

/* Both glyphs are rendered; the filled state picks one, so a live
   basket update (EC.siteHeader.setBasketCount()) needs no new markup. */
.ec-site-header__basket-glyph--filled,
.ec-site-header__basket--filled .ec-site-header__basket-glyph--empty {
	display: none;
}

.ec-site-header__basket--filled .ec-site-header__basket-glyph--filled {
	display: inline-block;
}

.ec-site-header__basket-count[hidden] {
	display: none;
}

.ec-site-header__basket-count {
	position: absolute;
	top: -0.5rem;
	right: -0.7rem;
	/* C-9 (12 Oct 2026): a little smaller so it no longer covers the ticket glyph. */
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.2rem;
	font-size: 0.625rem;
	box-shadow: 0 0 0 2px var(--ec-color-canvas), var(--ec-glow-accent-sm);
}

/* Menu toggle (<1024px) */
.ec-site-header__toggle {
	border-color: var(--ec-color-border-strong);
}

.ec-site-header__toggle-icon--close,
.ec-site-header__toggle[aria-expanded='true'] .ec-site-header__toggle-icon--open {
	display: none;
}

.ec-site-header__toggle[aria-expanded='true'] .ec-site-header__toggle-icon--close {
	display: inline-block;
}

.ec-site-header__toggle[aria-expanded='true'] {
	background-color: var(--ec-site-header-hover);
	color: var(--ec-color-accent-strong);
}

/* Focus — one ring for every header control */
.ec-site-header__brand:focus-visible,
.ec-site-header__link:focus-visible,
.ec-site-header__utility:focus-visible,
.ec-site-header__toggle:focus-visible,
.ec-site-header__menu-link:focus-visible,
.ec-site-menu__item:focus-visible {
	outline: none;
	box-shadow: var(--ec-focus-ring);
}

/* ----- Account menu (disclosure, every width) --------------------- */

.ec-site-header__account-menu {
	position: absolute;
	top: calc(100% + var(--ec-space-2));
	right: 0;
	z-index: var(--ec-z-dropdown);
	width: 17rem;
	max-width: calc(100vw - (2 * var(--ec-gutter)));
	padding: var(--ec-space-2);
	box-sizing: border-box;
	background-color: var(--ec-color-surface-elevated);
	border: 1px solid var(--ec-color-border-strong);
	border-radius: var(--ec-radius-lg);
	box-shadow: var(--ec-elevation-3);
	animation: ec-site-header-pop var(--ec-duration-base) var(--ec-ease-enter);
	transform-origin: top right;
}

.ec-site-header__account-menu::before {
	content: '';
	position: absolute;
	top: -1px;
	left: var(--ec-space-5);
	right: var(--ec-space-5);
	height: 1px;
	background: var(--ec-charge-line);
}

.ec-site-header__account-menu[hidden] {
	display: none;
}

.ec-site-header__menu-heading {
	margin: 0;
	padding: var(--ec-space-2) var(--ec-space-3) var(--ec-space-1);
	color: var(--ec-color-text-tertiary);
	font-size: var(--ec-font-size-caption);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: var(--ec-letter-spacing-wide);
	text-transform: uppercase;
}

.ec-site-header__menu-list,
.ec-site-menu__account-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-site-header__menu-link {
	display: flex;
	align-items: center;
	gap: var(--ec-space-3);
	min-height: 2.75rem;
	padding: 0 var(--ec-space-3);
	border-radius: var(--ec-radius-md);
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-medium);
	text-decoration: none;
	transition:
		background-color var(--ec-duration-fast) var(--ec-ease-standard),
		color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-site-header__menu-link .ec-icon {
	color: var(--ec-color-text-tertiary);
	transition: color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-site-header__menu-link:hover {
	background-color: var(--ec-site-header-hover);
	color: var(--ec-color-text-primary);
}

.ec-site-header__menu-link:hover .ec-icon {
	color: var(--ec-color-accent);
}

.ec-site-header__account-menu > .ec-site-header__menu-link--quiet {
	margin-top: var(--ec-space-2);
	border-top: 1px solid var(--ec-color-border);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-top: var(--ec-space-1);
}

@keyframes ec-site-header-pop {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ----- Menu panel (<1024px) --------------------------------------- */

.ec-site-header__panel {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ec-header-height));
	right: 0;
	bottom: 0;
	left: 0;
}

.ec-site-header__panel[hidden] {
	display: none;
}

.ec-site-header__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(3, 7, 13, 0.62);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--ec-duration-slow) var(--ec-ease-standard);
}

.ec-site-header__sheet {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: var(--ec-space-4) var(--ec-gutter) calc(var(--ec-space-6) + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	background-color: var(--ec-color-canvas);
	opacity: 0;
	transform: translateY(-0.5rem);
	transition:
		opacity var(--ec-duration-slow) var(--ec-ease-enter),
		transform var(--ec-duration-slow) var(--ec-ease-enter);
}

.ec-site-header--open .ec-site-header__backdrop,
.ec-site-header--open .ec-site-header__sheet {
	opacity: 1;
	transform: none;
}

/* Primary destinations */
.ec-site-menu__primary {
	display: grid;
	gap: var(--ec-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-site-menu__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--ec-space-3);
	min-height: 4rem;
	padding: var(--ec-space-2) var(--ec-space-3);
	border-radius: var(--ec-radius-lg);
	color: var(--ec-color-text-primary);
	text-decoration: none;
	transition: background-color var(--ec-duration-fast) var(--ec-ease-standard);
}

.ec-site-menu__item:hover {
	background-color: var(--ec-site-header-hover);
}

.ec-site-menu__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--ec-radius-md);
	background-color: var(--ec-color-surface-raised);
	border: 1px solid var(--ec-color-border);
	color: var(--ec-color-accent);
}

.ec-site-menu__item-text {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.ec-site-menu__item-label {
	font-size: var(--ec-font-size-body-lg);
	font-weight: var(--ec-font-weight-bold);
	letter-spacing: var(--ec-letter-spacing-tight);
	line-height: var(--ec-line-height-tight);
}

.ec-site-menu__item-description {
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	line-height: var(--ec-line-height-tight);
}

.ec-site-menu__item-caret {
	color: var(--ec-color-text-tertiary);
}

.ec-site-menu__item[aria-current='page'] {
	background-color: var(--ec-color-accent-soft);
}

.ec-site-menu__item[aria-current='page'] .ec-site-menu__item-icon {
	background-color: var(--ec-color-accent);
	border-color: var(--ec-color-accent);
	color: var(--ec-color-text-on-accent);
	box-shadow: var(--ec-glow-accent-sm);
}

/* Account section */
.ec-site-menu__account {
	display: grid;
	gap: var(--ec-space-2);
	margin-top: var(--ec-space-5);
	padding-top: var(--ec-space-5);
	border-top: 1px solid var(--ec-color-border);
}

.ec-site-menu__account .ec-site-header__menu-heading {
	padding-left: var(--ec-space-3);
}

.ec-site-menu__cta {
	width: 100%;
	box-sizing: border-box;
	margin-top: var(--ec-space-2);
}

/* ----- Tablet: the menu becomes a right-hand drawer --------------- */

@media (min-width: 640px) {
	.ec-site-header__sheet {
		left: auto;
		width: 24rem;
		max-width: 100%;
		border-left: 1px solid var(--ec-color-border);
		box-shadow: -24px 0 48px rgba(0, 0, 0, 0.4);
		padding-left: var(--ec-space-5);
		padding-right: var(--ec-space-5);
		transform: translateX(1.5rem);
	}

	.ec-site-header__logo {
		--ec-logo-h: 2.375rem; /* 38px — 192px wide */
	}
}

/* ----- Desktop: inline nav, labelled utilities, no menu ----------- */

@media (min-width: 1024px) {
	.ec-site-header__bar {
		gap: var(--ec-space-5);
	}

	.ec-site-header__brand {
		margin-right: 0;
	}

	.ec-site-header__nav {
		display: flex;
		flex: 1;
		justify-content: center;
		min-width: 0;
	}

	.ec-site-header__utility {
		padding: 0 var(--ec-space-3);
	}

	.ec-site-header__utility-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}

	.ec-site-header__caret {
		display: inline-block;
	}

	.ec-site-header__toggle,
	.ec-site-header__panel {
		display: none;
	}
}

@media (min-width: 1440px) {
	.ec-site-header__links {
		gap: var(--ec-space-2);
	}

	.ec-site-header__link {
		font-size: var(--ec-font-size-body);
	}
}

/* Reduced motion: timing.css already collapses every duration token;
   the drawer additionally skips its travel, fading in place. */
@media (prefers-reduced-motion: reduce) {
	.ec-site-header__sheet,
	.ec-site-header__account-menu {
		transform: none;
		animation: none;
	}
}

/* V2 logo sizes on wider screens (6 Oct 2026) — height only; the width
   always follows the artwork's own ratio. */
@media (min-width: 1024px) {
	.ec-site-header__logo {
		--ec-logo-h: 2.625rem; /* 42px — 212px wide */
	}
}

@media (min-width: 1440px) {
	.ec-site-header__logo {
		--ec-logo-h: 2.875rem; /* 46px — 232px wide */
	}
}