/* ============================================================
   SWITALSKI.LAW — FAQ accordion (template-parts/hub/faq-list.php).
   SEO 2026-10: moved VERBATIM out of hub.css so the Home FAQ can
   use the same component without loading the whole hub stylesheet.
   Loaded on the hubs and Insights posts (right after hub.css, so the
   cascade is unchanged — no hub.css rule shares a target with these)
   and on the Home page (inc/enqueue.php). Dark surface throughout.
   ============================================================ */

/* In-copy links in answers — gold with gold hairline, invert on
   hover (same treatment as .sl-hub__p a in hub.css). */
.sl-hub-faq__a a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: var(--bw-1) solid var(--gold);
	padding-bottom: var(--sp-1);
	transition: color .15s ease, border-color .15s ease;
}

.sl-hub-faq__a a:hover {
	color: var(--paper);
	border-color: var(--paper);
}

/* Focus state — keyboard visibility on the dark surface */
.sl-hub-faq__btn:focus-visible,
.sl-hub-faq__a a:focus-visible {
	outline: var(--bw-2) solid var(--gold);
	outline-offset: var(--sp-2);
}

/* ------------------------------------------------------------
   FAQ accordion — answers live in the DOM, CSS collapses them
   ------------------------------------------------------------ */
.sl-hub-faq__list {
	border-top: var(--bw-1) solid var(--border-inv-mid);
}

.sl-hub-faq__item {
	border-bottom: var(--bw-1) solid var(--border-inv-mid);
}

.sl-hub-faq__q {
	margin: 0;
}

.sl-hub-faq__btn {
	width: 100%;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: var(--sp-20) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-20);
	text-align: left;
}

.sl-hub-faq__q-text {
	font-family: var(--font-body);
	font-size: var(--fs-17);
	font-weight: 600;
	color: var(--paper);
	line-height: 1.4;
	transition: color .15s ease;
}

.sl-hub-faq__item.is-open .sl-hub-faq__q-text {
	color: var(--gold);
}

.sl-hub-faq__icon {
	flex-shrink: 0;
	width: var(--s-6);
	height: var(--s-6);
	border: var(--bw-1-5) solid var(--border-inv-ctl-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--n-300);
	transition: color .15s ease, border-color .15s ease;
}

.sl-hub-faq__item.is-open .sl-hub-faq__icon {
	border-color: var(--gold);
	color: var(--gold);
}

/* plus → minus: the vertical stroke of the plus icon disappears */
.sl-hub-faq__item.is-open .sl-hub-faq__icon svg line:first-child {
	opacity: 0;
}

.sl-hub-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .2s ease-out;
}

.sl-hub-faq__item.is-open .sl-hub-faq__panel {
	grid-template-rows: 1fr;
}

.sl-hub-faq__panel-inner {
	overflow: hidden;
}

.sl-hub-faq__a {
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: 1.65;
	color: var(--n-200);
	margin: 0 0 var(--s-5);
	max-width: var(--mw-680);
}