/*
 * Based on:
 * https://gist.github.com/colinduwe/7d98625fe1216831785f63e07b70525a
 * Adapted for this project.
 */

/**
 * Animation styles paired with accordion-animation.js.
 *
 * Core hides closed panels with `inert`/`display: none`, which prevents a
 * close transition from running. While JS owns a transition it adds
 * `.is-animating`; these rules keep the panel in layout long enough for
 * `max-height` and `padding-block-end` to animate, then core takes over again.
 *
 * Reduced-motion users keep core's instant behavior.
 */
@media (prefers-reduced-motion: no-preference) {
	/* Keep the panel in the same formatting context during open and close.
	   This prevents child margins from re-collapsing when overflow is clipped. */
	.wp-block-accordion-item.is-open > .wp-block-accordion-panel,
	.wp-block-accordion-panel.is-animating[inert],
	.wp-block-accordion-panel.is-animating[aria-hidden="true"] {
		display: flow-root;
	}

	.wp-block-accordion-panel.is-animating {
		overflow: hidden;
		transition:
			max-height 0.3s ease,
			padding-block-end 0.3s ease;
	}

	/* Collapse custom bottom padding while the close animation runs. */
	.wp-block-accordion-panel.is-animating[inert],
	.wp-block-accordion-panel.is-animating[aria-hidden="true"] {
		margin-block-start: 0;
		padding-block-end: 0;
	}
}