/*
 * Shared accordion — the card stack with one panel open at a time.
 *
 * Extracted from blocks/faq/ so faq and faq-groups render the same control from
 * one source. The host IS the list: there is no separate wrapper element, which
 * is what lets a consumer place several independent accordions on one page and
 * have single-open scope to each of them.
 *
 * Every selector is scoped to .wsc-accordion. Tokens only. No !important.
 *
 * The open/close animation is a grid-template-rows 1fr→0fr transition with an
 * overflow-hidden inner wrapper — no fixed max-height to guess. Panels are OPEN
 * by default so a no-JS page never hides an answer; ui-accordion.js adds
 * .is-enhanced to the host, which is what switches on both the collapsing of
 * closed items and the transition.
 */

.wsc-accordion {
	/*
	 * The card's padding, as tokens rather than literals, because the question
	 * button's click overlay has to blow itself out by exactly this much to reach
	 * the card edges. Hard-coded copies would drift apart silently — the overlay
	 * would just stop short of the border with nothing to flag it.
	 *
	 * Two axes, because the card is not square-padded: 32px at the sides, 24px
	 * top and bottom. A single value would push the overlay past the left and
	 * right borders or leave it short of them.
	 */
	--wsc-accordion-card-padding-inline: var(--wp--preset--spacing--50); /* 32px */
	--wsc-accordion-card-padding-block: var(--wp--preset--spacing--40); /* 24px */

	/*
	 * The question-to-answer gap, tokenised for the same reason: it is the
	 * furthest the overlay may reach down an OPEN card before it starts covering
	 * the first line of the answer.
	 */
	--wsc-accordion-answer-gap: var(--wp--preset--spacing--40); /* 24px */

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10); /* 8px between cards */
}

/* Each item is a white card on whatever band the consumer paints. */
.wsc-accordion__item {
	padding: var(--wsc-accordion-card-padding-block) var(--wsc-accordion-card-padding-inline); /* 24px 32px */
	border: 1px solid var(--wp--preset--color--border); /* #ddd */
	border-radius: var(--wp--custom--radius--md); /* 24px */
	background-color: var(--wp--preset--color--bg); /* white */
}

.wsc-accordion__heading {
	margin-block: 0;
}

/*
 * The header is a full-width button so the whole row is the hit target and the
 * keyboard gets Enter/Space for free. Reset the native button chrome; the
 * heading metrics come from the theme's heading scale applied to the label span.
 */
.wsc-accordion__q {
	position: relative; /* load-bearing: the containing block for ::before below */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40); /* 24px */
	width: 100%;
	padding: 0; /* the card supplies the padding */
	border: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	text-align: start;
	cursor: pointer;
}

/*
 * Stretches the toggle's hit area out to the card edges — the features slider's
 * overlay technique, anchored differently.
 *
 * There the overlay is absolutely positioned against the CARD with inset: 0, so
 * it covers the lot. Here it is positioned against the BUTTON and pushed back
 * out, which is what lets the bottom edge stop short of the answer:
 *
 * - Top and sides: one card padding, landing exactly on the card's inner edges.
 * - Bottom: only as far as the question-to-answer gap. Any further and it covers
 *   the first line of the answer — which is WYSIWYG rich text, so it can hold
 *   links, and people copy from it. Neither is true of the slider's fixed copy,
 *   which is why that block can afford a blanket inset: 0.
 *
 * Stopping there also matches the accordion convention that clicking an answer
 * does not collapse it.
 *
 * Because the overlay is part of the button, :hover over the whole card lights
 * the question colour and carries the pointer cursor, both for free.
 *
 * No ancestor clips it: .wsc-accordion__a-inner is the only overflow: hidden in
 * the component and the button is not inside it.
 */
.wsc-accordion__q::before {
	content: '';
	position: absolute;
	inset-inline: calc(var(--wsc-accordion-card-padding-inline) * -1);
	inset-block-start: calc(var(--wsc-accordion-card-padding-block) * -1);
	inset-block-end: calc(var(--wsc-accordion-answer-gap) * -1);
}

.wsc-accordion__q-text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem; /* 16px — the design's H5 metrics on the question */
	font-weight: 600;
	line-height: 1.25; /* 20/16 */
	letter-spacing: 0.02em; /* 0.32px */
	transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.wsc-accordion__q:hover .wsc-accordion__q-text,
.wsc-accordion__q:focus-visible .wsc-accordion__q-text {
	color: var(--wp--preset--color--primary);
}

.wsc-accordion__icon {
	flex: none;
	width: 1.125rem; /* 18px */
	height: auto;
	color: var(--wp--preset--color--ink-soft);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* The caret points up when open; flips to point down while the item is closed. */
.wsc-accordion__item:not(.is-open) .wsc-accordion__icon {
	transform: rotate(180deg);
}

/*
 * The panel. display:grid with a single row track that animates from 1fr (open)
 * to 0fr (closed); the inner wrapper's overflow:hidden clips the content as the
 * track collapses. min-height:0 on the wrapper is what lets a grid item actually
 * shrink below its content height.
 */
.wsc-accordion__a {
	display: grid;
	grid-template-rows: 1fr; /* open by default — no-JS pages show every answer */
}

.wsc-accordion__a-inner {
	overflow: hidden;
	min-height: 0;
}

/*
 * Top padding is the header-to-answer gap; it lives on the content so it
 * collapses away with the panel. The card's own padding closes the bottom.
 *
 * Reads the same token the overlay does rather than restating the value. These
 * two ARE the same measurement — the distance from the button to the first line
 * of the answer — so stating it twice is how they drift, and a drift here means
 * the overlay silently starts covering copy people select and click links in.
 */
.wsc-accordion__a-content {
	padding-block-start: var(--wsc-accordion-answer-gap); /* 24px */
	color: var(--wp--preset--color--ink-soft);
}

.wsc-accordion__a-content > :first-child {
	margin-block-start: 0;
}

.wsc-accordion__a-content > :last-child {
	margin-block-end: 0;
}

/*
 * Enhanced state: JS has taken over, so closed items collapse and the change
 * animates. Without .is-enhanced none of this applies and all panels stay open.
 *
 * The class sits on the HOST, not on the consumer's section root, so each
 * accordion enhances independently — a page can hold several and each one's
 * collapsing is keyed off its own host.
 */
.wsc-accordion.is-enhanced .wsc-accordion__a {
	transition: grid-template-rows 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.wsc-accordion.is-enhanced .wsc-accordion__item:not(.is-open) .wsc-accordion__a {
	grid-template-rows: 0fr;
}

/*
 * A collapsed card has no answer left to protect — its track is 0fr, so button
 * plus padding IS the whole card — and the overlay can drop all the way to the
 * card's bottom edge. That makes the entire closed card one hit target, which is
 * the state where clicking anywhere is what a reader expects.
 *
 * Keyed off .is-enhanced with the rest of the collapsing, so it cannot fire on a
 * no-JS page where the panel below is still open and full of text.
 *
 * Currently a no-op, because the answer gap and the block padding happen to be
 * the same 24px — so the open-state overlay already reaches the card edge. Kept
 * rather than deleted: it states the rule (a closed card is one hit target) and
 * keeps holding if either token is retuned, which is exactly when a silently
 * missing rule would be hardest to spot.
 */
.wsc-accordion.is-enhanced .wsc-accordion__item:not(.is-open) .wsc-accordion__q::before {
	inset-block-end: calc(var(--wsc-accordion-card-padding-block) * -1);
}

/* Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wsc-accordion__q-text,
	.wsc-accordion__icon,
	.wsc-accordion.is-enhanced .wsc-accordion__a {
		transition: none;
	}
}