nav.navbar {
    height: var(--navbar-height);
    z-index: 10;
    background-color: var(--navbar-bg-clr);
}

nav.navbar>div {
    max-width: var(--max-vw);
    background-color: inherit;
}

nav .navbar-brand .brand-logo {
    max-width: 120px;
    object-fit: contain;
}

nav.navbar a {
    color: var(--navbar-fg-clr);
}

nav.navbar a.active,
nav.navbar a:hover {
    color: var(--brand-clr-1);
}

nav.navbar a.active {
    font-weight: bold;
}

nav .search-form input {
    border: none;
    border-radius: 50rem 0 0 50rem;
    position: relative;
}

nav .search-form button {
    border: 1px solid var(--brand-clr-1);
    border-radius: 0 50rem 50rem 0;
    color: var(--brand-clr-1);
    border-left: none;
}

nav .search-form button:hover {
    color: var(--brand-clr-2);
    background-color: var(--brand-clr-1);
}

nav.navbar button.navbar-toggler span.bi-list,
nav.navbar button.navbar-toggler.collapsed span.bi-x {
    display: none;
}

nav.navbar button.navbar-toggler span.bi-x,
nav.navbar button.navbar-toggler.collapsed span.bi-list {
    display: block;
}

nav.navbar .dropdown-menu {
    background-color: var(--bs-dark);
    transition: all ease 300ms;
}

body.light-mode nav.navbar .dropdown-menu {
    background-color: white;
}

nav.navbar a.dropdown-item {
    color: var(--brand-clr-2)!important;
    transition: all ease 300ms;
}

body.light-mode nav.navbar a.dropdown-item {
    color: var(--fg-clr-light)!important;
    transition: all ease 300ms;
}

nav.navbar a.dropdown-item.active,
nav.navbar a.dropdown-item:focus {
    background-color: var(--brand-clr-1)!important;
    color: var(--brand-clr-2)!important;
}

nav.navbar a.dropdown-item:hover {
    background-color: rgba(255,0,0,0.5)!important;
    color: var(--brand-clr-2)!important;
}

body.light-mode nav.navbar a.dropdown-item.active,
body.light-mode nav.navbar a.dropdown-item:focus,
body.light-mode nav.navbar a.dropdown-item:hover {
    color: white!important;
}

nav.navbar a.nav-link:focus {
    color: var(--brand-clr-1)!important;
}

.franchise span {
    position: relative;
    left: 0px;
    transition: all ease 300ms;
    animation: arrow-animate 1s ease infinite;
}

@keyframes arrow-animate {
    50% {
        left: 10px;
    }
    
}

@media screen and (min-width: 768px) {
    nav .search-form input {
        width: max(var(--search-input-width), 100%);
    }
}