/**
 * FAQ page only — linked from src/app/frequently-asked-questions/page.tsx.
 *
 * WHY THIS FILE EXISTS: A WORDPRESS BUG, NOT COPIED.
 *
 * faq.php marks the selected tab with `is-active` (line 47, and the inline
 * script at 397-409 moves that class on every click). Nothing anywhere defines
 * it. `.faq-tab` and `.is-active` appear in the WordPress theme ONLY inside
 * faq.php itself — not in style.css, not in sleektap-2026.css, not in the
 * purged main stylesheets, not in uni-core. So on the live page all six tabs
 * render identically as a bare `.btn btn-sm`, and clicking one changes which
 * panel is shown while giving no indication of which tab you are on.
 *
 * A tab strip whose selected tab is invisible is broken, not a style choice, so
 * it is fixed here rather than reproduced. The fix is deliberately the theme's
 * own vocabulary — the active tab takes `.btn-primary`'s treatment and the rest
 * take `.btn-alt-secondary`'s quiet outline (sleektap-2026.css:281-311), using
 * the same tokens — so it reads as the design that was intended rather than a
 * new one. Nothing else about the page is touched.
 *
 * TO REVERT to a pixel-exact reproduction of the live WordPress page, delete
 * this file and its <link>. The markup and the tab behaviour do not depend on
 * it; only the visible selected state does.
 */

/* Inactive tabs: the quiet outline, so the row reads as controls rather than
   six runs of plain text. */
.faq-tab {
	background-color: transparent;
	border: 1px solid var(--st-line-firm, rgba(26, 32, 44, 0.17));
	color: var(--st-ink, #1A202C);
	cursor: pointer;
}

.faq-tab:hover {
	background-color: var(--st-surface, #FFFFFF);
	border-color: var(--st-ink, #1A202C);
}

/* The selected tab — the whole reason for this sheet. */
.faq-tab.is-active {
	background-color: var(--st-brand, #553C9A);
	border-color: var(--st-brand, #553C9A);
	color: #fff;
}

.faq-tab.is-active:hover {
	background-color: var(--st-brand-deep, #44307B);
	border-color: var(--st-brand-deep, #44307B);
}

/* The icon inside a button inherits its colour from the icon font's own rules
   in places, which would leave a dark glyph on the brand fill. */
.faq-tab.is-active .icon,
.faq-tab.is-active span {
	color: inherit;
}