/* =========================================
   HEADER
========================================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background:#000;
    border-bottom:1px solid rgba(77,70,53,.3);
    z-index:999;
}

.header-container{
    max-width:1440px;
    height:100%;
    margin:auto;
    padding:0 64px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

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

.logo-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo-wrap img{
    height:64px;
    width:auto;
    object-fit:contain;
}

.logo-text{
    font-family:'Playfair Display', serif;
    font-size:32px;
    font-weight:700;
    color:#f2ca50;
    letter-spacing:-1px;
}

/* =========================================
   DESKTOP NAVIGATION
========================================= */

.main-nav{
    display:flex;
    align-items:center;
    gap:32px;
}

.main-nav a{
    color:#e2e2e2;
    text-decoration:none;
    font-family:'Hanken Grotesk', sans-serif;
    font-size:16px;
    transition:0.3s;
}

.main-nav a:hover{
    color:#f2ca50;
}

.main-nav a.active{
    color:#f2ca50;
    font-weight:700;
    border-bottom:2px solid #f2ca50;
    padding-bottom:4px;
}

/* =========================================
   PHONE LINK
========================================= */

.phone-link{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#f2ca50;
    font-weight:600;
    font-size:16px;
}

.phone-link svg{
    width:22px;
    height:22px;
}

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

.mobile-menu{
    display:none;
    position:relative;
}

.mobile-menu summary{
    list-style:none;
    cursor:pointer;
    color:#f2ca50;
    font-size:32px;
    line-height:1;
}

.mobile-menu summary::-webkit-details-marker{
    display:none;
}

.mobile-dropdown{
    position:absolute;
    top:55px;
    right:0;
    width:220px;
    background:#111111;
    border:1px solid rgba(242,202,80,.25);
    border-radius:8px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:16px;
    z-index:1000;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.mobile-dropdown a{
    color:#ffffff;
    text-decoration:none;
    font-family:'Hanken Grotesk', sans-serif;
    transition:.3s;
}

.mobile-dropdown a:hover{
    color:#f2ca50;
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width:1024px){

    .header-container{
        padding:0 24px;
    }

    .logo-wrap img{
        height:56px;
    }

    .logo-text{
        font-size:24px;
    }

    .main-nav{
        display:none;
    }

    .phone-link{
        display:none;
    }

    .mobile-menu{
        display:block;
    }
}

@media (max-width:360px){
    .header-container{
        padding:0 16px;
    }

    .logo-wrap{
        gap:8px;
    }

    .logo-wrap img{
        height:44px;
    }

    .logo-text{
        font-size:18px;
    }

    .mobile-menu summary{
        font-size:28px;
    }
}