/* ============================================================================
   Incident announcement banner (`.mb-status-banner`)
   ----------------------------------------------------------------------------
   Colours the theme's announcement bar by incident severity. The bar itself is
   emitted by the announce block in overrides/main.html, driven by the
   [project.extra] mb_status_banner value in zensical.toml (which the More
   Buttons extension keeps in sync with open incidents on the System Status
   page). Amber = disruption, red = outage — the same palette values as the
   amber/red label pills in labels.css. Light values apply under the "default"
   scheme, dark under "slate". The aside can't be classed from inside the
   announce block, so severity is targeted via :has().
   ============================================================================ */

.md-banner .mb-status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  text-align: center;
}

.md-banner .mb-status-banner__text {
  font-weight: 500;
}

/* Severity icon (inlined lucide SVG from overrides/main.html) — strokes with
   currentColor, so it follows the banner's severity colour in both schemes.
   Negative end margin pulls it inside the root's 0.6rem column gap. */
.md-banner .mb-status-banner__icon {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
  margin-inline-end: -0.2rem;
}

/* Maintenance bar: the date/time window and the Read more button ride as one
   flex item, so a narrow viewport wraps after the lead sentence's colon —
   never mid-range — and the button stays beside the window on line two. */
.md-banner .mb-status-banner__group {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.md-banner .mb-status-banner__window {
  white-space: nowrap;
  font-weight: 500;
}
.md-banner .mb-status-banner__window:empty {
  display: none;
}

/* Slim strip: the theme gives .md-banner__inner a .6rem vertical margin —
   halve it, but only when the banner is ours. */
.md-banner:has(.mb-status-banner) .md-banner__inner {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

/* The Read more button hugs the strip: thin, and drawn from the banner's own
   text colour instead of the theme primary. */
.md-banner .md-button.mb-status-banner__btn {
  color: currentColor;
  border: 0.05rem solid currentColor;
  padding: 0.1em 0.9em;
  font-size: 0.65rem;
  border-radius: 5px;
}
.md-banner .md-button.mb-status-banner__btn:hover {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
  color: currentColor;
  border-color: currentColor;
}

/* disruption — amber */
[data-md-color-scheme="default"] .md-banner:has(.mb-status-banner--disruption) { background: rgb(254,243,198); color: rgb(151,60,0); }
[data-md-color-scheme="slate"] .md-banner:has(.mb-status-banner--disruption) { background: rgb(151,60,0); color: rgb(254,243,198); }

/* outage — red */
[data-md-color-scheme="default"] .md-banner:has(.mb-status-banner--outage) { background: rgb(255,226,226); color: rgb(159,7,18); }
[data-md-color-scheme="slate"] .md-banner:has(.mb-status-banner--outage) { background: rgb(159,7,18); color: rgb(255,226,226); }

/* maintenance — same amber as disruption. The markup is emitted [hidden] and
   revealed by status-banner.js only inside the 7-days-before → window-end
   range, so the whole strip must collapse while the span is hidden. */
.md-banner:has(.mb-status-banner--maintenance[hidden]) { display: none; }
[data-md-color-scheme="default"] .md-banner:has(.mb-status-banner--maintenance:not([hidden])) { background: rgb(254,243,198); color: rgb(151,60,0); }
[data-md-color-scheme="slate"] .md-banner:has(.mb-status-banner--maintenance:not([hidden])) { background: rgb(151,60,0); color: rgb(254,243,198); }