@charset "UTF-8";
/* =============================================================================
   SCOPO DEL FILE
   -----------------------------------------------------------------------------
   Questo foglio di stile gestisce completamente l'intestazione (header) del sito.
   In particolare definisce:
   - Reset generale degli elementi HTML.
   - Header principale sempre visibile durante lo scroll.
   - Barra informativa superiore opzionale (rettangolo bianco).
   - Barra del menu (rettangolo verde semitrasparente).
   - Logo aziendale.
   - Menu desktop.
   - Menu mobile con pulsante hamburger.
   - Apertura e chiusura della tendina mobile tramite la classe ".active"
     aggiunta dal file JavaScript.
   -----------------------------------------------------------------------------
   CARATTERISTICHE PRINCIPALI
   -----------------------------------------------------------------------------
   - L'altezza dell'header è completamente dinamica.
   - Se la barra informativa è presente, il menu viene automaticamente
     posizionato sotto di essa.
   - Se la barra informativa non esiste, il menu occupa direttamente la parte
     superiore della pagina senza richiedere modifiche al CSS.
   - Nessuna altezza è calcolata manualmente tramite JavaScript.
   - L'intero comportamento sfrutta Flexbox e il normale flusso del documento.
   -----------------------------------------------------------------------------
   RESPONSABILITÀ DEL FILE
   -----------------------------------------------------------------------------
   Questo file gestisce esclusivamente l'aspetto grafico e il layout.
   Non contiene alcuna logica JavaScript.
   L'apertura del menu mobile è demandata allo script che aggiunge/rimuove
   la classe:
       .menu.active
   ============================================================================= */

/* ==========================================================================
   1. RESET GENERALE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Imposta il font predefinito utilizzato dall'intero sito. */
body {
    font-family: 'Montserrat', sans-serif;
}

/* ==========================================================================
   2. CONTENITORE PRINCIPALE (HEADER AD ALTEZZA DINAMICA)
   ========================================================================== */

/*
   Header principale del sito.
   Utilizza display:flex in colonna così gli elementi interni vengono
   impilati verticalmente nel seguente ordine:
   1) Barra informativa (se presente)
   2) Barra del menu
   L'altezza viene determinata automaticamente dal contenuto.
*/
.header_menu {
	/* position: sticky; > Mantiene l'elemento nel normale flusso del documento, quindi continua a occupare
	   il proprio spazio nel layout. Quando, durante lo scroll, raggiunge la distanza
	   indicata dalla proprietà top (in questo caso 0), l'elemento si "incolla" al bordo
	   superiore della finestra del browser e rimane sempre visibile. In pratica unisce
	   il comportamento di position: relative (prima dello scroll) e position: fixed
	   (dopo aver raggiunto il punto di aggancio).
	   Con position: fixed l'elemento esce dal normale flusso del documento, non occupa
	   più spazio nel layout e si sovrappone al contenuto della pagina, rendendo spesso
	   necessario aggiungere un padding-top al body per evitare che il contenuto venga
	   coperto.
	   Con position: relative, invece, l'elemento rimane sempre nel normale flusso del
	   documento e continua a occupare il proprio spazio, quindi non copre il contenuto.
	   Tuttavia, durante lo scroll, si comporta come un normale elemento della pagina e
	   scompare insieme al resto del contenuto.
	   Per garantire la compatibilità con alcune versioni meno recenti di Safari è
	   consigliabile dichiarare anche:
		   position: -webkit-sticky;
	   immediatamente prima di:
		   position: sticky;
	   Internet Explorer non supporta position: sticky. 
	   Per capire la differenza provare a sostituire 'sticky' con 'relative' e 'fixed'. */
    position: -webkit-sticky; /* Usato solo con Safari! */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    /* Trasforma l'header in un contenitore Flex disposto in verticale.
       Gli elementi figli vengono quindi impilati uno sotto l'altro
       nell'ordine in cui sono presenti nell'HTML.
       In questo caso la barra informativa (rettangolo bianco), se presente,
       viene visualizzata sopra il menu (rettangolo verde), permettendo
       all'altezza complessiva dell'header di adattarsi automaticamente
       al contenuto. */
	display: flex;   
    flex-direction: column;
    /* Applica un'ombra sotto l'intero header per separarlo visivamente
       dal contenuto della pagina.
       I valori indicano rispettivamente:
       - 0   : nessuno spostamento orizzontale;
       - 4px : ombra spostata leggermente verso il basso;
       - 12px: livello di sfocatura dell'ombra;
       - rgba(0,0,0,0.15): colore nero con opacità del 15%,
         per ottenere un effetto leggero e poco invasivo. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   3. PRIMO RETTANGOLO: BIANCO (Messaggio Informativo Dinamico)
   ========================================================================== */

/*
   Barra informativa opzionale.
   L'altezza è automatica (height:auto) per consentire al testo
   di occupare una o più righe senza rompere il layout.
*/
.barra_superiore {
    width: 100%;
    background: #ffffff;      /* Rettangolo Bianco */
    color: #000000;           /* Testi Neri */
    padding: 12px 20px;       
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    border-bottom: 1px solid #eef0f2;
    height: auto; 
}

/*
   Il paragrafo viene mantenuto inline per evitare spaziature
   indesiderate e consentire al testo di andare automaticamente a capo.
*/
.barra_superiore p {
    display: inline;          
    white-space: normal;      
}

/* Evidenzia il nome della lingua corrente. */
.barra_superiore b {
    color: #000000;
    font-weight: 700;
}

/*
   Link presente nel messaggio informativo.
   Rimane sempre sottolineato per risultare immediatamente riconoscibile.
*/
.barra_superiore a {
    color: #000000;           /* Di colore nero */
    text-decoration: underline; /* Sempre sottolineato */
    font-weight: 700;
    margin-left: 2px;
    /* Applica una transizione graduale quando cambia il colore del link.
       - color: la proprietà che verrà animata;
       - 0.2s: durata dell'animazione (2 decimi di secondo);
       - ease: l'animazione parte lentamente, accelera nella parte centrale
         e rallenta nuovamente prima di terminare, producendo un effetto
         più naturale rispetto a un cambiamento istantaneo. */
    transition: color 0.2s ease;
}

/*
   Se il link contiene un tag <b>,
   eredita automaticamente il colore del link.
*/
.barra_superiore a b {
	/* Imposta il colore del testo uguale a quello ereditato dall'elemento padre.
       In questo caso il tag <b> contenuto dentro il link non utilizza un colore
       proprio, ma segue automaticamente il colore definito dal link stesso.

       È utile per evitare che il browser applichi il colore predefinito del tag
       <b> o una regola CSS più specifica, mantenendo uniforme l'aspetto del testo
       anche quando il link cambia colore (ad esempio durante l'effetto hover). */
    color: inherit;           
    font-weight: 700;
}

/* Effetto hover del link informativo. */
/* Definisce il comportamento del link quando il cursore del mouse
   passa sopra l'elemento.
   Questa regola viene posizionata dopo la dichiarazione della transition
   perché segue la logica CSS di definire prima lo stato normale dell'elemento
   e poi le sue variazioni.
   La proprietà transition, dichiarata nella regola principale del link,
   stabilisce infatti il modo in cui deve avvenire il cambiamento, mentre
   questa regola definisce il nuovo valore del colore da applicare durante
   l'evento hover.
   Il passaggio dal colore normale (#000000) al colore hover (#cea74b)
   verrà quindi animato automaticamente dalla transition precedentemente
   impostata. */
.barra_superiore a:hover {
    color: #cea74b;
}

/* ==========================================================================
   4. SECONDO RETTANGOLO: VERDE (Menu e Logo con Trasparenza 90%)
   ========================================================================== */

/*
   Barra principale del menu.
   Rimane sempre sotto la barra informativa
   sfruttando il normale flusso del Flexbox.
*/
.container_menu {
	/* Imposta il contenitore del menu come riferimento per eventuali elementi
	   figli con position: absolute.
	   position: relative non sposta l'elemento e non lo fa uscire dal normale
	   flusso della pagina: il contenitore mantiene la sua posizione originale
	   e continua a occupare il proprio spazio nel layout.
	   In questo caso viene utilizzato principalmente per creare un punto di
	   riferimento interno. Eventuali elementi figli posizionati con
	   position: absolute verranno infatti calcolati rispetto a questo elemento
	   invece che rispetto al primo antenato disponibile o alla pagina intera.
	   Se non ci fossero elementi figli con position: absolute, questa proprietà
	   non produrrebbe alcun cambiamento visibile nel layout. */
    position: relative;       
    width: 100%;              
    background: rgba(52, 63, 62, 0.9); /* Sfondo 343f3e con trasparenza 90% */
    padding: 0 3%; 
    /*
    Trasforma .container_menu in un contenitore Flexbox.
    Gli elementi figli diretti (in questo caso il logo e il menu di navigazione)
    vengono disposti automaticamente lungo una riga orizzontale.
    justify-content: space-between;
    Distribuisce lo spazio libero disponibile tra gli elementi figli.
    Il primo elemento viene spinto completamente a sinistra,
    mentre l'ultimo viene spinto completamente a destra.
    Nel caso del menu:
    - il logo rimane all'estremità sinistra;
    - il menu di navigazione rimane all'estremità destra.
    align-items: center;
    Allinea verticalmente gli elementi figli al centro del contenitore.
    Serve per mantenere logo e menu perfettamente centrati rispetto
    all'altezza del rettangolo verde del menu.
    flex-shrink: 0;
    Impedisce al contenitore di ridursi automaticamente quando lo spazio
    disponibile diminuisce.
    In pratica mantiene sempre l'altezza impostata (80px) evitando che
    il rettangolo verde venga schiacciato dal contenuto interno.
	flex-shrink controlla se un elemento figlio di un contenitore flex
	può ridurre la propria dimensione quando lo spazio disponibile nel
	contenitore non è sufficiente.
	Il valore 0 significa:
	l'elemento NON può essere rimpicciolito automaticamente.
	Non regola direttamente l'altezza o la larghezza del contenitore,
	ma impedisce agli elementi figli del flex container di essere compressi.
	Nel caso specifico di .header_menu il contenitore è un flex container
	verticale (flex-direction: column) composto da due elementi:
	Elemento A > .barra_superiore
	(rettangolo bianco con il messaggio informativo)
	Elemento B > .container_menu
	(rettangolo verde con logo e menu)
	Senza flex-shrink:0
	Spazio disponibile nel contenitore:
	altezza totale insufficiente
	Il browser può ridurre automaticamente le dimensioni dei due elementi:
	Elemento A > rettangolo bianco più piccolo
	Elemento B > rettangolo verde più piccolo
	Con flex-shrink:0
	Elemento A > rettangolo bianco mantiene la propria altezza
	Elemento B > rettangolo verde mantiene la propria altezza
	Il browser non comprime i due rettangoli anche se lo spazio disponibile
	diminuisce.
	In questo caso serve quindi a mantenere stabile la struttura dell'header,
	evitando che la barra informativa superiore o il menu vengano schiacciati.
	Se togliendo flex-shrink:0 non cambia nulla significa che nelle condizioni
	attuali il contenitore ha ancora spazio sufficiente e quindi il browser
	non deve applicare nessuna riduzione.
	*/
    height: 80px;             
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;          
}

/* ==========================================================================
   5. LOGO (PROPORZIONI PROTETTE)
   ========================================================================== */

/*
   Impedisce al logo di restringersi quando
   lo spazio disponibile diminuisce.
*/
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/*
   L'altezza viene fissata,
   mentre la larghezza viene calcolata automaticamente
   mantenendo le proporzioni originali.
*/
.logo img {
	/*
	height: 55px;
	Imposta l'altezza del logo a 55 pixel.
	L'altezza viene usata come riferimento principale per ridimensionare
	l'immagine. Il browser mantiene automaticamente le proporzioni originali
	del logo evitando deformazioni.
	Esempio:
	Logo originale:
	larghezza 400px
	altezza 100px
	Con height:55px:
	altezza nuova > 55px
	larghezza nuova > 220px
	La larghezza viene calcolata automaticamente per mantenere lo stesso
	rapporto tra altezza e larghezza dell'immagine originale.
	width: auto;
	Imposta la larghezza automaticamente in base all'altezza definita.
	Significa che il browser NON forza una larghezza precisa, ma calcola
	il valore corretto per mantenere le proporzioni originali del logo.
	In pratica:
	height:55px > decide quanto deve essere alto il logo
	width:auto > calcola automaticamente quanto deve essere largo
	display: block;
	Trasforma l'immagine da elemento inline (comportamento predefinito di img)
	a elemento block.
	Normalmente un'immagine inline si comporta come un carattere del testo,
	quindi può lasciare un piccolo spazio vuoto sotto l'immagine dovuto alla
	linea del testo.
	Con display:block:
	- l'immagine diventa un vero elemento di blocco;
	- elimina lo spazio vuoto sotto il logo;
	- permette una gestione più precisa dell'allineamento dentro il flex container.
	object-fit: contain;
	Stabilisce come deve adattarsi l'immagine dentro il proprio spazio.
	contain significa:
	"Mostra tutta l'immagine senza tagliare nessuna parte, mantenendo le
	proporzioni originali."
	Se il contenitore fosse più piccolo rispetto al logo:
	- il logo viene ridotto per entrare completamente;
	- non viene deformato;
	- nessuna parte dell'immagine viene nascosta.
	Esempio:
	Contenitore:
	200px x 55px
	Logo:
	400px x 100px
	Con object-fit:contain:
	il logo viene ridotto fino a stare dentro il contenitore,
	mantenendo il rapporto originale.
	Nel caso del logo del menu:
	height:55px > stabilisce l'altezza visiva del logo
	width:auto > mantiene le proporzioni
	display:block > elimina problemi di allineamento
	object-fit:contain > protegge il logo da deformazioni o tagli
	*/
    height: 55px;             
    width: auto;              
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   6. STRUTTURA MENU DESKTOP (Nel Rettangolo Verde)
   ========================================================================== */

/*
Disposizione orizzontale delle voci del menu.
display:flex;
Trasforma il contenitore <ul> in un contenitore Flex.
Di default Flex utilizza:
flex-direction: row;
quindi gli elementi figli (<li>) vengono disposti automaticamente
in orizzontale, uno accanto all'altro.
Esempio:
<li>Home</li> <li>Azienda</li> <li>Prodotti</li> <li>Contatti</li>
Non è necessario scrivere:
flex-direction: row;
perché è il comportamento predefinito di un contenitore flex.
Nella versione mobile invece questa direzione viene modificata con:
flex-direction: column;
per trasformare le voci del menu da orizzontali a verticali,
disponendole una sotto l'altra.
list-style:none;
Rimuove i simboli grafici predefiniti degli elementi della lista
(<li>), come i pallini tipici degli elenchi HTML.
gap:35px;
Imposta una distanza uniforme di 35 pixel tra tutti gli elementi
figli del contenitore flex, quindi crea lo spazio tra le varie
voci del menu senza dover aggiungere margini singoli ai link.
*/
.menu ul {
    display: flex;
    list-style: none;
    gap: 35px;
}

/* Aspetto dei link del menu desktop. */
.menu a {
    color: #ffffff;           /* Testi Bianchi di base */
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* Colore del link al passaggio del mouse. */
.menu a:hover {
    color: #cea74b;
}

/*
   Evidenzia la pagina corrente
   tramite una sottolineatura.
*/
.menu a.sottolineato {
    border-bottom: 2px solid #ffffff;
    padding-bottom: 4px;
}

/*
   La sottolineatura cambia colore
   quando il mouse passa sopra la voce attiva.
*/
.menu a.sottolineato:hover {
    border-bottom-color: #cea74b;
}

/* ==========================================================================
   7. PULSANTE HAMBURGER (PER SMARTPHONE)
   ========================================================================== */

/*
   Nascosto su desktop.
   Diventa visibile solo nella media query.
*/
.menu-toggle {
    display: none;            
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

/* Singole linee del pulsante hamburger. */
.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #ffffff; 
    border-radius: 2px;
}

/* ==========================================================================
   8. RESPONSIVE: LOGICA TENDINA MOBILE INTERAGIBILE CON IL FILE JS (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Mostra il pulsante hamburger. */
    .menu-toggle {
        display: flex;        
    }

    /*
       Menu mobile.
       Viene posizionato immediatamente
       sotto il rettangolo verde.
	   NOTA: container_menu è relative!
    */
    .menu {
        position: absolute;
        top: 100%;            
        left: 0;
        width: 100%;
        background: rgba(52, 63, 62, 0.90); 
        /* Altezza massima iniziale del menu impostata a zero.
           Il menu esiste ancora nella pagina, ma non è visibile perché
           l'altezza disponibile viene limitata a 0 pixel.
           Quando JavaScript aggiunge la classe .active, il valore viene
           aumentato permettendo al contenuto del menu di espandersi. */
        max-height: 0;
        /* Nasconde tutto il contenuto che supera l'altezza massima impostata.
           In questo caso impedisce di vedere le voci del menu quando
           max-height è uguale a 0.
           È indispensabile insieme a max-height per creare l'effetto
           di apertura e chiusura della tendina. */
        overflow: hidden;
        /* Crea un'animazione fluida quando cambia il valore di max-height.
           Senza questa proprietà il menu passerebbe immediatamente da chiuso
           ad aperto.
           "0.3s" indica la durata dell'animazione (300 millisecondi).
           "ease-out" significa che il movimento parte più veloce e rallenta
           gradualmente alla fine, creando un'apertura più naturale. */
        transition: max-height 0.3s ease-out;
        /* Aggiunge un'ombra sotto al menu aperto.
           Serve a separare visivamente la tendina dal contenuto della pagina
           sottostante, creando un effetto di profondità.
           0px  > nessuno spostamento orizzontale dell'ombra
           8px  > spostamento verticale verso il basso
           16px > livello di sfocatura dell'ombra
           rgba > colore nero con trasparenza del 20% */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    /*
       Stato aperto del menu.
       La classe ".active" viene aggiunta
       esclusivamente dal JavaScript.
    */
    .menu.active {
        max-height: 350px;  /* Non più di 400px altrimenti su telefono è un problema! */
        /* Aggiunge una linea superiore al menu mobile quando viene aperto.
           Il bordo viene applicato solo allo stato .menu.active,
           quindi è visibile esclusivamente quando JavaScript aggiunge
           la classe active al menu dopo il click sul pulsante hamburger.
           Serve come separazione grafica tra il rettangolo verde dell'header
           e la tendina del menu mobile che si apre sotto.
           1px  > spessore della linea.
           solid > tipo di linea continua.
           rgba(255,255,255,0.08) > colore bianco con trasparenza molto bassa
           (8%), quindi volutamente poco evidente per mantenere un effetto
           elegante e non invasivo.
           Aumentando il valore dei pixel aumenta solo lo spessore del bordo,
           non la sua visibilità: per renderlo più evidente bisogna aumentare
           l'opacità del colore (es. rgba(255,255,255,1)) oppure cambiare colore. */		
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Disposizione verticale delle voci. */
    .menu ul {
        flex-direction: column;
        gap: 0;               
        padding: 2px 0;
    }

    .menu li {
        width: 100%;
    }

    /*
       Ogni link occupa tutta la larghezza
       facilitando il click da smartphone.
    */
    .menu a {
        display: block;
        padding: 6px 5%;     
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    /* Elimina il bordo dell'ultima voce. */
    .menu li:last-child a {
        /*border-bottom: none;*/  
    }

    /*
       Aspetto della voce attiva
       nella versione mobile.
    */
    .menu a.sottolineato {
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        color: #cea74b;       
        padding-bottom: 6px;
    }
}

/* =============================================================================
   RIASSUNTO DELLA LOGICA DEL CSS
   -----------------------------------------------------------------------------
   1.
   L'header è un contenitore Flex disposto in colonna.
   2.
   Se esiste la barra informativa, viene mostrata come primo elemento.
   3.
   Il menu viene sempre posizionato immediatamente sotto la barra
   sfruttando il normale flusso del layout.
   4.
   L'altezza dell'intero header viene calcolata automaticamente
   dal browser.
   5.
   Il menu desktop utilizza Flexbox con disposizione orizzontale.
   6.
   Sotto i 768 px compare il pulsante hamburger.
   7.
   Il menu mobile è inizialmente chiuso tramite:
       max-height: 0;
   8.
   Il JavaScript apre il menu aggiungendo la classe:
       .menu.active
   9.
   L'animazione di apertura è ottenuta esclusivamente tramite CSS
   modificando la proprietà:
       max-height
   10.
   Nessun valore di altezza viene calcolato manualmente.
   L'intero layout sfrutta Flexbox e il normale flusso del documento.
   ============================================================================= */