.cenvion-project-map {
  --map-background: transparent;
  --map-country-fill: currentColor;
  --map-country-fill-opacity: 0.1;
  --marker-size: 3rem;
  --marker-color: var(--color-accent, #f0850a);
  --marker-color-active: var(--color-dark, black);

  display: grid;
  position: absolute;
  inset: 0;
}

.cenvion-project-map__map {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--map-background);
}

/* Marker */
.cenvion-marker {
  position: relative;
}

.cenvion-marker__btn {
  --fill-color: var(--marker-color);
  width: var(--marker-size);
  height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: calc(-0.5 * var(--marker-size));
  transition:
    transform 150ms ease-out,
    --fill-color 150ms ease-out;
}

.cenvion-marker__btn svg {
  overflow: visible;
  width: 100%;
  height: auto;
}

.cenvion-marker:hover .cenvion-marker__btn {
  transform: scale(1.15);
}

.cenvion-marker.is-active,
.cenvion-marker:focus-visible {
  z-index: 999 !important;
}

:is(.cenvion-marker.is-active, .cenvion-marker:focus-visible)
  .cenvion-marker__btn {
  transform: scale(1.15);
  --fill-color: var(--marker-color-active);
}

.cenvion-marker:focus-visible .cenvion-marker__btn {
  outline: 2px solid var(--marker-color-active);
  outline-offset: 3px;
}

/* Hover card (standalone map mode) */
.cenvion-project-map .project-card[data-hover-card] {
  position: absolute;
  z-index: 400;
  pointer-events: auto;
}

.cenvion-project-map .project-card[data-hover-card][hidden] {
  display: none;
}