/**
 * Accessible FAQ Accordion — frontend + editor preview styles.
 *
 * All typography (font-family, size, weight) and color inherits from the
 * active theme. Only layout (margin, padding, spacing, focus indicator) is
 * defined here. Uses WordPress theme.json spacing presets with sensible
 * fallbacks when the theme does not expose them.
 *
 * @package CIS_AAFS
 */

.cis_accordion {
	color: inherit;
	font-family: inherit;
	margin: 0 0 var(--wp--preset--spacing--50, 2rem);
}

.cis_accordion__title {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
}

.cis_accordion__list {
	margin: 0;
	padding: 0;
}

.cis_accordion__question {
	margin: 0;
	padding: 0;
	font-weight: 600;
}

.cis_accordion__answer {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 0;
}

.cis_accordion__question + .cis_accordion__answer {
	margin-top: var(--wp--preset--spacing--20, 0.5rem);
}

.cis_accordion__answer > :first-child {
	margin-top: 0;
}

.cis_accordion__answer > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Collapsible variant — native <details>/<summary>
 *
 * Markup: parent renders a <div class="cis_accordion__list"> with one
 * <details class="cis_accordion__item"> per Q/A pair. Inside each item:
 * <summary class="cis_accordion__question"> + <div class="cis_accordion__answer">.
 * Zero JavaScript — the browser handles open/close and accessibility.
 * ---------------------------------------------------------------------- */

.cis_accordion--collapsible .cis_accordion__list {
	border-top: 1px solid currentColor;
	border-color: rgba(0, 0, 0, 0.12);
}

.cis_accordion--collapsible .cis_accordion__item {
	border-bottom: 1px solid currentColor;
	border-color: rgba(0, 0, 0, 0.12);
}

.cis_accordion--collapsible .cis_accordion__question {
	margin: 0;
	padding: var(--wp--preset--spacing--30, 0.75rem) 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none; /* Hide the default disclosure triangle. */

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
}

/* Safari (legacy) puts the disclosure triangle in ::-webkit-details-marker
 * rather than respecting list-style on summary. Hide it explicitly. */
.cis_accordion--collapsible .cis_accordion__question::-webkit-details-marker {
	display: none;
}

.cis_accordion--collapsible .cis_accordion__question::after {
	content: "+";
	flex-shrink: 0;
	line-height: 1;
	font-size: 1em;
	font-weight: 400;
	speak: none;
}

.cis_accordion--collapsible .cis_accordion__item[open] > .cis_accordion__question::after {
	content: "\2212"; /* Unicode minus */
}

.cis_accordion--collapsible .cis_accordion__question:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Replace the default outline with focus-visible where supported, so mouse
 * clicks don't show a focus ring while keyboard focus still does. */
.cis_accordion--collapsible .cis_accordion__question:focus:not(:focus-visible) {
	outline: none;
}

.cis_accordion--collapsible .cis_accordion__question:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cis_accordion--collapsible .cis_accordion__answer {
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--30, 0.75rem);
}

.cis_accordion--collapsible .cis_accordion__answer > :first-child {
	margin-top: 0;
}

.cis_accordion--collapsible .cis_accordion__answer > :last-child {
	margin-bottom: 0;
}