/*
 * se-faq-index
 *
 * Figma FAQs 158:134. A mono column that sticks beside the groups, the group in
 * view set in red. Below 768 it lies down and becomes a scrolling row of names,
 * per SPEC-3 section 3.4.
 */

.se-faq-index {
	position: sticky;
	top: calc(var(--se-header-h) + clamp(1rem, 2.08vw, 2.5rem));
	padding-block-start: clamp(2.5rem, 5.42vw, 6.5rem);
}

.se-faq-index__eyebrow {
	margin: 0 0 clamp(1rem, 1.5vw, 1.75rem);
	/* QA-MOBILE: --se-grey-dark is 2.81:1 on black, --se-grey is 6.58:1. */
	color: var(--se-grey);
}

.se-faq-index__list {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.15vw, 1.375rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.se-faq-index__item {
	margin: 0;
}

.se-faq-index__link {
	display: block;
	font-family: var(--se-font-mono);
	font-weight: 500;
	font-size: clamp(0.8125rem, 0.833vw, 1rem);
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--se-grey);
	transition: color var(--se-dur) var(--se-ease);
}

.se-faq-index__link:hover,
.se-faq-index__link:focus-visible,
.se-faq-index__link.is-active {
	/* QA-MOBILE: 13px red, so the AA safe red rather than --se-red-hot. */
	color: var(--se-red-text);
}

/* ------------------------------------------------- below the tablet break */

@media (max-width: 1023px) {
	.se-faq-index {
		position: sticky;
		top: var(--se-header-h);
		z-index: 4;
		padding-block: 1.25rem 1rem;
		background: var(--se-black);
	}

	.se-faq-index__eyebrow {
		margin-block-end: 0.75rem;
		padding-inline: var(--se-pad);
	}

	.se-faq-index__list {
		flex-direction: row;
		gap: 1.5rem;
		overflow-x: auto;
		padding-inline: var(--se-pad);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.se-faq-index__list::-webkit-scrollbar {
		display: none;
	}

	.se-faq-index__item {
		flex: none;
		scroll-snap-align: start;
	}

	.se-faq-index__link {
		white-space: nowrap;
		font-size: 0.8125rem;
	}
}

/*
 * The two column FAQ body. The container carries the class from the page JSON,
 * so the layout stays an Elementor container the client can see and move, while
 * the measurements stay here in rem and vw. The body prefix beats Elementor's
 * own container rules without an !important.
 */
body.se-site .elementor-element.se-faq-cols,
body.se-site .e-con:has( > .elementor-widget-se-faq-index ) {
	display: grid;
	grid-template-columns: 23.75rem minmax(0, 1fr);
	gap: clamp(1.5rem, 3.33vw, 4rem);
	align-items: start;
	padding-inline: var(--se-pad);
}

@media (max-width: 1023px) {
	body.se-site .elementor-element.se-faq-cols,
	body.se-site .e-con:has( > .elementor-widget-se-faq-index ) {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	body.se-site .e-con:has( > .elementor-widget-se-faq-index ) {
		padding-inline: 0;
	}

	.se-faq-index__eyebrow,
	.se-faq-index__list {
		padding-inline: var(--se-pad);
	}

	body.se-site .e-con:has( > .elementor-widget-se-faq-index ) > .elementor-widget:not(.elementor-widget-se-faq-index),
	body.se-site .e-con:has( > .elementor-widget-se-faq-index ) > .e-con {
		padding-inline: var(--se-pad);
	}
}