/**
 * Firm review — section navigation.
 *
 * Every child is a link, so the horizontal scroller on narrow screens is
 * reachable with the keyboard by tabbing through its own content; it therefore
 * does NOT take a tabindex of its own (which would only add a redundant stop).
 * Scroll containers whose content is NOT focusable — the data tables — take
 * tabindex="0" instead. See .pfg-rv-scroll in the review-context layer.
 */

.pfg-rv-tabs {
	border-top: 1px solid var(--rv-b2, rgba(255, 255, 255, 0.08));
	min-width: 0;
}

.pfg-rv-tabs__list {
	display: flex;
	align-items: stretch;
	gap: clamp(4px, 0.8vw, 14px);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pfg-rv-tabs__list::-webkit-scrollbar {
	display: none;
}

.pfg-rv-tabs__item {
	flex: 0 0 auto;
	display: flex;
}

.pfg-rv-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 4px;
	color: var(--rv-text-3, #979CAD);
	font-family: var(--wp--preset--font-family--body, "Manrope", sans-serif);
	font-size: clamp(13.5px, 0.78vw, 16px);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 transparent;
	transition: color 150ms ease, box-shadow 150ms ease;
}

.pfg-rv-tabs__link:hover {
	color: var(--rv-text-1, #F2F3F8);
}

/* Kept for a server-rendered active state that no longer exists: nothing emits
   `is-current` or `aria-current` since the hrefs became bare fragments. Left in
   place because it is the same declaration the :target rules below use, and a
   future change that reintroduces a server state gets the styling for free. */
.pfg-rv-tabs__link.is-current,
.pfg-rv-tabs__link[aria-current] {
	color: var(--acc, var(--wp--preset--color--accent, #A79FFF));
	box-shadow: inset 0 -2px 0 var(--acc, #A79FFF);
}

.pfg-rv-tabs__count {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--acc, var(--wp--preset--color--accent, #A79FFF));
	color: var(--rv-on-acc, #14161F);
	font-size: clamp(10.5px, 0.6vw, 12.5px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
	.pfg-rv-tabs__list {
		-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
	}
}

/*
 * The section targets sit under a sticky header, so every anchor reserves room
 * for it. `scroll-margin-top` is the whole no-JavaScript scroll-offset fix.
 */
#r-overview,
#r-challenges,
#r-reviews,
#r-offers,
#r-payouts,
#r-bonuses,
#r-codes,
#r-rules,
#r-restricted,
#r-similar {
	scroll-margin-top: clamp(76px, 9vh, 112px);
}

/*
 * THE ONLY ACTIVE-STATE MECHANISM, since 2026-09-11.
 *
 * These links were `?section=rules#r-rules` so the server could render
 * `aria-current`. That made every tab a link to a NOINDEXED near-duplicate of
 * the page it sat on — Indexation::has_filter_state() treats any query key
 * outside page/paged as a filter state — so the hrefs became bare fragments and
 * the server-rendered state went with them.
 *
 * :has() + :target carries it instead, which it already did for anyone arriving
 * on a shared bare fragment. Browsers without :has() simply show no highlight,
 * which is the honest answer for a reader who has not jumped to a section yet.
 *
 * Every tab the strip can render must appear in BOTH lists below: the first
 * mutes the others, the second lights the match. A tab missing from them keeps
 * the default colour while its neighbours mute, which reads as the wrong item
 * being active.
 */
:root:has(#r-overview:target) .pfg-rv-tabs__link,
:root:has(#r-challenges:target) .pfg-rv-tabs__link,
:root:has(#r-payouts:target) .pfg-rv-tabs__link,
:root:has(#r-rules:target) .pfg-rv-tabs__link,
:root:has(#r-restricted:target) .pfg-rv-tabs__link {
	color: var(--rv-text-3, #979CAD);
	box-shadow: inset 0 -2px 0 transparent;
}

:root:has(#r-overview:target) .pfg-rv-tabs__link[data-section="overview"],
:root:has(#r-challenges:target) .pfg-rv-tabs__link[data-section="challenges"],
:root:has(#r-payouts:target) .pfg-rv-tabs__link[data-section="payouts"],
:root:has(#r-rules:target) .pfg-rv-tabs__link[data-section="rules"],
:root:has(#r-restricted:target) .pfg-rv-tabs__link[data-section="restricted"] {
	color: var(--acc, var(--wp--preset--color--accent, #A79FFF));
	box-shadow: inset 0 -2px 0 var(--acc, #A79FFF);
}