/* ========================================================================== *
 * # Header
 * ==========================================================================
 * Sticky, a translucent ground with a blur (the page reads through it), a hairline once you scroll
 * (body.scrolled, js/site.js). Nav ≥ 1000px; below it the Menu button opens the sheet.
 * ========================================================================== */

.header-section {
	position: sticky;
	top: 0;
	z-index: 50;
	padding-top: env(safe-area-inset-top);
	background: color-mix(in oklch, var(--bg) 84%, transparent);
	backdrop-filter: saturate(1.6) blur(16px);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	border-bottom: var(--border-width) solid transparent;
	transition: border-color var(--transition-speed) var(--transition-ease);
}

.scrolled .header-section {
	border-bottom-color: var(--line);
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-100);
	min-height: 64px;
}

.main-nav .nav-list {
	display: flex;
	gap: var(--space-25);
	padding: 0;

	& li {
		list-style: none;
	}
}

.nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-75);
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;

	&:hover {
		color: var(--ink);
		background: var(--panel);
	}

	&.active {
		color: var(--ink);
		font-weight: 600;
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-50);
}