/**
 * Sticky Navigation
 *
 * A centered pill bar of in-page jump links. The module — not the bar — carries the
 * sticky, because the bar's containing block is .container and would give it no travel.
 * JazzyStuck adds .is-stuck once it pins; JazzyHighlight adds .active to the link whose
 * section is in view.
 *
 * The list's 4px padding and matching negative margin cancel — they exist so the first and
 * last pill's focus ring has somewhere to draw inside the scrollport, not to move anything.
 * script.js sets --fade-start / --fade-end from how much is actually cut on each side, so a
 * side with nothing behind it is never faded and neither extreme can swallow that ring.
 */

.module.sticky-navigation {
	position: sticky;
	top: var(--text-spacing-xsmall);
	z-index: 20;
}

.module.sticky-navigation .bar {
	align-items: center;
	background: var(--white);
	border-radius: 40px;
	box-shadow: 0 0 24px rgba(0, 0, 0, .05);
	display: flex;
	gap: var(--text-spacing-xsmall);
	justify-content: center;
	margin: 0 auto;
	max-width: 100%;
	padding: var(--text-spacing-xsmall) var(--text-spacing-small);
	width: fit-content;
	z-index: 10;
}

.module.sticky-navigation .bar:has(> p) {
	padding-left: var(--text-spacing-medium);
}

.module.sticky-navigation .bar > p {
	align-items: center;
	color: var(--text-gray);
	display: flex;
	flex: none;
	gap: var(--text-spacing-xsmall);
	margin: 0;
}

.module.sticky-navigation .bar > p::after {
	background: var(--charcoal-25);
	content: '';
	flex: none;
	height: 16px;
	width: 2px;
}

.module.sticky-navigation ul {
	--edge-fade: var(--text-spacing-small);
	--fade-start: 0px;
	--fade-end: 0px;

	align-items: center;
	display: flex;
	gap: var(--text-spacing-xxsmall);
	justify-content: flex-start;
	list-style: none;
	margin: -4px;
	min-width: 0;
	overflow-x: auto;
	padding: 4px;
	scroll-padding-inline: 4px;
	scrollbar-width: none;
}

.module.sticky-navigation ul::-webkit-scrollbar {
	display: none;
}

.module.sticky-navigation ul.is-scrollable {
	mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
}

.module.sticky-navigation a {
	align-items: center;
	background: var(--program-pill, var(--teal-pale));
	border-radius: 60px;
	color: var(--text-gray);
	display: flex;
	font-family: var(--body-font);
	font-size: calc(12rem / 16);
	font-weight: 700;
	justify-content: center;
	letter-spacing: 1px;
	line-height: calc(16 / 12);
	padding: 12.5px var(--text-spacing-small) 11.5px;
	text-transform: uppercase;
	transition: background-color var(--motion) var(--ease-out), color var(--motion) var(--ease-out);
	white-space: nowrap;
}

.module.sticky-navigation a:not(.active):is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--program-mid, var(--storm)) 12%, var(--program-pill, var(--teal-pale)));
	color: var(--charcoal);
}

.module.sticky-navigation a.active {
	background: var(--program-mid, var(--storm));
	color: var(--white);
}

/*** Style: Rail — the same pills in a column beside an article ***/

.module.sticky-navigation.style-rail > .container,
.module.sticky-navigation.style-rail .bar {
	display: contents;
}

/* The rail rides the middle of the screen rather than its top. Sticky cannot centre a box on
   the viewport, so the box is the viewport — a viewport-tall sticky column with the list
   centred in it. It costs the last screenful: the rail releases when this box's foot reaches
   the article's, which is a screen earlier than a list-height box would. */
.module.sticky-navigation.style-rail {
	align-items: center;
	align-self: start;
	display: flex;
	grid-column: 1 / span 2;
	grid-row: 1;
	height: 100vh;
	margin-left: calc(var(--viewport-edge) + var(--text-spacing-small));
	pointer-events: none;
	top: 0;
}

.module.sticky-navigation.style-rail ul {
	pointer-events: auto;
}

.module.sticky-navigation.style-rail ul {
	align-items: start;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	margin: 0;
	overflow: visible;
	padding: 0;
}

.module.sticky-navigation.style-rail a {
	text-align: left;
	white-space: normal;
}

/* An overlapped module is put in the flow to take a z-index, which lands on this one as a plain
   `relative` — and a relative box wears the sticky offset above as a shove down the page, so the
   bar stopped sticking and rode 16px past the edge it is meant to be centred on. */
.module.sticky-navigation.margin-overlap {
	margin-top: calc(var(--sticky-nav-height) / -2);
	position: sticky;
}

/*** Linen run — the bar rides the band's top edge ***/

.wash.linen:has(> .module.sticky-navigation:first-child)::before {
	top: calc(var(--sticky-nav-height) / 2);
}

/* Same relationship where the band belongs to the module below rather than to a wash: the
   comp starts the dark fill at the bar's middle, so the bar's lower half sits over it. The
   section is pulled up to meet the bar instead of the fill being stretched, which keeps its
   own top padding — and so its first line — where the comp puts it. */
.module.sticky-navigation.style-bar + .module.steps.style-phases:not(.margin-spacing-small, .margin-spacing-medium, .margin-spacing-large, .margin-spacing-xlarge) {
	margin-top: calc(var(--sticky-nav-height) / -2);
}

/* Same relationship where what follows is a washed run rather than a single module: the comp
   starts the fill at the bar's middle so the bar sits on its edge, rather than floating a
   module-spacing clear of a hard line. */
/* Both of these pulls outweigh a `.margin-spacing-*` class, so what follows the bar was losing any
   space the editor asked for and reporting as flush. They stand for a default the editor has not
   answered: name a Top Spacing and the bar stops riding the edge. */
.module.sticky-navigation.style-bar + .wash:not(.margin-spacing-small, .margin-spacing-medium, .margin-spacing-large, .margin-spacing-xlarge) {
	margin-top: calc(var(--sticky-nav-height) / -2);
}

/* An Overlap run measures its pull from the hero the bar is already riding half-way down, not from
   the bar's own foot — otherwise the bar's own overlap is spent twice and the band lands short.
   Here rather than beside the other spacing classes because it has to outrank the rule above it,
   which it ties with on weight and would lose to on order. */
.module.sticky-navigation.style-bar + :is(.module, .wash).margin-overlap {
	margin-top: calc(var(--sticky-nav-height) / -2 - var(--module-overlap));
}

.module.sticky-navigation.is-stuck .bar {
	box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem/16)) {

	/* A bar across the top rather than a column beside the article, so it stops holding the
	   screen's middle and goes back to being as tall as itself. */
	.module.sticky-navigation.style-rail {
		display: block;
		grid-column: 1 / -1;
		height: auto;
		margin-left: 0;
		pointer-events: auto;
		top: var(--text-spacing-xsmall);
	}

	.module.sticky-navigation.style-rail > .container {
		display: block;
		padding: 0;
	}

	.module.sticky-navigation.style-rail .bar {
		display: flex;
	}

	.module.sticky-navigation.style-rail ul {
		align-items: center;
		flex-direction: row;
		gap: var(--text-spacing-xxsmall);
		margin: -4px;
		overflow-x: auto;
		padding: 4px;
	}

	.module.sticky-navigation.style-rail a {
		white-space: nowrap;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	/* Pinned, the bar stands as far off the top of the screen as it does off the sides — 12 — which
	   reads as the 20 to the first pill either way, since the bar's own padding is inside that. At
	   16 the top was 4 more than the sides. Both selectors: a rail is this same bar from 1200 down
	   and takes its offset from its own rule. */
	.module.sticky-navigation,
	.module.sticky-navigation.style-rail {
		top: 12px;
	}

	/* Square padding: the first pill stands off the bar's left edge exactly as far as it does off
	   its top and foot, and the last off its right when the row is scrolled home. The list's own
	   4px cancels against its negative margin, so this is the whole of what shows, and the fade
	   only reaches a pill once that side has something cut off — script.js measures it. */
	.module.sticky-navigation .bar {
		padding: var(--text-spacing-xxsmall);
	}

	/* The bar stands 12 off the screen rather than on the container's own line, so it reads as
	   something laid over the page rather than as another block of it. Stated as the difference
	   between the two, so it follows the inset if that changes. */
	.module.sticky-navigation.style-bar .bar {
		/* Centred on the container's middle rather than by auto margins: a box wider than the
		   space it sits in is over-constrained, and the auto margins collapse to zero — the bar
		   held the container's left line and jutted out to the right alone. */
		left: 50%;
		max-width: calc(100% + (var(--container-outer-padding) - 12px) * 2);
		position: relative;
		translate: -50% 0;
	}

	/* The label is hidden here, so the room held for it goes too — otherwise that bar's first pill
	   starts a medium step in where every other bar's starts on the padding. */
	.module.sticky-navigation .bar:has(> p) {
		padding-left: var(--text-spacing-xxsmall);
	}

	.module.sticky-navigation .bar > p {
		display: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-HEIGHT 500 - Short Screens, including a laptop at 400% zoom */
/***************************************************************************************************************************************************************************************/

/* Pinned, the bar covers a third of a screen this short and the copy it scrolls over is lost
   under it, so it stays where it is in the page instead. */
@media only screen and (max-height: 500px) {

	.module.sticky-navigation,
	.module.sticky-navigation.margin-overlap {
		position: relative;
		top: auto;
	}

}