/* FAQ Page Styles - Mobile First */

/* FAQ Page Container */
.faq-page-container {
	padding: var(--spacing-xl) 0;
	min-height: 60vh;
}

.page-id-249 .contact-section {
	margin-bottom: 50px;
}

.faq-content {
	max-width: var(--max-width-container);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* FAQ Heading */
.faq-heading-container {
	text-align: center;
	margin-bottom: var(--spacing-xxl);
}

.faq-heading {
	font-family: var(--font-family-primary);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-violet-dark);
	margin: 0;
}

/* FAQ Table Container */
.faq-table-container {
	width: 100%;
	margin: 0 auto;
}

.faq-table {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-radius: var(--border-radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

/* FAQ Row */
.faq-row {
	border-bottom: 1px solid rgba(43, 5, 72, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

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

/* FAQ Question */
.faq-question {
	position: relative;
	background: var(--primary-violet-dark);
	color: var(--white-primary);
	padding: var(--spacing-lg) var(--spacing-md);
	cursor: pointer;
	transition: transform 0.2s ease;
	user-select: none;
	will-change: transform;
	transform: translateZ(0);
	overflow: hidden;
}

.faq-question::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--dark-to-light-violet-gradient);
	opacity: 1;
	transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 0;
}

.faq-question:hover::before {
	opacity: 0;
}

.faq-question:active {
	transform: translateY(0);
}

.faq-question:active::before {
	opacity: 0;
}

.faq-question-text {
	position: relative;
	z-index: 1;
	font-family: var(--font-family-primary);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
	text-align: left;
}

/* FAQ Answer */
.faq-answer {
	background-color: var(--grey-primary);
	color: var(--primary-violet-dark);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	padding: 0 var(--spacing-md);
	will-change: max-height, opacity, padding;
	transform: translateZ(0);
}

.faq-answer-content {
	padding: var(--spacing-lg) 0;
	font-family: var(--font-family-primary);
	color: var(--primary-violet-dark);
	font-size: 0.8rem;
	line-height: 1.6;
	transform: translateY(-10px);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-content p {
	margin: 0 0 var(--spacing-md) 0;
	font-family: var(--font-family-primary);
	color: var(--primary-violet-dark);
	font-size: 0.8rem;
	line-height: 1.6;
}

.faq-answer-content p:last-child {
	margin-bottom: 0;
}

.faq-answer-content ul,
.faq-answer-content ol {
	margin: var(--spacing-md) 0;
	padding-left: var(--spacing-xl);
	list-style: disc;
}

.faq-answer-content li {
	margin-bottom: var(--spacing-sm);
	font-family: var(--font-family-primary);
	color: var(--primary-violet-dark);
	font-size: 0.8rem;
}

/* Active State */
.faq-row.active .faq-answer {
	max-height: 100vh; /* Ograniczenie do wysokości viewport */
	opacity: 1;
	padding: var(--spacing-md) var(--spacing-md);
}

.faq-row.active .faq-answer-content {
	transform: translateY(0);
}

.faq-row.active .faq-question {
	background: var(--primary-violet-dark);
	transform: translateY(0);
}

.faq-row.active .faq-question::before {
	opacity: 0;
}

.faq-row.active {
	box-shadow: 0 8px 25px rgba(43, 5, 72, 0.15);
}

/* No Content Message */
.faq-no-content {
	text-align: center;
	font-family: var(--font-family-primary);
	font-size: 1.125rem;
	color: var(--primary-violet-dark);
	padding: var(--spacing-xxl);
	background-color: var(--grey-primary);
	border-radius: var(--border-radius-md);
}

/* Mobile optimizations */
@media (max-width: 991px) {
	.faq-question::before {
		transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.faq-question {
		transition: transform 0.15s ease;
	}

	.faq-answer {
		transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.faq-answer-content {
		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.faq-row.active .faq-answer {
		max-height: 80vh; /* Mniejsza wysokość na mobile */
	}
}

/* Desktop Styles */
@media (min-width: 992px) {
	.page-id-249 .contact-section {
	margin-bottom: 100px;
}
	.faq-page-container {
		padding: 5rem 0 3rem 3rem;
	}

	.faq-content {
		padding: 0;
		margin-left: 0;
	}

	.faq-heading-container {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		padding-left: 2rem;
	}

	.faq-heading {
		font-size: 64px; /* 32px desktop */
	}

	.faq-table-container {
		width: 100%;
		margin: 0;
		padding-left: var(--spacing-xl);
	}

	.faq-question-text {
		font-size: 1.3rem; /* 32px desktop */
	}

	.faq-answer-content {
		font-size: 1rem; /* 24px desktop */
	}
}

@media (min-width: 1200px) {
	.faq-page-container {
		padding: 5rem 1.5rem 3rem 0;
	}

	.faq-answer-content li {
		font-size: 1rem;
	}

	.faq-answer-content p {
		font-size: 1rem;
	}
}

@media (min-width: 1400px) {
	.faq-page-container {
		padding: 5rem 2.75rem 100px 0;
	}
	.faq-content {
		padding-left: 0.5rem;
		padding-right: 0.25rem;
	}

	.faq-answer-content li {
		font-size: 1rem;
	}

	.faq-answer-content p {
		font-size: 1rem;
	}
}

@media (min-width: 1800px) {
	.faq-page-container {
		padding: 5rem 2.5rem 3rem 8rem;
	}
	.faq-content {
		padding-left: 0.5rem;
		padding-right: 0.25rem;
	}

	.faq-answer-content p {
		font-size: 1.1rem;
	}

	.faq-answer-content li {
		font-size: 1rem;
	}
}

@media (min-width: 2000px) {
	.faq-page-container {
		min-height: 40vh;
		padding: 5rem 2.5rem 0 16rem;
	}
}