/**
 * Custom FAQ Accordion Styling for BigCloudy Blog
 * Styles for Yoast SEO FAQ Block (yoast/faq-block)
 * Provides accordion/toggle functionality with chevron icons
 */

/* ============================================
   FAQ Block Container
   ============================================ */
.wp-block-yoast-faq-block,
.schema-faq {
	margin: 40px 0;
}

/* ============================================
   FAQ Question Items - Accordion Style
   ============================================ */
.schema-faq-section {
	background-color: #f3f4f6;
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.schema-faq-section:hover {
	background-color: #e5e7eb;
}

/* ============================================
   FAQ Question - Clickable Header
   ============================================ */
.schema-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 600;
	color: #111827;
	margin: 0 !important;
	user-select: none;
	position: relative;
}

.schema-faq-question:hover {
	color: #3b82f6;
}

/* Remove default heading margins */
.schema-faq-question h3,
.schema-faq-question h4 {
	margin: 0 !important;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.5;
	padding-right: 40px;
}

/* ============================================
   Chevron Icon (Right Arrow / Down Arrow)
   ============================================ */
.schema-faq-question::after {
	content: "›";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	font-size: 1.8rem;
	font-weight: 300;
	color: #6b7280;
	transition: transform 0.3s ease, color 0.3s ease;
	line-height: 1;
}

/* When question is expanded - rotate chevron down */
.schema-faq-section[aria-expanded="true"] .schema-faq-question::after,
.schema-faq-section.is-active .schema-faq-question::after {
	transform: translateY(-50%) rotate(90deg);
	color: #3b82f6;
}

/* ============================================
   FAQ Answer - Collapsible Content
   ============================================ */
.schema-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
	padding: 0 20px;
	background-color: #ffffff;
}

/* When answer is visible (expanded) */
.schema-faq-section[aria-expanded="true"] .schema-faq-answer,
.schema-faq-section.is-active .schema-faq-answer {
	max-height: 1000px;
	padding: 20px;
	border-top: 1px solid #e5e7eb;
}

.schema-faq-answer p {
	margin: 0;
	color: #374151;
	font-size: 0.938rem;
	line-height: 1.7;
}

/* ============================================
   Alternative: Open First Question by Default
   ============================================ */
.schema-faq-section:first-of-type .schema-faq-answer {
	max-height: 1000px;
	padding: 20px;
	border-top: 1px solid #e5e7eb;
}

.schema-faq-section:first-of-type .schema-faq-question::after {
	transform: translateY(-50%) rotate(90deg);
	color: #3b82f6;
}

/* ============================================
   Responsive Design - Mobile Optimization
   ============================================ */
@media (max-width: 768px) {
	.schema-faq-question {
		font-size: 1rem;
		padding: 15px 18px;
	}
	
	.schema-faq-question::after {
		font-size: 1.5rem;
		right: 15px;
	}
	
	.schema-faq-section[aria-expanded="true"] .schema-faq-answer,
	.schema-faq-section.is-active .schema-faq-answer,
	.schema-faq-section:first-of-type .schema-faq-answer {
		padding: 15px 18px;
	}
	
	.schema-faq-answer p {
		font-size: 0.875rem;
	}
}

/* ============================================
   Dark Mode Support
   ============================================ */
[data-site-scheme="dark"] .schema-faq-section {
	background-color: #1f2937;
}

[data-site-scheme="dark"] .schema-faq-section:hover {
	background-color: #374151;
}

[data-site-scheme="dark"] .schema-faq-question {
	color: #f9fafb;
}

[data-site-scheme="dark"] .schema-faq-question:hover {
	color: #60a5fa;
}

[data-site-scheme="dark"] .schema-faq-answer {
	background-color: #111827;
}

[data-site-scheme="dark"] .schema-faq-answer p {
	color: #d1d5db;
}

[data-site-scheme="dark"] .schema-faq-section[aria-expanded="true"] .schema-faq-answer,
[data-site-scheme="dark"] .schema-faq-section.is-active .schema-faq-answer,
[data-site-scheme="dark"] .schema-faq-section:first-of-type .schema-faq-answer {
	border-top-color: #374151;
}

/* ============================================
   Accessibility - Focus States
   ============================================ */
.schema-faq-question:focus {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

.schema-faq-question:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

/* ============================================
   Animation - Smooth Transitions
   ============================================ */
.schema-faq-section {
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   Print Styles - Show All Answers
   ============================================ */
@media print {
	.schema-faq-answer {
		max-height: none !important;
		padding: 20px !important;
		border-top: 1px solid #e5e7eb !important;
	}
	
	.schema-faq-question::after {
		display: none;
	}
}