/* ======================================================
   SEAN B SOLUTIONS
   HEADER SYSTEM
   /assets/css/header.css

   Production Header Layout
====================================================== */


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

:root{

    --primary:#0b1f3a;
    --secondary:#e60000;
    --white:#ffffff;
    --text:#1b1b1b;

    --header-height:90px;

    --shadow:
    0 10px 30px rgba(0,0,0,.08);

    --transition:
    all .35s ease;

}




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


.header{

    width:100%;

    height:var(--header-height);

    position:fixed;

    top:0;

    left:0;

    z-index:9999;

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

    backdrop-filter:blur(12px);

    transition:var(--transition);

}




.header.scrolled{

    background:#ffffff;

    box-shadow:var(--shadow);

}




.header-container{

    max-width:1280px;

    height:100%;

    margin:auto;

    padding:0 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}




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


.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}



.logo a{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}



.logo img{

    width:58px;

    height:58px;

    object-fit:contain;

}



.logo-text{

    font-size:22px;

    font-weight:700;

    color:var(--primary);

    letter-spacing:-.5px;

    white-space:nowrap;

}



.logo-text span{

    color:var(--secondary);

}





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


.navbar{

    display:flex;

    align-items:center;

}



.nav-links{

    display:flex;

    align-items:center;

    gap:32px;

    list-style:none;

    margin:0;

    padding:0;

}



.nav-links li{

    position:relative;

}



.nav-links a{

    text-decoration:none;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

    position:relative;

}



.nav-links a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:var(--transition);

}



.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}



.nav-links a:hover{

    color:var(--secondary);

}





/* ======================================================
   SHOP BUTTON
====================================================== */


.shop-link{

    background:var(--secondary);

    color:white!important;

    padding:12px 24px;

    border-radius:30px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0 8px 20px rgba(230,0,0,.25);

}



.shop-link::after{

    display:none;

}



.shop-link:hover{

    background:#b90000;

    transform:translateY(-2px);

}





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


.menu-toggle{

    display:none;

    width:45px;

    height:45px;

    border:none;

    background:var(--primary);

    color:white;

    border-radius:8px;

    cursor:pointer;

    align-items:center;

    justify-content:center;

    font-size:20px;

}



.menu-toggle i{

    transition:.3s ease;

}





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


@media(max-width:900px){



.header{

    height:75px;

}



.header-container{

    padding:0 18px;

}



.logo img{

    width:45px;

    height:45px;

}



.logo-text{

    font-size:18px;

}



.menu-toggle{

    display:flex;

}





.navbar{

    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:var(--primary);

    display:none;

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

}



.navbar.active{

    display:block;

}



.nav-links{

    flex-direction:column;

    align-items:flex-start;

    width:100%;

    padding:20px;

    gap:0;

}



.nav-links li{

    width:100%;

    border-bottom:
    1px solid rgba(255,255,255,.15);

}



.nav-links a{

    display:block;

    width:100%;

    padding:15px 5px;

    color:white;

}



.nav-links a::after{

    display:none;

}



.nav-links a:hover{

    color:#e60000;

}



.shop-link{

    margin-top:15px;

    text-align:center;

    width:100%!important;

}





}




/* ======================================================
   SMALL MOBILE DEVICES
====================================================== */


@media(max-width:480px){



.header-container{

    padding:0 14px;

}



.logo img{

    width:40px;

    height:40px;

}



.logo-text{

    font-size:16px;

}



.menu-toggle{

    width:40px;

    height:40px;

    font-size:18px;

}



}




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


.header{

    animation:
    headerDrop .6s ease;

}



@keyframes headerDrop{


from{

    transform:translateY(-100%);

}


to{

    transform:translateY(0);

}


}




.nav-links li{

    animation:
    fadeMenu .4s ease forwards;

}



@keyframes fadeMenu{


from{

    opacity:0;

    transform:translateY(-10px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}




/* ======================================================
   PAGE OFFSET
====================================================== */


body{

    padding-top:var(--header-height);

}



@media(max-width:900px){


body{

    padding-top:75px;

}


}