/* ================================================================
   Peek Fade Accordion — front-end styles (scoped to .pfa-accordion).
   Effect values come from CSS custom properties set inline on the
   wrapper (render()) and by the Style-tab controls.
   ================================================================ */

.pfa-accordion { display: flex; flex-direction: column; box-sizing: border-box; }
.pfa-accordion * { box-sizing: border-box; }

/* ---------- header ---------- */
.pfa-accordion .pfa-header {
	display: flex;
	align-items: center;
	cursor: pointer;
	width: 100%;
	gap: var(--pfa-icon-gap, 8px);
	-webkit-tap-highlight-color: transparent;
}
.pfa-accordion .pfa-header__text { flex: 1 1 auto; min-width: 0; }

/* header leading icon (left of the title) + its flex wrapper */
.pfa-accordion .pfa-header__main {
	display: flex;
	align-items: var(--pfa-header-icon-valign, center);
	gap: var(--pfa-header-icon-gap, 10px);
	flex: 1 1 auto;
	min-width: 0;
}
.pfa-accordion .pfa-header__leadicon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: var(--pfa-header-icon-size, 22px);
	transition: color 0.3s ease;
	/* Color is set by the "Header Icon → Icon Color" control (default orange).
	   Do NOT hardcode color here: this stylesheet loads after Elementor's
	   generated CSS, so an equal-specificity color rule here would override
	   the control and make it appear broken. */
}
.pfa-accordion .pfa-header__leadicon svg { width: 1em; height: 1em; display: block; }
.pfa-accordion .pfa-header__leadicon i { font-size: inherit; }

.pfa-accordion .pfa-header:focus-visible {
	outline: 2px solid var(--pfa-marker, #ffab3d);
	outline-offset: 2px;
}

/* ---------- arrow icon ---------- */
.pfa-accordion .pfa-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
	transition: transform 0.3s ease, color 0.3s ease;
}
.pfa-accordion.pfa-arrow-left .pfa-header__icon { order: -1; }
.pfa-accordion.pfa-open .pfa-header__icon { transform: rotate(var(--pfa-rotation, 180deg)); }

/* ---------- peek / teaser row ---------- */
.pfa-accordion .pfa-peek {
	filter: blur(var(--pfa-blur, 2px));
	opacity: var(--pfa-opacity, 0.5);
	pointer-events: none;
	margin-top: var(--pfa-row-gap, 10px);
	transition: filter 0.24s ease, opacity 0.24s ease;
	will-change: filter;
}
.pfa-accordion.pfa-open .pfa-peek { filter: blur(0); opacity: 1; }

/* ---------- collapsible rows ---------- */
.pfa-accordion .pfa-panel { display: flex; flex-direction: column; }

.pfa-accordion .pfa-row {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	transition:
		max-height var(--pfa-duration, 280ms) ease,
		opacity calc(var(--pfa-duration, 280ms) - 40ms) ease,
		margin-top 220ms ease;
	will-change: max-height, opacity, margin-top;
	box-sizing: border-box;
}
/* Open state: opacity + spacing animate; max-height is set inline by JS from
   scrollHeight so the transition has a concrete target to animate toward. */
.pfa-accordion.pfa-open .pfa-row { opacity: 1; margin-top: var(--pfa-row-gap, 10px); }

/* Closed state: with box-sizing:border-box, max-height:0 floors the CONTENT box
   at 0 but padding/border still add height — so any row padding or separator
   (border-top/padding-top) would keep collapsed rows visibly tall and reserve
   space at the bottom. Strip vertical padding + border while closed so hidden
   rows truly reach 0 height (and stray separator lines don't show when closed). */
.pfa-accordion:not(.pfa-open) .pfa-row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top-width: 0 !important;
	border-bottom-width: 0 !important;
}

/* Reduced motion: no expand/collapse animation, just show/hide. */
@media (prefers-reduced-motion: reduce) {
	.pfa-accordion .pfa-header__icon,
	.pfa-accordion .pfa-peek,
	.pfa-accordion .pfa-row {
		transition: none;
	}
}

/* ---------- leading row icon (icon before content) ---------- */
.pfa-accordion .pfa-row--icon,
.pfa-accordion .pfa-peek--icon {
	display: flex;
	align-items: var(--pfa-row-icon-valign, flex-start);
	gap: var(--pfa-row-icon-gap, 12px);
}
.pfa-accordion .pfa-row__content,
.pfa-accordion .pfa-peek__content { flex: 1 1 auto; min-width: 0; }
.pfa-accordion .pfa-peek__content p,
.pfa-accordion .pfa-row__content p{
	margin: 0;
}
.pfa-accordion .pfa-row__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: var(--pfa-row-icon-size, 20px);
	/* Color comes from the "Row Icon → Icon Color" control (default orange).
	   Not hardcoded here for the same load-order reason as the header icon. */
}
.pfa-accordion .pfa-row__icon svg { width: 1em; height: 1em; display: block; }
.pfa-accordion .pfa-row__icon i { font-size: inherit; }

/* Custom uploaded SVG icons often hardcode a fill and/or stroke color on their
   shapes (e.g. fill="#F8642E"). A paint set on the parent <svg> — which is what
   the Elementor color control emits — can't override one that sits directly on
   a child shape. Recolor only the shapes that actually declare a paint, matching
   whichever they use (fill OR stroke), and leave fill="none"/stroke="none" alone
   so outline vs solid icons keep their shape. currentColor follows the icon's
   `color`, which the color controls set. Opacity is reset so the chosen color
   renders at full strength. */
.pfa-accordion .pfa-header__leadicon svg [fill]:not([fill="none"]),
.pfa-accordion .pfa-row__icon svg [fill]:not([fill="none"]),
.pfa-accordion .pfa-header__icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
	fill-opacity: 1;
}
.pfa-accordion .pfa-header__leadicon svg [stroke]:not([stroke="none"]),
.pfa-accordion .pfa-row__icon svg [stroke]:not([stroke="none"]),
.pfa-accordion .pfa-header__icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
	stroke-opacity: 1;
}

/* ---------- separators between rows ---------- */
.pfa-accordion.pfa-has-sep.pfa-sep-top .pfa-row,
.pfa-accordion.pfa-has-sep.pfa-sep-top .pfa-peek {
	border-top: var(--pfa-sep-width, 1px) var(--pfa-sep-style, solid) var(--pfa-sep-color, #e6e6e6);
	padding-top: var(--pfa-sep-gap, 10px);
}
.pfa-accordion.pfa-has-sep.pfa-sep-bottom .pfa-row,
.pfa-accordion.pfa-has-sep.pfa-sep-bottom .pfa-peek {
	border-bottom: var(--pfa-sep-width, 1px) var(--pfa-sep-style, solid) var(--pfa-sep-color, #e6e6e6);
	padding-bottom: var(--pfa-sep-gap, 10px);
}

/* ---------- list defaults inside content ---------- */
.pfa-accordion .pfa-row ul,
.pfa-accordion .pfa-peek ul { padding-left: 20px; margin: 0; }
.pfa-accordion .pfa-row ul li::marker,
.pfa-accordion .pfa-peek ul li::marker { color: var(--pfa-marker, #ffab3d); }