/* --------------------------------------------------------------------------
   Main map layout. 100vw lets the map escape Enfold's normal content width.
   -------------------------------------------------------------------------- */
.wprm-wrap{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:30px;background:#e8e8e8;overflow:hidden}

/* Blurred preview image shown behind the map only for the very first load.
   It is set as a plain background on the map container, so Leaflet's own
   tiles simply paint over it once they are ready - and it stays visible on
   its own if the map fails to load entirely. Desktop/tablet and mobile use
   different crops (see the media query below). Once the initially visible
   tiles have loaded once (JS adds .wprm-loaded), it is replaced permanently
   by a flat fill in the OSM water colour, so later tile loading while
   panning never shows the (by then irrelevant) preview photo again. */
.wprm-map{width:100%;height:620px;min-height:300px;z-index:1;background:#ddd url('img/loading-preview-desktop.jpg') center/cover no-repeat}
.wprm-map.wprm-loaded{background-image:none;background-color:#aad3df}
.wprm-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000;background:rgba(255,255,255,.96);padding:12px 16px;border-radius:3px;box-shadow:0 2px 12px rgba(0,0,0,.18);font-size:14px;text-align:center}
.wprm-status.wprm-status-error{color:#333;font-weight:600}
.wprm-retry-btn{margin-top:10px;padding:7px 16px;border:0;border-radius:3px;background:var(--wprm-alternate-color,#333);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.wprm-retry-btn:hover{opacity:.86}

/* Hint overlay: shown for a one-finger swipe (needs two fingers) or a plain
   wheel/trackpad scroll (needs Ctrl+scroll to zoom). Fades in/out quickly,
   but is always triggered/removed the instant its condition starts/ends -
   the transition below is purely cosmetic, never a delay before reacting. */
.wprm-touch-message{position:absolute;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);color:#fff;padding:24px;box-sizing:border-box;font-size:28px;font-weight:600;text-align:center;line-height:1.3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.wprm-touch-message.is-visible{opacity:1;visibility:visible}

/* Popups use the site's own default font (not Leaflet's built-in Arial
   fallback), so they visually match the rest of the page. */
.wprm-popup{line-height:1.45}.wprm-popup-title{font-size:18px;font-weight:700;margin-bottom:2px}.wprm-popup-date{font-size:13px;color:#777;margin-bottom:8px}.wprm-popup-text{font-size:14px}
.leaflet-popup-content-wrapper{border-radius:2px}.leaflet-popup-content{margin:14px 16px;min-width:170px}.leaflet-container{font-family:inherit;font-size:14px;line-height:1.4}

/* Custom map controls (zoom in/out + marker toggle + fullscreen): one
   uniform button style for all of them, with an equal, generous gap to the
   top and right edge of the map. */
.leaflet-top.leaflet-right{top:14px;right:14px}
.leaflet-top .leaflet-control{margin-top:0}
.leaflet-right .leaflet-control{margin-right:0}
.wprm-controls{display:flex;flex-direction:column;gap:8px}
.wprm-ctrl-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:3px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.35);cursor:pointer;font:inherit;font-size:20px;line-height:1;color:var(--wprm-alternate-color,#333)}
.wprm-ctrl-btn:hover{background:#f4f4f4}
.wprm-ctrl-btn span{display:block;transform:translateY(-1px)}
.wprm-ctrl-btn span svg{display:block;transform:translateY(1px)}
.wprm-ctrl-btn-off{opacity:.4}

/* Smaller OSM attribution/copyright notice, bottom-right by Leaflet default. */
.leaflet-control-attribution{font-size:10px;padding:1px 6px;line-height:1.6}
.leaflet-control-attribution a{color:inherit}
.wprm-wrap:fullscreen,.wprm-wrap:-webkit-full-screen{width:100vw!important;height:100vh!important;margin:0!important;max-width:none!important;background:#ddd}
.wprm-wrap:fullscreen .wprm-map,.wprm-wrap:-webkit-full-screen .wprm-map{width:100%!important;height:100vh!important;min-height:0!important}
.wprm-fullscreen-fallback{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:999999!important;margin:0!important;max-width:none!important}.wprm-fullscreen-fallback .wprm-map{height:100vh!important}

/* Marker pins: SVG teardrop (see map.js), matching the minimalist control
   buttons via a subtle drop shadow instead of a hard box-shadow. On phones
   the pins themselves are rendered at 70% size already (map.js); no CSS
   scaling is applied here. */
.wprm-pin-wrap{background:transparent!important;border:0!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.wprm-pin-wrap.leaflet-marker-icon{overflow:visible}

/* Classic "GPS position" dot shown at the last point of the live KML track:
   a round blue marker with a white ring, animated like Google Maps' own
   current-location dot - only the white ring's thickness pulses. */
.wprm-gps-wrap{background:transparent!important;border:0!important}
.wprm-gps-dot{width:18px;height:18px;border-radius:50%;box-sizing:border-box;background:#1a73e8;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);animation:wprm-gps-pulse 2.4s ease-in-out infinite}
@keyframes wprm-gps-pulse{0%,100%{border-width:2px}50%{border-width:4px}}

/* During the initial load only the existing blurred preview remains visible.
   Leaflet's tiles/controls are prepared underneath it and become visible in
   one step after the final centre and current tiles are ready. */
.wprm-loading .leaflet-pane,.wprm-loading .leaflet-control-container{visibility:hidden!important}

/* On phones the map uses approximately a 4:5 aspect ratio. */
@media(max-width:767px){
  .wprm-wrap{margin-bottom:20px}
  .wprm-map{height:125vw!important;min-height:0;max-height:none;background-image:url('img/loading-preview-mobile.jpg')}
  .leaflet-popup-content{margin:12px 14px}
  .wprm-desktop-only-control{display:none!important}
  .wprm-touch-message{font-size:24px;padding:20px}
}

/* Touch interaction: the page remains scrollable with one finger while
   Leaflet receives two-finger gestures for map pan/pinch zoom. !important
   guards against Leaflet's own touch-action rules (added to enable its
   default multi-touch handling) taking precedence. */
.wprm-map{touch-action:pan-y!important}