/*
 * Lifeboat – FAQ Rescue — accordion styling.
 *
 * Progressive enhancement: every rule that visually hides an answer is
 * scoped under `.lifeboat-faq-rescue-list.lfr-faq--enhanced`, the
 * marker class lifeboat-faq-rescue.js applies only after it has successfully
 * initialized an instance. With JS absent/blocked/failed, none of
 * these rules apply and every answer stays visible in normal flow —
 * see docs/phase-4f.md "Progressive enhancement model".
 *
 * All selectors are scoped under .lifeboat-faq-rescue-list so nothing
 * here can leak into theme styles.
 */

.lifeboat-faq-rescue-list {
	--lfr-transition: 300ms;
}

.lifeboat-faq-rescue-list .lifeboat-faq-rescue-question {
	margin: 0;
}

.lifeboat-faq-rescue-list .lifeboat-faq-rescue-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	padding: 0.6em 0.2em;
	margin: 0;
	background: none;
	border: none;
	border-block-end: 1px solid rgba(0, 0, 0, 0.15);
	font: inherit;
	font-weight: 600;
	text-align: start;
	color: inherit;
	cursor: pointer;
}

.lifeboat-faq-rescue-list .lifeboat-faq-rescue-toggle:focus {
	outline: 2px solid #1e6fd9;
	outline-offset: 2px;
}

.lifeboat-faq-rescue-list .lifeboat-faq-rescue-toggle:focus:not(:focus-visible) {
	outline: none;
}

.lifeboat-faq-rescue-list .lifeboat-faq-rescue-toggle:focus-visible {
	outline: 2px solid #1e6fd9;
	outline-offset: 2px;
}

/* Decorative disclosure indicator. aria-expanded on the button remains
 * the authoritative state; this is aria-hidden and purely visual. A
 * chevron built from CSS borders, rotated via transform — reads
 * sensibly under dir="rtl" because rotation isn't a left/right glyph
 * swap. */
.lifeboat-faq-rescue-list .lifeboat-faq-rescue-indicator {
	flex: none;
	inline-size: 0.5em;
	block-size: 0.5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--lfr-transition) ease;
	margin-inline-start: 0.5em;
}

.lifeboat-faq-rescue-list .lifeboat-faq-rescue-toggle[aria-expanded="false"] .lifeboat-faq-rescue-indicator {
	transform: rotate(-45deg);
}

.lifeboat-faq-rescue-list .lifeboat-faq-rescue-answer {
	padding-block: 0.6em;
	padding-inline: 0.2em;
}

/* Collapse behaviour only ever applies once JS has enhanced the
 * instance AND has set aria-expanded="false" on the corresponding
 * button — never from static server-rendered classes alone. */
.lifeboat-faq-rescue-list.lfr-faq--enhanced .lifeboat-faq-rescue-answer {
	overflow: hidden;
	transition: grid-template-rows var(--lfr-transition) ease;
	display: grid;
	grid-template-rows: 1fr;
	/* An answer can contain more than one top-level element (e.g. a
	 * paragraph followed by a list) — those extra elements land in
	 * implicit grid rows that grid-template-rows alone does not size,
	 * so grid-auto-rows must collapse/expand them too. */
	grid-auto-rows: 1fr;
}

.lifeboat-faq-rescue-list.lfr-faq--enhanced .lifeboat-faq-rescue-answer > * {
	min-block-size: 0;
	overflow: hidden;
}

.lifeboat-faq-rescue-list.lfr-faq--enhanced .lifeboat-faq-rescue-answer.lfr-faq-answer--collapsed {
	grid-template-rows: 0fr;
	grid-auto-rows: 0fr;
	padding-block: 0;
}

@media (prefers-reduced-motion: reduce) {
	.lifeboat-faq-rescue-list .lifeboat-faq-rescue-indicator,
	.lifeboat-faq-rescue-list.lfr-faq--enhanced .lifeboat-faq-rescue-answer {
		transition-duration: 1ms;
	}
}