/* Environment banner — see includes/envBanner.inc.php.

   The banner is fixed rather than in normal flow, because both layouts pin
   their own header to the top of the viewport:
     outer  #header.fixed-top          z-index 997
     inner  nav.navbar.fixed-top       z-index 100001  (quickLinks.inc.php)
   An in-flow banner just ends up underneath one of those. On the public
   pages the header is transparent, so the banner appeared to work there
   while being covered everywhere else.

   Fixing the banner means it no longer takes up space, so everything that
   was flush with the top of the viewport has to move down by its height:
   in-flow content via the body padding below, and each fixed/absolute
   anchor via its own rule. The inner layout hardcodes top:59px in two
   places — the height of the nav it sits under — so those become 59px plus
   the banner. */

:root {
    --x4-env-banner-h: 28px;
}

.x4-env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--x4-env-banner-h);
    /* Above the inner nav's 100001. */
    z-index: 100010;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: #333;

    /* One line, always. The height above is what every offset in this file
       is measured against, so the banner must not be allowed to wrap. */
    white-space: nowrap;
    overflow: hidden;
}

.x4-env-banner__key {
    font-weight: normal;
    opacity: 0.85;
}

.x4-env-banner__value {
    font-weight: bold;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 3px;
    letter-spacing: 0.12em;
}

.x4-env-banner--local   { background: #4a4a4a; }
.x4-env-banner--dev     { background: #0b6b3a; }
.x4-env-banner--stage   { background: #8a5a00; }
.x4-env-banner--main    { background: #8c1d18; }

/* Unset or unrecognised APP_ENV. Deliberately the loudest of the four:
   an unlabelled host is the case you most want to catch. */
.x4-env-banner--unknown {
    background: repeating-linear-gradient(
        45deg, #6a1b9a, #6a1b9a 10px, #4a148c 10px, #4a148c 20px
    );
}

/* --- Reclaiming the strip ------------------------------------------- */

/* Normal-flow content on every page. */
body {
    padding-top: var(--x4-env-banner-h);
}

/* Outer / public pages. The hero is sized to the viewport, so it has to
   give back the same height or the page grows a scrollbar it never had. */
#header.fixed-top       { top: var(--x4-env-banner-h); }
.navbar-mobile          { top: var(--x4-env-banner-h); }
#hero                   { height: calc(100vh - var(--x4-env-banner-h)); }

/* Inner / logged-in pages. */
.navbar.fixed-top       { top: var(--x4-env-banner-h); }
#sidebar-wrapper        { top: calc(59px + var(--x4-env-banner-h)); }
#page-content-wrapper   { top: calc(59px + var(--x4-env-banner-h)); }

/* Scorecards and reports are printed and handed out; the banner is a
   screen-only aid and has no business on paper, offsets included. */
@media print {
    .x4-env-banner { display: none; }
    body           { padding-top: 0; }
}