/**
 * FAQ Accordion Block Styles
 *
 * Styling for the FAQ accordion component.
 * Leverages existing button styles and theme variables.
 */

/* FAQ Block Container */
.eic-faq-block {
	margin: 2rem 0;
}

/* FAQ List */
.eic-faq-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Individual FAQ Item */
.eic-faq-item {
	background-color: var(--eic-main-navy-300);
	border-radius: 5px;
}



/* FAQ Header - Question and Button */
.eic-faq-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1rem;
}

/* Question Text */
.eic-faq-question-text {
	flex: 1;
	font-size: larger;
	font-weight: 600;
	color: var(--eic-main-navy-950);
}

/* Toggle Button - Show/Hide text switching */
.eic-faq-toggle {
	flex-shrink: 0;
}

.eic-faq-toggle .eic-faq-btn-hide {
	display: none;
}

.eic-faq-toggle .eic-faq-btn-show {
	display: inline;
}

.eic-faq-toggle[aria-expanded="true"] .eic-faq-btn-hide {
	display: inline;
}

.eic-faq-toggle[aria-expanded="true"] .eic-faq-btn-show {
	display: none;
}

/* Rotate chevron when expanded */
.eic-faq-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* FAQ Answer Panel */
.eic-faq-answer {
	overflow: hidden;
	padding: 1rem;
	border-top: 2px solid var(--eic-main-navy-400);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background: var(--eic-main-navy-50);

}

.eic-faq-answer-content {
	padding: 0 0 1.5rem 0;
	color: var(--eic-main-navy-800);
	line-height: 1.6;
}

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

/* Uniform 16px body text for all FAQ answer content (inside and outside tables) */
.eic-faq-answer-content p,
.eic-faq-answer-content ul,
.eic-faq-answer-content ol,
.eic-faq-answer-content li,
.eic-faq-answer-content th,
.eic-faq-answer-content td {
	font-size: 16px;
}

/* Tables within answers - full width, matching accordion palette */
.eic-faq-answer-content table {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
	font-size: 16px;
	background: var(--eic-main-navy-50);
	border: 1px solid var(--eic-main-navy-200);
	border-radius: 5px;
	overflow: hidden;
}

.eic-faq-answer-content th,
.eic-faq-answer-content td {
	padding: 0.625rem 0.875rem;
	text-align: left;
	vertical-align: top;
	/* 1px stroke between cells, matching the header colour */
	border: 1px solid var(--eic-main-navy-300);
}

.eic-faq-answer-content th {
	background-color: var(--eic-main-navy-300);
	color: var(--eic-main-navy-950);
	font-weight: 600;
}

/* Subtle zebra striping for readability */
.eic-faq-answer-content tbody tr:nth-child(even) {
	background-color: var(--eic-main-navy-100);
}

.eic-faq-answer-content tbody tr:last-child td {
	border-bottom: none;
}

/* Editor Placeholder */
.eic-faq-placeholder {
	padding: 2rem;
	background-color: var(--eic-main-navy-100);
	border: 2px dashed var(--eic-main-navy-300);
	border-radius: 4px;
	text-align: center;
	color: var(--eic-main-navy-600);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.eic-faq-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.eic-faq-question-text {
		font-size: larger;
	}

	.eic-faq-answer-content {
		padding-bottom: 1rem;
	}

	/* Allow wide tables to scroll horizontally rather than break the layout */
	.eic-faq-answer-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}