/**
 * [de_faq] accordion.
 *
 * Heading typography matches the site's existing h1/h2 (Raleway 700, tight
 * tracking, uppercase). Do NOT drop the font-family and rely on inheritance:
 * Blocksy's default heading family is the serif Merriweather, so an unstyled
 * h2 renders in serif against a page whose other headings are Raleway.
 */

.de-faq {
	--de-faq-ink: #202124;
	--de-faq-muted: #5f6368;
	--de-faq-line: #e6e8eb;

	max-width: 820px;
	margin: 0 auto;
	padding: 0 16px;
	width: 100%;
	box-sizing: border-box;
}

.de-faq-title {
	margin: 0 0 24px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(24px, 3vw, 40px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--de-faq-ink);
}

.de-faq-list { border-top: 1px solid var(--de-faq-line); }

.de-faq-item { border-bottom: 1px solid var(--de-faq-line); }

/* summary carries the click target and the keyboard focus for free, which is
   why this is <details> rather than a JavaScript accordion. */
.de-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 4px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--de-faq-ink);
}

/* Hide the native disclosure triangle in both engines. */
.de-faq-q::-webkit-details-marker { display: none; }
.de-faq-q::marker { content: ""; }

.de-faq-q:hover { color: var(--theme-palette-color-1, #f78f1e); }

/* :focus-visible, NOT :focus-within.
 *
 * :focus-within fired on mouse clicks too, so every opened question drew an
 * orange ring the moment it was clicked, which read as a highlight rather than
 * a focus indicator.
 *
 * :focus-visible is the browser's own judgement about whether the user is
 * navigating by keyboard. Mouse users now see nothing; keyboard users still get
 * a visible focus ring, which is a WCAG requirement and must not simply be
 * deleted. */
.de-faq-q:focus-visible {
	outline: 2px solid var(--theme-palette-color-1, #f78f1e);
	outline-offset: 2px;
	border-radius: 4px;
}

.de-faq-chev {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--de-faq-muted);
	transition: transform .18s ease;
}

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

.de-faq-a {
	padding: 0 4px 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--de-faq-muted);
}

.de-faq-a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.de-faq-chev { transition: none; }
}

@media (max-width: 767px) {
	.de-faq-q { font-size: 16px; padding: 16px 2px; }
	.de-faq-a { font-size: 15px; padding-bottom: 18px; }
}