/* Match PublicASMasterV5's Bootstrap 5.3.3 navbar while existing pages
   and navigation behavior continue to use Bootstrap 4. */
.as-site-header {
    padding: .5rem 0;
    font-family: "Lucida Grande", Arial, sans-serif;
}

.as-site-header.bg-dark {
    background-color: #212529 !important;
}

.as-site-header > .container {
    flex-wrap: wrap;
    padding-right: .75rem;
    padding-left: .75rem;
}

.as-site-header .as-header-logo {
    flex-shrink: 0;
}

.as-site-header .navbar-brand img {
    border-radius: .375rem !important;
}

.as-site-header .as-header-section {
    min-width: 0;
    max-width: min(28rem, calc(100% - 13rem));
    white-space: normal;
    overflow-wrap: anywhere;
}

.as-site-header .navbar-collapse {
    min-width: 0;
}

.as-site-header .navbar-nav {
    min-width: 0;
    flex-wrap: wrap;
}

.as-site-header .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .55);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.as-site-header .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.as-site-header .navbar-toggler {
    color: rgba(255, 255, 255, .55);
    border-radius: .375rem;
    transition: box-shadow .15s ease-in-out;
}

.as-site-header .navbar-toggler:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem;
}

.as-site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.as-site-header .as-header-account-pill {
    display: inline-block;
    padding: 0 7px;
    border-radius: 15px;
    background-color: #0056b3;
    color: white;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .as-site-header .dropdown-item {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 992px) {
    .as-site-header .navbar-collapse {
        flex-basis: 30rem;
    }
}

@media (min-width: 1400px) {
    .as-site-header > .container {
        max-width: 1320px;
    }
}

/* Keep section names visible without crowding the logo or mobile menu. */
@media (max-width: 575.98px) {
    .as-site-header > .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .as-site-header .as-header-logo {
        grid-column: 1;
        grid-row: 1;
    }

    .as-site-header .navbar-toggler {
        grid-column: 2;
        grid-row: 1;
    }

    .as-site-header .as-header-section {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 100%;
        margin-right: 0;
    }

    .as-site-header .navbar-collapse {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .as-site-header .nav-link,
    .as-site-header .navbar-toggler {
        transition: none;
    }
}
