/* Sticky site header. Mobile panel is toggled by js/nav.js via .is-open. */

@layer components {
	.sw-header {
		position: sticky;
		top: 0;
		z-index: 50;
		background: var(--bg);
		border-bottom: 1px solid var(--border);
	}

	.sw-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		min-height: 72px;
	}

	.sw-header__brand {
		display: flex;
		align-items: center;
		gap: 12px;
		text-decoration: none;
	}
	.sw-header__mark { width: 41px; height: 36px; }
	.sw-header__wordmark {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 1.1875rem;
		letter-spacing: -0.01em;
		color: var(--ink);
	}

	.sw-header__links {
		display: flex;
		align-items: center;
		gap: clamp(20px, 3vw, 36px);
		list-style: none;
		padding: 0;
	}
	.sw-header__links li { margin: 0; }

	.sw-header__links a:not(.sw-btn) {
		font-family: var(--font-mono);
		font-size: 0.8125rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		text-decoration: none;
		color: var(--text);
		padding-block: 6px;
		border-bottom: 2px solid transparent;
	}
	.sw-header__links a:not(.sw-btn):hover { border-bottom-color: var(--accent); }
	.sw-header__links a[aria-current="page"] { border-bottom-color: var(--ink); }

	.sw-header__toggle {
		display: none;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: 0;
		padding: 10px;
		cursor: pointer;
	}
	.sw-header__toggle-bar {
		width: 22px; height: 2px;
		background: var(--ink);
		transition: transform 150ms ease, opacity 150ms ease;
	}
	.sw-header__toggle[aria-expanded="true"] .sw-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.sw-header__toggle[aria-expanded="true"] .sw-header__toggle-bar:nth-child(2) { opacity: 0; }
	.sw-header__toggle[aria-expanded="true"] .sw-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	@media (max-width: 820px) {
		.sw-header__toggle { display: flex; }

		.sw-header__nav {
			display: none;
			position: absolute;
			inset-inline: 0;
			top: 100%;
			background: var(--bg);
			border-bottom: 1px solid var(--border);
		}
		.sw-header__nav.is-open { display: block; }

		.sw-header__links {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			padding: 8px var(--gutter) 20px;
		}
		.sw-header__links a:not(.sw-btn) {
			display: block;
			padding-block: 14px;
			border-bottom: 1px solid var(--border);
		}
		.sw-header__cta { margin-top: 16px; }
		.sw-header__cta .sw-btn { display: block; text-align: center; }
	}
}