/**
 * Accordion block – front-end styles.
 *
 * Uses native <details>/<summary> — no JavaScript required.
 *
 * @package wuppi-blocks
 */

.wuppi-accordion {
	display: flex;
	flex-direction: column;
}

/* ── Item ────────────────────────────────────────────────────────────────── */

.wuppi-accordion__item {
	border-bottom: 1px solid var(--wp--preset--color--base-3, #e5e5e3);
}

.wuppi-accordion__item:first-child {
	border-top: 1px solid var(--wp--preset--color--base-3, #e5e5e3);
}

/* ── Summary / question ──────────────────────────────────────────────────── */

.wuppi-accordion__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Remove default disclosure triangle in all browsers. */
.wuppi-accordion__question::-webkit-details-marker,
.wuppi-accordion__question::marker {
	display: none;
	content: '';
}

/* Custom +/× indicator. */
.wuppi-accordion__question::after {
	content: '+';
	font-size: 1.25em;
	font-weight: 300;
	line-height: 1;
	flex-shrink: 0;
	margin-left: 1em;
	transition: transform 0.2s ease;
}

.wuppi-accordion__item[open] > .wuppi-accordion__question::after {
	transform: rotate( 45deg );
}

/* ── Answer ──────────────────────────────────────────────────────────────── */

.wuppi-accordion__answer {
	padding-bottom: 1.25em;
}

.wuppi-accordion__answer > *:first-child { margin-top: 0; }
.wuppi-accordion__answer > *:last-child  { margin-bottom: 0; }