/*
 * Sneaky FAQ V2 component (brand/faq-v2.php, owner approval 22 Oct 2026). One look for every FAQ on Sneaky:
 * ruled rows, a round toggle in the section's pillar colour, no boxes. Self-contained: every token falls back to the
 * Sneaky Line value, so the block looks the same in the Assess, Train, Eat, Helper and member layers. No --sh-* token,
 * no global selector, no !important. Motion only under prefers-reduced-motion: no-preference.
 */

.sh-faq {
	--faq-ink: var(--sl-ink, #122c3a);
	--faq-copy: var(--sl-copy, #375568);
	--faq-line: var(--sl-line, #c7ddeb);
	--faq-pillar: #246b5f;
	--faq-wash: #e7f2ef;
	--faq-display: var(--sl-display, "Sneaky Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--faq-text: var(--sl-text, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
	box-sizing: border-box;
	display: grid;
	gap: 18px;
	width: 100%;
	max-width: 920px;
	margin: clamp(32px, 4vw, 56px) auto 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--faq-copy);
	font: 400 16px/1.65 var(--faq-text);
	text-align: left;
}
.sh-faq *, .sh-faq *::before, .sh-faq *::after { box-sizing: border-box; }

/* pillar colours: the toggle and eyebrow take the section's colour (ink values pass 4.5:1 on white) */
.sh-faq--assess { --faq-pillar: #246b5f; --faq-wash: #e7f2ef; }
.sh-faq--train { --faq-pillar: #1b6fae; --faq-wash: #eaf4fd; }
.sh-faq--eat { --faq-pillar: #2f7a34; --faq-wash: #eef7ec; }
.sh-faq--helpers { --faq-pillar: #b0285a; --faq-wash: #fdf0f5; }
.sh-faq--plum { --faq-pillar: #7b244b; --faq-wash: #fdf4f8; }
.sh-faq--learn { --faq-pillar: #8a5a06; --faq-wash: #fbf1e1; }

/* head */
.sh-faq .sh-faq-head { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.sh-faq .sh-faq-eyebrow { margin: 0; padding: 0; color: var(--faq-pillar); font: 800 12.5px/1.25 var(--faq-text); letter-spacing: .12em; text-transform: uppercase; }
.sh-faq .sh-faq-title { margin: 0; padding: 0; border: 0; color: var(--faq-ink); font: 800 clamp(1.45rem, 1.2rem + 1vw, 1.95rem)/1.1 var(--faq-display); letter-spacing: -.02em; text-transform: none; text-wrap: balance; }

/* rows */
.sh-faq .sh-faq-list { display: block; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--faq-line); }
.sh-faq .sh-faq-item { display: block; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--faq-line); border-radius: 0; background: none; box-shadow: none; scroll-margin-top: 110px; }
.sh-faq .sh-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; margin: 0; padding: 14px 2px; border: 0; border-radius: 0; background: none; color: var(--faq-ink); font: 700 17px/1.35 var(--faq-text); letter-spacing: 0; text-transform: none; cursor: pointer; list-style: none; }
.sh-faq .sh-faq-q::-webkit-details-marker { display: none; }
.sh-faq .sh-faq-q::marker { content: ""; }
.sh-faq .sh-faq-q:hover { color: var(--faq-pillar); background: none; }
.sh-faq .sh-faq-q:focus { outline: none; }
.sh-faq .sh-faq-q:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 5px #fff; }
.sh-faq .sh-faq-qt { min-width: 0; }

/* the toggle: plus when closed, minus when open */
.sh-faq .sh-faq-t { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--faq-wash); }
.sh-faq .sh-faq-t::before, .sh-faq .sh-faq-t::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: var(--faq-pillar); }
.sh-faq .sh-faq-t::after { transform: rotate(90deg); }
.sh-faq .sh-faq-item[open] .sh-faq-t { background: var(--faq-pillar); }
.sh-faq .sh-faq-item[open] .sh-faq-t::before, .sh-faq .sh-faq-item[open] .sh-faq-t::after { background: #fff; }
.sh-faq .sh-faq-item[open] .sh-faq-t::after { transform: rotate(0deg); }

/* answers */
.sh-faq .sh-faq-a { display: grid; gap: 10px; margin: 0; padding: 0 52px 20px 2px; color: var(--faq-copy); }
.sh-faq .sh-faq-a p { margin: 0; padding: 0; max-width: 68ch; color: inherit; font: inherit; }
.sh-faq .sh-faq-a a:not(.sh-faq-pill) { color: var(--faq-pillar); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* actions: a standalone action is a ghost pill (design contract) */
.sh-faq .sh-faq-links, .sh-faq .sh-faq-more { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; }
.sh-faq .sh-faq-links { max-width: none; }
.sh-faq .sh-faq-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--faq-line); border-radius: 999px; background: #fff; color: var(--faq-ink); font: 700 15px/1.2 var(--faq-text); text-decoration: none; white-space: normal; box-shadow: none; }
.sh-faq .sh-faq-pill:hover, .sh-faq .sh-faq-pill:focus { border-color: var(--faq-pillar); background: #fff; color: var(--faq-pillar); text-decoration: none; }
.sh-faq .sh-faq-pill:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: 3px; box-shadow: 0 0 0 5px #fff; }
.sh-faq .sh-faq-pill svg { flex: none; width: 16px; height: 16px; }

/* placements */
.sh-faq.sh-faq--bare { gap: 0; max-width: none; margin: 0; }
.sk-hub-faq > .sh-faq, .sk-check-faq > .sh-faq, .sh-bfaq-group > .sh-faq { margin-top: 0; }

@media (max-width: 599px) {
	.sh-faq .sh-faq-q { min-height: 56px; font-size: 16px; }
	.sh-faq .sh-faq-a { padding-right: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
	.sh-faq .sh-faq-t, .sh-faq .sh-faq-t::before, .sh-faq .sh-faq-t::after { transition: transform .2s cubic-bezier(.2, .7, .2, 1), background-color .2s ease; }
}