/* ============================================================
   Every Leaflet map in the look of the map kit (docs/DESIGN_AUDIT_2.md R-1, batch P7 of docs/DESIGN_AUDIT_1.md:
   D-46, D-47, D-48; owner 2026-11-10: «R-1, as recommended»: style rules only, no change to how the maps work).
   Loaded with Leaflet's own CSS by base.html, after it. The kit's maps (static/js/pc_map.js: the map page, an author,
   a book) draw their own buttons (.pcm-fab) and are not touched; these rules dress Leaflet's standard parts on the
   other maps (a book's place, a monument, «A caminho de…», «Perto de mim», a route, Caminhada, the walk).
   ============================================================ */

/* the map's own ground while the tiles load: beige, not Leaflet's grey #ddd; the site's fonts */
.leaflet-container {
  background: var(--portucal-beige, #F2EDE4);
  font-family: var(--portucal-font-sans, sans-serif);
}

/* the zoom buttons: the kit's column, cream, 44 px, rounded 12 px, no border */
.leaflet-container .leaflet-bar,
.leaflet-touch .leaflet-bar {
  border: 0;
  border-radius: 12px;
  background: var(--portucal-cream, #FDFAF6);
  box-shadow: 0 2px 10px rgba(16, 33, 27, .2);
}
.leaflet-container .leaflet-bar a,
.leaflet-touch .leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  background: var(--portucal-cream, #FDFAF6);
  color: var(--portucal-green, #1A3A2E);
  border-bottom: 1px solid var(--portucal-ink-4, #E4DDD1);
  font: 400 22px/44px var(--portucal-font-sans, sans-serif);
}
.leaflet-container .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:first-child { border-radius: 12px 12px 0 0; }
.leaflet-container .leaflet-bar a:last-child,
.leaflet-touch .leaflet-bar a:last-child { border-radius: 0 0 12px 12px; border-bottom: 0; }
.leaflet-container .leaflet-bar a:only-child { border-radius: 12px; }
.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus { background: var(--portucal-beige, #F2EDE4); color: var(--portucal-green, #1A3A2E); }
.leaflet-container .leaflet-bar a:focus-visible { outline: 2px solid var(--portucal-amber, #C8873A); outline-offset: -2px; }
.leaflet-container .leaflet-bar a.leaflet-disabled { background: var(--portucal-cream, #FDFAF6); color: var(--portucal-ink-4, #E4DDD1); }

/* the background-map button: the same cream square, the kit's layers drawing in the ink green */
.leaflet-container .leaflet-control-layers,
.leaflet-touch .leaflet-control-layers {
  border: 0;
  border-radius: 12px;
  background: var(--portucal-cream, #FDFAF6);
  color: var(--portucal-green, #1A3A2E);
  box-shadow: 0 2px 10px rgba(16, 33, 27, .2);
}
.leaflet-container .leaflet-control-layers-toggle,
.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A3A2E' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}
.leaflet-container .leaflet-control-layers-expanded {
  padding: 6px 14px 6px 10px;
  font: 500 14px/1.2 var(--portucal-font-sans, sans-serif);
  color: var(--portucal-green, #1A3A2E);
}
.leaflet-container .leaflet-control-layers-expanded label { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.leaflet-container .leaflet-control-layers-selector { margin: 0; accent-color: var(--portucal-green, #1A3A2E); }
.leaflet-container .leaflet-control-layers-separator { border-top-color: var(--portucal-ink-4, #E4DDD1); }

/* the credit line: one style (the kit's), «© OpenStreetMap · CARTO», in the ink */
.leaflet-container .leaflet-control-attribution {
  font: 400 10.5px/1.4 var(--portucal-font-sans, sans-serif);
  color: var(--portucal-ink-2, #4a5f56);
  background: rgba(253, 250, 246, .85);
}
.leaflet-container .leaflet-control-attribution a { color: inherit; text-decoration: none; }
.leaflet-container .leaflet-control-attribution a:hover { color: var(--portucal-amber, #C8873A); text-decoration: underline; }

/* the names beside the markers and on hover: Inter on cream with the hairline, as the kit's card (not the
   browser's Helvetica on white, not the mono) */
.leaflet-container .leaflet-tooltip {
  background: var(--portucal-cream, #FDFAF6);
  border: 1px solid var(--portucal-ink-4, #E4DDD1);
  border-radius: var(--portucal-radius-4, 4px);
  color: var(--portucal-green, #1A3A2E);
  font: 500 12px/1.3 var(--portucal-font-sans, sans-serif);
  box-shadow: var(--portucal-shadow-1, 0 1px 2px rgba(26, 58, 46, .06));
}
.leaflet-container .leaflet-tooltip-right::before { border-right-color: var(--portucal-ink-4, #E4DDD1); }
.leaflet-container .leaflet-tooltip-left::before { border-left-color: var(--portucal-ink-4, #E4DDD1); }
.leaflet-container .leaflet-tooltip-top::before { border-top-color: var(--portucal-ink-4, #E4DDD1); }
.leaflet-container .leaflet-tooltip-bottom::before { border-bottom-color: var(--portucal-ink-4, #E4DDD1); }

/* the little window a marker opens: cream, rounded 12 px, the site's fonts */
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
  background: var(--portucal-cream, #FDFAF6);
  color: var(--portucal-green, #1A3A2E);
  box-shadow: var(--portucal-shadow-2, 0 4px 12px rgba(26, 58, 46, .08));
}
.leaflet-container .leaflet-popup-content-wrapper { border-radius: 12px; }
.leaflet-container .leaflet-popup-content { font: 400 14px/1.4 var(--portucal-font-sans, sans-serif); }
.leaflet-container a.leaflet-popup-close-button { color: var(--portucal-ink-3, #8a8378); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--portucal-green, #1A3A2E); }