/**
 * Status messages ("alerts") component.
 *
 * Self-contained — no Bootstrap dependency. Semantic colors are derived
 * from the LLNL palette (vis-id.llnl.gov/guidelines/colors-fonts):
 *   error   → Research Red      #9d0c0c
 *   warning → Algorithm Orange  #ff7900 (darkened for text contrast)
 *   status  → Gamma Green       #84c342 (darkened for text contrast)
 *   info    → High Energy Azure #3366cc / Livermorium Ice #eaf0fb
 * Text colors are dark-on-light-tint and meet the 4.5:1 contrast minimum.
 */

.site-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  animation: site-alert-in 0.25s ease-out;
}

@keyframes site-alert-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Type variants ------------------------------------------------------ */

.site-alert--error {
  color: #6e0909;               /* Research Red, darkened */
  background-color: #fbeaea;
  border-color: #f0c4c4;
  border-left-color: #9d0c0c;   /* Research Red */
}

.site-alert--warning {
  color: #7a3b00;               /* Algorithm Orange, darkened for contrast */
  background-color: #fff3e6;
  border-color: #ffd9b3;
  border-left-color: #ff7900;   /* Algorithm Orange */
}

.site-alert--status {
  color: #2f5413;               /* Gamma Green, darkened for contrast */
  background-color: #eef7e4;
  border-color: #cce6ad;
  border-left-color: #5a8f25;
}

.site-alert--info {
  color: #1f3f80;               /* High Energy Azure, darkened */
  background-color: #eaf0fb;    /* Livermorium Ice */
  border-color: #c5d4f0;
  border-left-color: #3366cc;   /* High Energy Azure */
}

/* --- Icon --------------------------------------------------------------- */

.site-alert__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;         /* optical alignment with first text line */
}

/* --- Content ------------------------------------------------------------ */

.site-alert__content {
  flex: 1 1 auto;
  min-width: 0;                 /* allow long messages to wrap, not overflow */
}

.site-alert__heading {
  display: block;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.site-alert__list {
  margin: 0;
  padding-left: 1.125rem;
}

.site-alert__item + .site-alert__item {
  margin-top: 0.25rem;
}

.site-alert__item a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

/* --- Close button ------------------------------------------------------- */

.site-alert__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: -0.25rem -0.25rem 0 0; /* enlarge hit area without growing layout */
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}

.site-alert__close:hover {
  opacity: 1;
}

.site-alert__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  opacity: 1;
}

.site-alert__close svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* --- Dismiss animation --------------------------------------------------- */

.site-alert.is-dismissing {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .site-alert,
  .site-alert.is-dismissing {
    transition: none;
    animation: none;
  }
}