/* 
esempio di menu responsive con creazione dell'icona hamburger che
si trasforma in una X  per attivare il menu per smartphone o per visualizzarlo su descktop
*/
/* definiamo i colori NEL MENU BASE che useremo in questo css */

/* questo setta un bordo superiore per la class .logo */
.logo {
    height: 43px;
    padding-top: 0px;
    font-size: 1rem;
}

/* settiamo i parametri del contenitore principale: class= header 
settiamo un border shadow
ricordiamoci la position fixed, la larghezza al 100% e lo z-index */
.header {
    margin-top: 0px;
    display: block;
    background-color: transparent;
    /* box-shadow: 1px 1px 4px 0 rgba(201, 28, 28, 0.611); */
    position: fixed;
    width: 100%;
    z-index: 200;
}

.header a {
    color: var(--link);
}

/* ora settiamo gli ul del contenitore header
MENU GRANDE SCHE SI APRE NEI CELLULARI
margine e padding a zero, togliamo i pallini della lista con list-style: none;
mettiamo overflow a hidden cosi da non visualizzare il menu se non quando si clicca sull'icona a tre barrette e scegliamo un background color */
.header ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: rgba(9, 59, 104, 0.98);
    ;
}

/* 
MENU GRANDE SCHE SI APRE NEI CELLULARI
settiamo ora i link degli ul (ul a) con display block in modo che tutta la riga sia cliccabile, diamo un margine e togliamo la text decoration per non visualizzare il link sottolineato */
.header ul a {
    display: block;
    padding: 25px;
    text-decoration: none;
    font-size: 1.1rem;
    color: white;
    text-align: center;
}

/* ora quando si passa con il mouse sopra un link cambia il background */
.header ul a:hover {
    color: var(--testoMenuCell);
}

/* adesso settiamo il logo con float a sinistra, la grandezza e il padding */
.header .logo {
    float: left;
    font-size: 0.5rem;
    padding: 17px 1px 10px 5px;
    text-decoration: none;
}

/* settiamo il clear both in modo che il menu sia libero su entrambi i lati
e poi la max-hight a 0 per rendere invisibile il menu ed una transizione in secondi .5s con effetto ease-out per esempio… */
.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .5s ease-out;
    font-size: 0.5rem;
    color: white;
}

/* settimo l'icona che andremo a costruire con le tre lineette */
.header .menu-icon {
    padding: 29px 20px;
    position: relative;
    float: right;
    cursor: pointer;
}

/* questo per costruire le lineette per creare l'icona per il menu 
le misure si riferiscono ad ogni linietta LINEA CENTRALE*/
.header .menu-icon .nav-icon {
    background-color: var(--liniettaCentrale);
    display: block;
    width: 18px;
    height: 2px;
    position: relative;
    transition: background-color .5s ease-out;
}

/* adesso settiamo il prima e il dopo delle tre lineette si riferisce al nav-icon   QUESTO COSTRUISCE LA LINEATTA SOPRA E QUELLA SOTTO RISPETTO ALL'ELEMENTO CENTRALE DI CUI SOPRA */
.header .menu-icon .nav-icon::before,
.header .menu-icon .nav-icon::after {
    background-color: var(--liniette);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    transition: all .2s ease-out;
    position: absolute;
}

/* LINEA SUPERIORE in posizione a x*/
.header .menu-icon .nav-icon::before {
    top: 5px;
}

/* LINEA INFERIORE in posizione a x */
.header .menu-icon .nav-icon::after {
    top: -5px;
}

.header .menu-btn {
    display: none;
}

/* settiamo la checkbox utilizzando la tilde ~ (tasto option + 5) quando è chekked aumentiamo l'altezza del menu per la visione sugli smartphone 
GRAZIE ALLA TILDE POSSIMO INDICARE DOVE FARE LE COSE, VOGLIAMO CHE CLICCANDO SI LAVORI SUL MENU, L'EFFETTO DEVE ESSERE SUL SIBLING (TILDE) in questo caso grazie alla tile .menu diventa un sibling e quindi funziona quello che vogliamo fare attenzione all'altezze, in modo che siano visibili tutti i link del menu !! */
.header .menu-btn:checked~.menu {
    max-height: 700px;
}

/* far sparire la riga in mezzo all'icona delle tre righe:
quando è checkkata vogliamo un fondo trasparente per nascondere la linietta in mezzo*/
.header .menu-btn:checked~.menu-icon .nav-icon {
    background-color: transparent;
}

/* adesso che la linea in mezzo non è più visibile, quando si clicca sull'icona delle tre (due) righe le due righe ruotano di 45 gradi e top a 0, per formare una x v*/
.header .menu-btn:checked~.menu-icon .nav-icon::before {
    transform: rotate(-45deg);
    top: 0;
}

/* ora bisogna riportare le due barrette che romano la x a visulaizzare l'icona con le tre barrette ruotare di 45 gradi e posizionare a top 0*/
.header .menu-btn:checked~.menu-icon .nav-icon::after {
    transform: rotate(45deg);
    top: 0;
}

/* 
---------------------------------------------------
VERSIONE DESKTOP
---------------------------------------------------*/

/* ora bisogna far vedere il menu al desktop */
@media (min-width: 990px) {

    /* setta il colore della barra MENU grande */
    .header {
        top: 0;
        display: inline-block;
        background-color: var(--navEfooter);
        /* box-shadow: 1px 1px 4px 0 rgba(201, 28, 28, 0.611); */
        position: fixed;
        width: 100%;
        z-index: 200;
        margin-bottom: 10px;
    }

    .header .logo {
        float: left;
        font-size: 0.5rem;
        padding: 10px 10px 10px 10px;
        text-decoration: none;
    }

    /* questo è per rendere visibile il menu in line da desktop */
    .header ul {
        overflow: visible;
    }

    /* questo per fare in modo che i link siano disposti in linea e non uno sotto lìaltro come nel menu per smartphone */
    .header li {
        float: left;
    }

    /* settiamo il padding dei link (pulsanti menu) */
    .header li a {
        padding: 15px 9px;
        font-size: 1rem;
        color: white;
        font-family: 'Gruppo', sans-serif;
        font-weight: bold;
    }

    /* adesso mettiamo clear non in modo che il logo abbia effetto sul menu, per portarlo sulla stessa riga, in più settiamp il float right per allineare il menu a destra ma a sinistra dell'icona a tre righe  */
    .header .menu {
        clear: none;
        float: right;
    }

    .header .menu-icon {
        display: none;
    }

    /* ora quando si passa con il mouse sopra un link cambia il background */
    .header ul a:hover {
        background-color: transparent;
        color: var(--colors_brand);
    }

}


/* ora bisogna far vedere il menu al desktop */
@media (max-width: 600px) {
    .header {
        margin-top: -10px;
    }
}