@charset "UTF-8";

/* ===================================
   Hamburger
=================================== */

.hamburger{
    display:none;
    position:relative;
    width:44px;
    height:44px;
    cursor:pointer;
    border:none;
    background:none;
    z-index:9999;
}

.hamburger span{
    position:absolute;
    left:8px;
    width:28px;
    height:3px;
    background:#111827;
    border-radius:999px;
    transition:.3s;
}

.hamburger span:nth-child(1){
    top:12px;
}

.hamburger span:nth-child(2){
    top:20px;
}

.hamburger span:nth-child(3){
    top:28px;
}

/* ==========================
   Active
========================== */

.hamburger.is-active span:nth-child(1){
    top:20px;
    transform:rotate(45deg);
}

.hamburger.is-active span:nth-child(2){
    opacity:0;
}

.hamburger.is-active span:nth-child(3){
    top:20px;
    transform:rotate(-45deg);
}

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

@media (max-width:768px){

    .hamburger{
        display:block;
    }

    .header__nav{
        position:fixed;
        top:0;
        right:-100%;
        width:320px;
        max-width:90%;
        height:100vh;
        padding:100px 30px 40px;
        background:#ffffff;
        box-shadow:-10px 0 30px rgba(0,0,0,.1);
        transition:right .35s ease;
        overflow-y:auto;
        z-index:9998;
    }

    .header__nav.is-active{
        right:0;
    }

    .header__nav ul{
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    .menu-open{
        overflow:hidden;
    }

    .header__overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.45);
        opacity:0;
        visibility:hidden;
        transition:.3s;
    }

    .menu-open .header__overlay{
        opacity:1;
        visibility:visible;
    }

}