/* =========================================================
   TORONTO BIKING — ride-guide-map.css
   Ride Guide look for maps built with /assets/trail-map.js:
   the same on-map buttons as the trail pages (fullscreen, locate,
   dark/light, Bike Share), with Ride Guide popups.

   Markup:  <div class="map-wrapper rg-map"><div id="map"></div></div>
   Data:    window.TRAIL_MAP = { tiles:'light', fit:{...}, routes:[...], markers:[{ label:'01', link:{...} }], bikeShare:{ radiusKm } }
   Scripts: leaflet.js → your map data → /assets/trail-map.js
   ========================================================= */
.rg-map{position:relative;height:480px;overflow:hidden;background:#cfcdc8}
.rg-map #map{width:100%;height:100%}
.rg-map.is-fullscreen{position:fixed;inset:0;z-index:9999;height:100vh}

/* map buttons */
.rg-map .leaflet-bar{border:0;border-radius:0;box-shadow:none}
.rg-map .leaflet-bar a,.rg-map .leaflet-bar button{width:36px;height:36px;line-height:36px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:0;background:rgba(20,20,20,.78);color:#f5f4f1;cursor:pointer;font:600 18px/1 Roboto,sans-serif}
.rg-map .leaflet-bar a+a{border-top:1px solid rgba(245,244,241,.14)}
.rg-map .leaflet-bar a:hover,.rg-map .leaflet-bar button:hover{background:rgba(20,20,20,.95);color:#f5a400}
.rg-map .leaflet-bar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rg-map .leaflet-bar svg.tb-bs-icon{width:20px;height:20px;stroke:none;opacity:.55;transition:opacity .2s}
.rg-map .leaflet-bar button:hover svg.tb-bs-icon,.rg-map .leaflet-bar button.is-active svg.tb-bs-icon{opacity:1}
.rg-map .leaflet-bar button.is-active{color:#f5a400;box-shadow:inset 0 0 0 1px rgba(245,164,0,.7)}
.rg-map .leaflet-control-attribution{background:rgba(251,250,247,.8);color:#4a4a47;font:400 10px/1.6 Roboto,sans-serif}
.rg-map .leaflet-control-attribution a{color:#4a4a47}

/* popups */
.rg-map .leaflet-popup-content-wrapper{border-radius:0;background:#fbfaf7;color:#141414;box-shadow:0 10px 28px rgba(0,0,0,.3)}
.rg-map .leaflet-popup-tip{background:#fbfaf7}
.rg-map .leaflet-popup-content{margin:14px 16px;font-family:Archivo,sans-serif;line-height:1.4}
.rg-map .leaflet-container a.leaflet-popup-close-button,.rg-map a.leaflet-popup-close-button{color:#141414}
.rg-map .popup-title{font:800 20px/1 Archivo,sans-serif;font-stretch:70%;text-transform:uppercase;margin-bottom:6px}
.rg-map .popup-meta{font-size:13px;color:#3a3a38;margin-bottom:8px}
.rg-map .popup-note{font-size:13px;font-style:italic;color:#3a3a38;margin-bottom:8px}
.rg-map .popup-link{display:inline-block;font:500 11px/1.6 Roboto,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#8a5b00;box-shadow:inset 0 -2px 0 #f5a400}
.rg-map .popup-link:hover{color:#141414}
.rg-map .popup-bikeshare{font:500 13px/1.6 Roboto,sans-serif;color:#3a3a38}
.rg-map .popup-bikeshare b{color:#141414;font-weight:700}
.rg-map .popup-zero{color:#b4593a!important}
.rg-map .popup-swatch{display:inline-block;vertical-align:middle;width:18px;margin:-3px 8px 0 0;border-top:3px solid var(--swatch,#f5a400)}
.rg-map .popup-swatch.is-dashed{border-top-style:dashed}

@media (max-width:960px){.rg-map{height:400px}}