/*******************************
        NAVBAR
*******************************/
#topnav {
    z-index: 1030;
    box-shadow: none;
    border: 0;
    transition: all .5s ease;
    min-height: 62px;
}

#topnav .navbar {
    min-height: 62px;
}

/* ---- Logo ---- */
#topnav .logo {
    transition: all .3s ease;
}

.logo .logo-light {
    display: inline-block;
}

.logo .logo-dark {
    display: none;
}

.darkheader .logo .logo-light {
    display: none;
}

.darkheader .logo .logo-dark {
    display: inline-block;
}

/* ---- Nav links (desktop: bianco su trasparente) ---- */
#topnav .navigation-menu .nav-link {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    transition: all .3s ease;
    padding: 0 15px;
}

#topnav .navigation-menu .nav-link:hover,
#topnav .navigation-menu .nav-link:focus {
    background-color: transparent;
    opacity: .75;
}

/* ---- Dark header (scroll o pagina interna) ---- */
.darkheader {
    background-color: #fff !important;
    box-shadow: 0 10px 33px rgba(0, 0, 0, .1) !important;
}

.darkheader .navigation-menu .nav-link {
    color: #000 !important;
}

/* ---- Hamburger toggler ---- */
#topnav .navbar-toggler {
    padding: 8px 10px;
}

#topnav .navbar-toggler .lines {
    width: 25px;
    display: block;
    position: relative;
    height: 17px;
}

#topnav .navbar-toggler span {
    height: 2px;
    width: 100%;
    display: block;
    margin-bottom: 6px;
    transition: transform .5s ease;
    /* bianco su sfondo trasparente (desktop trasparente non applica mai il toggler,
       ma per sicurezza usiamo scuro come default e lo sovrascriviamo) */
    background-color: #28282e;
}

#topnav .navbar-toggler span:last-child {
    margin-bottom: 0;
}

/* Su sfondo trasparente (home, prima dello scroll) il toggler non compare perché
   navbar-expand-lg lo nasconde a >= 992px. A mobile è sempre su sfondo bianco. */

/* ---- Mobile ---- */
@media (max-width: 991px) {
    #topnav {
        background-color: #ffffff !important;
        box-shadow: 0 10px 33px rgba(0, 0, 0, .1) !important;
    }

    #topnav .logo .logo-light {
        display: none;
    }

    #topnav .logo .logo-dark {
        display: inline-block;
    }

    #topnav #navigation {
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        background-color: #ffffff;
        padding-bottom: 8px;
    }

    #topnav .navigation-menu .nav-link {
        color: #28282e !important;
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (min-width: 992px) {
    #topnav .navigation-menu .nav-link {
        padding-top: 21px;
        padding-bottom: 21px;
        line-height: 20px;
    }
}