/* ==========================================================================
   HAUS OF LESS
   Navigation
   Version: 1.0
   ========================================================================== */

/* ==========================================================
   Mobile Overlay
========================================================== */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   Mobile Menu
========================================================== */

.mobile-menu{

    position:fixed;

    top:0;

    right:-380px;

    width:380px;

    max-width:100%;

    height:100vh;

    background:#ffffff;

    z-index:999;

    transition:right .35s ease;

    box-shadow:-20px 0 60px rgba(0,0,0,.15);

}

.mobile-menu.active{

    right:0;

}

/* ==========================================================
   Inner
========================================================== */

.mobile-menu__inner{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    height:100%;

    padding:8rem 2.5rem 3rem;

}

/* ==========================================================
   Navigation
========================================================== */

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.mobile-menu nav a{

    color:var(--color-forest);

    font-size:1.1rem;

    transition:var(--transition);

}


.mobile-menu nav a:hover{

    color:var(--color-brass);

}

/* ==========================================================
   Desktop
========================================================== */

@media(min-width:1101px){

    .mobile-menu,

    .mobile-overlay{

        display:none;

    }

}

/* ==========================================================
Header mobile
========================================================== */

.mobile-menu .mobile-cta{

    width:100%;

    justify-content:center;

    margin-top:2rem;

    color:var(--color-white);

}

.mobile-actions{
    display:grid;
    gap:1rem;
}

.mobile-actions .mobile-cta{
    margin-top:0;
}