/* faq-block.css — FAQ accordion block component
 *
 * HTML: .faq-block > .container >
 *   .faq-block__heading (h2, optional)
 *   .faq-block__list[role="list"] >
 *     .faq-block__item[role="listitem"] >
 *       button.faq-block__question[aria-expanded][aria-controls]
 *         span (question text)
 *         span.faq-block__icon (visual indicator)
 *       div.faq-block__answer[id][hidden] >
 *         div.faq-block__answer-inner
 *
 * JS behavior: faq-accordion.js toggles aria-expanded and hidden.
 */

/* ─── Section wrapper ───────────────────────────────────── */

.faq-block {
	padding: var(--space-xl) 0;
	background-color: var(--white);
}

/* Alternating background on community pages (managed per-section) */
.faq-block + .faq-block {
	padding-top: 0;
}

/* ─── Section heading ───────────────────────────────────── */

.faq-block__heading {
	font-family: var(--font-serif);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 2rem;
}

/* ─── List ──────────────────────────────────────────────── */

.faq-block__list {
	border-top: 1px solid var(--cream-dark);
}

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

.faq-block__item {
	border-bottom: 1px solid var(--cream-dark);
}

/* ─── Question button ───────────────────────────────────── */

.faq-block__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.25rem 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	gap: 1.5rem;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 400;
	color: var(--charcoal);
	line-height: 1.5;
	transition: color var(--transition-base);
}

.faq-block__question:hover {
	color: var(--green);
}

.faq-block__question[aria-expanded="true"] {
	color: var(--green);
}

/* ─── Icon (plus / minus indicator) ────────────────────── */

.faq-block__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: 1px solid var(--cream-dark);
	color: var(--muted);
	position: relative;
	transition: border-color var(--transition-base),
	            color var(--transition-base),
	            transform var(--transition-base);
}

/* Horizontal bar of + icon */
.faq-block__icon::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 1.5px;
	background-color: currentColor;
}

/* Vertical bar of + icon — hidden when expanded */
.faq-block__icon::after {
	content: '';
	position: absolute;
	width: 1.5px;
	height: 10px;
	background-color: currentColor;
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.faq-block__question[aria-expanded="true"] .faq-block__icon {
	border-color: var(--gold);
	color: var(--gold);
	transform: rotate(45deg);
}

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

.faq-block__answer {
	overflow: hidden;
}

/* [hidden] attribute collapses the panel; JS toggles this */
.faq-block__answer[hidden] {
	display: none;
}

.faq-block__answer-inner {
	padding: 0 0 1.25rem;
}

.faq-block__answer-inner p {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.75;
	margin-bottom: 0.75em;
}

.faq-block__answer-inner p:last-child {
	margin-bottom: 0;
}

.faq-block__answer-inner a {
	color: var(--green);
	text-decoration: underline;
}

.faq-block__answer-inner a:hover {
	color: var(--gold);
}

/* ─── FAQ page group context ────────────────────────────── */

/* Used on page-faq.php — groups with headings between them */
.faq-page__group {
	margin-bottom: var(--space-lg);
}

.faq-page__group:last-child {
	margin-bottom: 0;
}

.faq-page__group-heading {
	font-family: var(--font-serif);
	font-size: clamp(22px, 2.5vw, 32px);
	font-weight: 600;
	color: var(--green-dark);
	margin-bottom: 1.5rem;
}

/* ─── Responsive ────────────────────────────────────────── */

@media ( max-width: 640px ) {

	.faq-block {
		padding: var(--space-lg) 0;
	}

	.faq-block__question {
		font-size: 14px;
	}
}