/*
 * Scroll-state navigation — realises the classes toggled by assets/js/nav-scroll.js.
 *
 * Variants (set in theme_plumbing()['nav_scroll']):
 *   hide-reveal  — hide on scroll-down, reveal with a FULLY SOLID background
 *                  on scroll-up (house default; never translucent)
 *   floating-bar — full-width strip becomes a floating pill bar once scrolled
 *   shrink       — full-width header shrinks to content width once scrolled
 *
 * The scrolled background uses the `base` palette slug; builds that name
 * their canvas differently should override --nav-scroll-bg in theme CSS.
 */

.nav-scroll {
	--nav-scroll-bg: var(--wp--preset--color--base, #fff);
	position: sticky;
	top: 0;
	z-index: 100;
	transition:
		transform var(--wp--custom--motion--duration--base, 400ms) var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--wp--custom--motion--duration--fast, 200ms) ease,
		box-shadow var(--wp--custom--motion--duration--fast, 200ms) ease,
		top var(--wp--custom--motion--duration--base, 400ms) var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1)),
		max-width var(--wp--custom--motion--duration--base, 400ms) var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1)),
		border-radius var(--wp--custom--motion--duration--base, 400ms) var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Scrolled state, all variants: fully solid background. */
.nav-scroll--stuck {
	background-color: var(--nav-scroll-bg);
	box-shadow: 0 1px 24px rgba(0, 0, 0, 0.07);
}

/* — hide-reveal — */
.nav-scroll--hide-reveal.nav-scroll--hidden {
	transform: translateY(-102%);
	box-shadow: none;
}

/* — floating-bar — */
.nav-scroll--floating-bar.nav-scroll--stuck {
	top: clamp(8px, 1.2vw, 16px);
	max-width: min(92vw, var(--wp--style--global--wide-size, 1200px));
	margin-inline: auto;
	border-radius: 999px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* — shrink — */
.nav-scroll--shrink.nav-scroll--stuck {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	border-radius: 0 0 12px 12px;
}

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