/* Locations map — outline of the Netherlands, a marker per Facta location.

   The outline is a mask instead of an <img> so the line takes its colour from
   the section it sits in (dark band → white), like the other masked shapes in
   this theme. The pins keep their brand gradient, so those stay images.

   Every marker is a disclosure: the popup opens on hover, on keyboard focus and
   on click. The click path runs through aria-expanded, so touch works too and
   the button announces its state. */

.locations-map {
  position: relative;
  inline-size: 100%;
  /* Figma: Kaart animatie 620.958 × 731. */
  aspect-ratio: 620.958 / 731;
}

.locations-map-outline {
  position: absolute;
  inset: 0;
  background-color: currentColor;
  mask: url("netherlands.svg") center / contain no-repeat;
  -webkit-mask: url("netherlands.svg") center / contain no-repeat;
}

.locations-map-marker {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  /* Figma: 40.97 of a 620.958 wide map. */
  inline-size: 6.6%;
  aspect-ratio: 1;

  /* An open popup covers its neighbours instead of sliding under them. */
  &:hover,
  &:focus-within {
    z-index: 1;
  }
}

/* Reset Salient: `body[data-button-style*="slightly_rounded"] button` in
   salient-dynamic-styles.css puts a 0.45s transition on every <button>, which
   would drag along on the pin's pulse. */
.locations-map .locations-map-trigger {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  transition: none;
  cursor: pointer;
}

.locations-map-pin {
  display: block;
  inline-size: 100%;
  block-size: auto;
  transform-origin: 50% 85%;
  animation: locations-map-pin-pulse 3.2s ease-in-out var(--pin-delay, 0s) infinite;
}

@keyframes locations-map-pin-pulse {
  0%,
  100% {
    opacity: 0.7;
    scale: 1;
  }

  50% {
    opacity: 1;
    scale: 1.15;
  }
}

/* Figma: Kaart hover — 210 wide, 24/10 padding, radius 4, dark type on white. */
.locations-map-popup {
  position: absolute;
  inset-block-end: 100%;
  inline-size: 13.125rem;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius);
  /* White, not --color-surface: that follows the Salient background colour,
     which is the off-white --color-gray on this site. */
  background-color: var(--color-on-primary);
  color: var(--color-primary);
  text-align: start;
  opacity: 0;
  visibility: hidden;
  /* Fade out first, then stop rendering; the visible state flips this around. */
  transition: opacity 0.15s ease-out, visibility 0s 0.15s;

  /* Salient's reset puts font:inherit on <strong>. */
  strong {
    font-weight: 700;
  }

  /* Figma underlines the mail address; the phone number is plain text there.
     Here it is a tel: link, so it gets the same underline — a link that reads
     as body copy is worse than the small difference with the design. */
  a {
    text-decoration: underline;
  }
}

/* Anchoring: centred over the pin, unless the map edge is too close. */
.locations-map-marker-center .locations-map-popup {
  left: 50%;
  translate: -50%;
}

.locations-map-marker-start .locations-map-popup {
  left: 0;
}

.locations-map-marker-end .locations-map-popup {
  right: 0;
}

/* Markers at the top of the map open downwards. */
.locations-map-marker-below .locations-map-popup {
  inset-block: 100% auto;
}

.locations-map-marker:hover .locations-map-popup,
.locations-map-trigger:focus-visible + .locations-map-popup,
.locations-map-trigger[aria-expanded="true"] + .locations-map-popup {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .locations-map-pin {
    animation: none;
    opacity: 1;
  }
}