/* web-v2/css/components/national-alert.css
   Country-wide / unmapped-area alert strip (earthquake, tsunami, nationwide). */

.national-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem .9rem;
  background: var(--threat-rockets-bg);
  border-bottom: 2px solid var(--threat-rockets);
  box-shadow: var(--threat-rockets-glow);
  flex-shrink: 0;
  position: relative;
  z-index: 98;
  animation: national-in .25s ease-out;
}
.national-alert[hidden] { display: none; }
.national-alert[data-ended="1"] {
  background: var(--threat-clearing-bg);
  border-bottom-color: var(--threat-clearing);
  box-shadow: none;
}

.national-alert__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.national-alert__body { flex: 1; min-width: 0; }
.national-alert__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--threat-rockets);
}
.national-alert[data-ended="1"] .national-alert__title { color: var(--threat-clearing); }
.national-alert__where { font-size: .78rem; color: var(--text-primary); margin-top: .15rem; }
.national-alert__instr {
  font-size: .8rem; color: var(--text-primary); margin-top: .35rem; line-height: 1.45;
  max-width: 70ch; text-wrap: pretty;
}

.national-alert__close {
  flex-shrink: 0;
  position: relative;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color .15s, border-color .15s, transform .1s;
}
/* 44 px hit area around the 28 px visual button */
.national-alert__close::after { content: ''; position: absolute; inset: -8px; }
.national-alert__close:hover { color: var(--text-primary); border-color: var(--text-muted); }
.national-alert__close:active { transform: scale(.94); }
.national-alert__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes national-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .national-alert { animation: none; } }

@media (max-width: 768px) {
  .national-alert { padding: .55rem .6rem; gap: .5rem; }
  .national-alert__title { font-size: .85rem; }
  .national-alert__icon { font-size: 1.3rem; }
}

.national-alert[data-kind="3"]:not([data-ended="1"])  { background: var(--threat-quake-bg);   border-bottom-color: var(--threat-quake);   box-shadow: var(--threat-quake-glow); }
.national-alert[data-kind="3"]:not([data-ended="1"]) .national-alert__title { color: var(--threat-quake); }
.national-alert[data-kind="21"]:not([data-ended="1"]) { background: var(--threat-tsunami-bg); border-bottom-color: var(--threat-tsunami); box-shadow: var(--threat-tsunami-glow); }
.national-alert[data-kind="21"]:not([data-ended="1"]) .national-alert__title { color: var(--threat-tsunami); }
.national-alert[data-kind="22"]:not([data-ended="1"]),
.national-alert[data-kind="24"]:not([data-ended="1"]) { background: var(--threat-hazmat-bg); border-bottom-color: var(--threat-hazmat); box-shadow: var(--threat-hazmat-glow); }
.national-alert[data-kind="22"]:not([data-ended="1"]) .national-alert__title,
.national-alert[data-kind="24"]:not([data-ended="1"]) .national-alert__title { color: var(--threat-hazmat); }
.national-alert[data-kind="23"]:not([data-ended="1"]) { background: var(--threat-rad-bg);     border-bottom-color: var(--threat-rad);     box-shadow: var(--threat-rad-glow); }
.national-alert[data-kind="23"]:not([data-ended="1"]) .national-alert__title { color: var(--threat-rad); }