/*
 * Environment banners (views/partials/environment-banners.php): maintenance
 * mode and the staging "DEVELOPMENT WEBSITE" notice.
 *
 * One fixed-height line each, pinned to the top of the screen across its
 * full width - over the desktop sidebar too. --env-banner-h is how much
 * they take up; the sidebar and the other sticky bars start below it.
 * Loaded after sidebar-menu.css so these offsets win.
 */
:root:has(.env-banners) {
    --env-banner-h: 2.5rem;
}
:root:has(.env-banner + .env-banner) {
    --env-banner-h: 5rem;
}

.env-banners {
    position: sticky;
    top: 0;
    /* Above the desktop sidebar (1030), under the mobile drawer (1040). */
    z-index: 1035;
}

.env-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0 1rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* !important: bowlio-theme.css colours links with a long a:not(...) chain. */
.env-banner a,
.env-banner a:hover {
    color: inherit !important;
    font-weight: 600;
    text-decoration: underline;
}
.env-banner a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Maroon on white text: 10:1. */
.env-banner--maintenance {
    background: #7f1d1d;
    color: #fff;
}
/* Orange with dark text: 8:1. */
.env-banner--development {
    background: #f28c28;
    color: #1c1e2d;
}

/* Sticky bars below the banners stop under them, not behind them. */
body:has(.env-banners) .navbar-info-box,
body:has(.env-banners) .impersonation-banner {
    top: var(--env-banner-h);
}
:root:has(.env-banners) {
    scroll-padding-top: calc(var(--env-banner-h) + 1rem);
}
/* custom.css leaves 7rem for the info bar. */
:root:has(.env-banners):has(.navbar-info-box) {
    scroll-padding-top: calc(var(--env-banner-h) + 7rem);
}

@media (min-width: 992px) {
    /* The body is pushed right of the sidebar; pull the banners back out
       so they span the whole screen, and start the sidebar under them. */
    body.has-sidebar .env-banners {
        margin-left: calc(-1 * var(--sidebar-width));
    }
    body.has-sidebar:has(.env-banners) .navbar {
        top: var(--env-banner-h);
    }
}