/*
 * 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 40px;
}

.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;
}

/* =============================================================================
   Category tabs
   ============================================================================= */

.faq-section__tabs-wrap {
	display:        flex;
	align-items:    flex-end; /* bottom-aligns the nav buttons' invisible border with the tabs' own underline, so their matching content boxes line up on top too — see .faq-section__tabs-nav. */
	gap:            8px;
	max-width:      1376px;
	margin:         0 auto 40px;
}

.faq-section__tabs {
	display:         flex;
	align-items:     center;
	gap:             32px;
	flex:            1 1 auto;
	min-width:       0;
	padding-bottom:  4px;
	overflow-x:      auto;
	scroll-behavior: smooth;

	/* No native scrollbar — the tabs-nav arrow buttons drive scrolling instead. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.faq-section__tabs::-webkit-scrollbar {
	display: none;
	height:  0;
}

/*
 * Mirrors .faq-section__tab's own box model (a 16px/1-line-height label,
 * then 12px reserved gap, then a 2px border) so the icon sits level with
 * the TAB LABEL TEXT rather than the middle of the tab's full padded
 * height (which is 12px + 2px taller, and would read as the icon sitting
 * below the text) — the border here is transparent, just for the height
 * match; align-items:flex-end on the wrap lines up both borders.
 */
.faq-section__tabs-nav {
	flex-shrink:      0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            20px;
	height:           16px;
	padding:          0 0 12px;
	background:       none;
	border:           none;
	border-bottom:    2px solid transparent;
	box-sizing:       content-box;
	color:            #58595B;
	cursor:           pointer;
	transition:       color 0.2s ease;
}

.faq-section__tabs-nav:hover {
	color: #000000;
}

.faq-section__tabs-nav[hidden] {
	display: none;
}

.faq-section__tab {
	flex-shrink:      0;
	display:          inline-flex; /* A native <button>'s text otherwise vertically-centers using the browser's own form-control rendering, ignoring line-height entirely — that's what was actually causing the persistent misalignment, not a height mismatch. Making this a real flex container and centering its text explicitly puts it under the exact same alignment mechanism as .faq-section__tabs-nav's icon, so the two are guaranteed to match regardless of button-rendering quirks. */
	align-items:      center;
	height:           16px;
	box-sizing:       content-box;
	background:       none;
	border:           none;
	border-bottom:    2px solid transparent;
	padding:          0 0 12px;
	font-family:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:        16px;
	font-weight:      400;
	line-height:      1;
	color:            #58595B;
	white-space:      nowrap;
	cursor:           pointer;
	transition:       color 0.2s ease, border-color 0.2s ease;
}

.faq-section__tab:hover {
	color: #000000;
}

.faq-section__tab.is-active {
	color:         #219FD6;
	font-weight:   600;
	border-color:  #219FD6;
}

.faq-section__list {
	max-width: 1376px;
	margin:    0 auto;
	min-height: 120px; /* Avoids a layout jump between the loading text and the first-rendered accordion items. */
}

.faq-section__state {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	color:       #58595B;
	text-align:  center;
	padding:     32px 0;
	margin:      0;
}

/* =============================================================================
   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:   20px;
	font-weight: 400;
	line-height: 28px;
	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;
}

/* =============================================================================
   Attachments — "Related Resources" cards, only rendered (by JS) when a
   FAQ actually has attachments; nothing here adds any space when absent,
   since the whole block simply doesn't exist in that case.
   ============================================================================= */

.faq-item__attachments {
	padding-bottom: 28px;
}

.faq-item__attachments-title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 600;
	color:       #000000;
	margin:      0 0 4px;
}

.faq-item__attachments-desc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 400;
	color:       #6B6B6B;
	margin:      0 0 16px;
}

.faq-item__attachment-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   20px;
}

.faq-attachment-card {
	display:        flex;
	flex-direction: column;
	background:     #FFFFFF;
	border:         1px solid #E5E7EB;
	border-radius:  16px;
	overflow:       hidden;
}

/*
 * Always has the dark gradient background — it's the base layer under the
 * real thumbnail <img> (z-index 1), and becomes the visible fallback the
 * instant that <img> is removed on load failure (blocked network access
 * to YouTube's thumbnail CDN, a deleted/private video, etc. — see
 * faq-section.js), so the card never reads as broken or blank either way.
 */
.faq-attachment-card__media {
	position:      relative;
	aspect-ratio:  16 / 9;
	background:    linear-gradient(135deg, #1f2937, #0b0f14);
	overflow:      hidden;
}

.faq-attachment-card__media[data-faq-play-video] {
	cursor: pointer;
}

.faq-attachment-card__media[data-faq-play-video]:hover .faq-attachment-card__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.faq-attachment-card__iframe {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	border:   none;
}

.faq-attachment-card__media-title {
	display:        none;
	position:       absolute;
	z-index:        1;
	top:            14px;
	left:           14px;
	right:          14px;
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      15px;
	font-weight:    600;
	line-height:    1.3;
	color:          #FFFFFF;
}

.faq-attachment-card__media.is-fallback .faq-attachment-card__media-title {
	display: block;
}

.faq-attachment-card__thumb {
	position:   absolute;
	inset:      0;
	z-index:    2;
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.faq-attachment-card__play {
	position:        absolute;
	z-index:         3;
	top:             50%;
	left:            50%;
	transform:       translate(-50%, -50%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	border-radius:   50%;
	background:      #E23744;
	transition:      transform 0.2s ease;
}

.faq-attachment-card__badge {
	position:        absolute;
	z-index:         3;
	right:           10px;
	bottom:          10px;
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         4px 10px;
	border-radius:   999px;
	background:      rgba(0, 0, 0, 0.65);
	color:           #FFFFFF;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       11px;
	font-weight:     500;
}

.faq-attachment-card__body {
	display:        flex;
	flex-direction: column;
	padding:        16px;
}

.faq-attachment-card__type {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.04em;
	color:          #6B7280;
	margin-bottom:  6px;
}

.faq-attachment-card__type::before {
	content:       '';
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    #9CA3AF;
}

.faq-attachment-card__type.is-video {
	color: #E23744;
}

.faq-attachment-card__type.is-video::before {
	background: #E23744;
}

.faq-attachment-card__title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   15px;
	font-weight: 600;
	line-height: 1.35;
	color:       #000000;
	margin:      0 0 4px;
}

.faq-attachment-card__desc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   13px;
	font-weight: 400;
	line-height: 1.4;
	color:       #6B7280;
	margin:      0 0 14px;
}

.faq-attachment-card__actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin-top: auto;
}

.faq-attachment-card__btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	padding:         8px 14px;
	border-radius:   999px;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       13px;
	font-weight:     600;
	text-decoration: none;
	cursor:          pointer;
	transition:      background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.faq-attachment-card__btn--primary {
	background: #219FD6;
	color:      #FFFFFF;
	border:     1px solid #219FD6;
}

.faq-attachment-card__btn--primary:hover,
.faq-attachment-card__btn--primary:focus {
	background:      #1a86b8;
	border-color:    #1a86b8;
	color:           #FFFFFF;
	text-decoration: none;
}

.faq-attachment-card__btn--secondary {
	background: #FFFFFF;
	color:      #111827;
	border:     1px solid #D1D5DB;
}

.faq-attachment-card__btn--secondary:hover,
.faq-attachment-card__btn--secondary:focus {
	background: #F9FAFB;
	color:      #111827;
}

/* =============================================================================
   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;
		margin-bottom:  32px;
	}

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

	.faq-section__tabs-wrap {
		margin-bottom: 32px;
	}

	.faq-section__tabs {
		gap: 24px;
	}

	.faq-item__attachment-grid {
		grid-template-columns: 1fr;
	}
}

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

	.faq-section__heading {
		font-size:     1.75rem;
		line-height:   1.2;
		margin-bottom: 24px;
	}

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

	.faq-section__tabs-wrap {
		margin-bottom: 24px;
	}

	.faq-section__tabs {
		gap: 20px;
	}

	.faq-section__tab {
		font-size: 14px;
	}

	.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__attachments {
		padding-bottom: 20px;
	}

	.faq-item__attachment-grid {
		gap: 16px;
	}

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

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