/* ==========================================================
   WHATABURGER GLOBAL HEADER
   Same visual system on Homepage + Inner Pages
   ========================================================== */

:root{
    --wb-header-orange:#ff770e;
    --wb-header-white:#ffffff;
    --wb-header-height:76px;
    --wb-header-max:1240px;
}

/* ----------------------------------------------------------
   HOMEPAGE HEADER
   ---------------------------------------------------------- */

.wb-header,
.wb-new-header{
    background:var(--wb-header-orange) !important;
    width:100% !important;
    border:0 !important;
    box-shadow:0 1px 0 rgba(0,0,0,.06) !important;
}

/* inner containers */
.wb-header-inner,
.wb-header .wb-inner,
.wb-header > .wb-container{
    max-width:var(--wb-header-max) !important;
    width:calc(100% - 40px) !important;
    min-height:var(--wb-header-height) !important;
    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:28px !important;
}

/* ----------------------------------------------------------
   LOGO — SAME SIZE EVERYWHERE
   ---------------------------------------------------------- */

.wb-new-logo,
.wb-logo{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
}

.wb-new-logo img,
.wb-logo img,
.wb-new-logo > img{
    display:block !important;
    width:auto !important;
    height:46px !important;
    max-width:205px !important;
    object-fit:contain !important;
    margin:0 !important;
}

/* ----------------------------------------------------------
   DESKTOP NAVIGATION
   ---------------------------------------------------------- */

.wb-nav-v10,
.wb-new-nav{
    margin-left:auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.wb-nav-v10 > ul,
.wb-nav-v10 .wb-real-menu,
.wb-new-nav > ul{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;

    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

.wb-nav-v10 li,
.wb-new-nav > ul > li{
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

.wb-nav-v10 a,
.wb-new-nav > ul > li > a{
    display:flex !important;
    align-items:center !important;

    min-height:44px !important;

    padding:9px 10px !important;
    margin:0 !important;

    font-family:Poppins,Arial,sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.25 !important;

    color:#fff !important;
    text-decoration:none !important;

    border-radius:6px !important;

    white-space:nowrap !important;

    transition:
        background-color .18s ease,
        opacity .18s ease !important;
}

.wb-nav-v10 a:hover,
.wb-new-nav > ul > li > a:hover{
    color:#fff !important;
    background:rgba(255,255,255,.14) !important;
    text-decoration:none !important;
}

.wb-nav-v10 a.active,
.wb-new-nav > ul > li.current-menu-item > a{
    color:#fff !important;
    background:rgba(255,255,255,.18) !important;
}

/* ----------------------------------------------------------
   PREVENT ASTRA HEADER FROM CREATING DIFFERENT APPEARANCE
   ---------------------------------------------------------- */

@media (min-width:922px){

    .wb-header,
    .wb-new-header{
        min-height:var(--wb-header-height) !important;
    }

    .wb-inner-mobile-menu{
        display:none !important;
    }
}

/* ----------------------------------------------------------
   TABLET / MOBILE
   ---------------------------------------------------------- */

@media (max-width:921px){

    :root{
        --wb-header-height:68px;
    }

    .wb-header-inner,
    .wb-header .wb-inner,
    .wb-header > .wb-container{
        width:calc(100% - 32px) !important;
        min-height:68px !important;
        gap:15px !important;
    }

    .wb-new-logo img,
    .wb-logo img,
    .wb-new-logo > img{
        height:42px !important;
        max-width:180px !important;
    }

    /* inner-page mobile nav keeps existing JS functionality */
    .wb-new-nav{
        margin-left:0 !important;
    }

    .wb-new-nav.open{
        background:#fff !important;
    }

    .wb-new-nav.open > ul{
        display:block !important;
    }

    .wb-new-nav.open > ul > li > a{
        color:#222 !important;
        font-size:15px !important;
        font-weight:500 !important;
        min-height:46px !important;
        padding:12px 18px !important;
        border-radius:0 !important;
    }

    .wb-new-nav.open > ul > li > a:hover{
        color:#ff770e !important;
        background:#fff7f1 !important;
    }
}

/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width:544px){

    .wb-header-inner,
    .wb-header .wb-inner,
    .wb-header > .wb-container{
        width:calc(100% - 28px) !important;
        min-height:64px !important;
    }

    .wb-new-logo img,
    .wb-logo img,
    .wb-new-logo > img{
        height:38px !important;
        max-width:160px !important;
    }

    .wb-inner-mobile-menu{
        margin-left:auto !important;
    }
}