/* Climate Alerts — design system */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --primary: #1a6b3a;
  --primary-hover: #145530;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .09), 0 2px 4px rgba(0, 0, 0, .06);
  --radius: 10px;
  --radius-sm: 6px;
  --transition: .15s ease;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav.container-fluid {
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

.brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }

.nav-btn {
  padding: .3rem .8rem !important;
  font-size: .82rem !important;
  margin: 0 !important;
}

/* ── Page layout ─────────────────────────────────────────────────────────── */
main.container {
  padding-top: 2rem;
  padding-bottom: 4rem;
  min-height: calc(100vh - 130px);
}

/* ── Cards (subscription grid) ───────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

article.alert-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  padding: 1.2rem 1.4rem;
  margin-bottom: 0;
}

article.alert-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

article.alert-card header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--muted-border-color, #e5e7eb);
}

article.alert-card footer {
  margin-top: .9rem;
  padding-top: .75rem;
  border-top: 1px solid var(--muted-border-color, #e5e7eb);
  padding-bottom: 0;
}

.card-detail { font-size: .88rem; margin: .2rem 0; color: var(--muted-color, #6b7280); }
.card-detail strong { color: var(--color, inherit); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .65rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.badge-avalanche   { background: #dbeafe; color: #1e40af; }
.badge-beach       { background: #fef3c7; color: #92400e; }
.badge-weather     { background: #e0f2fe; color: #0369a1; }
.badge-air_quality { background: #dcfce7; color: #166534; }

/* ── Form containers ─────────────────────────────────────────────────────── */
.form-wrap { max-width: 460px; margin: 3rem auto; }
.form-wrap h2 { margin-bottom: 1.5rem; font-size: 1.5rem; }

/* ── Feedback messages ───────────────────────────────────────────────────── */
.msg { padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
       font-size: .88rem; border: 1px solid transparent; }
.msg-error   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.msg-success { background: #dcfce7; color: #166534; border-color: #86efac; }
.error-msg   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
               padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.success-msg { background: #dcfce7; color: #166534; border: 1px solid #86efac;
               padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted-color, #6b7280); }
.empty-state p { font-size: 1.05rem; margin-bottom: 1.25rem; }

/* ── Section type-fields (subscription form) ─────────────────────────────── */
.type-fields { animation: fadeIn .18s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Table ───────────────────────────────────────────────────────────────── */
table { font-size: .88rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  padding: 1.25rem 0;
  border-top: 1px solid var(--muted-border-color, #e5e7eb);
  font-size: .8rem;
  color: var(--muted-color, #9ca3af);
  text-align: center;
  margin-top: 3rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .form-wrap { margin: 1.5rem auto; }
  nav ul { gap: .25rem; }
}