/* =========================================================================
 * /thg-atlas-fix.css  ·  v1  ·  2026-05-14
 * ----------------------------------------------------------------------------
 * Page-level decongestion for /atlas/. Scoped via :has(.atlas-controls) so it
 * only affects routes where the atlas filter bar is present. Other pages are
 * untouched.
 * ============================================================================*/

/* ---------- Hero compression ------------------------------------------------
 * Original: hero section is 467px tall, eating the entire above-the-fold.
 * After:   ~180px → the map and filter bar both fit above the fold.
 * --------------------------------------------------------------------------*/
body:has(.atlas-controls) main > section:first-child {
  padding-top: 24px !important;
  padding-bottom: 12px !important;
}

body:has(.atlas-controls) h1.display {
  font-size: clamp(28px, 4.2vw, 48px) !important;
  line-height: 1.05 !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.012em;
}

/* The h1 has line-break inside via a span; keep it on one or two lines */
body:has(.atlas-controls) h1.display br { display: none; }

/* Lede paragraph under the hero — keep but trim */
body:has(.atlas-controls) main > section:first-child p {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  max-width: 56ch;
  margin-bottom: 0 !important;
}

/* Eyebrow ("§ Volume IX · The Atlas · 48 plates · charted by hand") — keep
 * but tighten leading. */
body:has(.atlas-controls) main > section:first-child > .container > :first-child {
  margin-bottom: 4px !important;
}

/* ---------- Map area: dominate the viewport -------------------------------- */
body:has(.atlas-controls) .maplibregl-map {
  min-height: 78vh !important;
}

/* ---------- Filter bar tightening ----------------------------------------- */
.atlas-controls {
  gap: 8px !important;
  flex-wrap: wrap !important;
  row-gap: 8px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Touch targets — at least 36px tall on the chips */
.atlas-controls button,
.atlas-controls > a {
  min-height: 36px;
}

/* Search input — don't let it run to full width on a single row */
.atlas-controls input[type="search"],
.atlas-controls input[type="text"] {
  max-width: 240px;
  min-height: 36px;
}

/* On narrow screens, search drops to a second row by itself */
@media (max-width: 740px) {
  .atlas-controls input[type="search"],
  .atlas-controls input[type="text"] {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ---------- Map attribution + WhatsApp button cohabit safely ------------- */
.maplibregl-ctrl-attrib {
  /* Push the attribution off the WhatsApp FAB area */
  margin-right: 72px !important;
}

/* The floating WhatsApp action button should never sit on top of the map's
 * zoom controls when both are visible. Cap its z-index below MapLibre's
 * controls (which are at z-index 2). */
body:has(.maplibregl-map) [class*="FloatingActionButton"],
body:has(.maplibregl-map) iframe[src*="extension"] {
  z-index: 1 !important;
}

/* ---------- Focus rings (defense-in-depth on atlas chips) ----------------- */
.atlas-controls button:focus-visible,
.atlas-controls a:focus-visible,
.atlas-controls input:focus-visible {
  outline: 2px solid #b85a00 !important;
  outline-offset: 2px !important;
}

/* ---------- Mobile: stack filter group + search nicely -------------------- */
@media (max-width: 640px) {
  body:has(.atlas-controls) h1.display {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  body:has(.atlas-controls) .maplibregl-map {
    min-height: 70vh !important;
  }
  .atlas-controls button {
    font-size: 12.5px !important;
    padding: 6px 10px !important;
  }
}