/* =====================================================================
   ViCo Green Directory — interactive map (v4 wave 2, P4b)
   Loaded ONLY on pages that render a [data-dir-map] element (map.html,
   home.html "By province" section, listing_detail.html mini-map). Uses
   the same --dir-* tokens as directory.css; directory.css itself is left
   untouched. Leaflet + Leaflet.markercluster CSS load before this file.
   ===================================================================== */

/* ---- map container: rounded card frame, matches .dir-card ---- */
.dir-mapbox{position:relative;border-radius:var(--dir-r-card);overflow:hidden;
  border:1px solid var(--dir-line-strong);box-shadow:var(--dir-sh-2);background:var(--dir-sunken);
  isolation:isolate;}
.dir-mapbox .leaflet-container{width:100%;height:100%;font-family:var(--dir-font-body);background:var(--dir-sunken);}
.dir-mapbox--full{height:min(74vh,760px);min-height:560px;}
.dir-mapbox--compact{height:420px;}
.dir-mapbox--listing{height:280px;}
@media(max-width:640px){
  .dir-mapbox--full{height:70vh;min-height:420px;border-radius:0;}
  .dir-mapbox--compact{height:340px;}
}

/* ---- dark mode: filter the raster tiles so they read dark. Mirrors
   directory.css's dual-selector pattern for [data-theme]: an explicit
   [data-theme="dark"] toggle (persisted via localStorage) always wins;
   absent that, fall back to the OS prefers-color-scheme, same as the
   rest of the page's tokens. ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dir-mapbox .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.85);}
  :root:not([data-theme="light"]) .dir-mapbox .leaflet-container{background:var(--dir-sunken);}
}
:root[data-theme="dark"] .dir-mapbox .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.85);}
:root[data-theme="dark"] .dir-mapbox .leaflet-container{background:var(--dir-sunken);}

/* ---- attribution / zoom controls restyled to fit the paper theme ---- */
.dir-mapbox .leaflet-control-attribution{background:color-mix(in srgb,var(--dir-surface) 88%,transparent);
  color:var(--dir-ink-3);font-size:10.5px;border-radius:8px 0 0 0;padding:2px 8px;}
.dir-mapbox .leaflet-control-attribution a{color:var(--dir-ink-2);}
.dir-mapbox .leaflet-control-zoom{border:1px solid var(--dir-line-strong)!important;border-radius:var(--dir-r-btn)!important;
  overflow:hidden;box-shadow:var(--dir-sh-1)!important;}
.dir-mapbox .leaflet-control-zoom a{background:var(--dir-surface)!important;color:var(--dir-ink)!important;border-color:var(--dir-line)!important;}
.dir-mapbox .leaflet-control-zoom a:hover{background:var(--dir-sunken)!important;}

/* ---- "near me" geolocation control ---- */
.dir-map-locate{background:var(--dir-surface)!important;width:34px!important;height:34px!important;
  display:grid;place-items:center;color:var(--dir-ink-2);border:1px solid var(--dir-line-strong)!important;
  border-radius:var(--dir-r-btn)!important;box-shadow:var(--dir-sh-1)!important;cursor:pointer;}
.dir-map-locate:hover{background:var(--dir-pine-soft)!important;color:var(--dir-pine);}
.dir-map-locate svg{width:17px;height:17px;pointer-events:none;}
.dir-map-locate[hidden]{display:none!important;}

/* ---- custom markers: pine teardrop/dot with white core ---- */
.dir-marker{position:relative;width:26px;height:26px;}
.dir-marker .pin{position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--dir-pine);box-shadow:var(--dir-sh-1),0 0 0 1.5px rgba(255,255,255,.6);}
.dir-marker .core{position:absolute;top:5px;left:5px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 3px var(--dir-pine);}
.dir-marker--paid .pin{background:var(--dir-pine-2);box-shadow:var(--dir-sh-1),0 0 0 3px var(--dir-amber);}
.dir-marker--paid .core{box-shadow:inset 0 0 0 3px var(--dir-pine-2);}

/* ---- clusters: pine circles with Spectral numerals ---- */
.dir-cluster{background:transparent;}
.dir-cluster .inner{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--dir-pine) 88%,transparent);color:#fff;box-shadow:var(--dir-sh-2),0 0 0 4px color-mix(in srgb,var(--dir-pine) 22%,transparent);
  font-family:var(--dir-font-display);font-weight:600;font-variant-numeric:tabular-nums;}
.dir-cluster--sm .inner{font-size:14px;}
.dir-cluster--md .inner{font-size:16px;}
.dir-cluster--lg .inner{font-size:18px;}

/* ---- Leaflet.markercluster default overrides -> dir tokens ---- */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:transparent!important;}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:transparent!important;}

/* ---- hover tooltip: name + province ---- */
.dir-map-tooltip.leaflet-tooltip{background:var(--dir-ink);color:#fff;border:0;border-radius:8px;
  font-size:12.5px;font-weight:600;padding:6px 10px;box-shadow:var(--dir-sh-1);opacity:.96!important;}
.dir-map-tooltip.leaflet-tooltip::before{border-top-color:var(--dir-ink)!important;}
.dir-map-tooltip .prov{display:block;font-weight:400;font-size:11px;color:rgba(255,255,255,.7);margin-top:1px;}

/* ---- popup info card: styled like .dir-card ---- */
.dir-map-popup.leaflet-popup{margin-bottom:14px;}
.dir-map-popup .leaflet-popup-content-wrapper{background:var(--dir-surface-grad);border:1px solid var(--dir-line-strong);
  border-radius:var(--dir-r-card);box-shadow:var(--dir-sh-3);padding:0;}
.dir-map-popup .leaflet-popup-content{margin:0;width:250px!important;}
.dir-map-popup .leaflet-popup-tip{background:var(--dir-surface);border:1px solid var(--dir-line-strong);border-top:0;border-left:0;}
.dir-map-popup .leaflet-popup-close-button{color:var(--dir-ink-3)!important;font-size:18px!important;padding:8px 10px 0 0!important;}
.dir-mapcard{padding:14px 16px 15px;display:flex;flex-direction:column;gap:8px;}
.dir-mapcard .top{display:flex;align-items:center;gap:10px;}
.dir-mapcard .mono{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-family:var(--dir-font-display);font-weight:700;color:#fff;font-size:15px;}
.dir-mapcard .nm{font-family:var(--dir-font-display);font-weight:600;font-size:15.5px;line-height:1.2;color:var(--dir-ink);}
.dir-mapcard .prov{font-size:11.5px;color:var(--dir-ink-3);margin-top:1px;}
.dir-mapcard .tierbadge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dir-amber);background:var(--dir-amber-soft);border-radius:var(--dir-r-pill);
  padding:2px 8px;white-space:nowrap;flex:none;}
.dir-mapcard .desc{font-size:12.5px;color:var(--dir-ink-2);line-height:1.45;margin:0;}
.dir-mapcard .approx{font-size:10.5px;color:var(--dir-ink-3);font-style:italic;}
.dir-mapcard .go{font-size:12.5px;font-weight:600;color:var(--dir-pine);margin-top:2px;}
.dir-mapcard .go:hover{text-decoration:underline;}

/* ---- filter panel (full map page only) ---- */
.dir-mapfilters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;
  background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:var(--dir-r-card);
  padding:16px 18px;box-shadow:var(--dir-sh-1);}
.dir-mapfilters .fld{flex:1;min-width:170px;display:flex;flex-direction:column;gap:6px;}
.dir-mapfilters .fld label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dir-ink-3);}
.dir-mapfilters .btnrow{display:flex;gap:8px;align-items:center;}
@media(max-width:760px){.dir-mapfilters{flex-direction:column;align-items:stretch;}.dir-mapfilters .fld{min-width:0;}}

/* ---- province quick-nav row (full map page) ---- */
.dir-map-provnav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}

/* ---- mobile: filter panel as a collapsible sheet (reuses .dir-facets sheet pattern) ---- */
.dir-mapfilterbtn{display:none;}
@media(max-width:820px){
  .dir-mapfilters{display:none;}
  .dir-mapfilters.sheet-open{display:flex;position:fixed;inset:0;z-index:60;border-radius:0;overflow-y:auto;
    padding:20px 20px 90px;margin:0;flex-direction:column;}
  .dir-mapfilters.sheet-open .dir-mapfilters-close{display:grid!important;}
  .dir-mapfilterbtn{display:inline-flex;margin-bottom:14px;}
}

/* ---- homepage compact map: chip list kept below as SEO/no-JS fallback ---- */
.dir-map-chipfallback{margin-top:16px;}