.c-faq {
	margin: 0 auto;
	padding-block: clamp(48px, 8vw, 100px);
	max-width: 700px;
}


.c-faq__header {
	// when it has content add some spacing
	&:has(> *){
		margin-bottom: 32px;
	}
}


.c-faq__label {
	@include font-family(primary);
	color: palette(primary);
	font-weight: bold;
	margin-bottom: 8px;
}


.c-faq__title {
	@include font-family(primary);
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	line-height: 1.2;
	font-weight: bold;
	color: palette(dark);
	max-width: 612px;
}


.c-faq__list {
	list-style: none;
	margin-left: 0;
}


.c-faq__item {
	--arrow-color: currentColor;

	&:has(:hover) {
		--question-color: #{scale-color(palette(secondary), $lightness: 30%)};
	}

	&.is-active {
		--question-color: #{palette(primary)};
		--answer-opacity: 1;
		--answer-max-height: 600px;
		--answer-transition: all 400ms ease-out 150ms; // open
		--answer-padding-top: 8px;
		--arrow-color: #{palette(primary)};
		--arrow-rotate: 0turn;
	}

	&:nth-last-child(n+2) {
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom: 1px solid palette(neutral, 450);
	}
}


.c-faq__question {
	display: flex;
	gap: 16px;
	align-items: baseline;
	font-size: clamp(1.1rem, 4vw, 1.4rem);
	font-weight: bold;
	cursor: pointer;
	color: var(--question-color);
	transition: color 200ms;

	&::after {
		--size: 20px;

		margin-left: auto;
		flex: none;
	    content: '';
		width: var(--size);
		aspect-ratio: 1;
	    background-color: var(--arrow-color);
		mask-image: url("/img/arrowhead-down.svg");
		mask-position: center;
		mask-size: 100%;
		mask-repeat: no-repeat;
		rotate: var(--arrow-rotate, -0.25turn);
		transition: all 200ms;
	}
}


.c-faq__answer {
	overflow: hidden;
	opacity: var(--answer-opacity, 0);
	max-height: var(--answer-max-height, 0);
	transition: var(--answer-transition, all 150ms ease-out); // close
	padding-top: var(--answer-padding-top);
}