/**
 * NP Scrollspy Navigation — strip styling.
 *
 * Defaults intentionally mimic a sticky site header: translucent dark
 * background in dark mode, translucent light background in light mode,
 * and the theme's "primary" color for the active section link — i.e.
 * "background same as the navigation, text in the primary color."
 *
 * Every color is a CSS custom property so a site can override just the
 * variables (via the plugin's Settings page, or its own stylesheet) without
 * touching this file.
 */

:root {
	--np-scrollspy-h: 46px;
	--np-scrollspy-header-h: 0px;
	--np-scrollspy-fade: 48px;

	--np-scrollspy-bg: rgba(36, 36, 38, 0.85);
	--np-scrollspy-bg-light: rgba(255, 255, 255, 0.85);
	--np-scrollspy-text: var(--wp--preset--color--main, #a6a6a6);
	--np-scrollspy-hover: var(--wp--preset--color--primary-alt, #ffcf00);
	--np-scrollspy-active: var(--wp--preset--color--primary, #ffcf00);
}

.np-scrollspy-nav {
	position: sticky;
	top: var(--np-scrollspy-header-h, 0px);
	z-index: 10;
	height: var(--np-scrollspy-h);
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: var(--wp--style--root--padding-left, 24px);
	padding-right: var(--wp--style--root--padding-right, 24px);
	background: var(--np-scrollspy-bg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-sizing: border-box;
}

html.light-mode .np-scrollspy-nav {
	background: var(--np-scrollspy-bg-light);
}

.np-scrollspy-nav[hidden] {
	display: none !important;
}

/* Never show an empty strip (e.g. before JS has populated it, or on a page
   with zero detected headings) — avoids a bare bar flashing above the
   content. */
.np-scrollspy-nav:has(.np-scrollspy-nav__list:empty) {
	display: none;
}

.np-scrollspy-nav__viewport {
	position: relative;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
.np-scrollspy-nav__viewport::-webkit-scrollbar {
	display: none;
}

/* Desktop mouse affordance: only shown once there's actually something to
   scroll (has-overflow-x, toggled in JS). Mobile/touch scrolling is
   untouched — this is purely a cursor hint + click-drag panning target. */
.np-scrollspy-nav.has-overflow-x .np-scrollspy-nav__viewport {
	cursor: grab;
}
.np-scrollspy-nav.has-overflow-x.is-dragging .np-scrollspy-nav__viewport {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
	-webkit-user-select: none;
}

.np-scrollspy-nav.has-overflow-left .np-scrollspy-nav__viewport {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--np-scrollspy-fade));
	mask-image: linear-gradient(to right, transparent 0, #000 var(--np-scrollspy-fade));
}
.np-scrollspy-nav.has-overflow-right .np-scrollspy-nav__viewport {
	-webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--np-scrollspy-fade));
	mask-image: linear-gradient(to left, transparent 0, #000 var(--np-scrollspy-fade));
}
.np-scrollspy-nav.has-overflow-left.has-overflow-right .np-scrollspy-nav__viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--np-scrollspy-fade),
		#000 calc(100% - var(--np-scrollspy-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--np-scrollspy-fade),
		#000 calc(100% - var(--np-scrollspy-fade)),
		transparent 100%
	);
}

.np-scrollspy-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 28px);
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	min-width: max-content;
}

.np-scrollspy-nav__list a {
	display: inline-block;
	padding: 6px 2px;
	font-size: 0.8125rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--np-scrollspy-text);
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	/* Links are natively draggable in Chrome/Safari: pressing down and moving
	   the mouse just a few px (a very ordinary amount of click jitter) starts
	   a native "drag this link out" gesture instead of a click, and no click
	   event fires at all when the mouse is released — which is what made a
	   click sometimes silently do nothing. Turn that native drag off. */
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}
.np-scrollspy-nav__list a:hover,
.np-scrollspy-nav__list a:focus-visible {
	color: var(--np-scrollspy-hover);
}
.np-scrollspy-nav__list a.is-active,
.np-scrollspy-nav__list a[aria-current='true'] {
	color: var(--np-scrollspy-active);
	border-bottom-color: var(--np-scrollspy-active);
}

/* Optional nested H3 subsection links — smaller, slightly indented/muted. */
.np-scrollspy-nav__list a[data-np-level='3'] {
	font-size: 0.6875rem;
	opacity: 0.8;
	padding-left: 14px;
	position: relative;
}
.np-scrollspy-nav__list a[data-np-level='3']::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 50%;
	width: 6px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* Flush the first/last item with the content edge on tablet+ so it lines up
   under the logo / theme toggle, matching the header's own inner padding. */
@media (min-width: 768px) {
	.np-scrollspy-nav__list li:first-child a {
		padding-left: 0;
	}
	.np-scrollspy-nav__list li:last-child a {
		padding-right: 0;
	}
}

/* Keep the target heading clear of the sticky header + strip when jumped to. */
[data-np-scrollspy-target] {
	scroll-margin-top: calc(var(--np-scrollspy-header-h, 0px) + var(--np-scrollspy-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	.np-scrollspy-nav__viewport {
		scroll-behavior: auto;
	}
}