/**
 * Component: FAQ accordion.
 *
 * Native <details>/<summary>. No JavaScript, so it works before scripts load
 * and for anyone without them; the browser gives keyboard support and the
 * correct semantics for free. A library here would be 8KB to reimplement
 * something the platform already does properly.
 *
 * Used on the long reference pages - PCGS, Wholesale, Appointments - where the
 * detail has to exist for the people who need it, but should not stand between
 * everyone else and the thing they came to do.
 */

.tcs-faq {
	margin-block: var(--tcs-space-lg);
	border-block-start: 1px solid var(--tcs-rule);
}

.tcs-faq__item {
	border-block-end: 1px solid var(--tcs-rule);
}

.tcs-faq__item > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tcs-space-sm);
	padding-block: var(--tcs-space-sm);
	font-weight: var(--tcs-weight-medium);
	color: var(--tcs-ink);
	cursor: pointer;
	list-style: none;
	transition: color var(--tcs-duration-fast) var(--tcs-ease);
}

/* Safari and Chrome each draw their own marker; remove both, we draw one. */
.tcs-faq__item > summary::-webkit-details-marker { display: none; }
.tcs-faq__item > summary::marker { content: ''; }

.tcs-faq__item > summary:hover { color: var(--tcs-accent); }

.tcs-faq__item > summary:focus-visible {
	outline: var(--tcs-focus-width) solid var(--tcs-focus-color);
	outline-offset: var(--tcs-focus-offset);
}

/* The marker: a plus that becomes a minus. Rotating a chevron reads as
   "next" to some people; plus/minus reads as "more" and "less". */
.tcs-faq__item > summary::after {
	content: '';
	flex: 0 0 auto;
	inline-size: 0.72em;
	block-size: 0.72em;
	margin-block-start: 0.15em;
	background:
		linear-gradient(var(--tcs-ink-muted), var(--tcs-ink-muted)) center / 100% 1.5px no-repeat,
		linear-gradient(var(--tcs-ink-muted), var(--tcs-ink-muted)) center / 1.5px 100% no-repeat;
	transition: transform var(--tcs-duration) var(--tcs-ease);
}

.tcs-faq__item[open] > summary::after {
	/* Hide the vertical bar by collapsing it, leaving the horizontal minus. */
	background:
		linear-gradient(var(--tcs-ink-muted), var(--tcs-ink-muted)) center / 100% 1.5px no-repeat;
	transform: rotate(180deg);
}

.tcs-faq__item > summary + * { margin-block-start: 0; }

.tcs-faq__item > *:not(summary) {
	margin-block-end: var(--tcs-space-sm);
	max-inline-size: var(--tcs-measure);
	color: var(--tcs-ink-soft);
}

.tcs-faq__item > *:last-child { margin-block-end: var(--tcs-space-md); }

@media (prefers-reduced-motion: reduce) {
	.tcs-faq__item > summary,
	.tcs-faq__item > summary::after { transition: none; }
}

/* A short lead-in above a group of questions. */
.tcs-faq-intro {
	margin-block-end: var(--tcs-space-xs);
	color: var(--tcs-ink-muted);
	font-size: var(--tcs-text-sm);
}