/**
 * Quiltfolk Academy - Extras section accordion
 * Pairs with qfa-accordion.js. Adjust colors/spacing to match the site.
 */

.qfa-accordion-item {
	border-bottom: 1px solid #ddd;
}

/* Not :last-child - DCE renders each ACF Flexible Content row as its own
   separate embedded Template, so every .qfa-accordion-item ends up as
   the sole child of its own individual wrapper rather than a true DOM
   sibling of the others. :last-child (and :nth-child, +, ~) match every
   single item in that situation, not just the actual last one. The JS
   finds the real last item per group and tags it with this class
   instead. */
.qfa-accordion-item.qfa-accordion-item-last {
	border-bottom: none !important;
}

.qfa-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1em 0;
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* Horizontal padding forced explicitly (and matched below on
   .qfa-accordion-panel-inner) rather than left to whatever Elementor
   happens to have configured on each container - given how often
   Elementor's own per-widget settings have already fought this
   stylesheet elsewhere, trying to "match" a value that lives in the
   editor isn't reliable long-term. Change 1.5em here and in the
   matching rule below together if you want different spacing. */
.qfa-accordion-trigger.qfa-accordion-trigger {
	padding-left: 1.5em !important;
	padding-right: 1.5em !important;
}

/* Caret drawn with plain CSS borders (no image/font glyph needed) -
   points down when closed, rotates to point up when open. */
.qfa-accordion-trigger::after {
	content: '';
	flex-shrink: 0;
	width: 0.5em;
	height: 0.5em;
	margin-left: 1em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.qfa-accordion-item.is-open .qfa-accordion-trigger::after {
	transform: rotate(225deg);
}

/* Height-animates to fit whatever content is inside, no JS measuring
   needed - this works even though different ACF layouts have wildly
   different content and therefore different heights.

   The class is repeated in the selector (.qfa-accordion-panel twice) as
   a specificity boost, not a typo. Elementor writes its own per-element
   rule for each Container - e.g. ".elementor-element.elementor-element-<id>
   { grid-template-rows: ...; }" - marked !important when the Container's
   own Layout tab has Display set to Grid. That selector is two classes
   deep, which beat our original single-class !important rule in a
   specificity tie (confirmed via DevTools: grid-template-rows was
   resolving to the full content height, not 0fr, even while closed).
   Repeating the class here makes our selector specific enough to win
   regardless of what's configured on the widget itself. If you'd rather
   fix it at the source: open this Container's Layout tab in Elementor
   and reset Display back to Flexbox (default) so nothing competes here
   in the first place. */
.qfa-accordion-panel.qfa-accordion-panel {
	display: grid !important;
	grid-template-rows: 0fr !important;
	transition: grid-template-rows 0.3s ease;
}

.qfa-accordion-item.is-open .qfa-accordion-panel.qfa-accordion-panel {
	grid-template-rows: 1fr !important;
}

.qfa-accordion-panel-inner.qfa-accordion-panel-inner {
	overflow: hidden;
	min-height: 0;
	padding-left: 1.5em !important;
	padding-right: 1.5em !important;
}

/* min-height: 0 lets the row shrink below the content's natural size,
   but padding is separate from content sizing - it reserves visible
   space no matter how short the content becomes. Scoped to everything
   INSIDE .qfa-accordion-panel (the panel itself, panel-inner, and any
   container nested further inside it), not the whole .qfa-accordion-item -
   the trigger lives outside .qfa-accordion-panel and must keep its own
   padding constant regardless of open/closed state, since it's always
   visible. Everything under .qfa-accordion-panel, by contrast, is never
   meant to be visible while closed, so it's safe to zero blanket-style
   rather than track down exactly which nested container owns the
   padding. Elementor's own padding is restored automatically once open,
   since nothing here touches padding in the .is-open state. */
.qfa-accordion-item:not(.is-open) .qfa-accordion-panel.qfa-accordion-panel,
.qfa-accordion-item:not(.is-open) .qfa-accordion-panel-inner.qfa-accordion-panel-inner,
.qfa-accordion-item:not(.is-open) .qfa-accordion-panel-inner.qfa-accordion-panel-inner * {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}