/**
 * miraigo/faq
 *
 * No JavaScript (see render.php docblock): `<details>`/`<summary>` gives
 * keyboard support, focus and the expanded/collapsed announcement for
 * free. This stylesheet only removes the native disclosure triangle and
 * replaces it with the red circle + plus toggle every row uses, rotated 45°
 * open so the plus reads as a close "×".
 */

.wp-block-miraigo-faq,
.faq {
	display: flex;
	flex-direction: column;
}

/*
 * The question rows and their divider lines are ~1138px wide, narrower than
 * the shared 1470px contentSize `parts/faq.html`'s wrapping "constrained"
 * group centres this block in, so the width is set here. `div.wp-block-miraigo-faq`
 * (element + class, specificity 0,1,1) is required rather than the bare
 * class alone: it ties with core's own `.is-layout-constrained > :where(...)`
 * child-width rule (`:where()` contributes zero) and loses that tie, since
 * global-styles-inline-css loads after this file — same specificity
 * shape as `assets/css/blocks/core-heading.css`.
 */
div.wp-block-miraigo-faq {
	max-width: var(--wp--custom--width--faq);
	margin-inline: auto;
}

.faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq__item {
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-default);
}

.faq__item:first-child {
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-default);
}

.faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	cursor: pointer;
	list-style: none;
}

.faq__summary::-webkit-details-marker {
	display: none;
}

.faq__summary::marker {
	content: "";
}

.faq__summary:focus-visible {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

.faq__question {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
}

.faq__icon {
	flex-shrink: 0;
	width: var(--wp--preset--spacing--35);
	height: var(--wp--preset--spacing--35);
	transition: transform var(--wp--custom--transition--base);
}

.faq__details[open] .faq__icon {
	transform: rotate(45deg);
}

@media (min-width: 768px) {

	.faq__icon {
		width: var(--wp--preset--spacing--45);
		height: var(--wp--preset--spacing--45);
	}
}

.faq__answer {
	margin: 0;
	padding-block-end: var(--wp--preset--spacing--30);
}

.faq__answer p,
.faq__answer ol,
.faq__answer ul {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--text-secondary);
}

/* Library answers can run to several paragraphs and a list; :is() outranks the reset above. */
.faq__answer > :is(p, ol, ul) + :is(p, ol, ul) {
	margin-block-start: var(--wp--preset--spacing--25);
}

.faq__answer ol,
.faq__answer ul {
	padding-inline-start: var(--wp--preset--spacing--35);
}

.faq__answer strong {
	color: var(--wp--preset--color--text-primary);
}

/*
 * `layout: grouped` (/preguntas-frecuentes/): search and topic filters on
 * top, then one section per topic.
 */
.faq--grouped {
	gap: var(--wp--preset--spacing--55);
}

.faq__toolbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--35);
}

.faq__toolbar[hidden],
.faq__group[hidden],
.faq__item[hidden],
.faq__empty:empty {
	display: none;
}

.faq__search {
	inline-size: 100%;
	max-inline-size: var(--wp--custom--width--measure);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--35);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--background-primary);
	color: var(--wp--preset--color--text-primary);
	font: inherit;
	font-size: var(--wp--preset--font-size--body-md);
}

.faq__search::placeholder {
	color: var(--wp--preset--color--text-secondary);
}

.faq__search:focus-visible {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

.faq__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.faq__filter {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--35);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--background-primary);
	color: var(--wp--preset--color--text-primary);
	font: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	cursor: pointer;
}

.faq__filter:hover {
	border-color: var(--wp--preset--color--border-strong);
}

.faq__filter[aria-pressed="true"] {
	border-color: var(--wp--preset--color--background-inverse);
	background: var(--wp--preset--color--background-inverse);
	color: var(--wp--preset--color--text-inverse);
}

.faq__filter:focus-visible {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

.faq__group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--35);
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

.faq__group-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
	color: var(--wp--preset--color--text-primary);
}

.faq__empty {
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--text-secondary);
}

/*
 * Animated open/close, still with no JavaScript: `::details-content` is the
 * box the browser already wraps a <details>' children in, and
 * `interpolate-size: allow-keywords` is what makes `block-size: auto`
 * animatable. `content-visibility` needs `allow-discrete` or the content
 * would pop in at frame 0 instead of being revealed by the growing box.
 *
 * Progressive enhancement in both directions, which is why it needs no
 * support query: an engine without `::details-content` ignores the whole
 * rule and keeps today's instant toggle, and one that has it but not
 * `interpolate-size` reads `0` -> `auto` as a non-interpolable pair and
 * also snaps. Neither can leave a panel stuck shut, because the closed
 * `block-size: 0` matches what the element does natively anyway.
 *
 * `interpolate-size` is inherited, so it is set on the block root rather
 * than on :root — a global opt-in would quietly change how every other
 * auto-sized transition in the theme behaves.
 */
@media (prefers-reduced-motion: no-preference) {

	.faq {
		interpolate-size: allow-keywords;
	}

	.faq__details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size var(--wp--custom--transition--expand),
			content-visibility var(--wp--custom--transition--expand) allow-discrete;
	}

	.faq__details[open]::details-content {
		block-size: auto;
	}
}