/**
 * FAQ Page Styles (BEM)
 * Block: .faq-page
 */

/* ==========================================================================
   FAQ Page Block
   ========================================================================== */

.faq-page {
	padding: 0 var(--spacing-5xl) var(--spacing-6xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6xl);
	align-items: flex-start;
	justify-content: flex-start;
	overflow: hidden;
}

/* ==========================================================================
   FAQ Page Title
   ========================================================================== */

.faq-page__title {
	font-family: var(--font-actay);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-black);
	text-align: left;
	margin: 0;
	width: 100%;
}

/* ==========================================================================
   FAQ Group
   ========================================================================== */

.faq-page__group {
	display: flex;
	flex-direction: row;
	gap: 0;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}

.faq-page__group-header {
	padding-top: var(--spacing-xl);
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: flex-start;
	justify-content: flex-start;
	align-self: stretch;
	flex: 1;
}

.faq-page__group-title {
	font-family: var(--font-actay);
	font-size: var(--font-size-2-5xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-black-200);
	text-align: left;
	margin: 0;
	width: 100%;
	max-width: 63.2rem;
}

/* ==========================================================================
   FAQ Items
   ========================================================================== */

.faq-page__items {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: flex-start;
	justify-content: flex-start;
	flex: 1;
}

.faq-page__item {
	border-bottom: 0.1rem solid var(--color-black-200);
	padding: var(--spacing-2xl) 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	align-self: stretch;
}

.faq-page__item:last-child {
	border-bottom: none;
}

/* ==========================================================================
   FAQ Question Button
   ========================================================================== */

.faq-page__question {
	display: flex;
	flex-direction: row;
	gap: 7.2rem;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.faq-page__question:focus-visible {
	outline: 0.2rem solid var(--color-black);
	outline-offset: 0.4rem;
}

.faq-page__question-text {
	font-family: var(--font-actay);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	color: var(--color-black);
	flex: 1;
	transition: color var(--transition-fast);
}

.faq-page__item--active .faq-page__question-text {
	color: var(--color-accent);
}

.faq-page__question-icon {
	flex-shrink: 0;
	width: 4.4rem;
	height: 4.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.faq-page__icon-plus {
	width: 2rem;
	height: 2rem;
	color: var(--color-black);
	position: absolute;
	transition: transform var(--transition-fast);
	transform-origin: center;
}

.faq-page__item--active .faq-page__icon-plus {
	transform: rotate(45deg);
}

.faq-page__item--active .faq-page__question-icon {
	color: var(--color-accent); 
}

.faq-page__item--active .faq-page__icon-plus {
	color: var(--color-accent);
}

/* ==========================================================================
   FAQ Answer
   ========================================================================== */

.faq-page__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--transition-base);
	overflow: hidden;
	padding-right: 8.8rem;
	padding-top: 0;
	transition: padding-top var(--transition-base);
}

.faq-page__answer[aria-hidden="false"] {
	padding-top: var(--spacing-lg);
}

.faq-page__item--active .faq-page__answer {
	grid-template-rows: 1fr;
}

.faq-page__answer-text {
	overflow: hidden;
	font-family: var(--font-inter);
	font-size: 1.5rem;
	font-weight: var(--font-weight-regular);
	line-height: 1.5;
	color: var(--color-black);
}

.faq-page__answer-text p {
	margin: 0 0 var(--spacing-sm);
}

.faq-page__answer-text p:last-child {
	margin-bottom: 0;
}

.faq-page__answer-text a {
	color: var(--color-black);
	text-decoration: underline;
	transition: opacity var(--transition-fast);
}

.faq-page__answer-text a:hover {
	opacity: 0.7;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.faq-page__empty {
	font-family: var(--font-inter);
	font-size: var(--font-size-md);
	color: var(--color-black-400);
	text-align: center;
	width: 100%;
	padding: var(--spacing-4xl);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1089px) {
	.faq-page {
		padding: var(--spacing-3xl) 0;
		gap: var(--spacing-3xl);
	}

	.faq-page__title {
		font-size: 3rem;
	}

	.faq-page__group {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.faq-page__group-header {
		padding-top: 0;
	}

	.faq-page__group-title {
		font-size: var(--font-size-xl);
		line-height: var(--line-height-snug);
		max-width: 19.2rem;
	}

	.faq-page__item {
		padding: var(--spacing-lg) 0;
		gap: 0;
	}

	.faq-page__question {
		gap: var(--spacing-lg);
	}

	.faq-page__question-text {
		font-size: var(--font-size-md);
	}

	.faq-page__answer[aria-hidden="false"] {
		padding-top: var(--spacing-md);
	}

	.faq-page__question-icon {
		width: 3.6rem;
		height: 3.6rem;
	}

	.faq-page__icon-plus {
		width: 1.6rem;
		height: 1.6rem;
	}

	.faq-page__answer {
		padding-right: 0;
	}

	.faq-page__answer-text {
		font-size: var(--font-size-sm);
	}
}