/**
 * Sticky sub-navigation for a long landing page.
 *
 * Two independent halves:
 *
 *   1. The underline on the active link, written against data-snof-spy so it
 *      works on whatever markup the bar happens to be made of. A page builder
 *      generates its own classes, and hardcoding ours would mean the script
 *      ran correctly while nothing visible changed.
 *   2. The bar itself, scoped to .snof-subnav, which only applies when the
 *      [snof_subnav] shortcode rendered it.
 *
 * The active link is marked with an underline rather than a colour change.
 * Colour alone would fail WCAG 1.4.1: someone who cannot distinguish the two
 * shades of white would have no way of telling which section they are in.
 */

/* ------------------------------------------- 1. the underline, any markup */

/*
 * The pseudo-element needs a positioned parent, and an inline element cannot
 * carry one reliably. inline-block is the smallest change that works and does
 * not alter how the links sit in a row.
 */
[data-snof-spy] a {
	position: relative;
	display: inline-block;
}

[data-snof-spy] a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.22s ease;
	pointer-events: none;
}

/*
 * Only the underline changes. Not the weight, not the colour: bolding the
 * active link reflows every link beside it, so the whole bar twitches on each
 * scroll past a section boundary. currentColor means this inherits whatever the
 * builder already set, including on hover.
 */
[data-snof-spy] a.is-current::after {
	transform: scaleX(1);
}

[data-snof-spy] a:hover::after,
[data-snof-spy] a:focus-visible::after {
	transform: scaleX(0.4);
}

[data-snof-spy] a.is-current:hover::after,
[data-snof-spy] a.is-current:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	[data-snof-spy] a::after {
		transition: none;
	}
}

/* ------------------------------------------------ 2. the bar we render */

.snof-subnav {
	--snof-sn-bg: #2c4a50;
	--snof-sn-text: rgba(255, 255, 255, 0.82);
	--snof-sn-text-on: #fff;
	--snof-sn-cta-bg: #fff;
	--snof-sn-cta-text: #2c4a50;
	--snof-sn-font: inherit;

	position: sticky;
	top: 0;
	z-index: 40;
	box-sizing: border-box;
	background: var(--snof-sn-bg);
	font-family: var(--snof-sn-font);
}

.snof-subnav *,
.snof-subnav *::before,
.snof-subnav *::after {
	box-sizing: inherit;
}

.snof-subnav :where(ul, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.snof-subnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 48px;
}

.snof-subnav__links {
	display: flex;
	align-items: center;
	gap: 30px;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.snof-subnav__links::-webkit-scrollbar {
	display: none;
}

.snof-subnav__link {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	color: var(--snof-sn-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease;
}

.snof-subnav__link:hover,
.snof-subnav__link:focus {
	color: var(--snof-sn-text-on);
}

/*
 * The underline itself comes from the generic block at the top of this file.
 * Only the colour shift is added here, and no weight change: bolding the active
 * link would reflow the ones beside it every time you scrolled past a boundary.
 *
 * Without JavaScript nothing is ever marked current, so the underline simply
 * never appears. Everything else still works.
 */
.snof-subnav__link.is-current {
	color: var(--snof-sn-text-on);
}

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

.snof-subnav__link:focus-visible {
	outline: 2px solid var(--snof-sn-text-on);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------- cta */

.snof-subnav__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border: 1.5px solid var(--snof-sn-cta-bg);
	border-radius: 100px;
	background: var(--snof-sn-cta-bg);
	color: var(--snof-sn-cta-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.snof-subnav__cta:hover,
.snof-subnav__cta:focus {
	background: transparent;
	color: var(--snof-sn-cta-bg);
}

.snof-subnav__cta:focus-visible {
	outline: 2px solid var(--snof-sn-cta-bg);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 900px) {
	.snof-subnav__inner {
		padding: 12px 20px;
		gap: 14px;
	}

	.snof-subnav__links {
		gap: 22px;
	}

	.snof-subnav__link {
		font-size: 15px;
	}

	.snof-subnav__cta {
		padding: 11px 18px;
		font-size: 15px;
	}
}

/*
 * Below this the links and the button cannot share a row without the button
 * shrinking to nothing, so the button drops out and the page's own call to
 * action carries it. Hiding it here is better than keeping a button too small
 * to hit.
 */
@media (max-width: 560px) {
	.snof-subnav__cta {
		display: none;
	}

	.snof-subnav__links {
		/* Room for the underline once the scrollbar is hidden. */
		padding-bottom: 2px;
	}
}