/* =========================================================================
 * Nav Band 001 — Section Menu
 *
 * Sticks to the top of the screen once the page scrolls past it. The current
 * section's link is marked by pattern.js (`is-current`). On a phone the links
 * scroll sideways and the button stays at the end.
 * ========================================================================= */

.nav-band-001 {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-block: 0 !important;
	background: var(--color-background);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 70%, transparent);
}

.admin-bar .nav-band-001 {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.nav-band-001__inner.nav-band-001__inner {
	align-items: center;
	gap: var(--space-md);
	min-height: 4rem;
}

.nav-band-001__links {
	display: flex;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.nav-band-001__links::-webkit-scrollbar {
	display: none;
}

.nav-band-001__links li {
	margin: 0;
	white-space: nowrap;
}

.nav-band-001__links a {
	position: relative;
	display: block;
	padding-block: var(--space-sm);
	color: var(--color-muted);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: color 0.25s ease;
}

.nav-band-001__links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--space-xs) / 2);
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.nav-band-001__links a:hover,
.nav-band-001__links a.is-current {
	color: var(--color-text);
}

.nav-band-001__links a.is-current::after {
	transform: scaleX(1);
}

.nav-band-001__cta.nav-band-001__cta {
	flex: none;
	margin: 0;
}

@media (max-width: 40rem) {
	.nav-band-001__inner.nav-band-001__inner {
		min-height: 3.5rem;
		gap: var(--space-sm);
	}

	.nav-band-001__links {
		gap: var(--space-sm);
	}
}