/*
 * Page nav. Figma tab bar 2480:68864: 1220 wide, white, 1px border-light bottom
 * line, links 16 apart, 38 high. Link: subtitle/XL dark; current: header/S
 * primary with a 2px primary underline. 44px above and below (not the 120
 * section gap). Mobile 2530:71752: full width, scrolls sideways from the 20px
 * gutter, 24px above and below.
 * Sticks to the top of the viewport; set --page-nav-top (e.g. to
 * var(--header-h)) if the header is made sticky.
 */

.page-nav {
	position: sticky;
	top: var(--page-nav-top, 0px);
	z-index: 30;
	margin-block: calc(44px - var(--section-gap));
	background: var(--c-bg-white);
}

.page-nav__inner { padding-block: 0; }

.page-nav__list {
	display: flex;
	gap: 16px;
	border-bottom: 1px solid var(--c-border-light);
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.page-nav__list::-webkit-scrollbar { display: none; }
.page-nav__list > li { flex: none; }

.page-nav__link {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 38px;
	border-bottom: 2px solid transparent;
	color: var(--c-text-dark);
	font: var(--f-subtitle-xl);
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}

/* Reserve the width of the bold current state so the row does not shift. */
.page-nav__link::after {
	content: attr(data-label);
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font: var(--f-header-s);
	pointer-events: none;
}

.page-nav__link:hover { color: var(--c-primary); }

.page-nav__link[aria-current] {
	border-bottom-color: var(--c-primary);
	color: var(--c-primary);
	font: var(--f-header-s);
}

@media (max-width: 767px) {
	.page-nav { margin-block: calc(24px - var(--section-gap)); }

	.page-nav__inner { padding-inline: 0; }

	.page-nav__list {
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
	}
}