/* 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. Portfolio pins and their
   cards (2026-10-06, pins with a url) have their own block below; the "Visit the site" pill is white on --lw-map-ink, so
   keep the ink dark. .lw-map-vh hides text from the eye and keeps it for screen readers (pages may use it too). */
.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}

/* portfolio pins (a pin with a url, 2026-10-06): a focusable button that opens a card. The button is a 34px target with
   the dot in its middle; a numbered pin stands for several sites that land together. The card is Leaflet's popup, in the
   site's colours, its links at least 30px tall. */
.lw-map.leaflet-container .lw-map-site-pin{display:grid;place-items:center;border-radius:50%;cursor:pointer}
.lw-map-pin.is-site{width:20px;height:20px;background:var(--lw-map-accent,var(--accent,#2a6f97));border:3px solid #fff;
  box-shadow:0 0 0 2px var(--lw-map-accent,var(--accent,#2a6f97)),0 3px 9px rgba(0,0,0,.32);transition:transform .15s}
.lw-map-pin.is-group{display:grid;place-items:center;width:30px;height:30px;background:var(--lw-map-ink,var(--ink,#1e222a));border:3px solid #fff;
  box-shadow:0 0 0 2px var(--lw-map-accent,var(--accent,#2a6f97)),0 3px 9px rgba(0,0,0,.32);color:#fff;
  font:700 14px/1 var(--lw-map-font,var(--body-font,system-ui)),system-ui,sans-serif;transition:transform .15s}
.lw-map.leaflet-container .lw-map-site-pin:hover .lw-map-pin,.lw-map.leaflet-container .lw-map-site-pin[aria-expanded="true"] .lw-map-pin{transform:scale(1.15)}
.lw-map.leaflet-container .lw-map-site-pin:focus{outline:none}
.lw-map.leaflet-container .lw-map-site-pin:focus-visible{outline:3px solid var(--lw-map-ink,var(--ink,#1e222a));outline-offset:0}
.lw-map.leaflet-container.lw-map-has-card .lw-map-legend{visibility:hidden} /* back when the card closes */
.lw-map.leaflet-container .lw-map-popup .leaflet-popup-content-wrapper{padding:0;border-radius:var(--lw-map-radius,var(--radius,12px));
  background:var(--lw-map-panel,var(--panel,#fff));color:var(--lw-map-ink,var(--ink,#1e222a));border:1px solid var(--lw-map-line,var(--line,#d9d6cf));box-shadow:0 8px 26px rgba(0,0,0,.24)}
.lw-map.leaflet-container .lw-map-popup .leaflet-popup-tip{background:var(--lw-map-panel,var(--panel,#fff));box-shadow:0 3px 8px rgba(0,0,0,.18)}
.lw-map.leaflet-container .lw-map-popup .leaflet-popup-content{margin:12px 14px;font-family:var(--lw-map-font,var(--body-font,system-ui)),system-ui,sans-serif;
  font-size:14px;line-height:1.4;text-align:left;overscroll-behavior:contain}
.lw-map.leaflet-container .lw-map-popup a.leaflet-popup-close-button{top:4px;right:4px;width:30px;height:30px;border-radius:6px;font:22px/30px system-ui,sans-serif;
  color:var(--lw-map-ink,var(--ink,#1e222a))}
.lw-map.leaflet-container .lw-map-popup a.leaflet-popup-close-button:hover{background:var(--lw-map-paper,var(--paper,#f4f3ef));color:var(--lw-map-ink,var(--ink,#1e222a))}
.lw-map.leaflet-container .lw-map-popup a.leaflet-popup-close-button:focus-visible{outline:3px solid var(--lw-map-accent,var(--accent,#2a6f97));outline-offset:-3px}
.lw-map.leaflet-container .lw-map-pop p{margin:0;max-width:none;font-size:inherit;color:inherit}
/* only the card's first line keeps clear of the close button; the rest of the card uses the full width */
.lw-map.leaflet-container .lw-map-pop .lw-map-pop-count,.lw-map.leaflet-container .lw-map-pop:not(.is-group) .lw-map-site-name{padding-right:26px}
.lw-map.leaflet-container .lw-map-pop .lw-map-pop-count{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lw-map-muted,var(--muted,#5f5e56))}
.lw-map.leaflet-container .lw-map-site + .lw-map-site{margin-top:10px;padding-top:10px;border-top:1px solid var(--lw-map-line,var(--line,#d9d6cf))}
.lw-map.leaflet-container .lw-map-site-name{margin:0;font-size:15px;line-height:1.3;font-weight:700;letter-spacing:0;color:var(--lw-map-ink,var(--ink,#1e222a))}
.lw-map.leaflet-container .lw-map-site-name:focus,.lw-map.leaflet-container .lw-map-pop-count:focus{outline:none}
.lw-map.leaflet-container .lw-map-pop .lw-map-site-meta{margin-top:2px;font-size:13px;line-height:1.4;color:var(--lw-map-muted,var(--muted,#5f5e56))}
.lw-map.leaflet-container .lw-map-pop .lw-map-site-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px}
.lw-map.leaflet-container .lw-map-site-links a{display:inline-flex;align-items:center;gap:6px;min-height:30px;font-size:14px;font-weight:600;line-height:1.2;
  color:var(--lw-map-ink,var(--ink,#1e222a));text-decoration:underline;text-underline-offset:3px}
.lw-map.leaflet-container .lw-map-site-links a.lw-map-site-go{padding:0 12px;border-radius:999px;background:var(--lw-map-ink,var(--ink,#1e222a));color:#fff;text-decoration:none}
.lw-map.leaflet-container .lw-map-site-links a.lw-map-site-go:hover{text-decoration:underline}
.lw-map.leaflet-container .lw-map-site-links a:focus-visible{outline:3px solid var(--lw-map-accent,var(--accent,#2a6f97));outline-offset:2px}
/* a numbered card lists several sites: tighter, so three fit without scrolling on a 440px phone map (links stay 26px+) */
.lw-map.leaflet-container .lw-map-pop.is-group .lw-map-pop-count{margin-bottom:6px}
.lw-map.leaflet-container .lw-map-pop.is-group .lw-map-site + .lw-map-site{margin-top:8px;padding-top:8px}
.lw-map.leaflet-container .lw-map-pop.is-group .lw-map-site-links{margin-top:4px}
.lw-map.leaflet-container .lw-map-pop.is-group .lw-map-site-links a{min-height:26px}
.lw-map.leaflet-container .lw-map-pop.is-group .lw-map-site-links a.lw-map-site-go{padding:0 11px}
.lw-map-ext{display:inline-flex}
.lw-map-vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* 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}}