/*** Module: Sticky Menu ***/

/* bg + shadow ride a ::before so they can break out to 100vw without affecting content width. */
/* 15.5px trims the panel to a 56px total (25px link row + 2×15.5px). */
.sticky-menu {
	padding-block: 15.5px;
	position: sticky;
	timeline-scope: --sticky-menu-scroll; /* lifts the list's timeline up to ::after */
	top: var(--header-height);
	z-index: 10; /* above page content while pinned; below the header (100) */
}

.sticky-menu::before {
	background: var(--white);
	box-shadow: var(--shadow-sticky);
	content: '';
	inset: 0;
	position: absolute;
	transition: inset .25s ease;
	z-index: -1;
}

.sticky-menu.is-stuck::before {
	inset: 0 calc(50% - 50vw);
}

/* Overflow cue for .sticky-menu-list. Stops at the list's right edge (not the
   full-bleed ::before panel), so it inset-ends on the container's own padding.
   Retires over the last 10% of scroll — declared after the `animation` shorthand,
   which would otherwise reset animation-timeline. Where scroll timelines aren't
   supported it stays put, which is invisible until the list actually overflows. */
.sticky-menu::after {
	animation: sticky-menu-overflow-fade linear both;
	animation-timeline: --sticky-menu-scroll;
	background: linear-gradient(to right, transparent, var(--white));
	content: '';
	inset-block: 0;
	inset-inline-end: var(--container-outer-padding);
	pointer-events: none;
	position: absolute;
	width: 64px;
}

@keyframes sticky-menu-overflow-fade {
	0%,
	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* Overlap the preceding module — automatically under a bg-field band (which
   reserves bottom space), or opt-in via the "Overlap previous" spacing choice
   for modules with no bg-field (e.g. a coloured hero on /co-branding/). */
.module:has(> .bg-field) + .sticky-menu,
.sticky-menu.margin-overlap {
	margin-top: -28px;
}

/* Centred while the links fit, start-aligned the moment they overflow — otherwise
   the overflow splits both ways and the leading links sit outside the scroll origin,
   unreachable at scrollLeft:0. Auto margins do this in every engine; `safe center`
   expresses the same intent but only lands on newer Chrome/Safari, so it can't be
   the only guard. */
.sticky-menu-list {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-medium);
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overflow-y: clip;
	padding: 0;
	scroll-timeline: --sticky-menu-scroll x;
	scrollbar-width: none; /* the ::after fade is the overflow cue — scroll still works */
}

/* Free space → the autos split it and the row centres; overflow → they resolve to
   0 and the row starts at the scroll origin. */
.sticky-menu-list > li:first-child {
	margin-inline-start: auto;
}

.sticky-menu-list > li:last-child {
	margin-inline-end: auto;
}

.sticky-menu-list::-webkit-scrollbar {
	display: none;
}

.sticky-menu-list > li {
	flex-shrink: 0;
}

.sticky-menu-link {
	color: var(--gray-dark);
	display: block;
	font-size: calc(12rem / 16);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: calc(13 / 12);
	padding-block: 6px;
	text-transform: uppercase;
	white-space: nowrap;
}

.sticky-menu-link.active,
.sticky-menu-link:hover {
	color: var(--black);
}