/**
 * PSAS: Sticky on-page section navigation.
 *
 * Loaded ONLY on singular pages whose content contains `.psas-lp-section-nav`
 * (see includes/assets.php). Every selector is namespaced `psas-lp-`, or scoped to
 * a page that has the nav, so nothing here can reach other pages.
 *
 * Markup (page content):
 *   group.psas-lp-section-nav > ul.psas-lp-section-nav__list > li > a[href="#section-id"]
 * Targets are ordinary blocks with an HTML anchor (Advanced → HTML anchor).
 *
 * CSS custom properties set by psas-lp-section-nav.js:
 *   --psas-lp-nav-top  distance from the viewport top (sticky header clone / admin bar)
 *   --psas-lp-nav-h    rendered height of the nav bar
 */

.psas-lp-section-nav {
	position: sticky;
	top: var(--psas-lp-nav-top, 0px);
	z-index: 9990; /* below .psas-sticky-header-clone (99999) and mega menus */
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--wp--preset--color--background, #fff);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	/* No `top` animation while the nav sits in the page, so it never animates as it is picked up. */
	transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Pinned (JS adds .is-stuck): orange band so it stands apart from the white sticky header.
   `top` animates with the header clone's slide timing only while pinned. The page block's
   white preset class (has-background-background-color) uses !important, hence !important here. */
.psas-lp-section-nav.is-stuck {
	background-color: var(--wp--preset--color--orange, #e66245) !important;
	border-bottom-color: transparent;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.psas-lp-section-nav .psas-lp-section-nav__list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 auto;
	padding: 0.75rem var(--padding-standard, 1.25rem);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.psas-lp-section-nav .psas-lp-section-nav__list::-webkit-scrollbar {
	display: none;
}

.psas-lp-section-nav .psas-lp-section-nav__list > li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.psas-lp-section-nav .psas-lp-section-nav__list > li::before,
.psas-lp-section-nav .psas-lp-section-nav__list > li::marker {
	content: none;
}

.psas-lp-section-nav .psas-lp-section-nav__list a {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--blue-light, #eef6f9);
	color: var(--blue-dark, #2b3b4c);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transform: translateY(0);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.psas-lp-section-nav .psas-lp-section-nav__list a:hover,
.psas-lp-section-nav .psas-lp-section-nav__list a:focus-visible {
	background-color: var(--wp--preset--color--blue, #5baec2);
	color: #fff !important;
}

.psas-lp-section-nav .psas-lp-section-nav__list a:focus-visible {
	outline: 2px solid var(--blue-dark, #2b3b4c);
	outline-offset: 2px;
}

/* Pinned on the orange band: near-white pills, solid white on hover. */
.psas-lp-section-nav.is-stuck .psas-lp-section-nav__list a {
	background-color: rgba(255, 255, 255, 0.88);
}

.psas-lp-section-nav.is-stuck .psas-lp-section-nav__list a:hover,
.psas-lp-section-nav.is-stuck .psas-lp-section-nav__list a:focus-visible {
	background-color: #fff;
	color: var(--blue-dark, #2b3b4c);
}

.psas-lp-section-nav.is-stuck .psas-lp-section-nav__list a:focus-visible {
	outline-color: #fff;
}

/* Active section (both states): dark navy pill with white text. */
.psas-lp-section-nav .psas-lp-section-nav__list a.is-active,
.psas-lp-section-nav .psas-lp-section-nav__list a[aria-current="true"],
.psas-lp-section-nav.is-stuck .psas-lp-section-nav__list a.is-active,
.psas-lp-section-nav.is-stuck .psas-lp-section-nav__list a[aria-current="true"] {
	background-color: var(--blue-dark, #2b3b4c);
	color: #fff !important;
}

/* Small screens: one swipeable row, starting at the left edge. */
@media (max-width: 960px) {
	.psas-lp-section-nav .psas-lp-section-nav__list {
		justify-content: flex-start;
		padding-block: 0.6rem;
	}

	.psas-lp-section-nav .psas-lp-section-nav__list a {
		padding: 0.45rem 0.95rem;
		font-size: 0.95rem;
	}
}

/* Hash links / no-JS fallback: land section titles below the header + nav. */
html:has(.psas-lp-section-nav) .wp-block-post-content [id] {
	scroll-margin-top: calc(var(--psas-lp-nav-top, 0px) + var(--psas-lp-nav-h, 64px) + 16px);
}

/* ---------------------------------------------------------------------------
 * Motion: pills cascade in on load only (hover is a color change, no movement).
 * Opacity/transform only; switched off entirely for reduced-motion visitors.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.psas-lp-section-nav .psas-lp-section-nav__list > li {
		animation: psas-lp-nav-in 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
	}

	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(1) { animation-delay: 0.10s; }
	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(2) { animation-delay: 0.16s; }
	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(3) { animation-delay: 0.22s; }
	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(4) { animation-delay: 0.28s; }
	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(5) { animation-delay: 0.34s; }
	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(6) { animation-delay: 0.40s; }
	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(7) { animation-delay: 0.46s; }
	.psas-lp-section-nav .psas-lp-section-nav__list > li:nth-child(n+8) { animation-delay: 0.52s; }
}

@keyframes psas-lp-nav-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}