@charset "utf-8";

.sec-faq {
	padding-bottom: 7.5rem;
}

.faq-content .faq-item {
	background-color: var(--clr-background);
}

.faq-content .faq-item + .faq-item {
	margin-top: 0.625rem;
}

.faq-content .faq-list .btn-faq {
	display: flex;
	position: relative;
	width: 100%;
	padding: 1.25rem 1.25rem;
	border: none;
	color: var(--clr-neutral-900);
	gap: 0.5625rem;
	appearance: none;
	background-color: transparent;
	align-items: start;
}

.faq-content .faq-list .btn-faq span:nth-of-type(2) {
	line-height: 1.5;
}

.faq-content .faq-list .faq-answer {
	margin-inline: 1.3125rem;
	padding-block: 2.125rem;
	border-top: 1px solid var(--clr-border-500);
}

.faq-content .faq-q,
.faq-content .faq-a {
	font-family: var(--font-tertiary);
}

.faq-answer-inner .faq-a {
	line-height: 2;
}

.faq-content .faq-list .faq-answer-inner {
	display: flex;
	gap: 0.875rem;
}

.faq-content .faq-question .plus-icon {
	display: block;
	position: relative;
	min-width: 1.25rem;
	margin-left: auto;
	aspect-ratio: 1;
	align-self: center;
}

.faq-content .faq-question .plus-icon::before,
.faq-content .faq-question .plus-icon::after {
	display: block;
	position: absolute;
	margin: auto;
	background: var(--clr-neutral-900);
	content: '';
	inset: 0;
	transform-origin: center;
	transition: transform 0.4s;
}

.faq-content .faq-question .plus-icon:before {
	width: 0.9375rem;
	height: 0.0938rem;
}

.faq-content .faq-question .plus-icon:after {
	width: 0.0938rem;
	height: 0.9375rem;
}

.btn-faq[aria-expanded='true'] .plus-icon::before,
.btn-faq[aria-expanded='true'] .plus-icon::after {
	transform: rotate(180deg);
}

.btn-faq[aria-expanded='true'] .plus-icon::after {
	opacity: 0;
	transition: opacity 0.2s 0.2s, transform 0.4s;
}

@media (max-width: 48em) {
	.faq-content .faq-list .btn-faq span:nth-of-type(2),
	.btn-faq .faq-q,
	.faq-answer-inner .faq-a {
		line-height: 2;
	}

	.faq-content .faq-list .btn-faq {
		padding: 1rem 1.375rem;
	}
}