/* ==========================================================================
   FAQ page. Questions grouped under four headings, each opening in place.
   Works for both the plugin's FAQ store and hand-written <details> blocks.
   ========================================================================== */

.ql-view-faq .page-header { text-align: center; }
.ql-view-faq .page-header .page-lead { margin-inline: auto; }
.ql-view-faq .breadcrumbs ol { justify-content: center; }

.page-body--faq h2 {
	margin: 48px 0 12px;
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 12px;
}
.page-body--faq h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.page-body--faq .entry-content > h2:first-child { margin-top: 0; }

.page-body--faq details {
	margin: 0;
	border-bottom: 1px solid var(--line);
}
.page-body--faq details:first-of-type { border-top: 1px solid var(--line); }
.page-body--faq h2 + details { border-top: 1px solid var(--line); }
.page-body--faq summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 16px 4px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.05rem;
}
.page-body--faq summary::-webkit-details-marker { display: none; }
.page-body--faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--pop-text);
	transition: transform .2s ease;
}
.page-body--faq details[open] summary::after { transform: rotate(45deg); }
.page-body--faq summary:hover { color: var(--accent); }
.page-body--faq details > :not(summary) { margin: 0 4px; padding-bottom: 18px; color: var(--muted); }
.page-body--faq details p + p { margin-top: .6em; }