/*
 * patterns/faq.css — "FAQ"
 * Markup: wp-content/themes/fcs/patterns/faq.php
 * Root:   .fcs-faq
 *
 * Figma 10617:9938 (Preschool FAQs), a restyle of _Sections › Accordions
 * 3271:3306. Each question is a core/details block, so this file restyles
 * core's <details> rather than defining an accordion of its own.
 *
 * STRUCTURE
 * ---------
 *   .fcs-faq                  alignfull section, constrained to 856px
 *     .fcs-faq__eyebrow       optional
 *     .fcs-faq__heading       H2 — theme.json owns its look
 *     .fcs-faq__intro         optional
 *     .fcs-faq__list          the questions
 *       .wp-block-details     one white card per question
 *         summary             the question, H5 look, chevron on the right
 *         …                   the answer: any blocks
 *     .fcs-faq__actions       optional buttons
 *
 * Every piece but the list is optional, so all spacing is margin on the
 * element that follows, never a gap on the parent.
 *
 * MOBILE IS DERIVED. There is no mobile design for this section. The choices:
 *
 *   - the cards run full width inside the 20px section gutter
 *     (layout/spacing.css), which the 856px cap already does below 856px
 *   - card padding drops from 24px to 20px, and the question → chevron gap
 *     from 28px to 16px, so a 350px column keeps ~270px for the question
 *   - the question stays at the 18px H5 size — it is the tap target and the
 *     thing being scanned, and it wraps cleanly
 *
 * SECTION PADDING is not declared here at any size — Medium and Large belong to
 * the editor's Dimensions panel, Small is pinned in layout/spacing.css. See
 * CLAUDE.md § "Section padding".
 */

/* Stack ---------------------------------------------------------------- */

/*
 * theme.json heading margins and core's own block margins both beat a bare
 * child selector; the repeated class lifts this to (0,2,0) without !important —
 * the same fix as .fcs-tables.
 */
.fcs-faq.fcs-faq > * {
	margin-block: 0;
}

/* Figma Padding-MD: heading → intro. */
.fcs-faq.fcs-faq > * + * {
	margin-block-start: 20px;
}

/* Figma Padding-SM: the eyebrow sits 8px above its headline. */
.fcs-faq.fcs-faq > .fcs-faq__eyebrow + * {
	margin-block-start: 8px;
}

/* Figma Padding-XL: 40px between the copy and the questions, and after them. */
.fcs-faq.fcs-faq > .fcs-faq__list,
.fcs-faq.fcs-faq > .fcs-faq__list + * {
	margin-block-start: 40px;
}

.fcs-faq.fcs-faq > .fcs-faq__list:first-child {
	margin-block-start: 0;
}

/* Cards ---------------------------------------------------------------- */

.fcs-faq__list > * {
	margin-block: 0;
}

.fcs-faq__list > * + * {
	margin-block-start: 10px;
}

/*
 * 12px is the card radius used across the design (image-with-text.css,
 * multicolumn.css); theme.json's radius presets are 4 / 8 / 20, none of which
 * match.
 */
.fcs-faq .wp-block-details {
	padding: 20px;
	border-radius: 12px;
	background-color: var( --wp--preset--color--background );
}

/*
 * On a white section the white cards would vanish, so they take the light blue
 * instead — the same pair, swapped.
 */
.fcs-faq.has-background-background-color .wp-block-details {
	background-color: var( --wp--preset--color--surface );
}

/* Question ------------------------------------------------------------- */

/*
 * Figma "Typography/H5" — the same values as theme.json's h5 element. The
 * summary is not a heading (it can't hold one), so it has to restate them.
 */
.fcs-faq .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--h-5 );
	font-weight: 700;
	line-height: 1.556;
	letter-spacing: -0.2px;
	list-style: none;
	cursor: pointer;
}

.fcs-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/*
 * The chevron: Figma's 16px "Chevron Down" is the same path as the theme's
 * icon, filled #0071c2 — the link blue. Masked rather than an <img> so the
 * colour comes from a preset, and drawn once and rotated for the open state,
 * which is all Figma's up/down pair is.
 */
.fcs-faq .wp-block-details > summary::after {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: var( --wp--preset--color--link );
	-webkit-mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
	mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
	transition: transform var( --fcs-transition );
}

.fcs-faq .wp-block-details[open] > summary::after {
	transform: rotate( 180deg );
}

.fcs-faq .wp-block-details > summary:focus-visible {
	outline: 2px solid var( --wp--preset--color--link );
	outline-offset: 4px;
	border-radius: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	.fcs-faq .wp-block-details > summary::after {
		transition: none;
	}
}

/* Answer --------------------------------------------------------------- */

/* Figma: 12px from the question to the answer, paragraph type (16/24). */
.fcs-faq .wp-block-details > :not( summary ) {
	margin-block: 0;
	line-height: 1.5;
}

.fcs-faq .wp-block-details > summary + * {
	margin-block-start: 12px;
}

.fcs-faq .wp-block-details > :not( summary ) + * {
	margin-block-start: 12px;
}

.fcs-faq .wp-block-details ul,
.fcs-faq .wp-block-details ol {
	padding-inline-start: 1.5em;
}

/* Medium --------------------------------------------------------------- */

@media ( min-width: 768px ) {
	.fcs-faq .wp-block-details {
		padding: 24px;
	}

	.fcs-faq .wp-block-details > summary {
		gap: 28px;
	}
}