/**
 * Tab delle informazioni prodotto (elemento "Tabs" di Impreza).
 * Elemento hi-ggu-product-info — vedi includes/styles/class-hi-ggu-style-product-info.php
 *
 * La classe .hi-product-info va messa nella classe extra dell'elemento "Tabs" del
 * page builder, cioè sul contenitore. Il markup su cui lavora è:
 *
 *   div.w-tabs.layout_hor.style_simple        <- qui va la classe
 *     div.w-tabs-list                            (il tema la nasconde in accordion)
 *       div.w-tabs-list-h
 *         button.w-tabs-item(.active)
 *           span.w-tabs-item-title
 *     div.w-tabs-sections
 *       div.w-tabs-section(.active)
 *         button.w-tabs-section-header           (visibile solo in accordion)
 *           h3.w-tabs-section-title
 *           div.w-tabs-section-control           (la freccia)
 *         div.w-tabs-section-content
 *           div.w-tabs-section-content-h
 *
 * LA RIGA È FISSA. Da desktop è il bordo inferiore della lista delle etichette:
 * resta ferma e allineata alle etichette qualunque tab sia aperta. Prima era un
 * elemento Separatore dentro il pannello, quindi scendeva insieme al contenuto e
 * veniva ridisegnata a ogni cambio di tab; quel separatore, finché resta nel
 * template, viene nascosto qui sotto.
 *
 * DA MOBILE. Sotto i 768px (parametro "Accordion at width" dell'elemento) il tema
 * aggiunge via JS la classe .accordion al contenitore e nasconde la lista: la riga
 * diventa il divisore fra una sezione e l'altra, stesso colore e stesso spessore.
 * Non serve quindi una media query: il punto di passaggio resta quello impostato
 * nell'elemento, e cambiarlo lì cambia anche il comportamento della riga.
 *
 * HOVER. Invariato: l'etichetta passa all'arancione, senza transizione. Essendo
 * arancione anche l'etichetta attiva, sull'attiva il passaggio del mouse non
 * produce alcun cambiamento visibile.
 *
 * SPECIFICITÀ — i selettori ripetono la classe per prevalere sul CSS del tema senza
 * dipendere dall'ordine di caricamento: le regole di .w-tabs.style_simple arrivano a
 * cinque classi, quelle di hover a sei (hanno .no-touch in testa). Nessun !important.
 *
 * L'aspetto si regola dalle variabili qui sotto, senza toccare le regole.
 */

/* --------------------------------------------------------------------------
 * Valori dell'elemento
 * Il default richiama la palette del tema: --color-content-primary è l'arancione
 * del sito (#ff6b00).
 * ------------------------------------------------------------------------ */

.hi-product-info {

	/* Riga fissa: sotto le etichette da desktop, fra le sezioni in accordion */
	--hi-pi-line-color: var(--color-content-primary, #ff6b00);
	--hi-pi-line-width: 2px;

	/* Spazio fra le etichette e la riga */
	--hi-pi-line-gap: 0.6em;

	/* Etichette */
	--hi-pi-color-active: var(--color-content-primary, #ff6b00);
	--hi-pi-color-hover: var(--hi-pi-color-active);
}

/* --------------------------------------------------------------------------
 * Riga fissa sotto le etichette (desktop)
 * Sta sulla lista, non dentro i pannelli: larghezza piena della colonna e
 * posizione invariata al cambio di tab. In accordion la lista è nascosta dal
 * tema, quindi la riga sparisce da sola.
 * ------------------------------------------------------------------------ */

.hi-product-info.hi-product-info > .w-tabs-list {
	padding-bottom: var(--hi-pi-line-gap);
	border-bottom: var(--hi-pi-line-width) solid var(--hi-pi-line-color);
}

/* --------------------------------------------------------------------------
 * Etichette
 * Quattro classi: la regola del tema sull'etichetta attiva arriva a cinque
 * classi, quella di hover a sei.
 * ------------------------------------------------------------------------ */

.hi-product-info.hi-product-info.hi-product-info.hi-product-info > .w-tabs-list .w-tabs-item.active {
	opacity: 1;
	color: var(--hi-pi-color-active);
}

/* Dopo la regola dell'attiva, così sull'attiva prevale l'hover: stesso colore,
   quindi nessun cambiamento visibile. Senza transizione, come si comporta ora. */
.hi-product-info.hi-product-info.hi-product-info.hi-product-info > .w-tabs-list .w-tabs-item:hover,
.hi-product-info.hi-product-info.hi-product-info.hi-product-info > .w-tabs-list .w-tabs-item:focus-visible {
	opacity: 1;
	color: var(--hi-pi-color-hover);
}

/* --------------------------------------------------------------------------
 * Contorno del focus
 * Il tema disegna un riquadro su :focus-visible con una regola globale
 * (`:focus-visible { outline: var(--focus-outline-width,2px) solid
 * var(--color-content-primary); outline-offset: 2px }`): sulle etichette è un
 * rettangolo arancione che salta da una all'altra a ogni clic. Qui è spento,
 * sulle etichette e sulle intestazioni dell'accordion.
 *
 * Il focus da tastiera resta comunque segnalato: l'etichetta passa all'arancione
 * con la regola qui sopra.
 * ------------------------------------------------------------------------ */

.hi-product-info .w-tabs-item:focus,
.hi-product-info .w-tabs-item:focus-visible,
.hi-product-info .w-tabs-section-header:focus,
.hi-product-info .w-tabs-section-header:focus-visible {
	outline: none;
}

/* --------------------------------------------------------------------------
 * Divisore fra le sezioni (accordion, sotto i 768px)
 * È la stessa riga: il tema qui nasconde la lista e separa le sezioni con un
 * bordo di 1px nel colore dei bordi. Prima e ultima restano senza riga, così
 * l'accordion non è chiuso sopra e sotto.
 * ------------------------------------------------------------------------ */

.hi-product-info.hi-product-info.accordion > .w-tabs-sections > .w-tabs-section {
	border-top: var(--hi-pi-line-width) solid var(--hi-pi-line-color);
}

.hi-product-info.hi-product-info.accordion > .w-tabs-sections > .w-tabs-section:first-child {
	border-top-width: 0;
}

.hi-product-info.hi-product-info.accordion > .w-tabs-sections > .w-tabs-section:last-of-type {
	border-bottom-width: 0;
}

/* --------------------------------------------------------------------------
 * Separatore in testa al pannello
 * È la vecchia riga, un elemento Separatore messo come primo elemento del
 * contenuto della tab: ora la riga è quella fissa sopra, quindi qui si nasconde.
 * Vale sia da desktop sia in accordion. Nasconde solo il separatore in prima
 * posizione: gli altri separatori del contenuto restano visibili.
 * ------------------------------------------------------------------------ */

.hi-product-info .w-tabs-section-content-h > .w-separator:first-child {
	display: none;
}