/* ========================================================================== *
 * # Accordion (native <details>)
 * ==========================================================================
 * <details class="accordion" name="faq"><summary>Question</summary><div class="accordion-body">…</div></details>
 * The shared name makes it exclusive in browsers that support it; others still work one at a time.
 * ========================================================================== */

.accordion {
	border-bottom: var(--border-width) solid var(--line-2);

	& summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-100);
		min-height: 64px;
		padding: var(--space-100) 0;
		font-size: var(--h3);
		font-weight: 600;
		cursor: pointer;

		&::after {
			content: "+";
			flex: none;
			font-size: 24px;
			font-weight: 400;
			line-height: 1;
			color: var(--pri);
			transition: transform var(--transition-speed) var(--transition-ease);
		}
	}

	&[open] summary::after {
		transform: rotate(45deg);
	}

	& .accordion-body {
		display: flex;
		flex-direction: column;
		gap: var(--space-75);
		padding-bottom: var(--space-150);
		color: var(--muted);
		max-width: var(--measure);
	}
}