/*
 * Ethan's Expandable Accordion Designer -- frontend structural CSS.
 *
 * Visual values (colors, spacing, border, timing) come from CSS custom
 * properties set per type in an inline <style> block generated by
 * EEAD_Assets. This file only defines structure and behavior, and
 * supplies sane fallbacks if a property is ever missing.
 *
 * Panel visibility is controlled entirely by the .eead-open class on
 * the .eead-accordion wrapper. That class is present or absent at
 * first paint based on server-rendered state; JavaScript only ever
 * adds/removes it afterward in response to user interaction. Nothing
 * about the panel's presence in the DOM depends on JavaScript running.
 */

.eead-accordion {
	margin-bottom: var(--eead-spacing, 10px);
	border: var(--eead-border-width, 1px) solid var(--eead-border-color, #ddd);
	border-radius: var(--eead-border-radius, 4px);
	background: var(--eead-bg-color, #fff);
	width: var(--eead-width, auto);
	overflow: hidden;
}

.eead-accordion:last-child {
	margin-bottom: 0;
}

.eead-trigger-heading {
	margin: 0;
}

.eead-trigger {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	cursor: pointer;
	padding: var(--eead-trigger-padding, 14px 18px);
	background: var(--eead-trigger-bg, #f7f7f7);
	font: inherit;
	text-align: left;
}

.eead-trigger:hover,
.eead-trigger:focus-visible {
	background: var(--eead-trigger-bg-hover, #efefef);
}

.eead-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.eead-trigger-text {
	flex: 1 1 auto;
}

.eead-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-start: 0.6em;
	line-height: 1;
}

.eead-icon[data-eead-icon-pos="before"] {
	order: -1;
	margin-inline-start: 0;
	margin-inline-end: 0.6em;
}

.eead-icon img {
	display: block;
	width: 1em;
	height: 1em;
	max-width: 20px;
	max-height: 20px;
}

.eead-icon-swap-wrap img.eead-icon-swap {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

/* Rotate mode: single icon rendered once, rotated on open. */
.eead-icon-rotate {
	transition: transform var(--eead-duration, 300ms) ease;
}
.eead-accordion.eead-open .eead-icon-rotate {
	transform: rotate(180deg);
}

/*
 * Swap mode: both the closed and open icon are always in the DOM and
 * always "displayed" (never display:none, which can't be transitioned),
 * stacked via absolute positioning inside a fixed-size relative
 * container and cross-faded with opacity. Because nothing here relies
 * on display toggling, an icon that has both swap AND rotate enabled
 * animates both at once -- it visibly rotates as it fades between the
 * two glyphs, rather than snapping instantly.
 */
.eead-icon-swap-wrap {
	position: relative;
	width: 1.2em;
	height: 1.2em;
}
.eead-icon-swap-wrap .eead-icon-swap {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--eead-duration, 300ms) ease, transform var(--eead-duration, 300ms) ease;
}
.eead-icon-swap-wrap .eead-icon-closed.eead-icon-swap {
	opacity: 1;
}
.eead-accordion.eead-open .eead-icon-swap-wrap .eead-icon-closed.eead-icon-swap {
	opacity: 0;
}
.eead-accordion.eead-open .eead-icon-swap-wrap .eead-icon-open.eead-icon-swap {
	opacity: 1;
}

/*
 * Collapse mechanism: CSS Grid's 0fr/1fr row-sizing trick. This animates
 * smoothly without JS having to measure scrollHeight, and adapts
 * correctly even if the panel's content changes height after opening
 * (e.g. an image finishing load).
 */
.eead-panel-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--eead-duration, 300ms) ease;
}
.eead-accordion.eead-open .eead-panel-wrapper {
	grid-template-rows: 1fr;
}
.eead-accordion.eead-no-animate .eead-panel-wrapper {
	transition: none;
}
.eead-accordion.eead-no-animate .eead-icon-rotate,
.eead-accordion.eead-no-animate .eead-icon-swap-wrap .eead-icon-swap {
	transition: none;
}

.eead-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.eead-panel-content {
	padding: var(--eead-panel-padding, 14px 18px);
}

.eead-panel-content > *:first-child {
	margin-top: 0;
}
.eead-panel-content > *:last-child {
	margin-bottom: 0;
}