/**
 * [hi_faq] - Domande frequenti in accordion.
 *
 * Stessa grafica di [hi_dettagli_tecnici] della scheda prodotto (vedi
 * hi-dettagli-tecnici.css): numero blu, domanda, freccia, bordi sottili.
 * Misure in px: il rem di Impreza e' fluido. Specificita' .hi-faq .x per
 * battere gli stili del tema senza !important.
 */

.hi-faq {
	/* Rientro di domanda e risposta = larghezza numero + spazio. */
	--hi-faq-numero: 20px;
	--hi-faq-gap: 22px;
	/* Distacco dal blocco precedente (descrizione della categoria). */
	margin: 56px 0 40px;
}

.hi-faq .hi-faq__titolo {
	margin: 0 0 24px;
	padding: 0;
}

.hi-faq .hi-faq__elenco {
	border-top: 1px solid var(--color-hig-bordo, #E3E8F0);
}

.hi-faq .hi-faq__voce {
	border-bottom: 1px solid var(--color-hig-bordo, #E3E8F0);
	margin: 0;
	padding: 0;
}

/* Testata: numero, domanda, freccia. */
.hi-faq .hi-faq__testata {
	display: flex;
	align-items: center;
	gap: var(--hi-faq-gap);
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
}

.hi-faq .hi-faq__testata::-webkit-details-marker {
	display: none;
}

.hi-faq .hi-faq__testata::marker {
	content: "";
}

.hi-faq .hi-faq__testata:focus {
	outline: none;
}

.hi-faq .hi-faq__testata:focus-visible {
	outline: 2px solid var(--color-hig-primario, #2B72C7);
	outline-offset: 4px;
}

.hi-faq .hi-faq__numero {
	/* Larghezza fissa: "02" e' piu' largo di "01", le domande restano allineate. */
	flex: 0 0 var(--hi-faq-numero);
	width: var(--hi-faq-numero);
	font-family: var(--h4-font-family, Onest, sans-serif);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 2.64px;
	color: var(--color-hig-primario, #2B72C7);
}

.hi-faq .hi-faq__domanda {
	flex: 1 1 auto;
	font-family: var(--h4-font-family, Onest, sans-serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.19px;
	color: var(--color-content-heading, #0A1326);
}

/* Freccia: punta a destra ruotata -> chiusa, -> aperta. */
.hi-faq .hi-faq__freccia {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-right: 4px;
	color: var(--color-hig-primario, #2B72C7);
	transform: rotate(45deg);
}

.hi-faq .hi-faq__voce[open] .hi-faq__freccia {
	transform: rotate(-45deg);
}

.hi-faq .hi-faq__testata:hover .hi-faq__domanda {
	color: var(--color-hig-primario, #2B72C7);
}

/* Risposta: allineata alla domanda. */
.hi-faq .hi-faq__pannello {
	padding: 0 0 28px calc(var(--hi-faq-numero) + var(--hi-faq-gap));
}

.hi-faq .hi-faq__risposta {
	font-family: var(--font-family, Inter, sans-serif);
	font-size: var(--font-size, 15px);
	font-weight: var(--font-weight, 400);
	line-height: var(--line-height, 1.65);
	color: var(--color-content-text, #3D4A5E);
	overflow-wrap: break-word;
}

.hi-faq .hi-faq__risposta p {
	margin: 0 0 14px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.hi-faq .hi-faq__risposta a {
	color: var(--color-content-link, #153E7A);
}

.hi-faq .hi-faq__risposta a:hover {
	color: var(--color-content-link-hover, #0A1326);
}

.hi-faq .hi-faq__risposta > :last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.hi-faq {
		margin-top: 40px;
	}
}

/* Animazione di apertura dove supportata (Chrome/Edge recenti), solo senza reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.hi-faq {
		interpolate-size: allow-keywords;
	}

	.hi-faq .hi-faq__freccia {
		transition: transform .3s cubic-bezier(.22, .61, .36, 1);
	}

	.hi-faq .hi-faq__testata .hi-faq__domanda {
		transition: color .2s ease;
	}

	.hi-faq .hi-faq__voce::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size .3s cubic-bezier(.22, .61, .36, 1), content-visibility .3s allow-discrete;
	}

	.hi-faq .hi-faq__voce[open]::details-content {
		block-size: auto;
	}
}