/**
 * [hi_dettagli_tecnici] - accordion "Dettagli tecnici" della scheda prodotto.
 *
 * Misure in px: il rem di Impreza e' fluido. Specificita' .hi-dettagli .x
 * per battere gli stili del tema su titoli, liste e link senza !important
 * (unica eccezione: line-height dei li, che il tema forza con !important).
 * Colori e tipografia dalle variabili delle Opzioni tema.
 * Struttura identica a desktop e mobile.
 */

/*
 * Riga del template (classe hi-dettagli-row assegnata nel builder): dettagli a
 * sinistra (2/3), [hi_download_prodotto] a destra (1/3). Classi body da PHP:
 * vuoto = riga nascosta; solo-voci / solo-extra = l'unica colonna piena a tutta
 * larghezza. Con entrambe le colonne nessuna regola: 2/3 + 1/3 di Impreza.
 */
body.hi-dettagli-vuoto .hi-dettagli-row {
	display: none;
}

body.hi-dettagli-solo-voci .hi-dettagli-row .g-cols > .wpb_column:last-child,
body.hi-dettagli-solo-extra .hi-dettagli-row .g-cols > .wpb_column:first-child {
	display: none;
}

body.hi-dettagli-solo-voci .hi-dettagli-row .g-cols > .wpb_column:first-child,
body.hi-dettagli-solo-extra .hi-dettagli-row .g-cols > .wpb_column:last-child {
	width: 100%;
}

/* Titolo: stile H2 del tema, solo lo spazio sotto. */
.hi-dettagli {
	/* Rientro di titolo voce e pannello = larghezza numero + spazio. */
	--hi-dettagli-numero: 20px;
	--hi-dettagli-gap: 22px;
}

.hi-dettagli .hi-dettagli__intestazione {
	margin: 0 0 40px;
	padding: 0;
}

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

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

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

.hi-dettagli .hi-dettagli__testata::-webkit-details-marker {
	display: none;
}

.hi-dettagli .hi-dettagli__testata::marker {
	content: "";
}

.hi-dettagli .hi-dettagli__testata:focus {
	outline: none;
}

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

.hi-dettagli .hi-dettagli__numero {
	/* Larghezza fissa: "02" e' piu' largo di "01", i titoli restano allineati. */
	flex: 0 0 var(--hi-dettagli-numero);
	width: var(--hi-dettagli-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-dettagli .hi-dettagli__titolo {
	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-dettagli .hi-dettagli__freccia {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-right: 4px;
	color: var(--color-hig-primario, #2B72C7);
	transform: rotate(45deg);
}

.hi-dettagli .hi-dettagli__voce[open] .hi-dettagli__freccia {
	transform: rotate(-45deg);
}

.hi-dettagli .hi-dettagli__testata:hover .hi-dettagli__titolo {
	color: var(--color-hig-primario, #2B72C7);
}

/* Pannello aperto: allineato al titolo della voce. */
.hi-dettagli .hi-dettagli__pannello {
	padding: 0 0 28px calc(var(--hi-dettagli-numero) + var(--hi-dettagli-gap));
}

/* Una sola voce: niente accordion, titolino (se riga del ripetitore) e testo a vista. */
.hi-dettagli .hi-dettagli__titolo--singola {
	display: block;
	margin: 0 0 16px;
	padding: 0;
}

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

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

	.hi-dettagli .hi-dettagli__testata .hi-dettagli__titolo {
		transition: color .2s ease;
	}

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

	.hi-dettagli .hi-dettagli__voce[open]::details-content {
		block-size: auto;
	}
}

/* --- Contenuti dentro il pannello (testi vecchi: titoli grandi, tabelle, media) ---
   Tipografia agganciata alle variabili delle Opzioni tema. */

.hi-dettagli .hi-dettagli__contenuto {
	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;
}

/* Titoli dei contenuti vecchi (anche H1/H2 da 44px) ridotti a scala pannello. */
.hi-dettagli .hi-dettagli__contenuto h1,
.hi-dettagli .hi-dettagli__contenuto h2,
.hi-dettagli .hi-dettagli__contenuto h3,
.hi-dettagli .hi-dettagli__contenuto h4,
.hi-dettagli .hi-dettagli__contenuto h5,
.hi-dettagli .hi-dettagli__contenuto h6 {
	margin: 24px 0 10px;
	padding: 0;
	font-family: var(--h4-font-family, Onest, sans-serif);
	font-size: var(--h5-font-size, 16px);
	font-weight: 700;
	line-height: var(--h4-line-height, 1.25);
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-content-heading, #0A1326);
}

.hi-dettagli .hi-dettagli__contenuto h1,
.hi-dettagli .hi-dettagli__contenuto h2 {
	font-size: var(--h4-font-size, 19px);
	letter-spacing: var(--h4-letter-spacing, -0.01em);
}

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

.hi-dettagli .hi-dettagli__contenuto hr {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--color-content-border, #E3E8F0);
	background: none;
}

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

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

.hi-dettagli .hi-dettagli__contenuto strong,
.hi-dettagli .hi-dettagli__contenuto b {
	font-weight: var(--bold-font-weight, 600);
}

/* Elenchi puntati: quadratino blu al posto del pallino. */
.hi-dettagli .hi-dettagli__contenuto ul {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.hi-dettagli .hi-dettagli__contenuto ul > li {
	position: relative;
	margin: 0 0 6px;
	padding: 0 0 0 16px;
	/* Il tema forza li{line-height:20px!important}: nel pannello serve l'interlinea del testo. */
	line-height: var(--line-height, 1.65) !important;
}

.hi-dettagli .hi-dettagli__contenuto ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--line-height, 1.65) * 0.5em - 3px);
	width: 6px;
	height: 6px;
	background: var(--color-content-primary, #2B72C7);
}

.hi-dettagli .hi-dettagli__contenuto ol {
	margin: 0 0 14px;
	padding: 0 0 0 20px;
	list-style: decimal outside;
}

.hi-dettagli .hi-dettagli__contenuto ol > li {
	margin: 0 0 6px;
	padding: 0 0 0 2px;
	line-height: var(--line-height, 1.65) !important;
}

.hi-dettagli .hi-dettagli__contenuto ol > li::marker {
	color: var(--color-content-primary, #2B72C7);
	font-weight: 700;
}

.hi-dettagli .hi-dettagli__contenuto li > ul,
.hi-dettagli .hi-dettagli__contenuto li > ol {
	margin: 6px 0 0;
}

.hi-dettagli .hi-dettagli__contenuto img {
	max-width: 100%;
	height: auto;
}

.hi-dettagli .hi-dettagli__contenuto iframe,
.hi-dettagli .hi-dettagli__contenuto video {
	max-width: 100%;
}

.hi-dettagli .hi-dettagli__contenuto iframe[src*="youtube"],
.hi-dettagli .hi-dettagli__contenuto iframe[src*="youtu.be"],
.hi-dettagli .hi-dettagli__contenuto iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.hi-dettagli .hi-dettagli__contenuto video {
	height: auto;
}

/* Tabelle: contenitore aggiunto in output, scroll orizzontale se non stanno. */
.hi-dettagli .hi-dettagli__tabella {
	max-width: 100%;
	margin: 0 0 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hi-dettagli .hi-dettagli__tabella table {
	width: 100%;
	min-width: 480px;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.hi-dettagli .hi-dettagli__tabella th,
.hi-dettagli .hi-dettagli__tabella td {
	padding: 8px 12px;
	border: 1px solid var(--color-hig-bordo, #E3E8F0);
	text-align: left;
	vertical-align: top;
}

/* Contenuti WPBakery vecchi: niente margini di riga/colonna dentro il pannello. */
.hi-dettagli .hi-dettagli__contenuto .vc_row,
.hi-dettagli .hi-dettagli__contenuto .g-cols {
	margin-left: 0;
	margin-right: 0;
}

/* Niente spazio sopra al primo e sotto all'ultimo elemento (anche annidati, es. wrapper WPBakery). */
.hi-dettagli .hi-dettagli__contenuto > :first-child,
.hi-dettagli .hi-dettagli__contenuto > :first-child > :first-child,
.hi-dettagli .hi-dettagli__contenuto > :first-child > :first-child > :first-child {
	margin-top: 0;
}

.hi-dettagli .hi-dettagli__contenuto > :last-child,
.hi-dettagli .hi-dettagli__contenuto > :last-child > :last-child,
.hi-dettagli .hi-dettagli__contenuto > :last-child > :last-child > :last-child {
	margin-bottom: 0;
}

.hi-dettagli__debug {
	font-size: 12px;
	background: #fffbe6;
	padding: 8px;
}