/**
 * AXB Accordion — frontend baseline styles.
 *
 * DOM produced by render.php:
 *   <section class="axcelersblocks-accordion ...">
 *     <details class="axcelersblocks-accordion-item ..." [open]>
 *       <summary class="axcelersblocks-accordion-item__summary">
 *         <h3 class="axcelersblocks-accordion-heading">Question</h3>
 *         <span class="axcelersblocks-accordion-item__icon"><svg/></span>
 *       </summary>
 *       <div class="axcelersblocks-accordion-panel">...inner blocks...</div>
 *     </details>
 *     ...
 *   </section>
 *
 * Per-instance styles for spacing/colours/borders come from the inline CSS
 * collector. This file owns reset + structural primitives only.
 */

.axcelersblocks-accordion {
	--axb-accordion-duration: 300ms;
	--axb-accordion-easing: ease-in-out;
	--axb-accordion-icon-rotate: 180deg;
	--axb-accordion-icon-color: currentColor;
	--axb-accordion-icon-size: 1em;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.axcelersblocks-accordion *,
.axcelersblocks-accordion *::before,
.axcelersblocks-accordion *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Item — built on <details>.
 * ------------------------------------------------------------------------- */

.axcelersblocks-accordion-item {
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 6px;
	overflow: hidden;
	background: transparent;
}

.axcelersblocks-accordion-item.is-disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Summary — header row.
 * ------------------------------------------------------------------------- */

.axcelersblocks-accordion-item__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* The heading takes the available width. */
.axcelersblocks-accordion-item__summary > .axcelersblocks-accordion-heading {
	flex: 1 1 auto;
	margin: 0;
}

.axcelersblocks-accordion-item__summary::-webkit-details-marker { display: none; }
.axcelersblocks-accordion-item__summary::marker                 { display: none; content: ""; }

.axcelersblocks-accordion-item__summary:focus,
.axcelersblocks-accordion-item__summary:focus-visible {
	outline: none;
	box-shadow: none;
}

.axcelersblocks-accordion-item[open],
.axcelersblocks-accordion-item[data-open="true"] {
	border-color: var( --axb-accordion-item-open-border-color, rgba( 0, 0, 0, 0.08 ) );
}

.axcelersblocks-accordion-item[open] > .axcelersblocks-accordion-item__summary,
.axcelersblocks-accordion-item[data-open="true"] > .axcelersblocks-accordion-item__summary {
	background: var( --axb-accordion-item-open-summary-background, transparent );
	box-shadow: inset 0 -1px 0 var( --axb-accordion-item-open-summary-border-color, transparent );
	color: var( --axb-accordion-item-open-summary-color, inherit );
}

/* -------------------------------------------------------------------------
 * Icon.
 * ------------------------------------------------------------------------- */

.axcelersblocks-accordion-item__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --axb-accordion-icon-size );
	height: var( --axb-accordion-icon-size );
	color: var( --axb-accordion-icon-color );
	flex: 0 0 auto;
	transition:
		transform var( --axb-accordion-duration ) var( --axb-accordion-easing ),
		color 0.2s ease;
	transform-origin: 50% 50%;
}

.axcelersblocks-accordion-item__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.axcelersblocks-accordion-heading:focus,
.axcelersblocks-accordion-heading:focus-visible {
	outline: none;
	box-shadow: none;
}

.axcelersblocks-accordion-item__icon-state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.axcelersblocks-accordion-item__icon-state--open {
	display: none;
}

.axcelersblocks-accordion-item[open] .axcelersblocks-accordion-item__icon,
.axcelersblocks-accordion-item[data-open="true"] .axcelersblocks-accordion-item__icon {
	color: var( --axb-accordion-item-open-icon-color, var( --axb-accordion-icon-color ) );
}

/* -------------------------------------------------------------------------
 * Single-icon rotate mode (no openIconSvg): rotate the icon span on [open].
 * The span's `transition: transform ...` animates it smoothly.
 * ------------------------------------------------------------------------- */

.axcelersblocks-accordion-item--behavior-rotate:not(.axcelersblocks-accordion-item--has-open-icon)[open] .axcelersblocks-accordion-item__icon,
.axcelersblocks-accordion-item--behavior-rotate:not(.axcelersblocks-accordion-item--has-open-icon)[data-open="true"] .axcelersblocks-accordion-item__icon {
	transform: rotate( var( --axb-accordion-icon-rotate ) );
}

/* -------------------------------------------------------------------------
 * Two-icon swap mode (openIconSvg provided):
 *
 * Instead of `display: none` ↔ `display: inline-flex` (which can't animate),
 * stack both icons in the same place and cross-fade them with a rotation.
 * The rotation amount is the user-configured `--axb-accordion-icon-rotate`
 * (defaults to 180deg). Closed icon rotates away while the open icon rotates
 * into place. Works for plus ↔ minus, chevron-down ↔ chevron-up, any pair.
 * ------------------------------------------------------------------------- */

.axcelersblocks-accordion-item--has-open-icon .axcelersblocks-accordion-item__icon-state {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: inline-flex;
	transition:
		opacity var( --axb-accordion-duration ) var( --axb-accordion-easing ),
		transform var( --axb-accordion-duration ) var( --axb-accordion-easing );
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

/* Closed (default) — closed icon visible, open icon hidden + counter-rotated. */
.axcelersblocks-accordion-item--has-open-icon .axcelersblocks-accordion-item__icon-state--closed {
	opacity: 1;
	transform: rotate( 0deg );
	z-index: 2;
}

.axcelersblocks-accordion-item--has-open-icon .axcelersblocks-accordion-item__icon-state--open {
	opacity: 0;
	transform: rotate( calc( var( --axb-accordion-icon-rotate ) * -1 ) );
	z-index: 1;
}

/* Open — closed icon fades out + rotates away, open icon fades in to 0deg. */
.axcelersblocks-accordion-item--has-open-icon[open] .axcelersblocks-accordion-item__icon-state--closed,
.axcelersblocks-accordion-item--has-open-icon[data-open="true"] .axcelersblocks-accordion-item__icon-state--closed {
	opacity: 0;
	transform: rotate( var( --axb-accordion-icon-rotate ) );
	z-index: 1;
}

.axcelersblocks-accordion-item--has-open-icon[open] .axcelersblocks-accordion-item__icon-state--open,
.axcelersblocks-accordion-item--has-open-icon[data-open="true"] .axcelersblocks-accordion-item__icon-state--open {
	opacity: 1;
	transform: rotate( 0deg );
	z-index: 2;
}

/* Move the icon to the start when iconLocation = before. */
.axcelersblocks-accordion-item--icon-before .axcelersblocks-accordion-item__icon {
	order: -1;
}

/* -------------------------------------------------------------------------
 * Mid-close override.
 *
 * The runtime sets `data-open="false"` at t=0 of the close animation while
 * the native [open] attribute is still in place. Source-order specificity
 * lets these rules win over the `[open]` rules above, which makes the icon
 * (and open-state colours) animate back in parallel with the panel
 * collapsing — instead of snapping back after the panel has finished.
 * ------------------------------------------------------------------------- */

.axcelersblocks-accordion-item[data-open="false"] {
	border-color: var( --axb-accordion-item-base-border-color, rgba( 0, 0, 0, 0.08 ) );
}

.axcelersblocks-accordion-item[data-open="false"] > .axcelersblocks-accordion-item__summary {
	background: transparent;
	box-shadow: none;
	color: inherit;
}

.axcelersblocks-accordion-item[data-open="false"] .axcelersblocks-accordion-item__icon {
	color: var( --axb-accordion-icon-color, currentColor );
}

.axcelersblocks-accordion-item--has-open-icon[data-open="false"] .axcelersblocks-accordion-item__icon-state--closed {
	opacity: 1;
	transform: rotate( 0deg );
	z-index: 2;
}

.axcelersblocks-accordion-item--has-open-icon[data-open="false"] .axcelersblocks-accordion-item__icon-state--open {
	opacity: 0;
	transform: rotate( calc( var( --axb-accordion-icon-rotate ) * -1 ) );
	z-index: 1;
}

.axcelersblocks-accordion-item--behavior-rotate:not(.axcelersblocks-accordion-item--has-open-icon)[data-open="false"] .axcelersblocks-accordion-item__icon {
	transform: rotate( 0deg );
}

.axcelersblocks-accordion-item[data-open="false"] > .axcelersblocks-accordion-panel {
	background: transparent;
	box-shadow: none;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Panel — body.
 * ------------------------------------------------------------------------- */

.axcelersblocks-accordion-panel {
	padding: 14px 16px;
	box-sizing: border-box;
	display: flow-root;
	overflow: hidden;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.axcelersblocks-accordion-item[open] > .axcelersblocks-accordion-panel,
.axcelersblocks-accordion-item[data-open="true"] > .axcelersblocks-accordion-panel {
	background: var( --axb-accordion-item-open-panel-background, transparent );
	box-shadow: inset 0 1px 0 var( --axb-accordion-item-open-panel-border-color, transparent );
	color: var( --axb-accordion-item-open-panel-color, inherit );
}

/* Reduced motion. */
@media ( prefers-reduced-motion: reduce ) {
	.axcelersblocks-accordion-item__icon {
		transition: none;
	}
}

/* Separator mode (per-instance border emitted via inline CSS). */
.axcelersblocks-accordion[data-separator="true"] > .axcelersblocks-accordion-item {
	border-radius: 0;
}