/*
 * FAQ Section — frontend styles.
 *
 * The expand/collapse animation is pure CSS: grid-template-rows animating
 * 0fr -> 1fr is a smoothly-animatable stand-in for height:auto (which CSS
 * transitions can't target directly), paired with an overflow:hidden inner
 * wrapper so the collapsed state never lets content peek through mid
 * animation. No JS height measurement — see assets/js/faq/faq-section.js,
 * which only toggles the .is-open class and the relevant aria attributes.
 *
 * @package Greenova
 */

.faq-section {
	background-color: #FFFFFF;
	padding-block:     100px;
}

.faq-section__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    1;
	letter-spacing: -2px;
	color:          #000000;
	text-align:     center;
	margin:         0 0 16px;
}

.faq-section__description {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28.8px;
	color:       #58595B;
	text-align:  center;
	max-width:   680px;
	margin:      0 auto 56px;
}

.faq-section__list {
	max-width: 1376px;
	margin:    0 auto;
}

/* =============================================================================
   Item — trigger row + animated panel, divider below every item.
   ============================================================================= */

.faq-item {
	border-bottom: 1px solid #D9DDE8;
}

.faq-item__heading {
	margin: 0;
}

.faq-item__trigger {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             24px;
	width:           100%;
	padding-block:   28px;
	background:      transparent;
	border:          none;
	text-align:      left;
	cursor:          pointer;
}

.faq-item__question {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   22px;
	font-weight: 400;
	line-height: 24px;
	color:       #000000;
}

.faq-item__icon-wrap {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      #F5F7FC;
}

.faq-item__icon {
	display:    block;
	width:      14px;
	height:     14px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.faq-item.is-open .faq-item__icon {
	transform: rotate(45deg);
}

/* =============================================================================
   Panel — grid-rows animation, see file docblock.
   ============================================================================= */

.faq-item__panel {
	display:               grid;
	grid-template-rows:    0fr;
	opacity:               0;
	transition:            grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.faq-item.is-open .faq-item__panel {
	grid-template-rows: 1fr;
	opacity:            1;
}

.faq-item__panel-inner {
	overflow:  hidden;
	min-height: 0;
}

.faq-item__answer {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   22px;
	font-weight: 400;
	line-height: 24px;
	color:       #6B6B6B;
	padding-bottom: 28px;
	padding-right:  60px; /* Keeps the answer from running under the icon column, matching the question row's own available width. */
}

.faq-item__answer > *:first-child {
	margin-top: 0;
}

.faq-item__answer > *:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 991.98px ) {
	.faq-section {
		padding-block: 72px;
	}

	.faq-section__heading {
		font-size:      2.5rem;
		line-height:    1.15;
		letter-spacing: -0.03em;
	}

	.faq-section__description {
		margin-bottom: 40px;
	}
}

@media ( max-width: 575.98px ) {
	.faq-section {
		padding-block: 48px;
	}

	.faq-section__heading {
		font-size:   1.75rem;
		line-height: 1.2;
	}

	.faq-section__description {
		font-size: 1rem;
	}

	.faq-item__trigger {
		padding-block: 20px;
		gap:           16px;
	}

	.faq-item__question,
	.faq-item__answer {
		font-size:   1rem;
		line-height: 1.5;
	}

	.faq-item__answer {
		padding-right:  0;
		padding-bottom: 20px;
	}

	.faq-item__icon-wrap {
		width:  28px;
		height: 28px;
	}

	.faq-item__icon {
		width:  11px;
		height: 11px;
	}
}