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

.bbw-nav{

    margin-top:-2px;

    background:var(--bbw-teal-dark);

    border-top:3px solid var(--bbw-yellow);

    border-bottom:3px solid var(--bbw-yellow);

    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        inset 0 -1px rgba(0,0,0,.18);

}

.bbw-nav-list{

    display:flex;

    flex:1;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:0;

    margin:0;

    padding:0;

    list-style:none;

}

.bbw-nav-list li{

    position:relative;

    display:flex;

    align-items:center;

}

/*
==================================================
STAR SEPARATORS
==================================================
*/

.bbw-nav-list li:not(:last-child)::after{

    content:"★";

    margin:0 .9rem;

    color:var(--bbw-yellow);

    font-size:.8rem;

    line-height:1;

}

/*
==================================================
LINKS
==================================================
*/

.bbw-nav-list a{

    display:block;

    padding:.78rem .2rem;

    color:var(--bbw-paper-light);

    font-family:

        "Arial Narrow",

        "Franklin Gothic Condensed",

        Impact,

        sans-serif;

    font-size:1.02rem;

    font-weight:800;

    letter-spacing:.14em;

    line-height:1;

    text-decoration:none;

    text-transform:uppercase;

    transition:

        color .2s ease,

        transform .2s ease;

}

.bbw-nav-list a:hover,

.bbw-nav-list a:focus-visible,

.bbw-nav-list .current-menu-item>a{

    color:var(--bbw-yellow);

}

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

@media (max-width:900px){

    .bbw-nav-list{

        justify-content:center;

        row-gap:.5rem;

        padding:.5rem 0;

    }

    .bbw-nav-list li::after{

        display:none;

    }

    .bbw-nav-list a{

        padding:.55rem .75rem;

        font-size:.92rem;

    }

}

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

.bbw-nav-inner{

    position:relative;

    display:flex;

    align-items:center;

    gap:1.25rem;

}

.bbw-nav-toggle{

    display:none;

}

@media (max-width:900px){

    .bbw-nav-inner{

        justify-content:space-between;

        flex-wrap:wrap;

    }

    .bbw-nav-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        gap:5px;

        width:38px;

        height:34px;

        margin:.6rem 0;

        padding:0;

        background:transparent;

        border:2px solid var(--bbw-yellow);
        border-radius:var(--bbw-radius-sm);

        cursor:pointer;

    }

    .bbw-nav-toggle-bar{

        display:block;

        height:2px;

        background:var(--bbw-yellow);

    }

    .bbw-nav-list{

        flex:0 0 100%;

        display:none;

    }

    .bbw-nav-list.is-open{

        display:flex;

    }

}