/* FAQ Page Styles */

.faq-container {
	max-width: 800px;
	margin: 0 auto;
	padding: var(--space-8) var(--space-4);
}

.faq-header {
	text-align: center;
	margin-bottom: var(--space-8);
}

.faq-header h1 {
	font-size: var(--font-size-3xl);
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: var(--space-2);
}

.faq-subtitle {
	color: var(--gray-600);
	font-size: var(--font-size-lg);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.faq-item {
	background: white;
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-200);
	transition: var(--transition);
}

.faq-item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.faq-question {
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--primary-dark);
	margin-bottom: var(--space-2);
}

.faq-answer {
	color: var(--gray-700);
	font-size: var(--font-size-base);
	line-height: 1.6;
}

.faq-answer a {
	color: var(--primary);
	font-weight: 500;
	text-decoration: none;
}

.faq-answer a:hover {
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
	.faq-container {
		padding: var(--space-6) var(--space-3);
	}

	.faq-header h1 {
		font-size: var(--font-size-2xl);
	}
}