/*=========================================================
  THE SPOILED CHEF
  HEADER
=========================================================*/

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    z-index:var(--z-sticky);

    transition:var(--transition);

}

.header.scrolled{

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

    backdrop-filter:blur(18px);

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

}

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

.header .container{

    height:100%;

}

/*=========================================================
WRAPPER
=========================================================*/

.header__wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:100%;

}

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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    width:170px;

    transition:var(--transition);

}

.header.scrolled .logo img{

    width:160px;

}

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

.navigation{

    display:flex;

    align-items:center;

}

.menu{

    display:flex;

    align-items:center;

    gap:40px;

}

.menu li{

    position:relative;

}

.menu a{

    position:relative;

    display:inline-flex;

    align-items:center;

    height:90px;

    font-weight:600;

    color:var(--color-white);

    transition:var(--transition);

}

.header.scrolled .menu a{

    color:var(--color-heading);

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:26px;

    width:0;

    height:2px;

    background:var(--color-secondary);

    transition:var(--transition);

}

.menu a:hover::after,

.menu a.active::after{

    width:100%;

}

.menu a:hover{

    color:var(--color-secondary);

}

.header.scrolled .menu a:hover{

    color:var(--color-primary);

}

/*=========================================================
RIGHT ACTIONS
=========================================================*/

.header__actions{

    display:flex;

    align-items:center;

    gap:16px;

}

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

.search-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:50%;

    color:var(--color-white);

    transition:var(--transition);

}

.header.scrolled .search-btn{

    color:var(--color-heading);

}

.search-btn:hover{

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

}

.header.scrolled .search-btn:hover{

    background:var(--color-primary-light);

}

/*=========================================================
CART
=========================================================*/

.cart-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:50%;

    color:var(--color-white);

    transition:var(--transition);

}

.header.scrolled .cart-btn{

    color:var(--color-heading);

}

.cart-count{

    position:absolute;

    top:-3px;

    right:-3px;

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--color-secondary);

    color:var(--color-black);

    font-size:.7rem;

    font-weight:700;

}

/*=========================================================
ORDER BUTTON
=========================================================*/

.header__actions .btn{

    min-height:48px;

}

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

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    cursor:pointer;

    transition:var(--transition);

}

.mobile-toggle span{

    display:block;

    width:22px;

    height:2px;

    background:var(--color-white);

    position:relative;

    transition:var(--transition);

}

.mobile-toggle span::before,

.mobile-toggle span::after{

    content:"";

    position:absolute;

    left:0;

    width:22px;

    height:2px;

    background:inherit;

    transition:var(--transition);

}

.mobile-toggle span::before{

    top:-7px;

}

.mobile-toggle span::after{

    bottom:-7px;

}

.header.scrolled .mobile-toggle span,

.header.scrolled .mobile-toggle span::before,

.header.scrolled .mobile-toggle span::after{

    background:var(--color-heading);

}

/*=========================================================
ACTIVE MOBILE ICON
=========================================================*/

.mobile-toggle.active span{

    background:transparent;

}

.mobile-toggle.active span::before{

    transform:rotate(45deg);

    top:0;

}

.mobile-toggle.active span::after{

    transform:rotate(-45deg);

    bottom:0;

}

/*=========================================================
ANNOUNCEMENT BAR (OPTIONAL)
=========================================================*/

.announcement{

    background:var(--color-primary);

    color:var(--color-white);

    font-size:.9rem;

    text-align:center;

    padding:10px;

}

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

.header-space{

    height:var(--header-height);

}
.header-space{
    height:calc(var(--header-height) + 40px);
}

.header.scrolled{
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
}

.header.scrolled .logo img{
    content:url("../images/logo/logo-dark.svg");
}