/**
 * Barra di navigazione: le larghezze che Elementor da solo non copre.
 *
 * Tre blocchi, in ordine di larghezza: **fino a 767** il logo che non lascia posto
 * all'hamburger sui telefoni stretti (2026-09-08); **768-1024** l'hamburger fuori asse
 * (2026-08-24); **1025-1250** la fascia assimilata a 1024 (2026-08-24 e 2026-09-08,
 * completata col logo dentro la pillola il 2026-10-07).
 *
 * PERCHÉ QUESTO FILE ESISTE
 * I breakpoint dichiarati in Elementor sono 767, 1024 e 1536, e non ce n'è uno intorno
 * ai 1200. Aggiungerlo è un'impostazione **globale**, che cambierebbe il comportamento
 * di ogni pagina del sito per sistemare una fascia di 200 px della sola navigazione.
 * Da qui le regole in questo foglio, come vuole la §4 del progetto.
 *
 * COME CI SIAMO ARRIVATI, in tre passi — la storia serve perché spiega cosa NON fare.
 *
 * 1) Il problema originario: fra 1025 e 1250 il menu esteso non ci sta. Misurato a
 *    1085 px, «Altri Prodotti» toccava la pillola «Contatti» per 11 px e il carrello
 *    le finiva dentro. Il primo rimedio riduceva corpo e imbottiture delle voci per
 *    guadagnare spazio.
 * 2) Il 2026-08-24 l'utente ha deciso di passare la fascia a **hamburger**: a 1025 la
 *    sovrapposizione arrivava a 72 px e le riduzioni non bastavano più, e serviva posto
 *    per la lente della ricerca (requisito 4.11).
 * 3) Il 2026-09-08, sempre su decisione dell'utente, la fascia è stata **assimilata a
 *    1024**: Contatti nascosto e hamburger a destra del gruppo icone.
 *
 * Al passo 3 le riduzioni del passo 1 sono state **rimosse**, e non per pulizia
 * formale: in questa fascia il menu esteso e la pillola Contatti sono nascosti, quindi
 * quelle regole non avevano più nulla da restringere — tranne un effetto involontario.
 * `.elementor-item` vale anche per le voci della **tendina**, e quel `font-size: 18px`
 * le rimpiccioliva: misurate **24 px a 1024 contro 18 a 1100**, cioè la fascia che
 * doveva somigliare a 1024 se ne discostava proprio nell'unico menu che vi si vede.
 * Togliere quelle regole non è però bastato — si passava da 18 a 20, non a 24 — perché
 * la causa restante è una lacuna nella tipografia per dispositivo di Elementor: il
 * perché per esteso, con le misure, è nell'ultimo blocco di questo foglio.
 *
 * SULL'USO DI `!important`
 * Nel blocco 1025-1250 non serve più, e vale la pena dire perché: serviva per battere i
 * selettori che Elementor genera includendo l'id del widget — quattro classi, che nessun
 * selettore scritto a mano batte senza ripetere quell'id, cosa che legherebbe il foglio a
 * un nome destinato a cambiare. Le regole rimaste là non combattono con quelle: governano
 * ordine, visibilità e misura del tasto, dove le dichiarazioni di Elementor stanno in
 * media query di larghezza e valgono meno di questi selettori.
 *
 * **Ne resta uno**, nel blocco 768-1024: `margin-top: 0 !important`. Là serve davvero,
 * perché combatte una dichiarazione di Elementor che include l'id del widget. Il perché
 * per esteso è nel commento di quel blocco.
 *
 * @package hello-elementor-child
 */

/**
 * L'HAMBURGER CHE ESCE DALLA PILLOLA SUI TELEFONI STRETTI — segnalato il 2026-09-08
 * su un Galaxy Z Fold 5 chiuso, **344 px**.
 *
 * IL SINTOMO: il cerchio rosso dell'hamburger sporgeva oltre il bordo destro della
 * pillola verde, coprendone la curva. Misurato: il tasto arriva a 343 mentre la
 * pillola chiude a 328, cioè **15 px fuori**.
 *
 * LA CAUSA, e non è il logo troppo grande come sembrava. Il contenitore della pillola
 * e' un flex `nowrap` con `padding: 12px`, `gap: 16px` e **tre** figli, e le loro
 * regole di elasticita' sono quelle sbagliate:
 *
 *   logo    `flex: 0 0 auto`   non si restringe
 *   icone   `flex: 0 0 auto`   non si restringe
 *   menu    `flex: 0 1 auto`   **l'unico che si restringe**
 *
 * A 344 il contenuto chiede 307 px e lo spazio utile e' 288: mancano 19. Il flex li
 * toglie all'unico figlio che puo' cedere, cioe' **il widget del menu**, che passa da
 * 44 a 25 px. Ma il tasto dentro di esso ne misura **53** — 35 px d'icona piu' 8,75 di
 * imbottitura per lato, valori che Elementor imposta per dispositivo — e quindi esce
 * dal proprio contenitore. Si comprime l'unica cosa che non ha modo di comprimersi.
 *
 * IL RIMEDIO: ribaltare i ruoli. Il logo diventa restringibile, il widget del menu
 * no e non puo' scendere sotto la misura del suo tasto. Da qui in poi **il conto lo
 * fa il browser**: non c'e' nessuna larghezza calcolata a mano, quindi la regola
 * vale a qualunque risoluzione e non ha bisogno di un punto di rottura suo.
 *
 * `min-width: 52.5px` e' l'unico numero, ed e' **derivato dai valori di Elementor**,
 * non scelto: 35 + 8,75 + 8,75. Se domani cambia la misura dell'icona in tablet va
 * cambiato anche qui — sta scritto perché altrimenti sembrerebbe arbitrario.
 *
 * `max-width: 100%` e `height: auto` sull'ancora e sull'immagine servono perché il
 * restringimento del widget arrivi fino al pixel dell'immagine: Elementor le da'
 * `width: 118px` sotto i 767, e senza `max-width` l'immagine ignorerebbe il
 * contenitore piu' stretto. L'altezza automatica la fa scalare in proporzione — la
 * fonte e' 201x63, quindi non si deforma.
 *
 * ESITO misurato. A **344**: logo da 118x37 a **91x28**, tasto 53 pieno, e il suo
 * bordo destro finisce a **12 px** dalla pillola — lo stesso incasso che si ha sui
 * telefoni larghi, perché quei 12 px sono il `padding` del contenitore. A **375, 430
 * e 767** nulla cambia: logo 118x37 e incasso 12. Nessuno scorrimento orizzontale.
 *
 * **Sotto i 344 non e' stato provato**: il pannello del browser non scende sotto 343.
 * Il conto però lo fa il flex, quindi la regola non ha un limite inferiore: piu' si
 * stringe, piu' il logo cede. Sotto i 330 diventa poco leggibile, e quello sarebbe un
 * problema di disegno — nascondere il logo, o accorciarlo a marchio — non di codice.
 *
 * Solo fino a 767: e' la fascia dove il widget del menu contiene **solo** il tasto.
 * Piu' in su renderlo rigido potrebbe impedire al menu esteso di adattarsi, e la' non
 * serve: a 768 lo spazio avanza.
 */
@media (max-width: 767px) {

	.elementor-location-header .elementor-widget-image.elementor-hidden-desktop {
		flex-shrink: 1;
		min-width: 0;
	}

	.elementor-location-header .elementor-widget-image.elementor-hidden-desktop a,
	.elementor-location-header .elementor-widget-image.elementor-hidden-desktop img {
		max-width: 100%;
		height: auto;
	}

	.elementor-location-header .elementor-widget-nav-menu {
		flex-shrink: 0;
		min-width: 52.5px;
	}
}

/**
 * L'HAMBURGER FUORI ASSE NELLA FASCIA TABLET — segnalato il 2026-08-24.
 *
 * Il tasto appariva alzato rispetto alla pillola verde che lo contiene, e vicino al
 * bordo destro dove la pillola curva: da li' l'impressione che «uscisse» dal suo posto.
 *
 * LA CAUSA, MISURATA
 *
 * Il contenitore interno del widget menu ha `margin-top: -1em` — cioe' **-18 px** —
 * dichiarato da Elementor **solo fra 768 e 1024**; a 767 lo stesso widget lo rimette a
 * `0`. Ecco perche' il difetto compariva «solo ad alcune risoluzioni»: e' l'unica fascia
 * in cui quel valore vive.
 *
 * Misurato a 1024 e a 800: la pillola e' alta 75 px e il suo centro sta a 133, il
 * carrello accanto e' centrato a 133, l'hamburger a **124**. Nove pixel, che su un
 * cerchio di 53 dentro un'altezza di 75 si vedono.
 *
 * PERCHE' AZZERARLO E' SICURO, E NON UNA SCOMMESSA
 *
 * In quella fascia il widget e' `elementor-nav-menu--dropdown-tablet`: mostra **solo**
 * l'hamburger, e le voci del menu sono nascoste — verificato a 800, dove la lista misura
 * zero. Quel margine negativo quindi non allinea nessun testo: sposta il tasto e basta.
 * Tolto, l'altezza del widget torna quella del tasto e il contenitore padre — che ha
 * gia' `align-items: center` — lo centra da solo. Nessuna posizione dichiarata a mano.
 *
 * `!important` e il selettore senza id: stesse ragioni del blocco qui sopra. La regola
 * di Elementor vale (0,4,0) e include l'id del widget; ripeterlo qui legherebbe il
 * foglio a un nome che cambia se il widget viene ricreato. `.elementor-widget-nav-menu`
 * descrive **cosa** e', e in testata ce n'e' uno solo: verificato.
 */
@media (min-width: 768px) and (max-width: 1024px) {

	.elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container {
		margin-top: 0 !important;
	}
}

/**
 * L'HAMBURGER ANCHE NELLA FASCIA 1025-1250 — 2026-08-24.
 *
 * DECISO DALL'UTENTE, e risolve due cose con una mossa.
 *
 * La prima e' un difetto che c'era gia': in quella fascia il menu esteso **non ci sta**.
 * Misurato a 1025 px — «Altri Prodotti» arriva a 836 mentre la pillola verde chiude a
 * 764, e la pillola «Contatti» comincia proprio li': si sovrappongono di **72 px**. Le
 * regole qui sopra riducevano corpo e imbottiture per guadagnare spazio, ma all'estremo
 * basso della fascia non bastano piu'.
 *
 * La seconda e' che serviva posto per la **lente** della ricerca (requisito 4.11, vedi
 * `inc/ricerca.php`), e nella barra estesa non ce n'era: lo spazio libero fra l'ultima
 * voce e il carrello e' 190 px a 1920, **19 px a 1280**, negativo sotto.
 *
 * In modalita' hamburger la barra torna a respirare — restano logo, lente, carrello,
 * account e il tasto — e il menu si apre a tendina, come gia' fa sotto i 1024.
 *
 * NIENTE `!important` QUI: le regole di Elementor che governano quale dei due menu si
 * vede stanno in media query di larghezza, non hanno l'id del widget e valgono meno di
 * questo selettore. E soprattutto **la tendina non va toccata**: quando si apre, il
 * codice di Elementor le scrive `display` in linea, e uno stile in linea batte
 * qualunque foglio — ma solo se il foglio non usa `!important`. Metterlo qui
 * impedirebbe al menu di aprirsi.
 */
@media (min-width: 1025px) and (max-width: 1250px) {

	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main {
		display: none;
	}

	.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle {
		display: flex;
	}

	/*
	 * E LA TENDINA, che al primo tentativo mi era sfuggita: la regola di Elementor
	 * `@media (min-width: 1025px)` nasconde **due** cose insieme, il tasto e il menu a
	 * tendina. Riacceso solo il tasto, il clic funzionava — Elementor aggiungeva
	 * `elementor-active` e scriveva gli stili in linea — ma non si apriva niente.
	 *
	 * `display: block` e non un valore inventato: e' quello che la tendina ha nella
	 * fascia dove funziona da sola. Verificato a 900 px, dove risulta `display: block`
	 * con `overflow: hidden` e altezza 0 da chiusa: l'apertura la governa `max-height`,
	 * che resta faccenda di Elementor. Qui si rimette solo cio' che quella media query
	 * aveva tolto.
	 */
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
		display: block;
	}

	/**
	 * QUESTA FASCIA SI COMPORTA COME 1024 — deciso dall'utente il 2026-09-08.
	 *
	 * Il primo rimedio accendeva il tasto e lo lasciava dov'era: piccolo, e
	 * **a sinistra**, con il tasto Contatti ancora al suo posto. Ne veniva una
	 * barra che da sinistra faceva hamburger, lente, carrello, account e poi
	 * Contatti — una disposizione che non somiglia a nessuna delle altre due.
	 *
	 * La regola scelta e' piu' semplice da spiegare e da ricordare: **sotto i
	 * 1250 la testata e' quella di 1024**. Il tasto Contatti sparisce e
	 * l'hamburger prende il suo posto a destra, dopo il gruppo delle icone.
	 *
	 * LE TRE COSE CHE MANCAVANO, e come si scoprono. A 1024 Elementor dichiara,
	 * per la sua vista tablet, esattamente cio' che qui non c'era:
	 *
	 *   - `order: 9` sul widget del menu, che dentro un flex lo manda **ultimo**
	 *     — ed e' per questo che a 1024 l'hamburger sta a destra delle icone
	 *     invece che al proprio posto nel DOM, dove precede il gruppo;
	 *   - `display: none` sul widget del tasto Contatti;
	 *   - la **misura** del tasto, che Elementor imposta per dispositivo: 35 px
	 *     in tablet, e sul desktop il predefinito di 14. Misurato: 53x53 con
	 *     icona 35 e imbottitura 8,75 a 900 px, contro **21x21** con icona 14 a
	 *     1100 px.
	 *
	 * Invece di dedurle si sono **lette** dagli stili calcolati a 1024. Sui
	 * layout di Elementor conviene: la risposta e' nel browser, non nel manuale.
	 *
	 * IL QUARTO PEZZO, che le prime tre non bastavano a dare. Rimessi ordine,
	 * misura e tasto nascosto, l'hamburger andava a destra ma le **icone**
	 * finivano a sinistra, a 262: la pillola verde e' un flex con
	 * `justify-content: space-between`, e con tre figli lo spazio libero
	 * finisce in mezzo. Un `margin-left: auto` sul gruppo icone lo assorbe
	 * tutto, e icone e hamburger si compattano a destra come un blocco solo.
	 * Il selettore usa il fratello (`~ .e-con`) e non l'identificativo del
	 * contenitore, che cambierebbe se il widget venisse ricreato.
	 *
	 * ESITO, misurato ai due bordi e appena fuori:
	 *
	 *   1025   logo@50   lente@741  carrello@775  account@839  hamburger@877
	 *   1250   logo@50   lente@966  carrello@1000 account@1064 hamburger@1102
	 *
	 * con Contatti e menu esteso a `none` in entrambi. Fuori dalla fascia nulla
	 * e' cambiato: a 1300 il menu esteso e' 590 px, l'hamburger e' nascosto e
	 * Contatti torna visibile a 196 px.
	 */
	.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle {
		padding: 8.75px;
		font-size: 35px;
	}

	.elementor-location-header .elementor-widget-nav-menu {
		order: 9;
	}

	.elementor-location-header .elementor-widget-button {
		display: none;
	}

	.elementor-location-header .elementor-widget-nav-menu ~ .e-con {
		margin-left: auto;
	}

	/**
	 * IL CORPO DELLE VOCI DI TENDINA — l'ultima cosa che ancora differiva da 1024.
	 *
	 * Misurato dopo il resto: **24 px a 1024, 20 px nella fascia**. Non era un
	 * residuo delle vecchie riduzioni, che sono state rimosse: e' un buco nella
	 * tipografia per dispositivo di Elementor. Leggendo le regole vere invece di
	 * dedurle, il widget del menu dichiara:
	 *
	 *   nessuna media query   menu esteso 24, tendina 24
	 *   max-width: 1536px     menu esteso 20   <- e nient'altro
	 *   max-width: 1024px     menu esteso 18, tendina 24
	 *   max-width:  767px                      tendina 24
	 *
	 * Alle altre misure la tendina ha sempre un'eccezione che la riporta a 24; a
	 * 1536 quell'eccezione **non c'e'**, e la regola generica — che vale anche per
	 * la tendina, essendo anch'essa un `.elementor-nav-menu` — la lascia a 20.
	 *
	 * NIENTE `!important`, e non per gusto: la regola di Elementor include l'id del
	 * widget e pesa (0,4,0). Qui si nominano **cinque** classi — il contenitore
	 * della testata, il widget, la tendina, la lista, la voce — e (0,5,0) la batte
	 * senza legare il foglio a un id che cambia se il widget viene ricreato, e
	 * senza appoggiarsi all'ordine di dichiarazione, che con «Remove Unused CSS»
	 * non e' quello del sorgente.
	 *
	 * Fuori dalla fascia non cambia niente: verificato 20 px a 1300 e 24 a 1024.
	 */
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item {
		font-size: 24px;
	}

	/**
	 * IL LOGO DENTRO LA PILLOLA, COME A 1024 — 2026-10-07.
	 *
	 * Ultima differenza rimasta fra questa fascia e 1024, trovata con la passata responsive:
	 * a 1024 il logo sta **dentro** la pillola verde e la pillola occupa tutta la riga; fra
	 * 1025 e 1250 il logo stava **fuori**, in una colonna sua, e la pillola restava lunga e
	 * vuota con le sole icone in fondo. Misurato a 1100: logo 50-230, pillola 230-1050.
	 *
	 * Nella testata ci sono DUE loghi, ed e' cosi' che Elementor la risolve a 1024:
	 *
	 *   - quello **esterno** sta nella colonna `3b2e3a35`, marcata `elementor-hidden-tablet`:
	 *     a 1024 e' la **colonna** a sparire, non il widget;
	 *   - quello **interno** (`a82f544`) sta nella pillola, marcato `elementor-hidden-desktop`
	 *     ed `elementor-hidden-laptop`: si vede solo fino a 1024.
	 *
	 * Qui si rifa' lo stesso scambio. Le prime due regole bastano a mettere il logo al suo
	 * posto, ma la pillola non si allargava: la larghezza delle due colonne viene dal CSS
	 * personalizzato **dentro il modello della testata in Elementor** —
	 * `@media(min-width:1025px)` con `min(249px, 18%)` per il logo e
	 * `calc(100% - min(249px, 18%))` per la pillola, entrambi `!important`. Per questo la
	 * terza regola ha `!important` anche lei, e vince perche' nomina quattro classi contro
	 * le tre di Elementor, senza appoggiarsi a nessun id.
	 *
	 * ESITO, misurato con Chrome headless (`testata-dopo-1100.png`):
	 *
	 *   1024   logo 67-213   pillola 42-982    hamburger 905     (riferimento, invariato)
	 *   1025   logo 85-231   pillola 50-975    hamburger 893
	 *   1100   logo 85-231   pillola 50-1050   hamburger 968
	 *   1250   logo 85-231   pillola 50-1200   hamburger 1118
	 *   1260   menu esteso e logo esterno: invariati
	 *
	 * Nessuno scorrimento orizzontale a nessuna delle sei misure.
	 */
	.elementor-location-header .elementor-inner-column.elementor-hidden-tablet {
		display: none;
	}

	.elementor-location-header .elementor-widget-image.elementor-hidden-laptop {
		display: block;
	}

	.elementor-location-header .elementor-inner-column.elementor-hidden-tablet + .elementor-inner-column {
		width: 100% !important;
	}
}