/* coverage.php -- a full-bleed world map with a floating legend/toggle
   panel, on top of the shared marketing chrome (marketing_header()/
   marketing_footer(), css/tokens.css + css/marketing.css). */

.coverage-hero {
  padding: 44px 0 40px;
}

.coverage-hero h1 {
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 700;
  margin: 0 0 14px;
  max-width: 20ch;
  text-wrap: balance;
}

.coverage-hero .lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mk-ink-2);
  margin: 0;
  max-width: 62ch;
}

.coverage-map-wrap {
  position: relative;
  width: 100%;
  height: 640px;
  background: #eef2ee;
  border-top: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
}

#coverage-map {
  width: 100%;
  height: 100%;
}

.coverage-legend {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 500;
  width: 260px;
  background: var(--mk-paper);
  border: 1px solid var(--mk-line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--mk-shadow-panel);
}

.coverage-legend h2 {
  font-size: 12px;
  font-weight: 660;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-ink-3);
  margin: 0 0 12px;
}

.coverage-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--mk-ink);
  padding: 6px 0;
  cursor: pointer;
}

.coverage-toggle input {
  margin: 0;
  accent-color: var(--mk-accent);
}

.coverage-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.coverage-swatch-standard { background: #cfd8d1; }
.coverage-swatch-crossings { background: var(--mk-crossing); }
.coverage-swatch-sidewalks { background: var(--mk-walk-yes); }
.coverage-swatch-canopy { background: var(--mk-shade-5); }
.coverage-swatch-buildings { background: var(--mk-building); }
.coverage-swatch-bikeways { background: var(--mk-bike, #b5397f); }

.coverage-hint {
  font-size: 12px;
  color: var(--mk-ink-2);
  line-height: 1.5;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--mk-line);
}

.coverage-cta {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto;
  padding: 64px 0;
}

.coverage-cta h2 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 680;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.coverage-cta p {
  font-size: 16px;
  color: var(--mk-ink-2);
  line-height: 1.6;
  margin: 0 0 24px;
}

@media (max-width: 720px) {
  .coverage-map-wrap { height: 480px; }
  .coverage-legend { width: calc(100% - 40px); top: auto; bottom: 16px; left: 20px; right: 20px; }
}

/* Two ways to answer the same question, for the signed-out visitor: sign up,
   or just tell us. Wraps rather than shrinking -- neither is a secondary
   action small enough to squeeze. */
.coverage-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* -------------------------------------------------- hero: page, and the ask
   The ask used to live below the map. A 640px-tall world map meant you had to
   scroll past the whole thing to reach it, so the question that actually
   drives this page was the least visible thing on it. Now it sits beside the
   intro, above the fold, and the map keeps its full width. */

.coverage-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .coverage-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.coverage-hero-text h1 {
  margin-top: 0;
}

/* Bordered, so it reads as a thing to act on rather than more page. The
   accent tint is the same one the map's "enhanced" layers use, which is the
   quiet link between "here is where we have gone further" and "ask us to go
   further where you are". */
.coverage-ask {
  background: var(--mk-accent-soft);
  border: 1px solid var(--mk-accent-border);
  border-radius: var(--mk-radius);
  padding: 22px 24px;
}

.coverage-ask h2 {
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--mk-accent);
  text-wrap: balance;
}

.coverage-ask p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mk-ink-2);
  margin: 0 0 16px;
}

.coverage-ask p:last-child {
  margin-bottom: 0;
}

.coverage-ask .coverage-cta-actions {
  justify-content: flex-start;
}