/* map-page.css — Layout for /map.html. Uses brand variables from styles.css. */

.map-page main.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas:
    "intro    intro"
    "canvas   sidebar"
    "sources  sources";
  gap: 16px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.map-intro { grid-area: intro; }
.map-intro h1 { font-family: "Anton", sans-serif; color: #16306E; margin: 0 0 8px; }
.map-intro p  { color: #333; max-width: 70ch; margin: 0; }

.map-canvas-wrap { grid-area: canvas; }
.map-canvas {
  width: 100%;
  height: min(70vh, 720px);
  background: #EEE9DB;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #C7B888;
}

.map-sidebar {
  grid-area: sidebar;
  background: #FFF8EC;
  border: 1px solid #C7B888;
  border-radius: 8px;
  padding: 16px;
  max-height: min(70vh, 720px);
  overflow-y: auto;
  position: sticky;
  top: 16px;
}
.map-sidebar h2 { font-family: "Barlow Condensed", sans-serif; color: #16306E; margin: 0 0 12px; }

.layer-group { margin-bottom: 16px; }
.layer-group > summary {
  font-weight: 700; color: #16306E; cursor: pointer;
  font-family: "Barlow Condensed", sans-serif; font-size: 1.1rem;
  padding: 4px 0; list-style: none;
}
.layer-group > summary::marker { content: ""; }

.layer-toggle {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-top: 1px dashed #C7B888;
}
.layer-toggle:first-of-type { border-top: none; }
.layer-toggle input[type="checkbox"] { margin-top: 4px; accent-color: #16306E; }
.layer-toggle .layer-label { font-weight: 700; color: #16306E; }
.layer-toggle .layer-desc  { font-size: 0.9rem; color: #555; margin: 2px 0 0; }
.layer-toggle .layer-meta  { font-size: 0.8rem; color: #888; margin: 4px 0 0; }

.map-sources { grid-area: sources; background: #F2EEDD; padding: 16px; border-radius: 8px; }
.map-sources h2 { font-family: "Barlow Condensed", sans-serif; color: #16306E; margin: 0 0 8px; }
.map-sources ul { margin: 0; padding: 0 0 0 20px; }
.map-sources li { margin: 4px 0; }
.map-sources-note { color: #555; font-size: 0.9rem; margin: 12px 0 0; }

/* Popup info-window content */
.layer-popup { font-family: "Source Sans 3", sans-serif; max-width: 260px; }
.layer-popup h3 { margin: 0 0 4px; color: #16306E; font-size: 1.05rem; }
.layer-popup p  { margin: 2px 0; color: #333; font-size: 0.9rem; }
.layer-popup .popup-link { color: #9E1621; font-weight: 700; }

/* Mobile: bottom drawer for layer controls */
@media (max-width: 900px) {
  .map-page main.map-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "canvas"
      "sidebar"
      "sources";
  }
  .map-sidebar { position: static; max-height: none; }
  .map-canvas { height: 60vh; }
}