/* =============================================================================
 * Hoosier Weather — homepage active-alerts bar
 * Bootstrap 5 dark theme; --wx-alert-color is set inline by js/alertBar.js
 * to the CAP colour of the highest active severity.
 * ========================================================================== */
.wx-alert-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 16px;
  border-radius: 6px;
  border-left: 4px solid var(--wx-alert-color, #9fb4c7);
  background: rgba(255, 255, 255, 0.04);
  color: #dee2e6;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.12s ease;
}
.wx-alert-bar:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.wx-alert-bar__icon {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--wx-alert-color, #9fb4c7);
}
.wx-alert-bar__count { font-weight: 700; }
.wx-alert-bar__events { color: rgba(220, 235, 248, 0.8); }
.wx-alert-bar__msg { color: rgba(255, 255, 255, 0.62); }
.wx-alert-bar__cta {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5bc8f5;
  white-space: nowrap;
}

/* no active alerts — slim, reassuring, green accent */
.wx-alert-bar--clear {
  border-left-color: #6fe0a8;
  font-size: 0.82rem;
}
.wx-alert-bar--clear .wx-alert-bar__icon { color: #6fe0a8; }

@media (max-width: 575px) {
  .wx-alert-bar__cta {
    margin-left: 0;
    width: 100%;
  }
}