/**
 * Elementor Accordion Extra — structural CSS.
 *
 * Structural only: no hard-coded colors or fonts (those come from the
 * widget's own Style controls via CSS custom properties). Logical
 * properties throughout — no `-rtl.css` build, same decision as the
 * sibling `elementor-menu-rail` plugin (epic §5, §10).
 *
 * Ordering scheme (epic §6.4 "Item Icon" / §0.5):
 *   .aex-item__text          order: 0   (fixed anchor — the title+subtitle
 *                                        block never moves)
 *   .aex-item__icon          order: var(--aex-item-icon-order, -1)
 *   .aex-item__toggle-icon   order: var(--aex-toggle-icon-order, -2)
 *
 * With both icons at "start" (the defaults), the toggle icon sits outermost
 * (-2), the item icon between it and the text (-1). Flipping either one to
 * "end" moves it past the text without disturbing the other icon's side.
 */

.aex-accordion {
	display: flex;
	flex-direction: column;
	gap: var( --aex-space-between-items, 8px );
}

.aex-item {
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 0;

	/* Clips the header/panel backgrounds (and any per-state Background
	   control colors) to this element's own border-radius. Without this,
	   a rounded `accordion_border_radius` only bends the 1px border while
	   the header/panel's square-cornered backgrounds visibly overhang it —
	   the header sits flush against the top edge, so its top corners
	   poke past a rounded item corner as soon as the header has any
	   background color set. Real Elementor's Nested_Accordion widget
	   solves the same problem with a second, independent
	   `content_border_radius` control instead; `overflow: hidden` here is
	   the simpler fix and needs no extra control, since `.aex-item__header`
	   and `.aex-item__panel` never need corners rounder than their parent. */
	overflow: hidden;
}

/* Native <details> markers are removed — the toggle icon pair is the only
   disclosure indicator, so the browser's own marker would be a redundant
   second one. */
.aex-item__header {
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
	padding-block: 16px;
	padding-inline: 16px;
}

.aex-item__header::-webkit-details-marker {
	display: none;
}

.aex-item__header::marker {
	content: '';
}

/* `.aex-item` now clips overflow (see above) to keep the header/panel
   backgrounds inside the rounded item shape. A browser's default focus
   outline paints just outside the element's border edge, and the header
   sits flush against the item's own edges, so without this rule a
   keyboard-focused header's outline would be partly clipped away on
   every side. Insetting it keeps the ring fully visible regardless of
   border-radius or which item (first/last) is focused. */
.aex-item__header:focus-visible {
	outline-offset: -2px;
}

.aex-item__icon {
	order: var( --aex-item-icon-order, -1 );
	display: inline-flex;
	flex: 0 0 auto;
	align-self: var( --aex-item-icon-align, center );
	transform: translateY( var( --aex-item-icon-offset, 0px ) );
	margin-inline: var( --aex-item-icon-gap, 8px );
	font-size: var( --aex-item-icon-size, 16px );
	line-height: 1;
}

.aex-item__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aex-item__text {
	order: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.aex-item__title {
	margin: 0;
	font: inherit;
	color: inherit;
}

.aex-item__subtitle {
	margin-block-start: var( --aex-subtitle-spacing, 4px );
}

.aex-item__toggle-icon {
	order: var( --aex-toggle-icon-order, -2 );
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin-inline: var( --aex-toggle-icon-gap, 8px );
	font-size: var( --aex-toggle-icon-size, 16px );
	line-height: 1;
}

.aex-item__toggle-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* State swap is pure CSS, keyed off the native [open] attribute — no JS
   class toggling required (epic §0.5). */
.aex-item__toggle-icon .aex-opened {
	display: none;
}

.aex-item__toggle-icon .aex-closed {
	display: inline-flex;
}

.aex-item[ open ] > .aex-item__header .aex-item__toggle-icon .aex-opened {
	display: inline-flex;
}

.aex-item[ open ] > .aex-item__header .aex-item__toggle-icon .aex-closed {
	display: none;
}

.aex-item__panel {
	padding-block: 16px;
	padding-inline: 16px;
}

.aex-empty {
	padding: 16px;
	border: 1px dashed rgba( 0, 0, 0, 0.2 );
	color: rgba( 0, 0, 0, 0.5 );
	font-size: 13px;
}

/* prefers-reduced-motion: no transition is added by default, so there is
   nothing to disable here — kept deliberately minimal per epic §7.2 rather
   than fighting browser support gaps for animating <details>. */