/* oaq overrides on top of Oat. Inherits light/dark from system via Oat's
   `color-scheme: light dark` + `light-dark()` tokens. */

:root {
  /* AQI bands — fixed hues (semantic, legible in both themes) with
     theme-aware foregrounds for the lighter bands. */
  --band-good: #00b050;
  --band-satisfactory: #8bc34a;
  --band-moderate: #ffd633;
  --band-poor: #ff8c00;
  --band-vpoor: #d62828;
  --band-severe: #7a0010;
  --band-unknown: light-dark(#999, #666);
}

main { max-width: 72rem; margin: 0 auto; padding: 0 1rem 3rem; }

/* Top navigation — Oat's default nav is a sidebar; we override with a clean
   top bar that hugs the main content width. */
nav.site-nav[data-topnav] {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  background: transparent;
  border-bottom: 1px solid var(--border, rgba(128,128,128,0.2));
  box-shadow: none;
  position: static;
}
nav.site-nav .brand {
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--foreground, inherit);
}
nav.site-nav .site-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  font-size: 0.95rem;
}
nav.site-nav .site-links a { text-decoration: none; color: var(--muted-foreground, #71717a); }
nav.site-nav .site-links a:hover { color: var(--foreground, inherit); }

/* Footer */
footer.site-footer {
  max-width: 72rem;
  margin: 3rem auto 2rem;
  padding: 1.5rem 1rem 0;
  border-top: 1px solid var(--border, rgba(128,128,128,0.2));
  font-size: 0.9rem;
  color: var(--muted-foreground, #71717a);
}
footer.site-footer p { margin-block: 0.5rem; }
footer.site-footer a { color: inherit; }
footer.site-footer .footer-links a { margin-right: 0.25rem; }

.hero { margin-block: 1.5rem 2rem; }
.hero h1 { margin-block-end: 0.25rem; }

main > section { margin-block-start: 3rem; }
main > section > h2 { margin-block: 0 1rem; }
.muted { color: var(--muted-foreground, #71717a); }

.num { font-variant-numeric: tabular-nums; text-align: right; }

.band {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 0.25em;
  font-size: 0.85em;
  font-weight: 600;
  color: #fff;
  background: var(--band-unknown);
}
.band.good { background: var(--band-good); }
.band.satisfactory { background: var(--band-satisfactory); color: #111; }
.band.moderate { background: var(--band-moderate); color: #111; }
.band.poor { background: var(--band-poor); }
.band.vpoor { background: var(--band-vpoor); }
.band.severe { background: var(--band-severe); }

table { width: 100%; }
table td, table th { padding: 0.35rem 0.5rem; }

details { margin-block: 0.75rem; }
details > summary { cursor: pointer; }
details > summary > h3 { display: inline; margin: 0; font-size: 1.05rem; }

.aqi-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: 1.5rem;
  padding: 1rem 0;
  border-block: 1px solid var(--border, rgba(128, 128, 128, 0.25));
}
.aqi-big {
  font-size: 5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

input[type="search"] { width: 100%; max-width: 32rem; }

details[hidden] { display: none !important; }

@media (max-width: 640px) {
  .aqi-big { font-size: 3.5rem; }
  table td, table th { padding: 0.3rem 0.35rem; font-size: 0.9rem; }
}