/* ==================================================
	FAQ ACCORDION - Mobile First
	Loaded only where the [pc_faq] shortcode is used.
================================================== */

.faq-section {
	background: var(--bg);
	padding-block: 3rem 4rem;
}

/* Counter keeps numbering correct when items are reordered */
.faq-list {
	counter-reset: faq;
	max-width: 50rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

.faq-item {
	background: var(--white);
	border-bottom: 0.0625rem solid var(--border);
}

.faq-item:first-child {
	border-top: 0.0625rem solid var(--border);
}

.faq-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--sans);
	transition: background 0.2s;
}

.faq-btn::before {
	counter-increment: faq;
	content: counter(faq) ".";
	flex-shrink: 0;
	width: 1.375rem;
	font-family: var(--serif);
	font-size: 0.875rem;
	font-style: italic;
	color: var(--gold);
}

.faq-btn:hover,
.faq-btn.open {
	background: var(--bg-warm);
}

.faq-btn:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: -0.125rem;
}

.faq-q {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--dark);
}

.faq-icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0.0625rem solid var(--border);
	border-radius: 50%;
	transition: border-color 0.2s, background 0.2s, transform 0.3s;
}

.faq-btn.open .faq-icon {
	border-color: var(--accent);
	background: var(--accent);
	transform: rotate(45deg);
}

.faq-icon svg {
	width: 0.75rem;
	height: 0.75rem;
	stroke: var(--muted);
	stroke-width: 2;
	fill: none;
}

.faq-btn.open .faq-icon svg {
	stroke: var(--white);
}

/* max-height is set by JS from the panel's real height */
.faq-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.faq-answer {
	padding: 0 1rem 1.125rem 2.75rem;
}

.faq-answer p {
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.85;
	color: var(--mid);
	margin-bottom: 0.75rem;
}

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

.faq-answer a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.faq-answer a:hover {
	color: var(--black);
}

/* ==================================================
	TABLET (min-width: 641px)
================================================== */

@media (min-width: 641px) {

	.faq-section {
		padding-block: 3.5rem 4.5rem;
	}

	.faq-btn {
		gap: 1rem;
		padding: 1.125rem 1.25rem;
	}

	.faq-q {
		font-size: 0.90625rem;
	}

	.faq-answer {
		padding: 0 1.25rem 1.25rem 3.25rem;
	}

	.faq-answer p {
		font-size: 0.90625rem;
	}

}

/* ==================================================
	DESKTOP (min-width: 901px)
================================================== */

@media (min-width: 901px) {

	.faq-section {
		padding-block: 4.5rem 5rem;
	}

	.faq-btn {
		gap: 1.25rem;
		padding: 1.375rem 1.75rem;
	}

	.faq-btn::before {
		font-size: 0.9375rem;
	}

	.faq-q {
		font-size: 0.9375rem;
	}

	.faq-answer {
		padding: 0 1.75rem 1.5rem 4.375rem;
	}

}

@media (prefers-reduced-motion: reduce) {

	.faq-body,
	.faq-icon {
		transition: none !important;
	}

}