/**
 * FAQ: jump navigation, category groups and the question accordion.
 *
 * No borders anywhere. The two levels are separated by what they are made of:
 * a category title is a **bare heading** sitting on the page, and a question is
 * a **filled row** with the page background showing through the gaps. A plain
 * heading above a run of filled rows reads as a heading without needing a rule
 * or a coloured bar behind it.
 *
 * Colours come from the Elementor kit's Global Colors and typography from its
 * Global Fonts, so nothing is duplicated from the kit.
 *
 * Note on specificity: `.elementor-kit-16 a` and `.elementor-kit-16 button`
 * (0,1,1) paint every link and button on this site. Link rules here are scoped
 * with two classes so they win without !important.
 *
 * @package NightSkyOptics
 */

.c-faq {
	/* Clears the top of the viewport when a jump link lands on a heading. */
	--nso-faq-offset: 120px;
	--nso-faq-radius: 6px;
}

.c-faq__empty {
	margin: 0;
	color: var(--e-global-color-4ee277d, #9b9b9b);
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	line-height: var(--e-global-typography-text-line-height, 1.7);
}

/* -------------------------------------------------------------------------
 * Jump navigation
 * ---------------------------------------------------------------------- */

.c-faq__nav {
	margin: 0 0 44px;
	padding: 20px 22px;
	border-radius: var(--nso-faq-radius);
	background-color: var(--e-global-color-f9ce99a, #f3fbfb);
}

.c-faq__nav-label {
	margin: 0 0 12px;
	color: var(--e-global-color-50b1913, #508f8d);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.c-faq__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-faq__nav-item {
	margin: 0;
}

.c-faq__nav-list .c-faq__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	border: 0;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(44, 53, 75, 0.08);
	color: var(--e-global-color-primary, #2c354b);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.c-faq__nav-list .c-faq__nav-link:hover,
.c-faq__nav-list .c-faq__nav-link:focus-visible {
	background-color: var(--e-global-color-secondary, #69c5c2);
	box-shadow: 0 3px 10px rgba(105, 197, 194, 0.4);
	color: #fff;
}

.c-faq__nav-list .c-faq__nav-link:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #2c354b);
	outline-offset: 2px;
}

.c-faq__nav-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background-color: var(--e-global-color-f9ce99a, #f3fbfb);
	color: var(--e-global-color-50b1913, #508f8d);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.c-faq__nav-list .c-faq__nav-link:hover .c-faq__nav-count,
.c-faq__nav-list .c-faq__nav-link:focus-visible .c-faq__nav-count {
	background-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Category - a plain heading, no fill and no rule
 * ---------------------------------------------------------------------- */

.c-faq__groups {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.c-faq__group {
	scroll-margin-top: var(--nso-faq-offset, 120px);
}

.c-faq__group-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-bottom: 16px;
}

.c-faq__category {
	margin: 0;
	color: var(--e-global-color-primary, #2c354b);
	font-family: var(--e-global-typography-secondary-font-family, "Exo"), sans-serif;
	font-size: var(--e-global-typography-secondary-font-size, 26px);
	font-weight: var(--e-global-typography-secondary-font-weight, 600);
	line-height: var(--e-global-typography-secondary-line-height, 1.3);
}

.c-faq__category-count {
	flex: 0 0 auto;
	color: var(--e-global-color-4ee277d, #9b9b9b);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
	white-space: nowrap;
}

.c-faq__category-intro {
	margin: -8px 0 16px;
	max-width: 78ch;
	color: var(--e-global-color-4ee277d, #9b9b9b);
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

.c-faq__group .c-faq__back {
	display: inline-block;
	margin-top: 16px;
	color: var(--e-global-color-4ee277d, #9b9b9b);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-faq__group .c-faq__back::before {
	content: "\2191";
	margin-right: 6px;
}

.c-faq__group .c-faq__back:hover,
.c-faq__group .c-faq__back:focus-visible {
	color: var(--e-global-color-50b1913, #508f8d);
}

/* -------------------------------------------------------------------------
 * Question - a filled row
 * ---------------------------------------------------------------------- */

.c-faq__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-faq__item {
	border-radius: var(--nso-faq-radius);
	background-color: var(--e-global-color-43f00c0, #f7f7f7);
	scroll-margin-top: var(--nso-faq-offset, 120px);
	transition: background-color 0.2s ease;
}

.c-faq__item:hover {
	background-color: #eef1f2;
}

.c-faq__item[open] {
	background-color: var(--e-global-color-f9ce99a, #f3fbfb);
}

.c-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	color: var(--e-global-color-primary, #2c354b);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, 16px);
	font-weight: var(--e-global-typography-accent-font-weight, 600);
	line-height: var(--e-global-typography-accent-line-height, 1.5);
	list-style: none;
	border-radius: var(--nso-faq-radius);
	transition: color 0.2s ease;
}

/* Remove the browser's own disclosure triangle. */
.c-faq__question::-webkit-details-marker {
	display: none;
}

.c-faq__question::marker {
	content: "";
}

.c-faq__question:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, #69c5c2);
	outline-offset: -2px;
}

.c-faq__item[open] > .c-faq__question {
	color: var(--e-global-color-50b1913, #508f8d);
}

.c-faq__question-text {
	flex: 1 1 auto;
}

/* Plus that becomes a minus. */
.c-faq__marker {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.c-faq__marker::before,
.c-faq__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	transform: translate(-50%, -50%);
}

.c-faq__marker::before {
	width: 14px;
	height: 1.5px;
}

.c-faq__marker::after {
	width: 1.5px;
	height: 14px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.c-faq__item[open] .c-faq__marker::after {
	opacity: 0;
	transform: translate(-50%, -50%) scaleY(0);
}

/* -------------------------------------------------------------------------
 * Answer
 * ---------------------------------------------------------------------- */

.c-faq__answer {
	padding: 0 22px 20px;
	max-width: 82ch;
	color: var(--e-global-color-text, #394460);
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.7);
}

.c-faq__answer > :first-child {
	margin-top: 0;
}

.c-faq__answer > :last-child {
	margin-bottom: 0;
}

.c-faq .c-faq__answer a {
	color: var(--e-global-color-50b1913, #508f8d);
	text-decoration: underline;
}

.c-faq .c-faq__answer a:hover {
	color: var(--e-global-color-accent, #c6488e);
}

.c-faq__answer ul,
.c-faq__answer ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.c-faq__answer li + li {
	margin-top: 0.35em;
}

/* -------------------------------------------------------------------------
 * Motion and responsive
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.c-faq__item,
	.c-faq__marker::after,
	.c-faq__question,
	.c-faq__nav-count,
	.c-faq__nav-list .c-faq__nav-link,
	.c-faq__group .c-faq__back {
		transition: none;
	}
}

@media (max-width: 767px) {
	.c-faq {
		--nso-faq-offset: 90px;
	}

	.c-faq__nav {
		margin-bottom: 32px;
		padding: 16px 16px 18px;
	}

	.c-faq__nav-list {
		gap: 8px;
	}

	.c-faq__nav-list .c-faq__nav-link {
		padding: 9px 13px;
		font-size: 13px;
	}

	.c-faq__groups {
		gap: 40px;
	}

	.c-faq__group-header {
		margin-bottom: 12px;
	}

	.c-faq__question {
		padding: 16px;
	}

	.c-faq__answer {
		padding: 0 16px 18px;
	}
}