/**
 * Styles for the Championworks Accordion Elementor widget (shared by the
 * FAQ and Solutions value-list sections). Expand/collapse is a pure CSS
 * grid-template-rows 0fr→1fr transition (no JS scrollHeight measurement
 * needed): the row's content lives in a single-row grid track that
 * animates from a 0-fraction to a 1-fraction track size, with the actual
 * text clipped via overflow:hidden on the inner wrapper so it never
 * visually overflows mid-transition. Colors/typography/spacing come from
 * Elementor's control CSS; this file only handles the structural layout
 * and the open/close mechanics.
 */

.cw-acc {
	width: 100%;
	border-top: 1px solid rgba( 16, 21, 18, .14 );
}

.cw-acc__row {
	border-bottom: 1px solid rgba( 16, 21, 18, .14 );
}

.cw-acc__header {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	padding: 26px 0;
	margin: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: inherit;
}

/* Only rendered when "Show Index Numbers" is on (see accordion.php), which
   also adds this modifier class to the wrapper — so the header grid gets a
   3rd column exactly when there's a 3rd child to put in it. */
.cw-acc--numbered .cw-acc__header {
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	gap: 14px;
	align-items: baseline;
}

.cw-acc__title {
	transition: transform .5s cubic-bezier( .16, 1, .3, 1 );
}

.cw-acc__row--open .cw-acc__title,
.cw-acc__header:hover .cw-acc__title {
	transform: translateX( 10px );
}

.cw-acc__toggle {
	border-radius: 50%;
	border: 1px solid rgba( 16, 21, 18, .14 );
	display: grid;
	place-items: center;
	transition: background-color .4s, color .4s, transform .6s cubic-bezier( .16, 1, .3, 1 );
	flex: none;
}

.cw-acc__toggle svg {
	width: 40%;
	height: 40%;
	stroke: currentColor;
}

.cw-acc__row--open .cw-acc__toggle {
	transform: rotate( 45deg );
}

.cw-acc__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .6s cubic-bezier( .16, 1, .3, 1 );
}

.cw-acc__row--open .cw-acc__more {
	grid-template-rows: 1fr;
}

.cw-acc__more-inner {
	overflow: hidden;
}

.cw-acc__body {
	margin: 0;
	padding-bottom: 26px;
	opacity: 0;
	transform: translateY( 6px );
	transition: opacity .5s ease .1s, transform .5s ease .1s;
}

.cw-acc__row--open .cw-acc__body {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.cw-acc__title,
	.cw-acc__toggle,
	.cw-acc__more,
	.cw-acc__body {
		transition: none !important;
	}
}