@use "variables" as *;

// ===========================================================================
// FAQ accordion (page-faq.php, ACF repeater `faq_items`). Rows separated by
// thin rules; each row = Q badge + question + (+/-) toggle, with a collapsible
// answer animated via grid-template-rows 0fr → 1fr (JS toggles .is-open).
// ===========================================================================
.faq__item {
	border-top: 1px dashed $color-rule;

	&:last-child {
		border-bottom: 1px dashed $color-rule;
	}
}

// question row (button, full width)
.faq__q {
	display: flex;
	align-items: center;
	gap: rem(20);
	width: 100%;
	padding: rem(30) 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;

	@include sp {
		gap: rem(12);
	}
}

.faq__icon {
	flex-shrink: 0;
	width: rem(32);
	height: rem(32);
	border-radius: 50%;
	background: #d2d83e;
	color: $color-white;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(18);
	line-height: rem(30); // optical vertical-centre for the single glyph
	text-align: center; // horizontal-centre
}

.faq__question {
	flex: 1;
	min-width: 0;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.6;
	color: $color-green;

	@include sp {
		font-size: rem(16);
	}
}

// +/- toggle (CSS shapes, no glyphs). Open state drops the vertical bar → "−".
.faq__toggle {
	position: relative;
	flex-shrink: 0;
	width: rem(20);
	height: rem(20);

	&::before,
	&::after {
		content: "";
		position: absolute;
		background: $color-green;
		transition: opacity 0.3s, transform 0.3s;
	}

	&::before {
		left: 0;
		top: 50%;
		width: 100%;
		height: rem(3);
		transform: translateY(-50%);
	}

	&::after {
		left: 50%;
		top: 0;
		width: rem(3);
		height: 100%;
		transform: translateX(-50%);
	}
}

.faq__item.is-open .faq__toggle::after {
	opacity: 0; // becomes a minus
}

// collapsible answer (grid 0fr → 1fr)
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.faq__item.is-open .faq__a {
	grid-template-rows: 1fr;
}

.faq__a-inner {
	overflow: hidden; // clips the body while the row is collapsed
}

.faq__a-body {
	padding-bottom: rem(24);
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;

	> :first-child {
		margin-top: 0;
	}

	p + p {
		margin-top: 1em;
	}
}

.faq__empty {
	padding-block: rem(24);
	color: $color-text;
}