/* =========================================================
   Test-environment bar — Components/Shared/TestEnvironmentBanner.razor, rendered by App.razor outside
   Production only. Fixed above the fixed site nav (.al-nav, z-index 1000). While the bar is in the page, the nav,
   the legacy fixed landing bars and the page itself move down by its height, so it covers nothing. Every rule
   keys off :has(.ammn-test-env-banner), so in Production — where the bar is never rendered — this sheet does nothing.
   The height is fixed (the page offset has to know it); each line is one short line that never wraps.
   ========================================================= */

:root:has(.ammn-test-env-banner) {
  --ammn-test-banner-h: 48px;
}

.ammn-test-env-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1100;
  height: var(--ammn-test-banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--error) 80%, black);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}

.ammn-test-env-banner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ammn-test-env-banner__icon {
  flex-shrink: 0;
  font-size: 1.25em;
}

.ammn-test-env-banner__lines {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ammn-test-env-banner__line {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root:has(.ammn-test-env-banner) body {
  padding-top: var(--ammn-test-banner-h);
}

:root:has(.ammn-test-env-banner) .al-nav {
  top: var(--ammn-test-banner-h);
}

/* The mobile menu drawer and its scrim are fixed to the viewport from the top, inside the nav's stacking context (so
   below the bar): start them under the bar, so the drawer's close button is never covered. */
:root:has(.ammn-test-env-banner) .al-nav__scrim,
:root:has(.ammn-test-env-banner) .al-nav__drawer {
  inset-block-start: var(--ammn-test-banner-h);
}

:root:has(.ammn-test-env-banner) :where(.ammn-landing) .topbar {
  top: var(--ammn-test-banner-h);
}

:root:has(.ammn-test-env-banner) :where(.ammn-landing) .services-bar {
  top: calc(54px + var(--ammn-test-banner-h));
}

/* Narrow screens: the two languages stack, one short line each. */
@media (max-width: 900px) {
  :root:has(.ammn-test-env-banner) {
    --ammn-test-banner-h: 56px;
  }

  .ammn-test-env-banner {
    gap: 8px;
    padding: 0 8px;
    font-size: 12.5px;
  }

  .ammn-test-env-banner__lines {
    flex-direction: column;
    gap: 2px;
  }

  .ammn-test-env-banner__sep {
    display: none;
  }
}