/* =========================
   HEADER BASE
========================= */
.site-header{
    background:linear-gradient(180deg,#0b0d12,#0f1115);
    border-bottom:1px solid #1c1f26;
    position:sticky;
    top:0;
    z-index:999;
}

.navbar{
    max-width:1300px;
    margin:auto;
    padding:26px 20px;
    display:flex;
    align-items:center;
    gap:36px;
}

/* LOGO */
.logo a{
    font-size:38px;
    font-weight:900;
    letter-spacing:-1px;
    color:#fff;
    text-decoration:none;
}
.logo span{color:#ff3c38}

/* MAIN NAV */
.main-nav{
    display:flex;
    gap:26px;
}
.main-nav a{
    font-weight:600;
    opacity:.85;
    position:relative;
}
.main-nav a:hover{opacity:1}
.main-nav a.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:3px;
    background:#ff3c38;
    border-radius:3px;
}

/* SEARCH BOX */
.header-search{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
    background:#151822;
    border-radius:40px;
    padding:10px 18px;
    width:320px;
    transition:.35s;
    border:1px solid transparent;
}

.header-search:hover{
    background:#1b2030;
}
.header-search:focus-within{
    width:420px;
    border-color:#ff3c38;
    box-shadow:0 0 0 4px rgba(255,60,56,.15);
}
.search-icon{
    font-size:18px;
    opacity:.7;
}
.header-search input{
    background:none;
    border:0;
    outline:none;
    color:#fff;
    font-size:15px;
    width:100%;
}

/* =========================
   MOBILE ACTION BUTTONS
========================= */
.nav-actions{
    display:none;
    margin-left:auto;
    gap:14px;
}
.nav-btn{
    background:#151822;
    border:1px solid #1f2433;
    color:#fff;
    font-size:20px;
    padding:10px 14px;
    border-radius:12px;
    cursor:pointer;
}

/* =========================
   MOBILE NAV + SEARCH
========================= */
@media (max-width:768px){

    .nav-actions{
        display:flex;
    }

    .navbar{
        position:relative;
        padding:16px 14px;
        gap:14px;
    }

    .main-nav{
        display:none;
        position:fixed;
        left:0;
        right:0;
        top:72px;      /* MUST match header height */
        bottom:0;
        background:#0f1115;
        z-index:998;
        flex-direction:column;
        overflow-y:auto;
        padding:10px 0;
    }
    .main-nav.show{
        display:flex;
    }

    .main-nav a{
        padding:18px 22px;
        font-size:18px;
        border-bottom:1px solid #1c1f26;
    }

    .header-search{
        display:none;
        position:absolute;
        left:14px;
        right:14px;
        top:calc(100% + 10px);
        width:auto;
        padding:8px 12px;
        border-radius:16px;
        z-index:999;
    }
    .header-search.show{
        display:flex;
    }

    body.nav-open{
        overflow:hidden;
    }
}

/* Hide desktop menu on tablet */
@media (max-width:900px){
    .main-nav{display:none}
}