/* ==========================================================================
   Widget — Page Nav ("On This Page")
   A white bar under the hero: the label on the left, a row of anchor links on
   the right, the current section's link underlined in orange. Pinned under
   the header by page-nav.js, which adds .is-pinned to the bar and holds its
   height on the slot so the page does not jump.

   Mobile-first: on a phone the label is dropped and the links scroll sideways,
   with a fade on the edge that has more to show.
   ========================================================================== */

.o-page-nav-slot {
	position: relative;
}

.o-page-nav {
	/* Written by page-nav.js: the header's bottom edge, where a pinned bar sits. */
	--o-page-nav-top: 0px;

	position: relative;
	z-index: calc(var(--o-z-header) - 10); /* Under the header, its search panel and drawer. */
	border-block: 1px solid var(--o-rule-cool);
	background-color: var(--o-white);
	color: var(--o-navy);
}

.o-page-nav.is-pinned {
	position: fixed;
	top: var(--o-page-nav-top);
	right: 0;
	left: 0;
	border-top-color: transparent;
	box-shadow: 0 4px 12px rgba(15, 31, 64, 0.08);
}

.o-page-nav__inner {
	display: flex;
	align-items: stretch;
	gap: var(--o-space-lg);
	min-height: 56px;
}

/* --------------------------------------------------------------------------
   Label
   -------------------------------------------------------------------------- */
.o-page-nav__label {
	display: none;
	flex: none;
	align-items: center;
	gap: var(--o-space-xs);
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.o-page-nav__label-icon {
	width: 14px;
	height: 14px;
	color: var(--o-orange);
}

@media (min-width: 1024px) {
	.o-page-nav__label {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Links
   A single row that scrolls sideways rather than wrapping: a wrapped bar
   doubles in height and covers twice as much of the page once pinned.
   -------------------------------------------------------------------------- */
.o-page-nav__list {
	display: flex;
	flex: 1 1 auto;
	gap: var(--o-space-lg);
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.o-page-nav__list::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.o-page-nav__list {
		justify-content: flex-end;
	}
}

/* The fade on whichever edge has links scrolled out of view. Set by the script. */
.o-page-nav__inner.has-more-start .o-page-nav__list {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem);
	mask-image: linear-gradient(to right, transparent, #000 2.5rem);
}

.o-page-nav__inner.has-more-end .o-page-nav__list {
	-webkit-mask-image: linear-gradient(to left, transparent, #000 2.5rem);
	mask-image: linear-gradient(to left, transparent, #000 2.5rem);
}

.o-page-nav__inner.has-more-start.has-more-end .o-page-nav__list {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.o-page-nav__item {
	display: flex;
	flex: none;
}

.o-page-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--o-space-xs);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	font-weight: var(--o-fw-medium);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--o-transition);
}

/* The underline sits on the bar's bottom rule, drawn in from the centre. */
.o-page-nav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background-color: var(--o-orange);
	transform: scaleX(0);
	transition: transform var(--o-transition);
}

.o-page-nav__link:hover,
.o-page-nav__link[aria-current] {
	color: var(--o-navy);
}

.o-page-nav__link:hover::after {
	transform: scaleX(0.5);
}

.o-page-nav__link[aria-current]::after {
	transform: scaleX(1);
}

.o-page-nav__link:focus-visible {
	outline: 2px solid var(--o-focus);
	outline-offset: -2px;
}

.o-page-nav__icon {
	display: inline-flex;
	color: var(--o-ink-mist);
	font-size: 0.8125rem; /* 13 - font icons sit optically with the 14px label */
	line-height: 1;
	transition: color var(--o-transition);
}

.o-page-nav__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.o-page-nav__link:hover .o-page-nav__icon,
.o-page-nav__link[aria-current] .o-page-nav__icon {
	color: var(--o-orange);
}

/* Editor-only prompt for a bar with no usable links yet. */
.o-page-nav--empty {
	padding: 1rem var(--o-gutter);
	color: var(--o-ink-mist);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	text-align: center;
}