/* =========================
   OSVALDO MOBILE MENU
   ========================= */


/* =========================
   DESKTOP - NASCOSTO
   ========================= */

#osv-mobile-nav {
    display: none !important;
}


/* =========================
   TABLET + SMARTPHONE
   BASE
   ========================= */

@media screen and (max-width: 1024px) {


    /* =========================
       CONTENITORE MENU
       ========================= */

    #osv-mobile-nav {

        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;

        z-index: 999999 !important;

        pointer-events: none !important;
    }


    /* =========================
       HAMBURGER
       ========================= */

    #osv-hamburger {

        display: flex !important;

        position: fixed !important;

        width: 30px !important;
        height: 22px !important;

        flex-direction: column !important;
        justify-content: space-between !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;

        border: none !important;
        box-shadow: none !important;

        cursor: pointer !important;

        z-index: 1000003 !important;

        pointer-events: auto !important;
    }


    #osv-hamburger span {

        display: block !important;

        width: 30px !important;
        height: 2px !important;
        min-height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        border: none !important;
        border-radius: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =========================
       BACKDROP
       ========================= */

    #osv-backdrop {

        display: block !important;

        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        background:
            rgba(0, 0, 0, 0.45) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 1000000 !important;

        transition:
            opacity 0.35s ease,
            visibility 0.35s ease !important;
    }


    /* =========================
       DRAWER BIANCO
       ========================= */

    #osv-drawer {

        display: flex !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        flex-direction: column !important;

        width: 75vw !important;
        max-width: 420px !important;

        height: 100vh !important;
        height: 100dvh !important;

        box-sizing: border-box !important;

        /*
         * Lo spazio superiore lascia libera
         * la zona della X.
         */

        padding:
            85px
            42px
            35px
            42px !important;

        background: #ffffff !important;

        transform:
            translateX(-105%) !important;

        pointer-events: auto !important;

        overflow: hidden !important;

        z-index: 1000001 !important;

        transition:
            transform 0.5s
            cubic-bezier(
                .77,
                0,
                .18,
                1
            ) !important;
    }


    /* =========================
       DRAWER APERTO
       ========================= */

    #osv-mobile-nav.is-open
    #osv-drawer {

        transform:
            translateX(0) !important;
    }


    #osv-mobile-nav.is-open
    #osv-backdrop {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* =========================
       CONTENITORE DELLE 5 VOCI
       ========================= */

    #osv-drawer .osv-links {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        /*
         * QUESTO rende realmente
         * equidistanti i 5 gruppi.
         */

        justify-content:
            space-evenly !important;

        flex: 1 1 auto !important;

        width: 100% !important;

        min-height: 0 !important;

        gap: 0 !important;

        padding: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* =========================
       SINGOLO GRUPPO
       ========================= */

    #osv-drawer
    .osv-mobile-group {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: center !important;

        flex: 0 0 auto !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* =========================
       MACRO VOCI
       ========================= */

    #osv-drawer
    .osv-mobile-main {

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

        font-family:
            "Helvetica Neue",
            Helvetica,
            Arial,
            sans-serif !important;

        font-size: 14px !important;

        font-weight: 400 !important;

        line-height: 1.35 !important;

        letter-spacing:
            2.4px !important;

        text-transform:
            uppercase !important;

        text-decoration:
            none !important;

        color: #111111 !important;

        background:
            transparent !important;

        border: none !important;

        box-shadow: none !important;

        transition:
            opacity 0.25s ease !important;
    }


    #osv-drawer
    .osv-mobile-main:hover {

        opacity: 0.45 !important;
    }


    /* =========================
       SOTTOMENU
       ========================= */

    #osv-drawer
    .osv-mobile-submenu {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 4px !important;

        margin:
            7px
            0
            0
            0 !important;

        padding: 0 !important;
    }


    /* =========================
       SOTTOVOCI
       ========================= */

    #osv-drawer
    .osv-mobile-submenu a {

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

        font-family:
            "Helvetica Neue",
            Helvetica,
            Arial,
            sans-serif !important;

        font-size: 10px !important;

        font-weight: 300 !important;

        line-height: 1.45 !important;

        letter-spacing:
            1.5px !important;

        text-transform:
            uppercase !important;

        text-decoration:
            none !important;

        color: #777777 !important;

        background:
            transparent !important;

        border: none !important;

        box-shadow: none !important;

        transition:
            color 0.25s ease,
            opacity 0.25s ease !important;
    }


    #osv-drawer
    .osv-mobile-submenu a:hover {

        color: #111111 !important;

        opacity: 0.65 !important;
    }


    /* =========================
       LINK VISITED / ACTIVE
       EVITA BLU
       ========================= */

    #osv-drawer
    .osv-mobile-main:visited,

    #osv-drawer
    .osv-mobile-main:active,

    #osv-drawer
    .osv-mobile-main:focus {

        color: #111111 !important;
    }


    #osv-drawer
    .osv-mobile-submenu a:visited,

    #osv-drawer
    .osv-mobile-submenu a:active,

    #osv-drawer
    .osv-mobile-submenu a:focus {

        color: #777777 !important;
    }


    /* =========================
       X CHIUSURA
       ========================= */

    #osv-close {

        display: block !important;

        position: absolute !important;

        width: 30px !important;
        height: 30px !important;

        padding: 0 !important;
        margin: 0 !important;

        background:
            transparent !important;

        border: none !important;

        cursor: pointer !important;

        z-index: 1000002 !important;
    }


    #osv-close span {

        display: block !important;

        position: absolute !important;

        top: 14px !important;
        left: 0 !important;

        width: 30px !important;
        height: 1.5px !important;

        margin: 0 !important;

        background: #111111 !important;
    }


    #osv-close
    span:first-child {

        transform:
            rotate(45deg) !important;
    }


    #osv-close
    span:last-child {

        transform:
            rotate(-45deg) !important;
    }


    /* =========================
       BLOCCA SCROLL PAGINA
       ========================= */

    body.osv-menu-open {

        overflow: hidden !important;
    }

}


/* =========================
   TABLET
   768px - 1024px
   ========================= */

@media screen
and (min-width: 768px)
and (max-width: 1024px) {


    #osv-hamburger {

        top: 50px !important;

        left: 35px !important;
    }


    #osv-close {

        top: 28px !important;

        left: 25px !important;
    }


    #osv-drawer {

        padding:
            90px
            42px
            40px
            42px !important;
    }

}


/* =========================
   SMARTPHONE / IPHONE
   0px - 767px
   ========================= */

@media screen and (max-width: 767px) {


    /* =========================
       HAMBURGER
       ========================= */

    #osv-hamburger {

        top: 60px !important;

        left: 30px !important;

        width: 28px !important;

        height: 20px !important;
    }


    #osv-hamburger span {

        width: 28px !important;
    }


    /* =========================
       DRAWER
       ========================= */

    #osv-drawer {

        width: 87vw !important;

        padding:
            75px
            36px
            30px
            36px !important;
    }


    /* =========================
       X CHIUSURA
       ========================= */

    #osv-close {

        top:
            calc(
                23px +
                env(safe-area-inset-top)
            ) !important;

        left: 20px !important;
    }


    /* =========================
       MACRO VOCI
       ========================= */

    #osv-drawer
    .osv-mobile-main {

        font-size: 13px !important;

        letter-spacing:
            2.1px !important;
    }


    /* =========================
       SOTTOVOCI
       ========================= */

    #osv-drawer
    .osv-mobile-submenu a {

        font-size: 9px !important;

        letter-spacing:
            1.35px !important;
    }

}