/*
 * ====================================================================== *
 * Module: Jump Navigation
 * ====================================================================== *
 */

/*
 * The site header hides on scroll-down and slides back in on scroll-up, so a
 * fixed offset would leave a strip of page content scrolling through the gap
 * whenever the header is away. Pin to the top of the viewport by default and
 * only drop below the header while it is actually on screen.
 */

.module.jump-nav {
	background: var(--russian-blue);
	position: sticky;
	top: 0;
	transition: top .3s ease;
	z-index: 4;
}

body:has(#header.sticky:not(.is-hidden)) .module.jump-nav {
	top: var(--sticky-header-height);
}

.module.jump-nav > .container {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-small);
	padding-bottom: var(--text-spacing-xsmall);
	padding-top: var(--text-spacing-xsmall);
}

.module.jump-nav .jump-nav-label {
	flex-shrink: 0;
}

.module.jump-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

/* Sentence case, so the uppercase letter-spacing baked into .pill is reset too */

.module.jump-nav .pill {
	background: var(--samoyed-white);
	color: var(--russian-blue);
	display: block;
	font-size: calc(15rem / 16);
	letter-spacing: 0.2px;
	padding: 6px 14px;
	text-decoration: none;
	text-transform: none;
	transition: background .2s ease, color .2s ease;
	white-space: nowrap;
}

.module.jump-nav .pill:hover,
.module.jump-nav .pill:focus-visible {
	background: var(--collie-blue);
	color: var(--russian-blue);
}

/*
 * Jump targets have to clear both the sticky header and this nav. Scoped to
 * pages that actually carry one, so every other page builder is left alone.
 */

body:has(.module.jump-nav) .page-builder > .module {
	scroll-margin-top: calc(var(--sticky-header-height) + 80px);
}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media (max-width: calc(650rem/16)) {

	/* The label costs a whole row once the pills wrap; the pills say enough. */

	.module.jump-nav .jump-nav-label {
		display: none;
	}

	.module.jump-nav > .container {
		overflow-x: auto;
	}

	.module.jump-nav ul {
		flex-wrap: nowrap;
	}

}