/* ================================
   Weather Alerts – Multisite (CSS)
   Scoped styles to avoid theme clashes
   ================================ */

/* Container */
.weather-alerts {
  font-size: 16px;
  line-height: 1.4;
  color: #111;
}

/* Last updated line */
.weather-alerts .weather-alerts-last-updated {
  font-size: 14px;
  color: #555;
}

/* === Table layout === */
.weather-alerts-table {
  width: 100%;
  border-collapse: separate;    /* keep vertical spacing between rows */
  border-spacing: 4px 10px;     /* first value = horizontal gap (tighter per your request) */
}

.weather-alerts-table td {
  vertical-align: top;
  padding: 6px 8px;
}

/* County column */
.weather-alerts-table td.county {
  font-weight: 600;
  white-space: nowrap;
  color: #222;
  padding-right: 10px;          /* small gap to alerts column */
}

/* Alerts column */
.weather-alerts-table td.alerts {
  padding-left: 6px;            /* nudge left a touch to sit closer to county column */
}

/* When there are no active alerts */
.weather-alerts-table td.alerts em {
  color: #666;
}

/* === Alert summary blocks === */
.alert-summary {
  display: block;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .06s ease;
  color: #111;                  /* ensure readable text on light backgrounds */
}

.alert-summary:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.alert-summary:active {
  transform: translateY(1px);
}

/* Keyboard focus */
.alert-summary:focus,
.alert-summary:focus-visible {
  outline: 3px solid rgba(25, 118, 210, .45);
  outline-offset: 2px;
}

/* Expanded state */
.alert-summary.active {
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
}

/* Details area inside each summary */
.alert-details {
  display: none;                /* toggled via JS */
  margin-top: 8px;
  background: rgba(255,255,255,.6);
  border-radius: 5px;
  padding: 8px 10px;
}

.alert-details p {
  margin: 0 0 8px 0;
}

.alert-details a {
  text-decoration: underline;
}

/* === Condensed banner (top-of-site strip) === */
.weather-alerts-condensed {
  width: 100%;
}

.weather-alerts-condensed .alert-message {
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
}

.weather-alerts-condensed a {
  color: #fff !important;
  text-decoration: underline;
}

.weather-alerts-condensed table {
  width: 100%;
  border-collapse: collapse;
}

/* === Utilities / helpers === */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* === Responsive tweaks === */
@media (min-width: 768px) {
  /* Gentle column proportions on wider screens */
  .weather-alerts-table td.county { width: 30%; }
  .weather-alerts-table td.alerts { width: 70%; }
}

@media (max-width: 767.98px) {
  .weather-alerts {
    font-size: 15px;
  }
  .weather-alerts-table {
    border-spacing: 2px 8px; /* slightly tighter on mobile */
  }
  .weather-alerts-table td.county {
    width: 40%;
  }
  .weather-alerts-table td.alerts {
    width: 60%;
  }
}

/* Optional: darker text on watch/advisory yellow backgrounds (if you keep inline bg colors) */
.alert-summary[style*="fdfd96"] { color: #222; } /* Watch/Advisory yellow */
.alert-summary[style*="fff3cd"] { color: #222; } /* Other light amber */