/* =========================================================================
 * FAQ Accordion - stili condivisi (editor + frontend)
 * Usa le variabili del tema Blocksy quando disponibili, con fallback neutri.
 * ========================================================================= */

.faq-accordion {
	--faq-border-color: var( --theme-border-color, #e2e8f0 );
	--faq-accent: var( --theme-palette-color-1, #2563eb );
	--faq-question-color: var( --theme-heading-color, #1e293b );
	--faq-answer-color: var( --theme-text-color, #475569 );
	--faq-bg: var( --theme-content-background-color, #ffffff );
	--faq-radius: 10px;
	--faq-gap: 12px;
	--faq-anim-duration: 450ms;

	display: flex;
	flex-direction: column;
	gap: var( --faq-gap );
	margin-block: 1.5em;
}

/* --- Singolo item ----------------------------------------------------- */
.faq-item {
	border: 1px solid var( --faq-border-color );
	border-radius: var( --faq-radius );
	background-color: var( --faq-bg );
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
	border-color: var( --faq-accent );
}

.faq-item[open],
.faq-item.is-open,
.faq-item.faq-open {
	border-color: var( --faq-accent );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.06 );
}

/* --- Domanda (summary) ------------------------------------------------ */
.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	margin: 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	line-height: 1.4;
	color: var( --faq-question-color );
	user-select: none;
}

/* Nasconde la freccetta nativa di <summary> */
.faq-question::-webkit-details-marker {
	display: none;
}
.faq-question::marker {
	content: '';
}

.faq-question-text {
	flex: 1 1 auto;
}

/* --- Icona +/- -------------------------------------------------------- */
.faq-icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.faq-icon::before,
.faq-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background-color: var( --faq-accent );
	border-radius: 2px;
	transform: translate( -50%, -50% );
	transition: transform var( --faq-anim-duration ) ease, opacity var( --faq-anim-duration ) ease;
}

/* La barra verticale forma il "+" */
.faq-icon::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

/* Quando aperto: il "+" diventa "-" */
.faq-item[open] .faq-icon::after,
.faq-item.is-open .faq-icon::after,
.faq-item.faq-open .faq-icon::after {
	transform: translate( -50%, -50% ) rotate( 0deg );
	opacity: 0;
}

/* --- Variante icona: freccia (chevron) -------------------------------- */
.faq-accordion.is-icon-chevron .faq-icon::before,
.faq-accordion.is-icon-chevron .faq-icon::after {
	width: 9px;
	transition: transform var( --faq-anim-duration ) ease;
}

.faq-accordion.is-icon-chevron .faq-icon::before {
	transform: translate( -75%, -50% ) rotate( 45deg );
}

.faq-accordion.is-icon-chevron .faq-icon::after {
	transform: translate( -25%, -50% ) rotate( -45deg );
	opacity: 1;
}

.faq-accordion.is-icon-chevron .faq-item[open] .faq-icon::before,
.faq-accordion.is-icon-chevron .faq-item.is-open .faq-icon::before,
.faq-accordion.is-icon-chevron .faq-item.faq-open .faq-icon::before {
	transform: translate( -75%, -50% ) rotate( -45deg );
}

.faq-accordion.is-icon-chevron .faq-item[open] .faq-icon::after,
.faq-accordion.is-icon-chevron .faq-item.is-open .faq-icon::after,
.faq-accordion.is-icon-chevron .faq-item.faq-open .faq-icon::after {
	transform: translate( -25%, -50% ) rotate( 45deg );
	opacity: 1;
}

/* --- Risposta --------------------------------------------------------- */
.faq-answer {
	box-sizing: border-box;
	padding: 0 20px 18px;
	color: var( --faq-answer-color );
}

.faq-answer > :first-child {
	margin-top: 0;
}
.faq-answer > :last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * Modalità JavaScript (frontend): altezza in pixel animata via JS.
 * Il contenuto interno resta a dimensione fissa e viene solo tagliato
 * (overflow), così il testo non si ricompatta né "blocca" in chiusura.
 * ========================================================================= */
.faq-accordion.faq-js .faq-item > .faq-answer {
	display: block !important; /* sovrascrive il nascondimento nativo di <details> */
	padding: 0;
	overflow: hidden;
	height: 0;
}

.faq-accordion.faq-js .faq-item.faq-open:not( .faq-is-animating ) > .faq-answer {
	height: auto;
	overflow: visible;
}

.faq-accordion.faq-js .faq-answer-inner {
	overflow: visible;
	min-height: 0;
	padding: 0 20px 18px;
	color: var( --faq-answer-color );
}

.faq-accordion.faq-js .faq-answer-inner > :first-child {
	margin-top: 0;
}

.faq-accordion.faq-js .faq-answer-inner > :last-child {
	margin-bottom: 0;
}

/* Dissolvenza testo sincronizzata con l'altezza (stessa durata/easing) */
.faq-fade-content.faq-anim-fade.faq-js .faq-answer-inner,
.faq-fade-content.faq-anim-fade-slide.faq-js .faq-answer-inner,
.faq-fade-content.faq-anim-zoom.faq-js .faq-answer-inner {
	opacity: 0;
	transition:
		opacity var( --faq-anim-duration ) cubic-bezier( 0.33, 1, 0.68, 1 ),
		transform var( --faq-anim-duration ) cubic-bezier( 0.33, 1, 0.68, 1 );
}

.faq-fade-content.faq-anim-fade-slide.faq-js .faq-answer-inner {
	transform: translateY( -6px );
}

.faq-fade-content.faq-anim-zoom.faq-js .faq-answer-inner {
	transform: scale( 0.98 );
	transform-origin: top center;
}

.faq-fade-content.faq-anim-fade.faq-js .faq-item.faq-open .faq-answer-inner,
.faq-fade-content.faq-anim-fade-slide.faq-js .faq-item.faq-open .faq-answer-inner,
.faq-fade-content.faq-anim-zoom.faq-js .faq-item.faq-open .faq-answer-inner {
	opacity: 1;
	transform: none;
}

/* Solo riquadro: nessuna dissolvenza sul testo */
.faq-no-fade-content.faq-js .faq-answer-inner {
	opacity: 1;
	transform: none;
	transition: none;
}

.faq-anim-none.faq-js .faq-item > .faq-answer,
.faq-anim-none.faq-js .faq-answer-inner {
	transition: none;
}

/* =========================================================================
 * Fallback senza JavaScript + anteprima nell'editor.
 * Animazione CSS per tipo (la durata usa la variabile configurabile).
 * ========================================================================= */
.faq-accordion:not( .faq-js ) .faq-item[open] .faq-answer,
.faq-item--editor.is-open .faq-answer {
	transform-origin: top;
	animation-duration: var( --faq-anim-duration );
	animation-timing-function: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	animation-fill-mode: both;
}

/* fade-slide (predefinito) */
.faq-anim-fade-slide:not( .faq-js ) .faq-item[open] .faq-answer,
.faq-anim-fade-slide .faq-item--editor.is-open .faq-answer {
	animation-name: faqFadeSlide;
}

/* slide (solo altezza) */
.faq-anim-slide:not( .faq-js ) .faq-item[open] .faq-answer,
.faq-anim-slide .faq-item--editor.is-open .faq-answer {
	animation-name: faqSlide;
}

/* fade */
.faq-anim-fade:not( .faq-js ) .faq-item[open] .faq-answer,
.faq-anim-fade .faq-item--editor.is-open .faq-answer {
	animation-name: faqFade;
}

/* zoom */
.faq-anim-zoom:not( .faq-js ) .faq-item[open] .faq-answer,
.faq-anim-zoom .faq-item--editor.is-open .faq-answer {
	animation-name: faqZoom;
}

/* nessuna */
.faq-anim-none:not( .faq-js ) .faq-item[open] .faq-answer,
.faq-anim-none .faq-item--editor.is-open .faq-answer {
	animation-name: none;
}

@keyframes faqFadeSlide {
	from {
		opacity: 0;
		transform: translateY( -14px ) scaleY( 0.96 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scaleY( 1 );
	}
}

@keyframes faqSlide {
	from {
		opacity: 0.4;
		transform: scaleY( 0.85 );
	}
	to {
		opacity: 1;
		transform: scaleY( 1 );
	}
}

@keyframes faqFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes faqZoom {
	from {
		opacity: 0;
		transform: scale( 0.92 );
	}
	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

/* =========================================================================
 * Anteprima nell'editor di Gutenberg
 * Le FAQ appaiono chiuse e si espandono quando vengono selezionate,
 * così l'editor rispecchia fedelmente il comportamento del frontend.
 * ========================================================================= */
.faq-item--editor .faq-question {
	cursor: default;
}

.faq-item--editor .faq-answer {
	display: none;
}

.faq-item--editor.is-open .faq-answer {
	display: block;
}