/*
	FAQ accordion — native <details>/<summary>, so expand/collapse, keyboard
	support and the correct screen-reader semantics come from the browser,
	not hand-rolled JS. The indicator is rd_icon('arrow') — currentColor,
	same icon Gallery's carousel arrows use (assets/icons/arrow.svg) —
	rather than a new icon drawn in CSS, and just rotates 180deg on [open].
*/

/*
	Drop Shadow (an optional per-instance toggle, template-gated to the
	default background only — see faqs.php's docblock) lifts the header +
	FAQ list off the page as its own floating card. This targets
	.faqs__layout, not .container or the <section> itself: the section
	spans the full page width (where a shadow/radius would mostly run off
	past the viewport edge), and .faqs__layout is the box that actually
	wraps just the visible content, so the shadow hugs that rather than
	the section's own full width. Needs no background-color of its own
	here since the default background it's shown on already matches the
	page behind it.

	--shadow (not --shadow-sm, team cards' own resting shadow) is
	deliberately a step up — "slightly larger" — since this is a page-level
	accent rather than one card among many. A flat 48px padding on every
	side insets the header/list content evenly regardless of Layout —
	two-column's own grid gap (below) still applies inside it unchanged.
*/
.flex-section--faqs.has-drop-shadow .faqs__layout {
	padding: 3rem; /* 48px */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

/* Icon sits to the left of the headline at desktop — stacked above it
   instead at mobile, see the media query below .faqs__icon img. */
.faqs__header-row {
	display: flex;
	align-items: center;
	gap: var(--space-5); /* 24px */
}

/*
	Same divider Card Grid's own header gets (card-grid.css's
	.card-grid-item__header) — 3px, accent background colour. Sits directly
	on the heading element itself (rd_render_heading()'s extra_class param,
	faqs.php), not a full-width rule on .faqs__header-row, so — same as
	Card Grid — it only spans the heading's own shrink-to-fit width inside
	the flex row, not the icon beside it or the row's full remaining width.
*/
.faqs__heading {
	padding-block-end: var(--space-2);
	border-block-end: 3px solid var(--color-accent-bg);
}

/*
	The icon is an uploaded image (SVG or raster — inc/svg-upload.php allows
	and sanitizes SVG), not an inline <svg>, so unlike a rd_icon() output it
	can't be tinted with currentColor: it renders in whatever colour the
	file itself was authored with. Sizing only, via the <img> this field
	actually renders.
*/
.faqs__icon {
	flex: none;
}

.faqs__icon img {
	display: block;
	width: 10rem; /* 160px */
	height: 10rem; /* 160px */
	object-fit: contain;
}

/*
	display: block turns .faqs__header-row's flex row into normal block
	flow, which is what actually stacks the icon above the heading — flex-
	only properties on that rule (align-items, gap) simply stop applying
	once it's no longer a flex container, so the icon needs a real
	margin-block-end of its own here instead; gap doesn't work for a
	block layout.
*/
@media (max-width: 47.99em) {
	.faqs__header-row {
		display: block;
	}

	.faqs__icon {
		margin-block-end: var(--space-2); /* 8px */
	}

	.faqs__icon img {
		width: 6rem; /* 96px */
		height: 6rem; /* 96px */
	}
}

/*
	Two-column layout when there's a header (icon/heading/text/button):
	.grid-2 already gives equal columns at >=48em (single column below it);
	this just widens its default 32px gap to the 80px this block wants. A
	header-less instance (or List) never gets the .grid-2 class (see
	faqs.php) — the gap set here simply has nothing to apply to, since
	.faqs__layout is then a plain block, not a grid; its FAQ list spans
	the full .container width either way, no longer condensed/centred the
	way it used to be.
*/
.faqs__layout {
	gap: var(--space-8) 5rem; /* 48px row gap (stacked), 80px column gap */
}

.faq-item {
	border-bottom: 1px solid var(--color-border);

	&:first-child {
		border-top: 1px solid var(--color-border);
	}
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	font-size: var(--font-size-4);
	font-weight: var(--font-weight-light);
	cursor: pointer;

	/* The native marker (default triangle, or a bullet in some browsers) is
	   replaced by the rotating arrow icon below, not left in place
	   alongside it. */
	list-style: none;

	&::-webkit-details-marker {
		display: none;
	}

	/* 2.75rem matches --carousel-arrow-size, the gallery carousel's own
	   arrow button size (assets/css/carousel.css) — that custom property is
	   scoped inside .splide, so it doesn't resolve here; this is the same
	   value written as a literal instead. */
	& svg {
		width: 2.75rem;
		height: 2.75rem;
		flex: none;
		transform: rotate(90deg);
		transition: transform var(--transition);
	}
}

@media (max-width: 47.99em) {
	.faq-item__question svg {
		width: 2rem;
		height: 2rem;
	}
}

/* Open keeps the same 180deg swing as before, just carried from the new
   90deg resting position (90 + 180 = 270) instead of 0. */
.faq-item[open] .faq-item__question svg {
	transform: rotate(270deg);
}

.faq-item__answer {
	padding-block-end: var(--space-5);

	/*
		font-size on the container alone doesn't reach the answer text: it's
		wrapped in <p> tags (WYSIWYG output), and base.css's global
		`p, li { font-size: var(--font-size-4) }` targets those directly —
		a rule that directly targets an element always wins over an inherited
		value from an ancestor, regardless of the ancestor's specificity. Has
		to override the <p>/<li> themselves, not just this wrapper.
	*/
	& :where(p, li) {
		font-size: var(--font-size-3);
	}
}