/* =========================================================
   maps.css — Page-specific styles for the Maps page
   ========================================================= */

/* Inputs: match your theme, scoped to this page */
.input {
  background: #151924;
  color: var(--fg);
  border: 1px solid #2a3246;
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 220px;
}
.input::placeholder { color: #8fd8b3; }

/* Toolbar layout and small-screen tweaks */
.map-toolbar { gap: 10px; }

@media (max-width: 560px) {
  /* Slightly trim the global content padding on phones so the
     viewer sits closer to the title/tools. This overrides the
     top padding defined in styles.css for small screens only. */
  .content {
    padding: 84px 14px 24px; /* was 96px top in styles.css */
  }

  .map-toolbar .spacer { display: none; }
  #mapSelect { width: 100%; }

  .zoom-controls {
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: space-between;
  }
}

/* =========================================================
   Map Viewer Container
   - Desktop/tablet: comfortable bounded height
   - Phone: fixed height using svh to ignore URL bar growth
   ========================================================= */
.map-viewer {
  position: relative;
  background: #0e131a;
  border: 1px solid rgba(0, 255, 102, 0.18);
  border-radius: 12px;
  overflow: hidden;

  /* Desktop/tablet defaults */
  min-height: min(78vh, 900px);
  max-height: 82vh;

  /* Enable smooth gestures */
  touch-action: none;      /* allow custom pinch/pan */
  user-select: none;
  -webkit-user-drag: none;
}

/* Phone-specific viewer height:
   Use the "small viewport" to avoid oversized containers
   when the mobile URL bar is visible. Provide fallbacks. */
@media (max-width: 560px) {
  .map-viewer {
    min-height: 0;
    max-height: none;
    height: 65svh;   /* preferred: stable with URL bar shown */
    height: 65dvh;   /* dynamic viewport fallback */
    height: 65vh;    /* legacy fallback */
  }
}

/* =========================================================
   Map Image
   - Centered by default using translate(-50%, -50%)
   - JS appends pan (x,y) + scale() after this base transform
   ========================================================= */
#mapImage {
  position: absolute;
  top: 50%;
  left: 50%;

  /* Base centering; JS keeps this and adds pan/zoom */
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin: 50% 50%;

  will-change: transform;
  image-rendering: auto;

  /* Allow zooming beyond container bounds */
  max-width: none;
  height: auto;
}

/* Optional: subtle grid overlay for orientation while zoomed */
.map-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,255,102,0.06), rgba(0,255,102,0.06)),
    repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(0,255,102,0.06) 30px),
    repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(0,255,102,0.06) 30px);
  opacity: .2;
}

/* Zoom control button states */
.zoom-controls .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* Accessibility helper (scoped copy in case the global one isn't loaded here) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; clip-path: inset(50%);
}

/* Desktop cursor cues */
@media (hover: hover) and (pointer: fine) {
  .map-viewer { cursor: grab; }
  .map-viewer.is-panning { cursor: grabbing; }
}