/**
 * FAQ accordion component.
 *
 * Extends Bootstrap 5's .accordion with brand tokens. Reused on the
 * homepage, About page, and Contact page via template-parts/global/faq.php.
 * Respects prefers-reduced-motion via base.css's global override —
 * no duplicate media query here.
 *
 * @package PackagingCommerce
 */

.pkgc-faq {
	padding-block: var(--brand-space-16);
	background-color: var(--brand-color-surface-alt);
}

.pkgc-faq__accordion {
	max-width: 860px;
	margin-inline: auto;
}

.pkgc-faq__item {
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-lg);
	overflow: hidden;
	background-color: var(--brand-color-surface);
	box-shadow: var(--brand-shadow-sm);
}

.pkgc-faq__item + .pkgc-faq__item {
	margin-block-start: var(--brand-space-3);
}

.pkgc-faq__question {
	width: 100%;
	min-height: 44px;
	padding: var(--brand-space-4) var(--brand-space-5);
	font-family: var(--brand-font-body);
	font-weight: var(--brand-weight-semibold);
	font-size: var(--brand-text-base);
	color: var(--brand-color-ink);
	background-color: var(--brand-color-surface);
	border: none;
	text-align: start;
}

.pkgc-faq__question:not(.collapsed) {
	color: var(--brand-color-primary-dark);
	background-color: var(--brand-color-primary-soft);
}

.pkgc-faq__question:focus-visible {
	outline: 3px solid var(--brand-color-primary);
	outline-offset: -3px;
}

/* Bootstrap's accordion-button ships a chevron background-image via
   inline SVG data-URI keyed to RTL/LTR — left untouched here since it
   already flips correctly for [dir="rtl"] out of the box. Only color
   and shape are themed above. */

.pkgc-faq__answer {
	padding: 0 var(--brand-space-5) var(--brand-space-5);
	font-size: var(--brand-text-sm);
	line-height: var(--brand-leading-relaxed);
	color: var(--brand-color-muted);
}

@media (max-width: 47.98rem) {
	.pkgc-faq {
		padding-block: var(--brand-space-10);
	}

	.pkgc-faq__question {
		padding: var(--brand-space-3) var(--brand-space-4);
		font-size: var(--brand-text-sm);
	}

	.pkgc-faq__answer {
		padding: 0 var(--brand-space-4) var(--brand-space-4);
	}
}