#site-menu{
    position: fixed;
    width: var(--menu-w);
    height: calc(100dvh - var(--header-h));
    height: calc(100vh - var(--header-h));
    top: var(--header-h);
    right: calc(var(--menu-w)*-1);
    transition: right .3s ease-in;
    @media #{$small}{ 
        transition: right .4s ease-in;
    }
    background-color: var(--color-bg);
    border-left: var(--border-light);
    padding: var(--padding-body);
    z-index: calc(var(--z-header) - 1);

    @media #{$x-small}{ 
        width: 100vw; 
        right: -100vw;
    }


    .site-menu__inner{
        height: 100%;
        overflow: scroll;
        @include hide-scroll();

    }
    // display: flex;
    // flex-direction: column;


    .search-form{
        margin-top: calc(var(--spacing)*1);
        margin-bottom: calc(var(--spacing)*1);
    }



    nav{
          margin-top: calc(var(--spacing)*1.5);
        ul{
            list-style-type: none;
            li{
                margin-bottom: calc(var(--spacing)*0.5);
            }
            a{
                text-decoration: none;
                font-weight: 500;
            }
        }

    }

    #nav-pages{
        li{
            text-transform: uppercase;
        }

    }

    .support{
  text-transform: uppercase;
    }

    #nav-aside{
        margin-top: calc(var(--spacing)*1);
    }



    .socials{
              margin-top: calc(var(--spacing)*2);
        padding-bottom: calc(var(--spacing)*0.75);
    }
}

#menu-overlay{
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) - 2);
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease-in, visibility .3s ease-in;
}

body.menu-open{

    #site-menu{
        right: 0;
    }

    #menu-toggle{
        .open{ display: none; }
        .close{ display: block!important; }
    }

    #menu-overlay{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

}