/*
 * pm-accordion — the shared accordion (WO-33, extracted from pm-products).
 *
 * Source frame: docs/design/frames/30-products.json (WO-30, frame 55:545) —
 * the row markup, hover and keyboard model WO-30 AC 5 recorded, extracted
 * in WO-33 so the homepage's products section and the product family page's
 * models list (frame 55:1435) render ONE accordion: one behaviour, one
 * hover, one keyboard model. The writer is
 * Poortman\Core\Widgets\Accordion::render(); the behaviour is
 * assets/js/accordion.js (handle poortman-accordion).
 *
 * Compiled to assets/css/components/accordion.css by src/build-tokens.mjs,
 * which substitutes the breakpoint markers (a comment holding `@bp <name>`)
 * with the pixel value from tokens/tokens.json. Never type a breakpoint
 * width here.
 *
 * Every colour is a --pm-color-* token; the row title's size and tracking
 * are the WO-30 typography tokens. No hex value and no literal breakpoint
 * width may appear in this file. Values the token file does not hold (the
 * 1px hairline, the 16px icon) are typed with a comment citing the extract
 * key — the same technique as the button's 14px label.
 *
 * The icon swap is positional: the writer renders the plus SVG first and
 * the open-state SVG second inside __icon, and the rules below show/hide
 * them by position — the committed icon files' own class attributes (they
 * predate this component) are never relied on.
 */

/*
 * The accordion rows (30-products.json#measured.right.row): padding 32px 0
 * (--pm-space-8), a 1px Powder Blush bottom border (--pm-color-divider —
 * the 1px hairline is a measured value with no token, like the section
 * header's rule), and the first row also a top border.
 */
.pm-accordion__row {
	padding: var(--pm-space-8) 0;
	border-bottom: 1px solid var(--pm-color-divider);
}

.pm-accordion__row:first-child {
	border-top: 1px solid var(--pm-color-divider);
}

.pm-accordion__row-heading {
	margin: 0;
}

/*
 * The row's toggle: a real <button> (WO-30 AC 5) stripped to the frame's
 * look. The title colour carries the state inversion — closed rows are
 * Terra Sienna (--pm-color-accent), the open row Volcanic Ink
 * (--pm-color-ink); 30-products.json#contradictions[2] records the accent
 * on closed as the frame's own, inverted from the usual convention.
 * Transition over --pm-motion-duration-base, colour only here — height
 * transitions on the panel below (WO-30 AC 5).
 */
.pm-accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pm-space-4);
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	color: var(--pm-color-accent);
	cursor: pointer;
	transition-property: color;
	transition-duration: var(--pm-motion-duration-base);
	transition-timing-function: var(--pm-motion-ease-standard);
}

.pm-accordion__row--open .pm-accordion__toggle {
	color: var(--pm-color-ink);
}

/* The button system's recorded focus ring (WO-09 AC 4). */
.pm-accordion__toggle:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/*
 * 30-products.json#type_styles_evidenced — H3 Subtitle: Light 24px,
 * line-height 1, letter-spacing -1px (the face is the family token's
 * business, not this file's). Size and tracking are the WO-30
 * tokens; the H3's line-height is 1 (the extract's "lh 100%"), typed here
 * like the section header title's, because no leading token holds 1.
 */
.pm-accordion__title {
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h3);
	font-weight: var(--pm-font-weight-300);
	line-height: 1;
	letter-spacing: var(--pm-tracking-h3);
	/* A long Dutch family title wraps rather than stretching the row
	   (MISTAKES.md §E4). */
	overflow-wrap: break-word;
}

/*
 * The state icon (30-products.json#measured.right.row.icon — 16x16, right):
 * plus on closed rows, the call site's open icon on the open one — WO-30's
 * chevron on the homepage, the product page's minus (33-product-page.json,
 * WO-33). Both draw with currentColor, painted Terra Sienna — the exports'
 * own fill — on both states; only the title changes colour with the state.
 * The swap is display, not a transition: the frame records no icon motion.
 * Positional, not class-based — see the file head.
 */
.pm-accordion__icon {
	flex: none;
	display: inline-flex;
	color: var(--pm-color-accent);
}

.pm-accordion__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.pm-accordion__icon svg:nth-child(2) {
	display: none;
}

.pm-accordion__row--open .pm-accordion__icon svg:nth-child(1) {
	display: none;
}

.pm-accordion__row--open .pm-accordion__icon svg:nth-child(2) {
	display: block;
}

/*
 * The open row's panel: height is animated by assets/js/accordion.js (from
 * 0 to the content height and back), so the panel clips while animating
 * and hands the height back to CSS when settled. [hidden] is the closed
 * state the server renders for every row but the open one (WO-30 AC 5).
 */
.pm-accordion__panel {
	overflow: hidden;
	transition-property: height;
	transition-duration: var(--pm-motion-duration-base);
	transition-timing-function: var(--pm-motion-ease-standard);
}

.pm-accordion__panel[hidden] {
	display: none;
}

/*
 * The panel's content: the open row's 16px gap
 * (30-products.json#measured.right.open_row.body) lives inside the animated
 * box, so the collapse clips it instead of snapping it away.
 */
.pm-accordion__panel-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: var(--pm-space-4);
}

/*
 * 30-products.json#measured.right.open_row.body — 16px/1.6 texte. The 16px
 * is typed (no size token holds it, the section-header body's precedent);
 * the colour is the body-text role — Texte at 64%, the frame's real body
 * value (28-intro.json#measured.body.colour, the WO-28 reading this frame's
 * "texte" shorthand points at). Shared by both call sites' descriptions —
 * the writer's callers wrap their description in this class.
 */
.pm-accordion__description {
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
}

/* The description renders through wpautop, like the section header body. */
.pm-accordion__description p {
	margin: 0;
}

.pm-accordion__description p + p {
	margin-top: var(--pm-space-4);
}

/*
 * WO-30 AC 5 — no transition under prefers-reduced-motion: the panel snaps
 * open and closed, the title changes colour instantly. assets/js/accordion.js
 * checks the same query and skips the height animation entirely, so the
 * settled state is reached without waiting for a transitionend that the
 * rule above prevents.
 */
@media (prefers-reduced-motion: reduce) {
	.pm-accordion__toggle,
	.pm-accordion__panel {
		transition: none;
	}
}