/***************************************************************************************************************************************************************************************/
/* SECTION SUBNAV */
/***************************************************************************************************************************************************************************************/

/**
 * The row of sibling-page links under the header.
 */

#header .section-nav {
	margin-top: var(--text-spacing-xxsmall);
	padding: 0 var(--text-spacing-xlarge);
	--section-nav-line: var(--charcoal-25);
	--section-nav-dim: var(--text-gray);
}

/* What the bar adds to the header, for the overlay heroes that pad by --header-height. The
   21px is the rule, the line box and the underline's clearance; the rest are the same spacing
   tokens the bar is built from, so it stays in step when they change at a breakpoint.
   Set on body rather than :root so it does not depend on this file loading after style.css. */
:root:has(#header .section-nav) {
	--section-nav-gap: 0px;
	--section-nav-height: calc(var(--text-spacing-xxsmall) + var(--text-spacing-xsmall) + 21px + var(--section-nav-gap));
}

/* Zero on desktop: the hero's own top padding already leaves the headline where the comp puts
   it, and any gap here would push it down. Below 1200 the bar lands close enough to the eyebrow
   to read as one lockup, so it buys the clearance back. */
#header .section-nav {
	margin-bottom: var(--section-nav-gap, 0px);
}

#header.on-dark .section-nav {
	--section-nav-line: var(--white-25);
	--section-nav-dim: var(--white-60);
}

#header .section-nav .menu {
	align-items: flex-start;
	border-top: 1px solid var(--section-nav-line);
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall) var(--text-spacing-small);
	justify-content: flex-end;
	padding-top: var(--text-spacing-xsmall);
}

#header .section-nav a {
	border-bottom: 1.5px solid transparent;
	color: var(--section-nav-dim);
	font-size: calc(12rem / 16);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: calc(16 / 12);
	padding-bottom: 4px;
	text-transform: uppercase;
}

#header .section-nav a:hover {
	color: inherit;
}

#header .section-nav [aria-current] {
	border-bottom-color: currentColor;
	color: inherit;
}

#header .section-nav a:focus-visible {
	box-shadow: 0 0 0 2px var(--focus-halo);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

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

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

	:root:has(#header .section-nav) {
		--section-nav-gap: var(--text-spacing-xsmall);
	}

	#header .section-nav {
		padding: 0 var(--container-outer-padding);
	}

	/* One row, scrolled — not wrapped. A wrapped bar's height depends on how many items an
	   editor put in it, and the hero above pads for a number that has to be knowable. The
	   clipped last item is what says there is more to the right. */
	#header .section-nav .menu {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#header .section-nav .menu::-webkit-scrollbar {
		display: none;
	}

	#header .section-nav a {
		white-space: nowrap;
	}

	#header.active .section-nav {
		display: none;
	}

}

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

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

	/* The scrollport reaches both screen edges and the inset moves onto the row inside it, so the
	   clipped item is cut by the screen rather than stopping short of it — which is what reads as
	   "there is more". The first item still starts on the container's measure. */
	#header .section-nav {
		padding-inline: 0;
	}

	#header .section-nav .menu {
		padding-inline: var(--container-outer-padding);
	}

}

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

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

	:root:has(#header .section-nav) {
		--section-nav-height: calc(var(--text-spacing-xsmall) + 21px + var(--section-nav-gap));
	}

	/* No step of its own: the rule sits the same distance under the donate button that the button
	   sits below the top of the screen, and the row's own padding is that distance. */
	#header .section-nav {
		margin-top: 0;
	}

}