/*
 * Site header. Artboards: 80px tall at 1440 with a 56px logo, 56px tall at 390 with a 38px logo.
 * Four states (tangens-components.md, Header), set by assets/js/header.js:
 *   .is-top + data-over="hero"   transparent over a hero, white type and logo
 *   .is-top + data-over="light"  transparent over a light ground, ink type
 *   .is-hidden                   scrolled down past the header: slid away
 *   (neither)                    scrolling up, or anywhere below the top: Canvas
 * An open mega menu (.has-mega) always shows the Canvas state.
 */

.skip-link {
	position: absolute;
	inset-block-start: var(--space-1);
	inset-inline-start: var(--space-1);
	z-index: 100;
	padding: var(--space-1) var(--space-2);
	background: var(--ink);
	color: var(--canvas);
	font-size: var(--fs-meta);
	transform: translateY(-200%);
}

.skip-link:focus-visible {
	transform: none;
}

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	height: var(--header-h);
	background-color: var(--canvas);
	color: var(--ink);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
	transition:
		transform var(--dur-panel) var(--ease),
		background-color var(--dur-panel) var(--ease),
		color var(--dur-panel) var(--ease);
}

/* Over a hero, or a template's own top block, the header is laid over it: the block starts at the
   header's top edge. */
.site-header[data-overlaps] {
	margin-block-end: calc(var(--header-h) * -1);
}

.site-header.is-top:not(.has-mega) {
	background-color: transparent;
}

.site-header.is-top[data-over="hero"]:not(.has-mega) {
	color: var(--canvas);
}

.site-header.is-hidden:not(.has-mega) {
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
}

/* Canvas state only: a hairline at the foot. Not while transparent, and not with a mega menu open,
   where the hairline belongs to the foot of the panel (tangens-components.md, Header). */
.site-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: var(--hairline);
	background: var(--line);
	opacity: 0;
	transition: opacity var(--dur-panel) var(--ease);
	pointer-events: none;
}

.site-header:not(.is-top):not(.has-mega)::after {
	opacity: 1;
}

/* Dark logo by default; the white one only while transparent over a hero. */
.site-header__logo-img--white,
.site-header.is-top[data-over="hero"]:not(.has-mega) .site-header__logo-img--dark {
	display: none;
}

.site-header.is-top[data-over="hero"]:not(.has-mega) .site-header__logo-img--white {
	display: block;
}

.site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: 100%;
	padding-inline: var(--container-pad);
}

.site-header__start {
	display: flex;
	align-items: center;
}

.site-header__logo {
	display: block;
}

.site-header__logo-img {
	width: auto;
	height: var(--logo-header);
}

.site-header__end {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: calc(var(--space-4) * 0.875); /* 28 at 1440 */
}

/* Menu button: 22px drawn, 44px to touch. The negative margin keeps the lines on the container edge. */
.site-header__menu-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: var(--touch-min);
	height: var(--touch-min);
	margin-inline-start: calc((var(--touch-min) - 22px) / -2);
	padding: 0 calc((var(--touch-min) - 22px) / 2);
	border: 0;
	background: none;
	cursor: pointer;
}

.site-header__menu-button span {
	display: block;
	height: 1.5px;
	background: currentColor;
}

.site-header__nav-list {
	display: flex;
	gap: var(--space-4); /* 32 at 1440 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__nav-link,
.site-header__country,
.site-header__cart {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
}

/* Country trigger: 16 × 12 flag at 1440 (0.8em tall), 8px to the text, Stone separator, chevron 4px after. */
button.site-header__nav-link {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Open mega menu: its nav item is underlined, as the reference draws it. */
.site-header__nav-link[aria-expanded="true"] {
	text-decoration: underline;
	text-decoration-thickness: var(--hairline);
	text-underline-offset: 6px;
}

.site-header__country {
	gap: 0.3em;
	max-width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	white-space: nowrap;
}

.site-header__flag {
	flex: 0 0 auto;
	width: auto;
	height: 0.8em;
	margin-inline-end: calc(var(--space-1) - 0.3em);
	border-radius: calc(var(--radius) / 3);
	outline: var(--hairline) solid var(--line);
	outline-offset: calc(var(--hairline) * -1);
}

.site-header__country-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-header__country-sep {
	color: var(--stone);
}

.site-header__chevron {
	flex: 0 0 auto;
	width: 0.8em;
	height: 0.8em;
	margin-inline-start: calc(0.25rem - 0.3em);
}

/* Below 1280 the mobile menu carries nav and country. */
.site-header__nav,
.site-header__country {
	display: none;
}

@media (min-width: 1280px) {
	.site-header__menu-button {
		display: none;
	}

	.site-header__nav {
		display: block;
	}

	.site-header__country {
		display: inline-flex;
	}
}