/*
 * SIA Section Nav — a horizontal pill bar that links to sections on the same
 * page and highlights whichever one you're looking at.
 *
 * NOT STICKY BY ITSELF, on purpose. Sticky is Elementor Pro's job (Advanced →
 * Motion Effects → Sticky): it already handles the header offset, the admin
 * bar and the per-device toggles, and duplicating it here would mean fighting
 * `position: sticky`'s one fatal quirk — any ancestor with `overflow: hidden`
 * kills it silently. What the widget DOES own is the part Pro's sticky cannot
 * know about: the landing offset (see --sia-sn-offset below).
 *
 * Pro adds `.elementor-sticky--active` to the widget root while the bar is
 * stuck, which is what the "Stuck" style tab targets.
 *
 * WRAPPING, NOT SCROLLING
 * A long list wraps onto more rows rather than scrolling horizontally. That
 * keeps every pill reachable — with a horizontal scroller the active pill can
 * sit off-screen on mobile, and you then need JS to scroll it back into view.
 */

.sia-sn {
	--sia-sn-gap: 6px;
	--sia-sn-row-gap: 6px;
	/* Distance from the top of the viewport at which a section counts as
	   "current", and the gap anchored links land with. Read by the JS, which
	   copies it onto each target as `scroll-margin-top`. Set it to the height
	   of whatever ends up covering the top of the page — sticky header + this
	   bar. */
	--sia-sn-offset: 0px;
	display: block;
	width: 100%;
}

.sia-sn__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sia-sn-row-gap, 6px) var(--sia-sn-gap, 6px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sia-sn__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	/* Variables, so the hover / active rules below survive. They sit at (0,2,0)
	   while a control writing the property directly lands at (0,4,0), so
	   setting a Normal colour used to switch the built-in states off entirely.
	   The Hover and Active CONTROLS are unaffected — their selectors carry the
	   state too, which puts them above Normal on their own. */
	color: var(--sia-sn-link-color, var(--sia-color-secondary, #54595F));
	background: var(--sia-sn-link-bg, transparent);
	border: 1px solid transparent;
	box-sizing: border-box;
	cursor: pointer;
	transition:
		background-color var(--sia-sn-ease, 0.16s) ease,
		color var(--sia-sn-ease, 0.16s) ease,
		border-color var(--sia-sn-ease, 0.16s) ease;
}
.sia-sn__link:hover,
.sia-sn__link:focus-visible {
	color: var(--sia-color-text, #1A1718);
	background: rgba(0, 0, 0, 0.05);
}
.sia-sn__link.is-active {
	color: #fff;
	background: var(--sia-color-primary, #6EC1E4);
}

.sia-sn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}
.sia-sn__icon > svg,
.sia-sn__icon > i {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}
.sia-sn__icon > i {
	width: auto;
	height: auto;
	font-size: 1em;
}

/* Editor-only notice. */
.sia-sn--empty {
	padding: 22px;
	text-align: center;
	color: #6b7280;
	font-size: 13px;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.sia-sn__link { transition: none !important; }
}