/* ============================
   Office of Environmental Quiet & Wildlife Monitoring
   colour tokens + department-only overrides.
   Loaded AFTER the theme's style.css (via config.extra.extra_css), so these
   win. Only office-specific rules belong here; genuinely shared components
   (callouts, forms, footer, disclaimer) live in the theme stylesheet.
============================ */

/* The old PHP site used the same palette the shared theme already defaults to
   (navy #1a3e5f / #24577a, gold #ffdd57, page #f2f5f9). Restated here so this
   office's brand is explicit and self-contained rather than implied. */
:root {
  --brand: #1a3e5f;      /* dark header + footer, headings, table headers */
  --brand-nav: #24577a;  /* nav bar, heading underlines, bullets, buttons */
  --accent: #ffdd57;     /* gold: header rule, nav hover/active, footer accents */
  --page-bg: #f2f5f9;
}

/* Body links. The old site coloured in-content links navy + bold; the shared
   theme leaves generic <main> links unstyled, so restore it here. */
main a {
  color: var(--brand);
  font-weight: 600;
}

main a:hover {
  color: #0d2640;
}

/* ============================
   INDEX CARDS (home page current-level summary)
============================ */
.index-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.index-card {
  background: #fff;
  border: 1px solid #c8ced6;
  border-radius: 3px;
  padding: 1.25rem 1.5rem;
}

.index-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

.index-card .level {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0.5rem 0;
}

.index-card .descriptor {
  font-size: 0.95rem;
  color: #475569;
}

.index-card .link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/* ============================
   INDEX & STATION TABLES
   Light header row (navy-on-grey), unlike the theme's dark data-table. Kept as
   the old site rendered them so RAI/POI, station, and Quiet Night zone tables
   look unchanged.
============================ */
.index-table,
.station-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
}

.index-table th,
.index-table td,
.station-table th,
.station-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.index-table th,
.station-table th {
  background: #f2f5f9;
  font-weight: 700;
  color: var(--brand);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.index-table td:first-child {
  font-weight: 700;
  color: var(--brand);
  width: 60px;
}

.index-table td:nth-child(2) {
  font-weight: 600;
  width: 120px;
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 640px) {
  .index-cards {
    grid-template-columns: 1fr;
  }
}