/**
 * Accordion: accordion/FAQ (1598:48363).
 *
 * White card, 1px light border, 16px corners, 20px padding, 16/21 SemiBold
 * question and a 24px down arrow. Built on <details>/<summary>, so it works
 * without JavaScript.
 *
 * Applies to .accordion (FAQ section) and to the core Details block inside
 * editor content.
 */

.accordion,
.entry-content details {
	background-color: var(--color-background-white);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-16);
}

.accordion > summary,
.entry-content details > summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem;
	font: var(--type-subtitle-l);
	color: var(--color-text-dark);
	cursor: pointer;
	list-style: none;
}

.accordion > summary::-webkit-details-marker,
.entry-content details > summary::-webkit-details-marker {
	display: none;
}

/* icon/arrow-down, 24px */
.accordion > summary::after,
.entry-content details > summary::after {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	content: "";
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-down-24.svg") no-repeat center / contain;
	mask: url("../icons/arrow-down-24.svg") no-repeat center / contain;
	transition: transform 0.15s ease;
}

.accordion[open] > summary::after,
.entry-content details[open] > summary::after {
	transform: rotate(180deg);
}

/* Answer area. Not in the frame (only the closed state is drawn): body/S,
 * aligned with the question. */
.accordion > :not(summary),
.entry-content details > :not(summary) {
	padding-inline: 1.25rem;
}

.accordion > :not(summary):last-child,
.entry-content details > :not(summary):last-child {
	padding-bottom: 1.25rem;
}

.entry-content details > summary + * {
	margin-top: 0;
}

/* list/faq: accordions 16px apart (parts/components/faq-list.php). */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}