/**
 * Section sub-nav — sticky pill bar under the header bar.
 *
 * The header's template-part wrapper is sticky at top: -40px, so the 40px
 * utility strip scrolls away and the bar (84px desktop, 64px mobile) holds.
 * This bar sticks directly beneath that. position: sticky only travels within
 * its parent, so the <nav> has to be a direct child of something tall — the
 * page's entry-content or <main> — which is where all three callers print it.
 * It keeps its place in the flow, so nothing shifts when it starts to stick.
 */
.section-subnav {
	--ssn-ink: #0B1E32; --ssn-steel: #204368; --ssn-blue: #005B97; --ssn-yellow: #FAC410;
	--ssn-n0: #FFFFFF; --ssn-n50: #F5F6F7; --ssn-n100: #E8EBEE; --ssn-n200: #D3D8DE;
	--ssn-ui: var(--renoun-global-font-body, "pt-sans", helvetica-neue, helvetica, sans-serif);
	--ssn-top: 64px;

	position: sticky; top: var(--ssn-top); z-index: 90;
	/* out of the content column: the bar runs the full width of the page */
	width: 100vw; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
	background: var(--ssn-n0);
	border-bottom: 1px solid var(--ssn-n100);
}
@media (min-width: 1024px) { .section-subnav { --ssn-top: 84px; } }
.admin-bar .section-subnav { top: calc(var(--ssn-top) + 46px); }
@media (min-width: 783px) { .admin-bar .section-subnav { top: calc(var(--ssn-top) + 32px); } }
.section-subnav[hidden] { display: none; }

.section-subnav__wrap {
	display: flex; align-items: center; gap: 16px;
	max-width: 1320px; margin: 0 auto; padding: 12px 20px;
}
.section-subnav--center .section-subnav__wrap { justify-content: center; }
.section-subnav--right .section-subnav__wrap { justify-content: flex-end; }

.section-subnav__title {
	margin: 0; flex: none;
	font: 700 12px/1 var(--ssn-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ssn-steel);
}

/* One rounded track holding the pills; it scrolls sideways when they do not fit. */
.section-subnav__list {
	display: flex; flex-wrap: nowrap; gap: 4px;
	margin: 0; padding: 4px; list-style: none;
	min-width: 0; max-width: 100%;
	overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	border: 1px solid var(--ssn-n200); border-radius: 99px;
	background: var(--ssn-n0);
}
.section-subnav__list::-webkit-scrollbar { display: none; }
.section-subnav__list > li { flex: none; margin: 0; padding: 0; }
.section-subnav__list > li::before { content: none; }

/* .section-subnav a… : the content area underlines and recolours every link; these are controls. */
.section-subnav a.section-subnav__pill {
	display: block; padding: 9px 20px; border-radius: 99px;
	font: 700 15px/20px var(--ssn-ui); color: var(--ssn-ink); text-decoration: none; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.section-subnav a.section-subnav__pill:hover { background: var(--ssn-n50); color: var(--ssn-blue); text-decoration: none; }
.section-subnav a.section-subnav__pill:focus-visible { outline: 2px solid var(--ssn-blue); outline-offset: 2px; }
.section-subnav a.section-subnav__pill.is-active,
.section-subnav a.section-subnav__pill[aria-current="true"] { background: var(--ssn-ink); color: var(--ssn-n0); }

@media (max-width: 781px) {
	.section-subnav__wrap { padding: 10px 16px; gap: 12px; }
	.section-subnav--center .section-subnav__wrap, .section-subnav--right .section-subnav__wrap { justify-content: flex-start; }
	.section-subnav__title { display: none; }
	.section-subnav a.section-subnav__pill { padding: 8px 16px; font-size: 14px; }
}

/* Where a pill sends you: clear of the header bar and of this bar. */
.section-subnav-target { scroll-margin-top: calc(64px + var(--tfp-subnav-h, 64px) + 16px); }
@media (min-width: 1024px) { .section-subnav-target { scroll-margin-top: calc(84px + var(--tfp-subnav-h, 64px) + 16px); } }

@media (prefers-reduced-motion: no-preference) {
	html:has([data-section-subnav]:not([hidden])) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
	.section-subnav a.section-subnav__pill { transition: none; }
}