:root {
  color-scheme: light dark;
  
  /* Colors */
  --color-accent: #6BFC6E;
  --color-warm-gray: #BFB8AF;
  --color-black: #000;
  --color-white: #FFF;
  --color-ocean: #7B9B99;
  
  /* Fonts */
  --font-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-headline: 'Literata', Georgia, serif;
}

html,
body {
  height: 100%;
  background: var(--color-ocean);
}

body {
  margin: 0;
  font-family: var(--font-base);
  min-height: 100vh;
}

.map-wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding-top: 72px;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* clip symmetric overflow so center stays visible */
  background: transparent;
}

.map-wrapper svg {
  width: 100vw;
  /* fill viewport width */
  height: calc(100vh - 72px);
  /* fill viewport height minus nav */
  max-width: none;
  display: block;
  flex: 0 0 auto;
  /* don't stretch */
}

/* Adjust for smaller nav height on mobile/tablet */
@media (max-width: 767px) {
  .map-wrapper {
    /* height: calc(100vh - 64px); */
    padding-top: 56px;
  }

  .map-wrapper svg {
    /* height: calc(100vh - 64px); */
  }
}

@media (max-width: 600px) {
  /* .map-wrapper {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  } */

  .map-wrapper svg {
    height: 75vh;
    width: auto;
  }
}

@media (max-width: 470px) {
  .map-wrapper svg {
    height: 75vh;
  }
}

@media (max-width: 300px) {
  .map-wrapper svg {
    height: 60vh;
  }
}

/* hotspots */
.hotspot {
  cursor: pointer;
  outline: none;
}

.hotspot:focus .hotspot-visual,
.hotspot:hover .hotspot-visual {
  stroke: none;
}

.hotspot .hit-area {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

/* pulsating indicator */
.hotspot .pulse {
  fill: var(--color-accent);
  opacity: 0.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-ring 2.6s ease-out infinite;
}

.hotspot .pulse.p2 {
  animation-delay: 1.3s;
  opacity: 0.3;
}

/* HTML label overlay */
.labels-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.hotspot-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  background: var(--color-accent);
  border-radius: 9999px;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: var(--color-black);
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.hotspot-label.visible {
  opacity: 1;
}

.hotspot-label img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Page transition overlay */
.page-transition {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.page-transition.active {
  opacity: 1;
  pointer-events: all;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.45;
  }

  70% {
    transform: scale(1.8);
    opacity: 0;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}