/**
 * Interactive map page — MapLibre mount + control overlays.
 * Loaded only on the Map page template. The poster overlays (title plate,
 * compass, search, controls, legend) sit above the map; the map fills the canvas.
 */

#emv-map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Keep the poster overlays above the map (their base z-index is 5+ already). */
.canvas .titleplate,
.canvas .compass,
.canvas .searchbox,
.canvas .controls,
.canvas .legend {
  z-index: 6;
}

/* MapLibre chrome tuned to the poster palette. */
.maplibregl-ctrl-attrib {
  background: rgba(244, 234, 212, 0.82) !important;
  font-family: var(--font-body);
  font-size: 0.62rem;
}
.maplibregl-ctrl-attrib a { color: var(--ink-soft); }

.maplibregl-canvas { outline: none; }

/* Hide MapLibre's default zoom/compass controls — we drive the poster controls. */
.maplibregl-ctrl-top-right .maplibregl-ctrl-group,
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }

/* Pin popup — poster styled (basic; rich card lands in Phase 5). */
.maplibregl-popup-content {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
}
.maplibregl-popup-tip { display: none; }
.emv-pin-pop strong {
  display: block; font-family: var(--font-poster); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem;
  color: var(--ink); line-height: 1.1;
}
.emv-pin-pop__town {
  display: block; font-family: var(--font-accent); font-style: italic;
  font-size: 0.78rem; color: var(--teal); margin: 2px 0 6px; text-transform: capitalize;
}
.emv-pin-pop a {
  font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.7rem; color: var(--clay);
}

/* ⌘K search results dropdown */
.searchbox { position: absolute; }
.emv-search-results {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  max-height: 320px; overflow-y: auto; z-index: 20;
}
.emv-sr-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 0.55rem 0.8rem; border-bottom: 1px solid rgba(26,23,20,0.12);
}
.emv-sr-item:hover { background: var(--paper-soft); }
.emv-sr-label { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink); }
.emv-sr-kind {
  font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.6rem; color: var(--clay);
}
.emv-sr-empty {
  padding: 0.7rem 0.8rem; font-family: var(--font-accent); font-style: italic;
  font-size: 0.82rem; color: var(--ink-soft);
}

/* ---- Rich preview card (Phase 5) ---- */
.emv-card-pop .maplibregl-popup-content { padding: 0; width: 260px; overflow: hidden; }
.emv-card-pop .maplibregl-popup-close-button {
  font-size: 1.1rem; color: var(--paper); background: var(--ink);
  width: 22px; height: 22px; line-height: 20px; top: 0; right: 0; border-radius: 0;
}
.emv-card-pop .maplibregl-popup-close-button:hover { background: var(--clay); color: var(--paper); }
.emv-card { display: flex; flex-direction: column; }
.emv-card__media {
  height: 118px; background-size: cover; background-position: center;
  border-bottom: 2px solid var(--ink); background-color: var(--paper-deep);
}
.emv-card__body { padding: 0.65rem 0.8rem 0.8rem; }
.emv-card__meta { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.emv-card__cat {
  font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.56rem; color: var(--paper); padding: 2px 6px;
}
.emv-card__town {
  font-family: var(--font-accent); font-style: italic; font-size: 0.75rem;
  color: var(--teal); text-transform: capitalize;
}
.emv-card__star { color: var(--mustard); font-size: 0.85rem; line-height: 1; }
.emv-card__title {
  display: block; font-family: var(--font-poster); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 0.92rem; line-height: 1.05; color: var(--ink); margin-bottom: 0.5rem;
}
.emv-card__link {
  font-family: var(--font-poster); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.68rem; color: var(--clay);
}

/* ---- Tablet/phone: search bar pinned across the top of the canvas.
   style.css hides .searchbox ≤1100px; this restores it as full-width
   chrome (the ⌘K affordance stays desktop-only) and shifts the poster
   plates down to clear it. ---- */
.legend-toggle { display: none; }

@media (max-width: 1100px) {
  .searchbox {
    display: flex;
    top: 0.75rem; left: 0.75rem; right: 0.75rem;
    width: auto;
  }
  .searchbox .kbd { display: none; }
  .searchbox input { font-size: 1rem; } /* ≥16px so iOS doesn't zoom the page on focus */
  .titleplate { top: calc(0.75rem + 46px + 0.75rem); left: 0.75rem; }
  .compass { top: calc(0.75rem + 46px + 0.75rem); right: 0.75rem; }
  .controls { top: calc(0.75rem + 46px + 0.75rem + 76px + 10px); right: 0.75rem; }
}

/* ---- Mobile: map on top, filters below; card becomes a bottom sheet ---- */
@media (max-width: 880px) {
  /* Release the desktop full-viewport scroll lock so the sidebar below the
     canvas is actually reachable (style.css locks body on this template). */
  body.page-template-page-map { overflow: auto; height: auto; }
  .map-page { position: static; height: auto; display: flex; flex-direction: column; }
  .canvas { height: 64vh; min-height: 340px; order: -1; } /* map first, above the filters */
  .sidebar { border-right: 0; border-top: 3px solid var(--ink); max-height: none; }
  /* Poster chrome scaled down so it doesn't cover the smaller canvas. */
  .canvas .compass { width: 56px; height: 56px; }
  .canvas .controls { top: calc(0.75rem + 46px + 0.75rem + 56px + 10px); }
  .canvas .titleplate { font-size: 0.8rem; padding: 0.5rem 0.8rem; }

  /* Legend: hidden by style.css ≤880 — give it back behind a "Key" toggle. */
  .legend-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute;
    bottom: 1rem; left: 1rem;
    z-index: 6;
    min-width: 64px; min-height: 44px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--font-poster); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem;
    color: var(--ink);
    cursor: pointer;
  }
  .legend-toggle[aria-expanded="true"] { background: var(--mustard); }
  .legend.is-open {
    display: grid;
    bottom: calc(1rem + 44px + 0.75rem);
    left: 1rem;
  }
}
@media (max-width: 700px) {
  .emv-card-pop.maplibregl-popup {
    position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important;
    bottom: 0 !important; width: 100% !important; max-width: 100% !important; transform: none !important;
  }
  .emv-card-pop .maplibregl-popup-content { width: 100%; box-shadow: 0 -4px 0 var(--ink); }
  .emv-card-pop .maplibregl-popup-tip { display: none; }
  .emv-card { flex-direction: row; }
  .emv-card__media { width: 40%; height: auto; min-height: 96px; border-bottom: 0; border-right: 2px solid var(--ink); }
}

/* The home page's bare .featured section class (style.css ~1672: 5rem
   padding, teal bg, halftone ::before) collides with the legend dot's
   "featured" modifier and blows the 12px swatch up into a giant block
   (desktop too). Neutralize the leak. */
.legend__dot.featured { padding: 0; background: var(--mustard); }
.legend__dot.featured::before { content: none; }

/* Respect reduced-motion: kill the MapLibre fade on labels/symbols where possible. */
@media (prefers-reduced-motion: reduce) {
  .maplibregl-canvas { scroll-behavior: auto; }
}

/* (Paper-grain overlay removed — it was roughening the map labels. The poster
   feel comes from the palette + fonts instead. Re-add subtly later if wanted.) */

.emv-sr-item.is-sel { background: var(--paper-deep); }
.emv-sr-item:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }

.emv-card__addr {
  display: block; font-family: var(--font-body); font-size: 0.74rem;
  color: var(--ink-soft); line-height: 1.25; margin-bottom: 0.5rem;
}