/* =====================================================
   HEADER - IMPERIUM CAFÉ
   ===================================================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:85px;
    background:rgba(5,5,5,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(184,138,60,.20);
    z-index:9999;
    transition:.35s ease;
}

header.scrolled{
    background:rgba(5,5,5,.96);
    box-shadow:0 8px 30px rgba(0,0,0,.45);
}

.header-container{

    width:min(1400px,92%);
    height:100%;
    margin:auto;

    display:grid;

    grid-template-columns:220px 1fr 170px;

    align-items:center;

    column-gap:30px;

}

/* ==========================================
   LOGO
========================================== */

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    height:48px;
    width:auto;
    display:block;
    transition:.35s;

}

.logo:hover img{

    transform:scale(1.03);

}

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

nav{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:42px;

}

nav a{

    color:#f2f2f2;

    font-size:.86rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    position:relative;

    transition:.3s;

}

nav a:hover{

    color:#B88A3C;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#B88A3C;

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}

/* ==========================================
   BOTÃO
========================================== */

.btn-reservar{

    justify-self:end;

    padding:13px 28px;

    border-radius:999px;

    border:1px solid #B88A3C;

    color:#fff;

    transition:.35s;

}

.btn-reservar:hover{

    background:#B88A3C;

    color:#000;

}

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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.menu-toggle span{

    width:28px;

    height:2px;

    background:#fff;

    transition:.35s;

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

/* ==========================================
   MENU LATERAL
========================================== */

.mobile-menu{

    position:fixed;

    top:85px;

    right:-340px;

    width:320px;

    height:calc(100vh - 85px);

    background:#080808;

    border-left:1px solid rgba(255,255,255,.08);

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

    display:flex;

    flex-direction:column;

    padding:40px;

    gap:24px;

    transition:.4s ease;

    z-index:9998;

}

.mobile-menu.open{

    right:0;

}

.mobile-menu a{

    color:#fff;

    font-size:1rem;

    text-transform:uppercase;

    padding-bottom:15px;

    border-bottom:1px solid #222;

}

.mobile-menu a:hover{

    color:#B88A3C;

}

/* ==========================================
   RESPONSIVO
========================================== */

@media (max-width:992px){

    .header-container{

        grid-template-columns:1fr auto;

    }

    nav{

        display:none;

    }

    .btn-reservar{

        display:none;

    }

    .menu-toggle{

        display:flex;

        justify-self:end;

    }

    .logo img{

        height:42px;

    }

}

@media (max-width:600px){

    header{

        height:75px;

    }

    .mobile-menu{

        top:75px;

        height:calc(100vh - 75px);

        width:100%;

        right:-100%;

    }

    .logo img{

        height:38px;

    }

}