/* ==========================================================
 *   ExotElectronics
 *   Header Stylesheet
 *   File: /assets/css/header.css
 *   ========================================================== */


/* ==========================================================
 *   Header
 *   ========================================================== */

.site-header{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}


/* ==========================================================
 *   Header Top
 *   ========================================================== */

.header-top{

    display:flex;

    align-items:center;

    gap:25px;

    padding:18px 20px;

}


/* ==========================================================
 *   Logo
 *   ========================================================== */

.site-logo{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:#111827;

    flex-shrink:0;

}

.site-logo img{

    width:60px;

    height:60px;

    object-fit:contain;

    border-radius:10px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text h1{

    margin:0;

    font-size:1.5rem;

    font-weight:800;

    line-height:1.1;

}

.logo-text span{

    margin-top:4px;

    color:#6b7280;

    font-size:.9rem;

}


/* ==========================================================
 *   Search
 *   ========================================================== */

.header-search{

    flex:1;

    display:flex;

    align-items:center;

    max-width:700px;

    margin-left:auto;

}

.header-search input{

    flex:1;

    height:46px;

    border:1px solid #d1d5db;

    border-right:none;

    border-radius:8px 0 0 8px;

    padding:0 18px;

    font-size:15px;

    outline:none;

    transition:.2s;

}

.header-search input:focus{

    border-color:#2563eb;

}

.header-search button{

    width:60px;

    height:46px;

    border:none;

    background:#2563eb;

    color:#ffffff;

    border-radius:0 8px 8px 0;

    cursor:pointer;

    font-size:18px;

    transition:.2s;

}

.header-search button:hover{

    background:#1d4ed8;

}


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

.menu-toggle{

    display:none;

    background:none;

    border:none;

    font-size:30px;

    cursor:pointer;

    color:#111827;

    margin-left:10px;

}


/* ==========================================================
 *   Navigation
 *   ========================================================== */

.main-navigation{

    background:#111827;

}

.main-navigation ul{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.main-navigation li{

    margin:0;

}

.main-navigation a{

    display:block;

    padding:16px 22px;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

.main-navigation a:hover{

    background:#2563eb;

}

.main-navigation a.active{

    background:#1d4ed8;

}


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

@media (max-width:980px){

    .header-top{

        flex-wrap:wrap;

        gap:15px;

    }

    .logo-text span{

        display:none;

    }

    .header-search{

        order:3;

        width:100%;

        max-width:none;

    }

    .menu-toggle{

        display:block;

        margin-left:auto;

    }

    .main-navigation{

        display:none;

        width:100%;

    }

    .main-navigation.open{

        display:block;

    }

    .main-navigation ul{

        flex-direction:column;

        align-items:stretch;

    }

    .main-navigation a{

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

    }

}