.quick-links {
	background-color: #FFFFFF;
	padding: 26px 0;
}

.quick-links > .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 32px;
}

.quick-links__label {
	margin: 0;
	font-family: "Pitch Medium", monospace;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.48px;
	color: #162224;
}

/* The list was its own flex item, so once the links outgrew the row it wrapped
   below the label as a single block and its own flex-start left-aligned them.
   display: contents drops the ul box, so the label and every link become items
   of .container and share one centered, wrapping flow -- the desktop behavior
   at every width. margin/padding/list-style stay as a fallback for browsers
   that ignore display: contents. */
.quick-links__list {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quick-links__item {
	margin: 0;
}

/* The rule sits ~0.5px under the descenders, same as the header nav. The
   header gets there with display:inline and no padding, which puts its border
   on the font box; this is inline-block over a 14px line-height, so its content
   box closes 3.5px above the descender tip and needs the padding to make up
   the difference. */
.quick-links__link {
	display: inline-block;
	font-family: "Eina Semi Bold", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 14px;
	letter-spacing: 0.48px;
	color: #162224 !important;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 4px;
	transition: border-color 0.25s ease;
}

.quick-links__link:hover,
.quick-links__link:focus-visible {
	text-decoration: none;
	border-bottom-color: #162224;
}

/* The section you are currently reading. Periwinkle's own hue (237deg) taken
   down to 64% lightness: #B7BBFF itself is 1.82:1 on this white bar and the
   brand blue only 4.02:1, both short of the 4.5:1 a 16px semi-bold link needs.
   This is 5.36:1 and still unmistakably the brand purple.

   !important because the base .quick-links__link sets its color that way. */
.quick-links__link.is-current {
	color: #4752FF !important;
	border-bottom-color: #4752FF;
}

.quick-links__placeholder {
	margin: 0;
	font-family: "Pitch Medium", monospace;
	font-size: 14px;
	opacity: 0.7;
}

/* Sections carry their own top padding; this only clears the admin bar. */
:target {
	scroll-margin-top: 32px;
}

@media (max-width: 781px) {
	.quick-links > .container {
		gap: 10px 20px;
	}
}

/* --- Sticking to the top on scroll --------------------------------------- */

/* Only from 992px, the breakpoint the header already uses, and comfortably
   above the 920px where the links wrap. Pinned it is 78px, one row. Below the
   wrap it is 116px and by 430px it is 144px -- more than a fifth of a phone
   viewport to surrender permanently, so there it scrolls away as before.

   The site header is position: relative and has scrolled off by the time the
   bar reaches the top, so there is nothing to offset against and no overlap.
   z-index clears page content while staying under the cookie banner and the
   video modal, both at 9999. */
@media (min-width: 992px) {
	.quick-links {
		position: sticky;
		top: 0;
		z-index: 30;
	}

	.admin-bar .quick-links {
		top: 32px;
	}

	/* A section jumped to from the bar would otherwise land underneath it.
	   83px for the bar, 24px so the heading is not flush against its edge.
	   The bar grew from 78 to 83 when the links became inline-block to pull
	   the underline up to the text, so these move with it.
	   Scoped by :has() so pages without the bar keep the plain 32px. */
	body:has(.quick-links) :target {
		scroll-margin-top: 107px;
	}

	body.admin-bar:has(.quick-links) :target {
		scroll-margin-top: 139px;
	}

	/* The bar is opaque white and several sections behind it are white too, so
	   pinned it reads as floating with no edge. quick-links.js adds is-stuck
	   once it reaches the top -- CSS has no selector for that state. Without
	   the script the bar still sticks, just without the line under it. */
	.quick-links.is-stuck {
		box-shadow:
			0 1px 0 rgba(22, 34, 36, 0.14),
			0 6px 16px rgba(22, 34, 36, 0.07);
	}
}

/* Watched by the script; it must not disturb the layout it sits in. */
.quick-links__sentinel {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

.quick-links {
	transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.quick-links {
		transition: none;
	}
}