/* ============================================================
   SWARM OVERLAY + MAP REALTIME HANDOFF
   Keeps the vendored takeover tidy on top of the aqiqah page and
   guarantees the Leaflet map is painted the moment the page goes live.
   Loaded last so it wins over style.css / mobile-first.css.
   ============================================================ */

/* ---------- takeover overlay: sit cleanly above everything ---------- */
swarm-rebuild {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  pointer-events: auto;
}

/* The overlay must never inherit the page's scroll or be clipped by it. */
swarm-rebuild,
swarm-rebuild * {
  box-sizing: border-box;
}

/* While the rebuild runs the underlying page is blanked by the engine itself;
   keep the ambient canvas out of the way so it cannot bleed through. */
body.swarm-active #ambient-canvas {
  visibility: hidden;
}

/* ---------- map: live from the first revealed frame ---------- */
#venue-map.map-canvas {
  position: relative;
  width: 100%;
  height: 340px;
  min-height: 200px;
  border-radius: 20px;
  overflow: hidden;
  background: #eef2f7;
  /* Leaflet needs an explicit size; a collapsed parent is the usual cause of
     an apparently "missing" map. Do NOT add clip-path or contain here — both
     make the tile pane collapse to 0×0 so every tile lands outside the card. */
}

/* Leaflet panes must stay inside the rounded card. */
#venue-map .leaflet-pane,
#venue-map .leaflet-control-container {
  border-radius: inherit;
}

/* Static fallback (no tile access at all): show the pre-rendered venue image. */
#venue-map.map-static-fallback {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#venue-map.map-static-fallback .leaflet-tile-pane {
  opacity: 0;
}

/* ---------- swarm takeover: the map becomes one photo ----------
   The engine rebuilds every Leaflet tile as its own 256px media unit, so the
   rebuilt map is a grid of oversized squares rather than a map. Instead of
   letting it rebuild tile by tile, the map shows a single pre-rendered
   snapshot (venue-map.jpg) for as long as the takeover is up. The live tiles
   are hidden underneath, and restored the moment the guest presses X. */
body.swarm-map-shim #venue-map.map-canvas {
  background-image: url("./venue-map.jpg") !important;
  background-repeat: no-repeat !important;
  /* Snapshot rendered at the card ratio: stretch to fit rather than `cover`,
     which would crop the pin off-centre on narrow phones. */
  background-size: 100% 100% !important;
  background-position: center !important;
}

body.swarm-map-shim #venue-map .leaflet-tile-pane,
body.swarm-map-shim #venue-map .leaflet-overlay-pane,
body.swarm-map-shim #venue-map .leaflet-marker-pane,
body.swarm-map-shim #venue-map .leaflet-shadow-pane,
body.swarm-map-shim #venue-map .leaflet-popup-pane,
body.swarm-map-shim #venue-map .leaflet-control-container {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Attribution stays readable but quiet. */
#venue-map .leaflet-control-attribution {
  font-size: 9px;
  line-height: 1.35;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.86);
  color: #475569;
  border-top-left-radius: 8px;
}

#venue-map .leaflet-control-attribution a {
  color: #2563eb;
  text-decoration: none;
}

/* Zoom controls: 44px tap targets, white/blue to match the invitation. */
#venue-map .leaflet-control-zoom a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #1d4ed8;
  background: #ffffff;
  border: 1px solid #dbe4f0;
  font-weight: 600;
}

#venue-map .leaflet-control-zoom a:hover,
#venue-map .leaflet-control-zoom a:focus-visible {
  background: #eff4ff;
  color: #1e40af;
}

/* Popup typography */
#venue-map .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  border: 1px solid #e2e8f0;
}

#venue-map .leaflet-popup-content {
  margin: 12px 14px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #0f172a;
}

#venue-map .leaflet-popup-content strong {
  display: block;
  margin-bottom: 2px;
  color: #1d4ed8;
  font-size: 13.5px;
  font-weight: 700;
}

/* ---------- mobile tuning ---------- */
@media (max-width: 639px) {
  #venue-map.map-canvas {
    /* 220px keeps the map at ~30% of a phone screen. At 300px it took 41% and
       pushed the address and the Google Maps button below the fold. */
    height: 220px;
    border-radius: 16px;
  }
  #venue-map .leaflet-control-zoom a {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }
  #venue-map .leaflet-popup-content {
    font-size: 12.5px;
    margin: 10px 12px;
  }
}

@media (max-width: 359px) {
  #venue-map.map-canvas {
    height: 260px;
  }
}

/* Landscape phones: keep the map from eating the whole viewport. */
@media (max-height: 460px) and (orientation: landscape) {
  #venue-map.map-canvas {
    height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #venue-map .leaflet-fade-anim .leaflet-tile,
  #venue-map .leaflet-zoom-anim .leaflet-zoom-animated {
    transition: none !important;
  }
}