/**
 * Pattern: Accordion  (patterns/accordion.php)
 *
 * FAQ rows separated by hairlines — NOT cards. Interaction shape: a full-width
 * question row, a circular chevron button pinned right that inverts when open,
 * and the question itself taking the link colour while its panel is open.
 * Deliberately NO card (no panel background, border, radius or shadow — the
 * rows are separated by a single rule instead).
 *
 * Built on core/details (<details>/<summary>), NOT a custom JS widget. It stays
 * native so keyboard
 * operation, screen-reader semantics, find-in-page expansion and the open state
 * keep coming free from the browser, and the pattern stays editable in the Site
 * Editor. Everything below is presentation only — no JS was added.
 *
 * NOT to be confused with assets/css/patterns/collapsible.css — that is a
 * "show more" pill-button utility (one toggle revealing hidden content, driven
 * by assets/js/collapsible.js). Different component, different job; it does not
 * give you per-item headers.
 *
 * All values alias tokens — including the chevron, which is a masked inline SVG
 * tinted with `background-color` rather than an SVG with a baked-in fill, so it
 * recolours with the palette and needs no asset. That masking is also why the
 * ring and the glyph are two pseudo-elements: `mask` turns the whole box into
 * the glyph shape, so a single pseudo cannot be both a bordered circle AND a
 * chevron without hardcoding a hex inside a data URI.
 */

/* Why there is NO `display` declaration on .kd-accordion.
 *
 * The pattern's wrapper is a core group, so it renders `is-layout-constrained`,
 * and core's constrained rule is
 *   `.is-layout-constrained > :where(:not(.align*)) { margin-inline: auto !important }`
 * On a BLOCK child that is core's normal centring and resolves to 0 either side
 * once the child fills the content width. On a FLEX ITEM, auto inline margins
 * instead absorb the line's free space, so every card shrank to the width of its
 * own summary text — measured 287 / 292 / 918 / 337 / 367px inside a 1220px
 * wrapper, each with a resolved `margin-left: 466px`. The cards read as randomly
 * sized pills floating down the middle of the page.
 *
 * `!important` means a `margin-inline: 0` reset cannot win on specificity, and
 * out-shouting core here would be a cover-up: the layout only ever needed block
 * flow plus vertical spacing. So there is deliberately NO `display` declaration
 * here — the group's own layout type governs, and declaring `display: block`
 * would additionally defeat `.is-layout-flex`/`.is-layout-grid` if an editor
 * ever switched the group's layout in the Site Editor.
 * Verified by reading the matched CSS rules, not guessing.
 */

/* One source for the chevron button's diameter. The glyph size, its inset, and
   the body's right-hand reservation are all derived from it, so resizing the
   button can't leave those three silently out of step. Pattern-scoped, so this
   is not a shared-file edit. */
.kd-accordion {
	--kd-accordion-chevron: 2.25rem;
}

/* Rows sit flush against each other so the separating rule reads as one
   hairline between two rows, not a line floating in a gap. This has to be an
   explicit rule rather than an omission: without it the per-container
   `.wp-container-core-group-is-layout-N > * + *` rule (0,1,0) applies core's
   block gap. Scoped to row-to-row: a heading or intro paragraph dropped into
   the group keeps core's normal rhythm rather than being jammed flush against
   the row below it. */
.kd-accordion > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

/* ── The row ─────────────────────────────────────────────────────────────── */

/* Direct children only. A `<details>` nested INSIDE an open panel is not a row
   of this accordion and must not get the separating rule. */
.kd-accordion > .wp-block-details {
	padding: 0;
	border-block-end: 1px solid var(--kd-color-tint);
}

/* Separators go BETWEEN rows: no trailing rule under the last one, so the
   stack ends on content rather than on a line with nothing beneath it.
   `:last-of-type`, not `:last-child` — an editor appending a paragraph after
   the final row would otherwise leave that row's rule in place. */
.kd-accordion > .wp-block-details:last-of-type {
	border-block-end: 0;
}

/* ── The clickable header row ────────────────────────────────────────────── */

.kd-accordion .wp-block-details > summary {
	position: relative; /* positioning context for the chevron glyph */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kd-space-md);
	padding-block: var(--kd-space-md);
	padding-inline: 0; /* no card, so the question aligns to the content edge */
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body-lg);
	font-weight: 700;
	color: var(--kd-color-contrast);
	cursor: pointer;
	list-style: none; /* Firefox */
}

/* Remove the UA disclosure triangle so the chevron below is the only marker. */
.kd-accordion .wp-block-details > summary::-webkit-details-marker,
.kd-accordion .wp-block-details > summary::marker {
	display: none;
	content: "";
}

.kd-accordion .wp-block-details > summary:hover {
	/* Link colour, not primary: 18px bold text on white needs 4.5:1 and the
	   brand primary is 3.81:1. */
	color: var(--kd-color-link);
}

/* The open row's question takes the link colour — the thing that replaces the card as the "this one is open" signal now that there
   is no panel background to carry it. */
.kd-accordion .wp-block-details[open] > summary {
	color: var(--kd-color-link);
}

/* Keyboard focus — the summary IS the control, so the ring belongs here. */
.kd-accordion .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--kd-color-accent-1);
	outline-offset: 2px;
	border-radius: var(--kd-radius-sm);
}

/* ── Chevron button ──────────────────────────────────────────────────────── */

/* The ring. In flow as the summary's last flex item, so it reserves its own
   column and the question text wraps against it rather than under it. */
.kd-accordion .wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	inline-size: var(--kd-accordion-chevron);
	block-size: var(--kd-accordion-chevron);
	border: 2px solid var(--kd-color-primary);
	border-radius: var(--kd-radius-pill);
	background-color: transparent;
	transition: background-color var(--kd-transition-base);
}

/* The glyph, absolutely positioned over the ring — see the file header for why
   it can't share one pseudo-element with it.
   Centring: global.css's reset includes `*::before, *::after`, so the ring is
   BORDER-box — its 2px border sits inside the 2.25rem (36px), and the ring's centre is
   18px from the summary's inline end. A half-size glyph therefore insets by a
   quarter of the diameter: (36 - 18) / 2 = 9px. Both are derived below so the
   arithmetic can't drift from the button size.
   Transform order matters: `translateY(-50%)` must stay the FIRST function in
   both states. CSS interpolates transform lists function-by-function only while
   one list is a prefix of the other, so `translateY` then `rotate` animates the
   rotation with the translate held constant. Reversing them forces matrix
   interpolation and the glyph swings on an arc instead of spinning in place. */
.kd-accordion .wp-block-details > summary::before {
	content: "";
	position: absolute;
	inset-inline-end: calc(var(--kd-accordion-chevron) / 4);
	inset-block-start: 50%;
	inline-size: calc(var(--kd-accordion-chevron) / 2);
	block-size: calc(var(--kd-accordion-chevron) / 2);
	background-color: var(--kd-color-primary);
	transform: translateY(-50%);
	transition:
		transform var(--kd-transition-slow),
		background-color var(--kd-transition-base);
	-webkit-mask: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 15.5 4.5 8l1.4-1.4L12 12.7l6.1-6.1L19.5 8z'/%3E%3C/svg%3E");
	mask: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 15.5 4.5 8l1.4-1.4L12 12.7l6.1-6.1L19.5 8z'/%3E%3C/svg%3E");
}

/* Open: the ring fills, the glyph inverts and flips. */
.kd-accordion .wp-block-details[open] > summary::after {
	background-color: var(--kd-color-primary);
}

.kd-accordion .wp-block-details[open] > summary::before {
	background-color: var(--kd-color-base);
	transform: translateY(-50%) rotate(180deg);
}

/* ── Body ────────────────────────────────────────────────────────────────── */

/* Aligned with the question (no inset — there is no card to inset from). The
   right-hand reservation is TYPOGRAPHIC, not collision avoidance: the ring is a
   flex item inside `summary` and the glyph is absolutely positioned against
   `summary`, so neither can ever overlap a body paragraph. It exists so the
   body's end edge lines up with where the question text wraps. */
.kd-accordion .wp-block-details > :not(summary) {
	margin-block: 0;
	padding-inline: 0 calc(var(--kd-accordion-chevron) + var(--kd-space-md));
	color: var(--kd-color-body);
}

.kd-accordion .wp-block-details > :not(summary):first-of-type {
	padding-block-start: 0;
}

.kd-accordion .wp-block-details > :not(summary):last-child {
	padding-block-end: var(--kd-space-md);
}

/* Paragraph rhythm inside an open panel. */
.kd-accordion .wp-block-details > p + p {
	margin-block-start: var(--kd-space-sm);
}

/* Windows High Contrast / forced-colors: the glyph is a mask tinted by
   `background-color`, and forced-colors overrides that, so the chevron would
   vanish and leave an empty ring in both states. Opt the two pseudo-elements
   out of the forced palette so the mask keeps something to paint. Not a
   regression from this restyle (the glyph was always a mask) and not a WCAG
   failure — the open panel still conveys state — but cheap to fix here. */
@media (forced-colors: active) {
	.kd-accordion .wp-block-details > summary::before,
	.kd-accordion .wp-block-details > summary::after {
		forced-color-adjust: none;
	}
}

/* Respect reduced-motion for the chevron spin. */
@media (prefers-reduced-motion: reduce) {
	.kd-accordion .wp-block-details > summary::after,
	.kd-accordion .wp-block-details > summary::before {
		transition: none;
	}
}