/*
 * Global header. design/DESIGN-SYSTEM.md §4.14, PAGE-STRUCTURE §1.
 *
 * Gutter note: the prototype's header uses clamp(16px,3vw,40px), 4px tighter
 * than every section under it. DESIGN-SYSTEM §8 item 1 says standardise on the
 * section gutter, so --sp-gutter is used here.
 *
 * Breakpoint note: this is the ONLY @media query in the theme. The prototype has
 * no mobile navigation at all -- five nav items plus a 200px logo simply wrap
 * into a ~180px-tall header at 375px. DESIGN-SYSTEM §4.14 / §8 item 18 calls
 * this "the single largest gap between prototype and shippable theme" and
 * prescribes a hamburger drawer below 900px, which is what is built here.
 */

.sp-header {
	position: sticky;
	top: 0;
	z-index: var(--sp-z-sticky);
	background: var(--sp-header-bg);
	-webkit-backdrop-filter: var(--sp-blur-header);
	backdrop-filter: var(--sp-blur-header);
	border-bottom: 1px solid var(--sp-line-card);
}

.sp-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 36px);
	max-width: var(--sp-container);
	margin-inline: auto;
	padding: var(--sp-4) var(--sp-gutter);
}

.sp-header__logo {
	flex: 0 0 auto;
	display: block;
	width: clamp(200px, 21vw, 320px);
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
}

.sp-header__logo-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------- nav */

.sp-header__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(10px, 1.5vw, 26px);
	margin-left: auto;
}

.sp-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(10px, 1.5vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-nav__list li + li {
	margin-top: 0;
}

.sp-nav__link {
	display: inline-block;
	padding: 6px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--sp-fs-nav);
	letter-spacing: var(--sp-ls-nav);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

.sp-nav__link:hover,
.sp-nav__link:focus {
	color: var(--sp-red);
}

.sp-nav__link.is-current,
.sp-nav__link[aria-current="page"] {
	color: var(--sp-red);
	border-bottom-color: var(--sp-red);
}

/* --------------------------------------------------------------- header CTA */

.sp-header__cta {
	flex: 0 0 auto;
	font-size: var(--sp-fs-nav-cta);
	letter-spacing: var(--sp-ls-pill);
	padding: var(--sp-3) var(--sp-10);
}

.sp-header__cta:hover,
.sp-header__cta:focus-visible {
	background: var(--sp-red-hover);
	transform: translateY(-2px);
	box-shadow: none;
}

/* ----------------------------------------------------------- hamburger */

.sp-nav-toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: var(--sp-border-ghost);
	background: none;
	color: var(--sp-text);
	transition: border-color var(--sp-dur-fast) var(--sp-ease);
}

.sp-nav-toggle:hover,
.sp-nav-toggle:focus-visible {
	border-color: var(--sp-red);
}

.sp-nav-toggle__bars {
	display: block;
	position: relative;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.sp-nav-toggle__bars::before,
.sp-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform var(--sp-dur-fast) var(--sp-ease);
}

.sp-nav-toggle__bars::before {
	top: -6px;
}

.sp-nav-toggle__bars::after {
	top: 6px;
}

.sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars {
	background: transparent;
}

.sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/*
 * The one breakpoint in the theme -- see the note at the top of this file.
 * 900px sits just under the 952px width at which the logo hits its 200px floor.
 */
@media (max-width: 900px) {
	.sp-nav-toggle {
		display: inline-flex;
	}

	.sp-header__nav {
		position: fixed;
		inset: var(--sp-header-h, 76px) 0 0 0;
		z-index: var(--sp-z-drawer);
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-8);
		margin-left: 0;
		padding: var(--sp-gutter);
		background: var(--sp-bg-deep);
		border-top: 1px solid var(--sp-line-card);
		overflow-y: auto;
	}

	.sp-header__nav.is-open {
		display: flex;
		animation: riseIn .3s ease both;
	}

	.sp-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-8);
	}

	.sp-nav__link {
		display: block;
		padding-block: var(--sp-5);
		border-bottom: 1px solid var(--sp-line-card);
		font-weight: 700;
		font-size: var(--sp-fs-2xl);
	}

	.sp-nav__link.is-current,
	.sp-nav__link[aria-current="page"] {
		border-bottom-color: var(--sp-line-card);
	}

	.sp-header__cta {
		width: 100%;
		font-size: var(--sp-fs-btn);
		padding: var(--sp-5) 32px;
	}

	body.sp-nav-open {
		overflow: hidden;
	}
}