/* FAQ section (front page `.faq-contact` + accordion) */

.faq-contact .section-title {
	font-size: 78px;
	line-height: 0.9;
}

/* Overrides for the FAQ section */

#faq {
	min-height: 450px;
}

#faq .section-title {
	margin-bottom: 24px;
}

.faq {
	display: grid;
	gap: 14px;
}

.faq .accordion-item + .accordion-item {
	margin-top: 0;
}

.faq-item {
	--faq-btn-pl: 18px;
	--faq-icon-col: 30px;
	--faq-col-gap: 16px;
	border: 0;
	border-radius: 25px;
	overflow: hidden;
}

.faq-item .accordion-header {
	margin-bottom: 0;
}

.faq-item .accordion-button,
.faq-item .accordion-body {
	background: transparent;
}

.faq-item .accordion-button.faq-toggle {
	align-items: center;
	border-radius: 0;
	box-shadow: none;
	color: var(--black);
	display: flex;
	font-weight: 700;
	gap: 14px var(--faq-col-gap);
	padding: 14px 20px 14px var(--faq-btn-pl);
	text-align: left;
	width: 100%;
}

.faq-item .accordion-button.faq-toggle::after {
	display: none;
}

.faq-item .accordion-button.faq-toggle:not(.collapsed) {
	background: transparent;
	box-shadow: none;
	color: var(--black);
}

.faq-item .accordion-button.faq-toggle:focus {
	box-shadow: none;
}

.faq-qmark {
	align-items: center;
	display: flex;
	flex: 0 0 var(--faq-icon-col);
	justify-content: center;
	line-height: 0;
	width: var(--faq-icon-col);
}

.faq-qmark img {
	aspect-ratio: 47 / 100;
	display: block;
	height: auto;
	max-height: 30px;
	object-fit: contain;
	width: auto;
}

.faq-question-text {
	flex: 1 1 auto;
	font-family: "Figtree", sans-serif;
	font-size: 18px;
	font-weight: 400 !important;
	line-height: 1.25;
	min-width: 0;
	padding: 4px 0;
}

.faq-plus {
	flex-shrink: 0;
	line-height: 0;
}

.faq-plus img {
	display: block;
	height: auto;
	transition: transform 0.25s ease;
	width: 40px;
}

.faq-item .accordion-button.faq-toggle:not(.collapsed) .faq-plus img {
	transform: rotate(45deg);
}

.faq-item .accordion-body {
	font-size: 16px;
	line-height: 1.45;
	padding: 0 24px 18px
		calc(var(--faq-btn-pl) + var(--faq-icon-col) + var(--faq-col-gap));
}

.faq-item .accordion-body a {
	color: var(--black);
	font-weight: 700;
	text-decoration: underline;
}

.faq-item .accordion-body a:hover,
.faq-item .accordion-body a:focus {
	color: var(--black);
	text-decoration: underline;
}

.faq-item .accordion-body p {
	margin: 0;
}

.faq-item .accordion-body p + p,
.faq-item .accordion-body p + .faq-evaluation-title,
.faq-item .accordion-body .faq-evaluation-step + .faq-evaluation-step {
	margin-top: 16px;
}

.faq-evaluation-title {
	font-weight: 800;
}

.faq-evaluation-step-title {
	font-weight: 800;
	margin: 0 0 8px;
	text-decoration: underline;
	text-transform: uppercase;
}

.faq-evaluation-step p:last-child {
	margin: 0;
}

.faq-spending-chart {
	border-radius: 25px;
	display: block;
	max-width: 100%;
}

.faq-item-orange {
	background: #f4a26f;
}

.faq-item-blue {
	background: #8ed2ff;
}

.faq-item-lilac {
	background: #dca6f4;
}

.faq-item-green {
	background: #93e17f;
}

.faq > .accordion-item:first-of-type {
	border-radius: 25px;
}

.faq > .accordion-item:last-of-type {
	border-radius: 25px;
}

/* Overrides for the FAQ section */

/* Responsive breakpoints — FAQ */

@media (max-width: 1280px) {
	.faq-contact .section-title {
		font-size: 68px;
	}
}

@media (max-width: 1024px) {
	.faq-contact .section-title {
		font-size: 58px;
	}

	#faq {
		min-height: 0;
	}
}

@media (max-width: 900px) {
	.faq-contact .section-title {
		font-size: 52px;
	}
}

@media (max-width: 768px) {
	.faq-contact .section-title {
		font-size: 44px;
	}

	.faq-item .accordion-button.faq-toggle {
		padding: 12px 16px 12px 14px;
	}

	.faq-question-text {
		font-size: 17px;
	}

	.faq-item .accordion-body {
		font-size: 16px;
		padding: 0 16px 16px calc(14px + var(--faq-icon-col) + var(--faq-col-gap));
	}
}

@media (max-width: 601px) {
	.faq-plus img {
		width: 32px;
	}

	.faq-item {
		--faq-btn-pl: 14px;
		--faq-col-gap: 12px;
	}
}

@media (max-width: 480px) {
	.faq-contact .section-title {
		font-size: 38px;
	}

	.faq-question-text {
		font-size: 16px;
	}
}

@media (max-width: 380px) {
	.faq-contact .section-title {
		font-size: 32px;
	}

	.faq-qmark img {
		max-height: 24px;
	}
}

/* Responsive breakpoints — FAQ */
