/* Lexington Brief - dateline weather + severe weather banner.
   Variables are namespaced --wx-* so they cannot collide with app.css.
   Contrast (WCAG): warning light 6.0:1, watch light 5.2:1,
   warning dark 6.1:1, watch dark 8.0:1. */

:root {
  --wx-warning-bg: #B0202B;
  --wx-warning-fg: #F4F1EA;
  --wx-watch-bg:   #9A5210;
  --wx-watch-fg:   #F4F1EA;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wx-warning-bg: #E8737C;
    --wx-warning-fg: #121A15;
    --wx-watch-bg:   #E0A15A;
    --wx-watch-fg:   #121A15;
  }
}

:root[data-theme="dark"] {
  --wx-warning-bg: #E8737C;
  --wx-warning-fg: #121A15;
  --wx-watch-bg:   #E0A15A;
  --wx-watch-fg:   #121A15;
}

/* Dateline: one line, never wraps, so it costs no extra height */
#dateline {
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dateline a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.25em;
}
#dateline a:hover { text-decoration-style: solid; }

/* Severe weather banner, first thing on the page while an alert is active */
.wx-alert {
  padding: 10px 14px;
  margin: 0 0 14px;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.35;
}
.wx-alert[hidden] { display: none; }
.wx-alert--warning { background: var(--wx-warning-bg); color: var(--wx-warning-fg); }
.wx-alert--watch   { background: var(--wx-watch-bg);   color: var(--wx-watch-fg); }
.wx-alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  margin-left: 0.25em;
}
.wx-alert a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }