/* NSBH CMS Map — minimal stylesheet.
 *
 * Scope rule for this file: it only styles things Webflow Designer cannot reach —
 * the marker button and popup shell that MapLibre injects into the DOM at runtime.
 *
 * Everything else (map container size, border radius, list item active state,
 * search status typography, responsive behavior) belongs on Webflow classes so
 * you can control it in Designer. See webflow/head-code.html for the handful of
 * variables you can override there.
 *
 * Load order matters: MapLibre's own stylesheet must come before this file.
 */

/* ---- Tunable variables ----
 * Override any of these on [data-map-element="viewport"] via a Webflow class,
 * or globally in Site Settings head code. */

[data-map-element="viewport"] {
  --map-marker-size: 1.5rem;
  --map-marker-image: none; /* optional: a url(...) swaps the dot for an image */
  --map-marker-color: var(--_primitives---colors--h-redwood, #a65456);
  --map-marker-destination-color: var(--_primitives---colors--h-harbor-blue, #35798c);
  --map-marker-ring: #fff;
  /* Shops matching the chosen tags: a very light green ring and a mint glow. */
  --map-marker-highlight: #7ddfae;
  --map-marker-highlight-ring: #e6faef;
  --map-marker-active-scale: 1.3;
  /* Popup shell — chrome-less by default. The card inside is a copy of the
     template card and already brings its own background, radius and shadow
     from Designer, so a styled shell here would read as a second edge around it.
     Set these if your card has no styling of its own. */
  --map-popup-bg: transparent;
  --map-popup-radius: 0;
  --map-popup-shadow: none;
  --map-popup-padding: 0;
  --map-popup-tip-color: #fff; /* match the card's background */

  /* Close button (MapLibre injects it, so Designer can't reach it) */
  --map-popup-close-size: 2.25rem;
  --map-popup-close-font-size: 1.25rem;
  /* Floats just above the card's top-right corner, like the shop modal's close, so
     it stays clear of anything inside the card (the premium badge). */
  --map-popup-close-top: -2.5rem;
  --map-popup-close-right: 0;
  --map-popup-close-border: 1px solid var(--_primitives---white-mix--h-deep-atlantic-80, #d0d5d7);
  --map-popup-close-color: inherit;
  --map-popup-close-radius: 50%;
  --map-popup-close-bg: #fff;
  --map-popup-close-shadow: none;
  --map-popup-close-hover-bg: #eef2f3;


  position: relative; /* MapLibre requires a positioned container */

  /* Let the map shrink inside a flex/grid parent. Without min-width:0 the map
     canvas's pixel width props the container open and overflows narrow screens.
     If the map's own PARENT is a flex item, it needs min-width:0 too — that part
     is site-specific and lives in the head-code block. */
  min-width: 0;
  max-width: 100%;
}

/* ---- Markers ---- */

.cms-map-marker {
  width: var(--map-marker-size);
  height: var(--map-marker-size);
  padding: 0;
  border: 2px solid var(--map-marker-ring);
  border-radius: 50%;
  box-sizing: border-box;
  background-color: var(--map-marker-color);
  background-image: var(--map-marker-image);
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: block;
  transform-origin: center;
  color: var(--map-marker-color);
}

/* Destinations (things to do). Color is not the only cue: the legend labels
   both dots, and the popup card names the kind. */
.cms-map-marker.is-destination {
  background-color: var(--map-marker-destination-color);
  color: var(--map-marker-destination-color);
}

/* Transition is suppressed while the map is animating (.is-moving is toggled by
   map movestart/moveend in map-embed.js) to prevent the pins dragging visually. */
[data-map-element="viewport"]:not(.is-moving) .cms-map-marker {
  transition: transform 120ms ease;
}

.cms-map-marker:hover,
.cms-map-marker:focus-visible,
.cms-map-marker.is-active {
  transform: scale(var(--map-marker-active-scale));
  outline: none;
}

/* ---- Typography containment ----
   MapLibre sets its own font stack on the map container. The popup lives inside
   that container, so a cloned card would inherit MapLibre's Helvetica/12px
   instead of the site's type. Reset it here so your Designer typography reaches
   the card, then pin MapLibre's own chrome back to the size it expects. */

[data-map-element="viewport"].maplibregl-map {
  font: inherit;
}

.maplibregl-ctrl,
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib-inner {
  font-size: 12px;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* ---- Popup shell ----
   MapLibre injects .maplibregl-popup-content. Padding lives here rather than on
   the card, so the card keeps whatever padding it has in Designer. */

.maplibregl-popup-content {
  padding: var(--map-popup-padding);
  background: var(--map-popup-bg);
  border-radius: var(--map-popup-radius);
  box-shadow: var(--map-popup-shadow);
  /* visible, not hidden: the card's own drop shadow would otherwise be clipped
     at the shell's edge. */
  overflow: visible;
}

/* Caret pointing at the dot. MapLibre puts the tip before the card in the DOM
   and leaves it unpositioned, so the card (and its large drop shadow) painted
   over it and hid it. Positioned and lifted, it sits above the shadow; the 1px
   nudge overlaps the card edge so no hairline shows between them. */
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  position: relative;
  z-index: 10001; /* above the shop panel's own z-index */
  top: -2px; /* past the card's 1px border, so no line shows across the caret */
  /* Drawn with clip-path, not MapLibre's border triangle: border triangles snap
     unevenly at fractional positions and read as lopsided. */
  width: 20px;
  height: 10px;
  border: 0;
  background: var(--map-popup-tip-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Close button: a small circle floating just above the card's top-right corner, so
   it never overlaps content inside the card. Large enough to be a comfortable tap
   target. z-index lifts it above the card: a card that
   is positioned with its own z-index (the shop panel has z-index 1) would
   otherwise paint over it and swallow the click. */
.maplibregl-popup-close-button {
  z-index: 2;
  width: var(--map-popup-close-size);
  height: var(--map-popup-close-size);
  top: var(--map-popup-close-top);
  right: var(--map-popup-close-right);
  padding: 0;
  border: var(--map-popup-close-border);
  font-size: var(--map-popup-close-font-size);
  line-height: 1;
  border-radius: var(--map-popup-close-radius);
  color: var(--map-popup-close-color);
  background: var(--map-popup-close-bg);
  box-shadow: var(--map-popup-close-shadow);
}

.maplibregl-popup-close-button:hover,
.maplibregl-popup-close-button:focus-visible {
  background: var(--map-popup-close-hover-bg);
}

/* The card is a copy of the template card built in Webflow and carries its
   Designer classes, so it is deliberately left unstyled here; anything set here
   would beat Designer. The one exception is a guard so an oversized image can't
   blow out the popup. */

.cms-map-popup-card img {
  max-width: 100%;
}

/* ---- Radius filtering ----
   Only applied when data-map-filter-mode="filter". In the default "highlight"
   mode nothing ever receives this class. */

.cms-map-marker.is-hidden,
[data-map-element="item"].is-hidden {
  display: none;
}

/* ---- Search status ----
   The status element carries placeholder text in Designer so it can be styled.
   map-embed.js empties it and marks it data-map-ready; until then it is hidden, so
   the placeholder never flashes on the published page. */

[data-map-element="search-status"]:not([data-map-ready]) {
  visibility: hidden;
}

/* ---- Settings panel controls ----
   Pressed and off states come from the ARIA attributes map-embed.js keeps in sync,
   because Designer cannot style on them. */

.cms-map-marker.is-layer-off {
  display: none;
}

/* Tag highlight: shops that carry every chosen tag get a very light green ring and a
   mint glow, and sit above the other dots (but under an open card). Other dots are
   left alone. Nothing here applies until a tag is chosen. */
.cms-map-marker.is-tag-match {
  z-index: 1;
  border-color: var(--map-marker-highlight-ring, #e6faef);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--map-marker-highlight, #7ddfae) 40%, transparent),
    0 0 12px 5px color-mix(in srgb, var(--map-marker-highlight, #7ddfae) 65%, transparent);
}

/* An open card sits above every dot, highlighted or not. */
.maplibregl-popup {
  z-index: 2;
}

/* The visitor's own place. With a [data-map-template="location"] block the pin looks
   like that block (Designer's); this plain dot is only the fallback without one. */
.cms-map-location-pin:not([class*="my-location"]) {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--map-marker-color, #35798c);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--map-marker-color, #35798c) 35%, transparent);
}

/* The distance flag stays hidden until the visitor has set a place. */
[data-map-distance][hidden] {
  display: none;
}

/* The card's tag row stays out of the way until its tags are known. */
[data-map-tags][hidden] {
  display: none;
}

[data-map-element="tag"]:focus-visible {
  outline: 2px solid var(--_primitives---colors--h-harbor-blue, #35798c);
  outline-offset: 2px;
}

/* Pressed chips (tags and regions) are styled in Designer on a combo class named
   is-active, which map-embed.js toggles together with aria-pressed. */

[data-map-element="region"]:focus-visible,
[data-map-element="destinations-toggle"]:focus-visible {
  outline: 2px solid var(--_primitives---colors--h-harbor-blue, #35798c);
  outline-offset: 2px;
}

[data-map-element="destinations-toggle"] {
  cursor: pointer;
}

[data-map-element="destinations-toggle"][aria-checked="false"] {
  background-color: #b9c3c7;
}

[data-map-element="destinations-toggle"][aria-checked="false"] .map-quick-picks_switch-dot {
  margin-left: 0;
}

/* ---- Settings panel as a dialog (tablet and below) ----
   map-embed.js marks the panel [data-map-panel], adds the backdrop and the close
   button, and toggles .is-open. Above 991px none of this applies and the panel is
   the normal column beside the map. */

.cms-map-panel-close,
.cms-map-panel-backdrop {
  display: none;
}

.cms-map-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(24, 18, 12, 0.5);
}

html.cms-map-panel-open {
  overflow: hidden;
}

@media (max-width: 991px) {
  .cms-map-panel-backdrop:not([hidden]) {
    display: block;
  }

  [data-map-panel] {
    display: none;
  }

  [data-map-panel].is-open {
    display: block;
    position: fixed;
    z-index: 10001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: min(26rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem 1.25rem 1.25rem;
    background: var(--map-panel-bg, #fff); /* set on :root or the panel to override */
    border-radius: 0.5rem;
    box-shadow: 0 12px 28px 0 rgba(20, 47, 56, 0.18), 0 28px 56px 0 rgba(53, 121, 140, 0.24);
  }

  /* A small button in the site's small primary style: settings apply as they are
     tapped, so this just says you're finished. */
  [data-map-panel].is-open .cms-map-panel-close {
    display: flex;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 0.9rem;
    border: 0;
    border-bottom: 2px solid var(--_primitives---colors--h-lion, #c79853);
    border-radius: 6px;
    background: var(--_primitives---colors--h-deep-atlantic, #142f38);
    color: #fff;
    font-family: var(--_typography---font-styles--body, inherit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
  }
}

/* The narrowest phones: the heading and Done button can't share a line. */
@media (max-width: 359px) {
  [data-map-panel].is-open {
    padding-top: 3.5rem;
  }
}

/* ---- Zoom buttons on narrow maps ----
   On a phone the open card fills most of the map and the +/- control, pinned to
   the top-right corner, collides with the card's close circle. Pinch zooms on
   touch, so the buttons step aside while a card is open and return when it
   closes. */
@media (max-width: 767px) {
  [data-map-element="viewport"] .maplibregl-ctrl-top-right {
    transition: opacity 120ms ease;
  }

  [data-map-element="viewport"]:has(.maplibregl-popup .cms-map-popup-card) .maplibregl-ctrl-top-right {
    opacity: 0;
    pointer-events: none;
  }
}

/* ---- Shop chip on narrow maps ----
   map-embed.js swaps a shop's popup for this chip at 767px and below. Tapping it
   opens the full card in the shared modal. No close circle: tapping the map or
   another dot dismisses it. */
.maplibregl-popup:has(.cms-map-chip) .maplibregl-popup-close-button {
  display: none;
}

/* The popup holds to the chip's own limit, so a two-line name can't leave the chip
   narrower than the popup and off center from the caret. MapLibre sets max-width
   inline, hence !important. */
.maplibregl-popup:has(.cms-map-chip) {
  max-width: min(18.5rem, calc(100% - 2.5rem)) !important;
}

/* The chip itself is styled in Designer (map-chip_* classes). */
.cms-map-chip {
  -webkit-tap-highlight-color: transparent;
}