/**
 *
 * Base header
 *
 * NOTE: All styles must inherit .base-header class to prevent style
 * conflict in production as all css file will be merged
 */

.base-header {
    top: 0;
    z-index: 11;
    transition: box-shadow .3s;
}
.base-header.scrolled {
    box-shadow: 0px 2px 10px rgb(0 0 0 / 18%);
}

.base-header .navbar .nav-item:not(:last-of-type) {
    margin-bottom: 1rem;
}

.base-header .navbar .navbar-brand {
    position: relative;
    left: -7px;
}

.base-header .navbar .nav-item > a {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.base-header .navbar-toggler {
    border: none;
    color: var(--jo-yellow-rgb);
    user-select: none;
}
.base-header .navbar-toggler:focus {
    box-shadow: 0 0 0 3px;
}

@media (min-width: 992px) {

    .base-header .navbar .navbar-brand {
        position: initial;
    }

    .navbar-expand-lg .navbar-collapse {
        justify-content: end;
    }

    .base-header .navbar .nav-item:not(:last-of-type) {
        margin-bottom: 0;
        margin-right: 1rem;
    }
}