/*==================================================
    KURUNJI MASALA V2
    HEADER.CSS
==================================================*/

/*==============================
TOP BAR
==============================*/

.top-bar{

    background:var(--primary);

    color:#ffffff;

    height:42px;

    display:flex;

    align-items:center;

    font-size:14px;

}

.top-bar-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-left,
.top-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.top-left a,
.top-right a,
.top-right span{

    color:#fff;

    transition:var(--transition);

}

.top-left a:hover,
.top-right a:hover{

    color:var(--secondary);

}

.social-icons{

    display:flex;

    gap:12px;

}

.social-icons a{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.social-icons a:hover{

    background:rgba(255,255,255,.15);

}

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

.header{

    background:#fff;

    box-shadow:var(--shadow-sm);

    position:sticky;

    top:0;

    z-index:999;

}

.header-container{

    display:grid;

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

    gap:40px;

    align-items:center;

    min-height:90px;

}

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

.logo img{

    max-width:180px;

}

/*==============================
SEARCH
==============================*/

.search-box{

    display:flex;

    height:50px;

    border:1px solid var(--border);

    border-radius:50px;

    overflow:hidden;

}

.search-box input{

    flex:1;

    padding:0 20px;

    background:#fff;

}

.search-box button{

    width:60px;

    background:var(--primary);

    color:#fff;

    transition:var(--transition);

}

.search-box button:hover{

    background:var(--primary-dark);

}

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

.header-actions{

    display:flex;

    align-items:center;

    gap:15px;

}

.action-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#F5F5F5;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.action-btn:hover{

    background:var(--primary);

    color:#fff;

}

/*==============================
MOBILE TOGGLE
==============================*/

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-size:20px;

}

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

.navbar{

    background:#fff;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}

.nav-menu{

    display:flex;

    justify-content:center;

    gap:45px;

}

.nav-menu li{

    position:relative;

}

.nav-menu a{

    display:block;

    padding:18px 0;

    font-weight:600;

    color:var(--heading);

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--secondary);

    transition:.35s;

}

.nav-menu li:hover a::after{

    width:100%;

}

/*==============================
STICKY
==============================*/

.header.sticky{

    box-shadow:var(--shadow-md);

}

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

@media(max-width:992px){

    .search-box{

        display:none;

    }

    .header-container{

        grid-template-columns:1fr auto;

    }

    .navbar{

        display:none;

    }

    .mobile-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

    }

}

@media(max-width:768px){

    .top-bar{

        display:none;

    }

    .header-container{

        min-height:75px;

    }

    .logo img{

        max-width:150px;

    }

    .header-actions .btn{

        display:none;

    }

}

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

.menu-overlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

opacity:0;

visibility:hidden;

transition:.3s;

z-index:900;

}

.menu-overlay.show{

opacity:1;

visibility:visible;

}

@media(max-width:992px){

.navbar{

position:fixed;

top:0;

right:-320px;

width:300px;

height:100vh;

background:#fff;

transition:.35s;

z-index:999;

padding-top:90px;

box-shadow:0 10px 40px rgba(0,0,0,.15);

}

.navbar.show{

right:0;

}

.nav-menu{

flex-direction:column;

gap:0;

}

.nav-menu a{

padding:18px 30px;

border-bottom:1px solid #eee;

}

}
/*=========================================
    MOBILE MENU FIX
=========================================*/

@media(max-width:992px){

    .navbar{
        display:block;
        position:fixed;
        top:0;
        right:-320px;
        width:300px;
        max-width:85vw;
        height:100vh;
        overflow-y:auto;
        background:#fff;
        transition:right .35s ease;
        z-index:1001;
        padding:90px 0 30px;
        box-shadow:-10px 0 40px rgba(0,0,0,.15);
    }

    .navbar.show{
        right:0;
    }

    .nav-menu{
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;
        gap:0;
        width:100%;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-menu a{
        display:block;
        width:100%;
        padding:16px 30px;
        border-bottom:1px solid #eee;
        font-size:15px;
    }

    .nav-menu a::after{
        display:none;
    }

    .nav-menu a.active{
        color:var(--primary);
        background:#f4f8f4;
    }

    .menu-overlay{
        display:block;
        position:fixed;
        inset:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.45);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .3s ease, visibility .3s ease;
        z-index:1000;
    }

    .menu-overlay.show{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .mobile-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
        z-index:1002;
        cursor:pointer;
        border:0;
    }

    body.menu-open{
        overflow:hidden;
    }

}

@media(max-width:768px){

    .navbar{
        width:290px;
        max-width:86vw;
    }

}