/**
 * Foundation Right Pro - FAQ page
 * Intro copy, jump-to-topic nav, and the category / accordion list.
 *
 * The page banner and CTA banner reuse page-banner.css and about.css
 * (loaded alongside this file), so only the FAQ-specific markup is styled
 * here.
 */

/* ==========================================================================
   1. Intro
   ========================================================================== */

.frp-faq-intro {
	margin-top: var(--frp-space-3);
	font-size: var(--frp-fs-lead);
	line-height: var(--frp-lh-loose);
}

/* ==========================================================================
   2. Jump-to-topic nav
   ========================================================================== */

.frp-faq-toc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--frp-space-3);
	margin-bottom: var(--frp-space-12);
}

.frp-faq-toc__link {
	padding: 10px 20px;
	border: 1.5px solid var(--frp-grey-100);
	border-radius: var(--frp-radius-pill);
	color: var(--frp-ink);
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
}

.frp-faq-toc__link:hover,
.frp-faq-toc__link:focus {
	border-color: var(--frp-maroon);
	color: var(--frp-maroon);
}

/* ==========================================================================
   3. Category groups
   ========================================================================== */

.frp-faq-category {
	scroll-margin-top: calc(var(--frp-header-height) + var(--frp-space-6));
}

.frp-faq-category + .frp-faq-category {
	margin-top: var(--frp-space-12);
}

.frp-faq-category__title {
	margin-bottom: var(--frp-space-5);
	font-size: var(--frp-fs-h3);
}

.frp-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--frp-space-3);
}

/* ==========================================================================
   4. Accordion items (native <details>/<summary>)
   ========================================================================== */

.frp-faq-item {
	border: 1.5px solid var(--frp-grey-100);
	border-radius: var(--frp-radius-md);
	background: var(--frp-white);
	transition: border-color var(--frp-transition);
}

.frp-faq-item[open] {
	border-color: var(--frp-maroon);
}

.frp-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--frp-space-4);
	padding: var(--frp-space-5) var(--frp-space-6);
	color: var(--frp-ink);
	font-weight: var(--frp-fw-semibold);
	cursor: pointer;
	list-style: none;
}

.frp-faq-item__question::-webkit-details-marker {
	display: none;
}

.frp-faq-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: var(--frp-radius-circle);
	background: var(--frp-maroon-10);
	color: var(--frp-maroon);
	transition: transform var(--frp-transition);
}

.frp-faq-item[open] .frp-faq-item__icon {
	transform: rotate(180deg);
}

.frp-faq-item__answer {
	padding: 0 var(--frp-space-6) var(--frp-space-6);
	color: var(--frp-grey-500);
	font-size: var(--frp-fs-sm);
	line-height: var(--frp-lh-snug);
}

.frp-faq-item__answer > * + * {
	margin-top: var(--frp-space-3);
}