/* Wrapper and header are built by ga-map.js around the embed's bare #gaMap, so the header and
   map read as one card. */
.ga-wrap { border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* The header sets its own colors and fonts so the Squarespace theme can't restyle the h2 */
.ga-wrap .ga-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #14284b; color: #fff; padding: 10px 14px; margin: 0;
  font-family: Arial, Helvetica, sans-serif; text-align: left;
}
.ga-wrap .ga-header h2 {
  margin: 0; padding: 0; color: #fff;
  font: 700 18px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: normal; text-transform: none; text-align: left;
}
.ga-wrap .ga-header .sub {
  display: block; color: #fff; font-size: 12px; font-weight: 400; opacity: .85;
}

#gaMap {
  height: clamp(560px, 80vh, 900px);
  width: 100%;
}

@media (max-width: 600px) {
  .ga-wrap .ga-header h2 { font-size: 16px; }
  .ga-wrap .ga-header .sub { display: none; }
  #gaMap { height: calc(100svh - 52px); min-height: 420px; }
}

.ga-pin {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.ga-pin.parking   { background: #1565c0; color: #fff; border-radius: 4px; }
.ga-pin.hotel     { background: #3f7a35; color: #fff; }
.ga-pin.dining    { background: #c0580c; color: #fff; }
.ga-pin.transport { background: #6a3d9a; color: #fff; }
.ga-pin.venue     { background: #111; color: #fff; width: 34px; height: 34px; }
.ga-pin.warning   { background: #c62828; color: #fff; }
.ga-pin svg {
  display: block; width: 62%; height: 62%;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Keep map text dark even when the Squarespace section uses light text */
#gaMap .ga-legend,
#gaMap .leaflet-popup-content,
#gaMap .leaflet-control-layers,
#gaMap .ga-error { color: #222; }

.ga-popup b { font-size: 14px; }
.ga-popup .note { color: #555; font-style: italic; }

/* Button-sized links so they're easy to tap on a phone */
.ga-popup .directions {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e2e2;
}
/* Label on its own row; buttons side by side below it, wrapping only if the popup is too narrow */
.ga-popup .directions span { display: block; margin-bottom: 6px; font-weight: 700; }
#gaMap .ga-popup .directions a {
  padding: 5px 9px; border: 1px solid #c8c8c8; border-radius: 4px;
  background: #f6f6f6; color: #222; text-decoration: none; font-weight: 400; white-space: nowrap;
  display: inline-block; margin: 0 6px 6px 0;
}
#gaMap .ga-popup .directions a:hover { background: #ebebeb; }

.ga-legend {
  background: #fff; padding: 8px 10px; border-radius: 4px;
  font: 12px/1.5 Arial, Helvetica, sans-serif;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ga-legend .key { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; font-weight: 700; }
.ga-legend .ga-pin { width: 18px; height: 18px; border-width: 1.5px; box-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Shown in place of the map when Leaflet or places.json fails to load */
.ga-error {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 24px; box-sizing: border-box;
  background: #f4f4f4; border: 1px solid #ddd; border-radius: 6px;
  font: 15px/1.5 Arial, Helvetica, sans-serif; text-align: center;
}

/* Mini mode (mini.html): link from the footer map to the full map page */
#gaMap .ga-full-link {
  background: #fff; color: #14284b; padding: 5px 9px; border-radius: 4px;
  font: 700 12px/1.3 Arial, Helvetica, sans-serif; text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
#gaMap .ga-full-link:hover { background: #f4f4f4; }