.menu_principale {
    background: linear-gradient(to bottom, #006266, #00969d, #006266);
    height: 40px;
    width: 100%;
    text-align: center;    
}

    .menu_principale a {
        display: block;
        background: transparent; /* gią coperto dal genitore */
        color: #ffffff;
        float: left;
        font-size: 12px;
        font-weight: 300;
        text-decoration: none;
        padding: 10px 10px 14px 10px;
    }

            .menu_principale a:hover {
                background: linear-gradient(to bottom, #01BCBC, #00A9A9, #006266);
                color: #ffffff;
            }

            .menu_principale a.active {
                background: linear-gradient(to bottom, #01BCBC, #00A9A9, #006266);
                color: #ffffff;
            }

        /*.menu_principale .separatore_menu {
            width: 2px;
            float: left;
            background: url(../images/separatore_menu.jpg) repeat-y;
            height: 37px;
        }*/

        .menu_principale ul {
            list-style-type: none;
            overflow: hidden;
        }

        .menu_principale li {
            float: left;
        }

            .menu_principale li a, .dropbtn {
                display: inline-block;
                color: white;
                text-align: center;                
            }

                .menu_principale li a:hover, .dropdown:hover .dropbtn {
                    background-color: #006266;
                }

            .menu_principale li .dropdown {
                display: inline-block;                
            }

    .menu_principale .dropdown label {
        display: block;
        color: white;
        text-decoration: none;
        font-size: 12px;
        padding: 10px 10px 14px 10px;
    }

        .menu_principale .dropdown-content {
            display: none;
            position: absolute;
            background: linear-gradient(to bottom, #006266, #00969d, #006266);
            box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
            z-index: 1;
            margin-top: 0px;
            min-width: 150px;
        }

            .menu_principale .dropdown-content a {
                color: white;
                padding: 12px 12px;                
                display: block;
                text-align: left;
            }

                .menu_principale .dropdown-content a:hover {
                    background: linear-gradient(to bottom, #01BCBC, #00969d, #006266);
                    color: white;
                }

        .menu_principale .dropdown:hover .dropdown-content {
            display: block;
        }


/* =============================
   HAMBURGER BUTTON (3 span)
   ============================= */

.menu-toggle {
    display: none;
    width: 45px;
    height: 38px;
    background: #006266;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 1000;
}

    /* Le tre linee */
    .menu-toggle .hamburger-line {
        position: absolute;
        left: 10px;
        right: 10px;
        height: 3px;
        background-color: #ffffff;
        border-radius: 2px;
        transition: 0.3s ease;
    }

        /* Posizionamento delle tre linee (chiuso) */
        .menu-toggle .hamburger-line:nth-child(1) {
            top: 9px;
        }

        .menu-toggle .hamburger-line:nth-child(2) {
            top: 17px;
        }

        .menu-toggle .hamburger-line:nth-child(3) {
            top: 25px;
        }

    /* Stato aperto: trasformo in X */
    .menu-toggle.open .hamburger-line:nth-child(1) {
        transform: rotate(45deg);
        top: 17px;
    }

    .menu-toggle.open .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.open .hamburger-line:nth-child(3) {
        transform: rotate(-45deg);
        top: 17px;
    }

/* =============================
   MOBILE ONLY
   ============================= */
@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    header .menu_principale ul {
        display: none;
    }

    header .menu_principale.open ul {
        display: block;
    }

    /* Menu principale: gli elementi si impilano */
    header .menu_principale a, header li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    header .menu_principale {
        margin-top: 10px;
        position: relative;
        height: auto;
        text-align: left;
    }

    

    /* Nascondo il menu di default su mobile */
    header .menu_principale ul {
        display: none;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #006266;
        width: 100%;
    }

    /* Quando il contenitore ha .open, mostro la lista */
    header .menu_principale.open ul {
        display: block;
    }

    /* Gli elementi non sono pił affiancati */
    header .menu_principale li {
        float: none;
        width: 100%;
    }

    header .menu_principale a,
    header li a,
    header .dropbtn,
    header .dropdown label {
        display: block !important;
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        padding: 10px 15px !important;
        box-sizing: border-box;
    }

    /* Dropdown: niente assoluto, segue il flusso */
    header .dropdown-content {
        position: static;
        box-shadow: none;
        margin: 0;
        margin-left: 15px;
        width: 100%;
    }

        header .dropdown-content a {
            min-width: 0;
        }
    
}