/**
 * Axismundi — core/accordion family as an M3 contained "expandable list".
 *
 * core/details stays on the native single-disclosure baseline (style.css); the
 * accordion family (accordion / accordion-item / accordion-heading /
 * accordion-panel) is a DISTINCT interactive component and is bound here. The
 * mismatch is deliberate: details is one native <details>, accordion is a
 * multi-item component with its own button/aria/inert/interactivity contract.
 *
 * WordPress core owns the markup, the grid-template-rows expand animation, the
 * icon, its rotation, and all aria/inert state. Static surface, spacing, and
 * typography live in theme.json where the block supports expose them. This file
 * keeps the separated-panel layout and the state layer details that need
 * selectors theme.json's low-specificity css slot cannot safely express.
 *
 * Enqueued on the front (functions.php) and mirrored into the editor canvas
 * (add_editor_style) so the computed result is identical in both.
 */

/* Wrapper — a stack of separated expansion panels. */
.wp-block-accordion {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* Item — enforce the per-panel outline/radius/surface in both front and editor. */
.wp-block-accordion .wp-block-accordion-item {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 12px;
	overflow: clip;
	background-color: var(--wp--preset--color--surface);
}

/* Toggle — replace core's hover underline with an M3 state layer. The static
 * row metrics are defined in theme.json. */
.wp-block-accordion .wp-block-accordion-heading__toggle {
	transition: background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}
.wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}
.wp-block-accordion .wp-block-accordion-heading__toggle:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
}
.wp-block-accordion .wp-block-accordion-heading__toggle:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
}
.wp-block-accordion .wp-block-accordion-heading__toggle:active {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-surface) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
}

/* Icon — core keeps the plus glyph and plus → × rotation; only retime the
 * transform to the M3 motion tokens (selector mirrors core's so it overrides). */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
		transition: transform var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
	}
}