/* map.css: styles for the Loomwest map standard (map.js, Andre 2026-10-01). Colours come from the site's own custom
   properties (--accent, --ink, --paper, --panel, --line, --muted, --radius, --body-font: the kit's names) and can be
   overridden per site, on :root or on one map, with the --lw-map-* properties below:
     --lw-map-accent  the area and the business pin          --lw-map-ink     text and pin rims
     --lw-map-paper   light fills                            --lw-map-panel   label and button backgrounds
     --lw-map-line    borders                                --lw-map-muted   the fallback line
     --lw-map-area    the area only (defaults to the accent) --lw-map-tiles   a CSS filter on the tiles (muted by default)
     --lw-map-h / --lw-map-h-md / --lw-map-h-sm / --lw-map-h-card   heights: desktop, under 900px, under 560px, card map
     --lw-map-radius  the corner radius (defaults to --radius)  --lw-map-font  the label font (defaults to --body-font)
   A fixed height is reserved before Leaflet loads, so nothing jumps. Leaflet's own stylesheet loads after this file, so
   every rule that restyles a Leaflet part starts with .lw-map.leaflet-container to outrank it. */
.lw-map-box{position:relative;margin:0}
.lw-map{position:relative;z-index:0;height:var(--lw-map-h,420px);border-radius:var(--lw-map-radius,var(--radius,12px));overflow:hidden;
  background:#e6e4de;border:1px solid var(--lw-map-line,var(--line,#d9d6cf))}
@media(max-width:900px){.lw-map{height:var(--lw-map-h-md,360px)}}
@media(max-width:560px){.lw-map{height:var(--lw-map-h-sm,300px)}}
.lw-map-sm .lw-map{height:var(--lw-map-h-card,220px)}
.lw-map-fallback{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px;text-align:center;font-size:14.5px;line-height:1.45;
  color:var(--lw-map-muted,var(--muted,#5f5e56));pointer-events:none}
.lw-map-box.is-live .lw-map-fallback{display:none}
.lw-map-box.is-failed .lw-map-fallback{display:grid;z-index:1;color:var(--lw-map-ink,var(--ink,#1e222a));background:#e6e4de;border-radius:var(--lw-map-radius,var(--radius,12px))}

/* Leaflet's parts, in the site's colours */
.lw-map.leaflet-container{font:inherit;font-size:14px;background:#e6e4de}
.lw-map.leaflet-container .leaflet-tile-pane{filter:var(--lw-map-tiles,grayscale(.85) contrast(.95) brightness(1.04))}
.lw-map.leaflet-container .leaflet-control-attribution{font-size:11px;line-height:1.45;padding:1px 6px;background:rgba(255,255,255,.92);
  background:color-mix(in srgb,var(--lw-map-panel,var(--panel,#fff)) 92%,transparent);color:var(--lw-map-ink,var(--ink,#1e222a))}
.lw-map.leaflet-container .leaflet-control-attribution a{color:var(--lw-map-ink,var(--ink,#1e222a));text-decoration:underline;text-underline-offset:2px}
.lw-map.leaflet-container .leaflet-bar{border:1px solid var(--lw-map-line,var(--line,#d9d6cf));box-shadow:0 2px 8px rgba(0,0,0,.12)}
.lw-map.leaflet-container .leaflet-bar a{width:36px;height:36px;line-height:36px;font-size:20px;color:var(--lw-map-ink,var(--ink,#1e222a));
  background:var(--lw-map-panel,var(--panel,#fff));border-bottom-color:var(--lw-map-line,var(--line,#d9d6cf))}
.lw-map.leaflet-container .leaflet-bar a:hover{background:var(--lw-map-paper,var(--paper,#f4f3ef))}
.lw-map.leaflet-container .leaflet-bar a.leaflet-disabled{color:color-mix(in srgb,var(--lw-map-ink,var(--ink,#1e222a)) 45%,transparent)}
@media(pointer:coarse){.lw-map.leaflet-container .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}}
.lw-map.leaflet-container:focus-visible{outline:3px solid var(--lw-map-accent,var(--accent,#2a6f97));outline-offset:2px}
.lw-map.leaflet-container .leaflet-bar a:focus-visible,.lw-map.leaflet-container .leaflet-control-attribution a:focus-visible{outline:3px solid var(--lw-map-accent,var(--accent,#2a6f97));outline-offset:1px}

/* the shaded area: Leaflet writes the colours as SVG attributes, and any CSS rule outranks those */
.lw-map path.lw-map-area{stroke:var(--lw-map-area,var(--lw-map-accent,var(--accent,#2a6f97)));fill:var(--lw-map-area,var(--lw-map-accent,var(--accent,#2a6f97)));
  fill-opacity:.13;stroke-width:1.5;stroke-dasharray:5 6}

/* pins: the business is a larger dot in the accent with a white rim; other pins are rimmed in ink; towns are small */
.lw-map-marker{background:none;border:0}
.lw-map-pin{display:block;box-sizing:border-box;width:100%;height:100%;border-radius:50%;background:var(--lw-map-paper,var(--paper,#fff));
  border:3px solid var(--lw-map-ink,var(--ink,#1e222a));box-shadow:0 2px 6px rgba(0,0,0,.28)}
.lw-map-pin.is-primary{background:var(--lw-map-accent,var(--accent,#2a6f97));border:3px solid #fff;
  box-shadow:0 0 0 3px var(--lw-map-accent,var(--accent,#2a6f97)),0 3px 10px rgba(0,0,0,.32)}
.lw-map-pin.is-town{border-width:2px;border-color:var(--lw-map-accent,var(--accent,#2a6f97));box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* the permanent labels beside the pins: a pill in the panel colour, the business's in ink */
.lw-map.leaflet-container .leaflet-tooltip.lw-map-label{padding:4px 10px;border-radius:999px;border:1px solid var(--lw-map-line,var(--line,#d9d6cf));
  background:var(--lw-map-panel,var(--panel,#fff));color:var(--lw-map-ink,var(--ink,#1e222a));font-family:var(--lw-map-font,var(--body-font,system-ui)),system-ui,sans-serif;
  font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.lw-map.leaflet-container .leaflet-tooltip.lw-map-label.is-primary{background:var(--lw-map-ink,var(--ink,#1e222a));color:var(--lw-map-paper,var(--paper,#fff));border-color:var(--lw-map-ink,var(--ink,#1e222a))}
.lw-map.leaflet-container .leaflet-tooltip.lw-map-label.is-town{font-size:12px;padding:3px 8px}
.lw-map.leaflet-container .leaflet-tooltip.lw-map-label::before{display:none}

/* the legend (only on a map with an area): one row per thing shown */
.lw-map.leaflet-container .lw-map-legend{display:grid;gap:4px;max-width:min(320px,72vw);margin:0 0 10px 10px;padding:6px 10px;border-radius:8px;
  background:rgba(255,255,255,.95);background:color-mix(in srgb,var(--lw-map-panel,var(--panel,#fff)) 95%,transparent);border:1px solid var(--lw-map-line,var(--line,#d9d6cf));
  color:var(--lw-map-ink,var(--ink,#1e222a));font-size:12.5px;font-weight:600;line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.lw-map-legend-row{display:flex;align-items:center;gap:8px}
.lw-map-sw{flex:none;display:inline-block;box-sizing:border-box}
.lw-map-sw.is-area{width:16px;height:11px;border-radius:3px;border:1.5px dashed var(--lw-map-area,var(--lw-map-accent,var(--accent,#2a6f97)));
  background:color-mix(in srgb,var(--lw-map-area,var(--lw-map-accent,var(--accent,#2a6f97))) 14%,transparent)}
.lw-map-sw.is-pin{width:12px;height:12px;margin:0 2px;border-radius:50%;border:2px solid #fff;background:var(--lw-map-accent,var(--accent,#2a6f97));
  box-shadow:0 0 0 2px var(--lw-map-accent,var(--accent,#2a6f97))}

/* touch screens: the map ignores swipes until this is tapped (map.js shows it only on a coarse pointer) */
.lw-map-go{position:absolute;right:10px;top:10px;z-index:2;min-height:44px;padding:0 16px;white-space:nowrap;border-radius:999px;border:0;
  background:var(--lw-map-ink,var(--ink,#1e222a));color:var(--lw-map-paper,var(--paper,#fff));font:inherit;font-size:14px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer}
.lw-map-go[hidden]{display:none}
.lw-map-go:focus-visible{outline:3px solid var(--lw-map-accent,var(--accent,#2a6f97));outline-offset:3px}

/* the address written out beside a map that is not already next to one (a card's map, a service area's towns) */
.lw-map-where{margin:12px 0 0;font-size:15px;line-height:1.5}

@media(prefers-reduced-motion:reduce){.lw-map.leaflet-container *{transition:none!important;animation:none!important}}
@media print{.lw-map,.lw-map-go{display:none!important}.lw-map-fallback,.lw-map-box.is-live .lw-map-fallback{display:block!important;position:static;padding:0;text-align:left;color:inherit}}