/**
 * Product FAQ block — front end.
 *
 * Native <details>/<summary>, so it opens without JavaScript and stays
 * accessible and crawlable. Colours read the theme's custom properties where
 * they exist and fall back to neutrals, so it drops into any theme unstyled.
 */

.stwa-faq {
	--stwa-faq-border: var(--color-border, rgba(0, 0, 0, 0.12));
	--stwa-faq-text: var(--color-text, #1d2327);
	--stwa-faq-muted: var(--color-text-muted, #50575e);
	--stwa-faq-accent: var(--color-secondary, #c9a96e);

	max-width: 800px;
	margin: 2.5rem 0 0;
}

.stwa-faq__heading {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--stwa-faq-text);
}

.stwa-faq__item {
	border-bottom: 1px solid var(--stwa-faq-border);
}

.stwa-faq__item:first-of-type {
	border-top: 1px solid var(--stwa-faq-border);
}

.stwa-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--stwa-faq-text);
	cursor: pointer;
	list-style: none;
}

/* Replace the default disclosure triangle with a rotating +. */
.stwa-faq__q::-webkit-details-marker {
	display: none;
}

.stwa-faq__q::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
	color: var(--stwa-faq-accent);
	transition: transform 0.2s ease;
}

.stwa-faq__item[open] .stwa-faq__q::after {
	transform: rotate(45deg);
}

.stwa-faq__q:hover {
	color: var(--stwa-faq-accent);
}

.stwa-faq__q:focus-visible {
	outline: 2px solid var(--stwa-faq-accent);
	outline-offset: 2px;
}

.stwa-faq__a {
	padding: 0 0 1.15rem;
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--stwa-faq-muted);
	max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
	.stwa-faq__q::after {
		transition: none;
	}
}

@media (max-width: 600px) {
	.stwa-faq {
		margin-top: 2rem;
	}

	.stwa-faq__q {
		font-size: 0.95rem;
	}
}