/* ============================================================
   FAQ Accordion Block Styles
   ============================================================ */

.faq-accordion {
	--faq-border-color:     #e2e2e2;
	--faq-bg-question:      #ffffff;
	--faq-bg-question-open: #f8f9fa;
	--faq-color-question:   #1a1a1a;
	--faq-color-answer:     #444444;
	--faq-accent:           #0073aa;
	--faq-radius:           6px;
	--faq-gap:              8px;
	--faq-transition:       0.28s ease;

	width: 100%;
	margin-block: 1.5em;
}

.faq-accordion__heading {
	margin-top: 0;
	margin-bottom: 1.25em;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--faq-color-question);
}

/* List */
.faq-accordion__list {
	display: flex;
	flex-direction: column;
	gap: var(--faq-gap);
}

/* Single item */
.faq-accordion__item {
	border: 1px solid var(--faq-border-color);
	border-radius: var(--faq-radius);
	overflow: hidden;
}

/* Question button — use !important to override theme global button styles */
.faq-accordion__question {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	width: 100% !important;
	padding: 18px 20px !important;
	background: var(--faq-bg-question) !important;
	background-color: var(--faq-bg-question) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
	color: var(--faq-color-question) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	transition: background-color var(--faq-transition), color var(--faq-transition);
}

.faq-accordion__question:hover {
	background: var(--faq-bg-question-open) !important;
	background-color: var(--faq-bg-question-open) !important;
	color: var(--faq-color-question) !important;
}

.faq-accordion__question:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: -2px;
}

.faq-accordion__question[aria-expanded="true"] {
	background: var(--faq-bg-question-open) !important;
	background-color: var(--faq-bg-question-open) !important;
	color: var(--faq-accent) !important;
}

/* min-width: 0 is required for flex children to allow text wrapping */
.faq-accordion__question-text {
	flex: 1;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Chevron icon — inherits currentColor from button so it's always visible */
.faq-accordion__chevron {
	flex-shrink: 0;
	color: inherit;
	transition: transform var(--faq-transition);
}

.faq-accordion__question[aria-expanded="true"] .faq-accordion__chevron {
	transform: rotate(180deg);
}

/* Answer panel — grid trick for smooth height transition */
.faq-accordion__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--faq-transition);
}

.faq-accordion__answer.is-open {
	grid-template-rows: 1fr;
}

.faq-accordion__answer-inner {
	overflow: hidden;
	min-height: 0;
}

/* Answer content */
.faq-accordion__answer.is-open .faq-accordion__answer-inner {
	padding: 4px 20px 20px;
}

.faq-accordion__answer-inner p {
	margin-top: 0;
	color: var(--faq-color-answer);
	line-height: 1.6;
}

.faq-accordion__answer-inner > *:last-child {
	margin-bottom: 0;
}

/* Divider between question and answer */
.faq-accordion__item:has(.faq-accordion__answer.is-open) {
	border-color: var(--faq-accent);
}

/* ── Width / alignment ─────────────────────────────
   Toolbar options: normal (default) | wide | full
   ─────────────────────────────────────────────── */

.faq-accordion.alignwide {
	max-width: min( 1100px, 95vw );
	margin-left: auto;
	margin-right: auto;
}

.faq-accordion.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	border-radius: 0;
	padding-left: clamp( 16px, 5vw, 80px );
	padding-right: clamp( 16px, 5vw, 80px );
}

/* Responsive */
@media (max-width: 640px) {
	.faq-accordion__question {
		padding: 14px 16px;
		font-size: 0.95rem;
	}

	.faq-accordion__answer.is-open .faq-accordion__answer-inner {
		padding: 4px 16px 16px;
	}
}