/**
 * FAQ Section.
 *
 * Brand colours: ink #1E1F1E · slate #454645 · brand #119100 ·
 *                sky #35AFC9 · cloud #F3EFE3
 */

.nops-faq {
	position: relative;
	width: 100%;
	background: #454645; /* slate */
	color: #f3efe3; /* cloud */
	padding: 98px 0;
}

.nops-faq-heading {
	margin: 0 0 48px; /* 48px above the first line */
	font-weight: 400;
	line-height: 1.1;
	color: #f3efe3;
	font-size: clamp(2rem, 2.6vw, 50px); /* 50px */
}

/* ---- Accordion ---- */
.nops-faq-item {
	border-top: 1px solid rgba(243, 239, 227, 0.4); /* white line */
}

.nops-faq-item:last-child {
	border-bottom: 1px solid rgba(243, 239, 227, 0.4);
}

.nops-faq-question {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
	padding: 34px 0 38px; /* 34px top, 38px bottom */
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: #f3efe3;
	font-size: 24px; /* 24px */
	line-height: 1.3;
}

/* +/- icon */
.nops-faq-icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.nops-faq-icon::before,
.nops-faq-icon::after {
	content: "";
	position: absolute;
	background: #f3efe3;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* horizontal bar (always visible) */
.nops-faq-icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

/* vertical bar (hidden when open => becomes a minus) */
.nops-faq-icon::after {
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}

.nops-faq-question[aria-expanded="true"] .nops-faq-icon::after {
	transform: translateX(-50%) scaleY(0);
	opacity: 0;
}

/* ---- Answer (animated height) ---- */
.nops-faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.nops-faq-answer.is-open {
	grid-template-rows: 1fr;
}

.nops-faq-answer-inner {
	overflow: hidden;
	font-size: 20px; /* 20px */
	letter-spacing: 0.015em;
	line-height: 28px;
	color: #f3efe3;
}

/* 38px below the FAQ title — the title's 38px bottom padding provides the
   gap; add bottom padding so the open answer breathes above the next line. */
.nops-faq-answer.is-open .nops-faq-answer-inner {
	padding-bottom: 38px;
}

.nops-faq-answer-inner p {
	margin: 0;
}

/* icon alignment: keep the question text indented to match the icon column */
.nops-faq-answer-inner {
	padding-left: 50px; /* icon width (18) + gap (32) */
}