/* ═══════════════════════════════════════════════════════════════
   USA Map Pins — Frontend Styles
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ump-pin-color:        #1a6b3a;
  --ump-pin-color-hover:  #22923f;
  --ump-pin-stroke:       #ffffff;
  --ump-state-fill:       #d8d8d8;
  --ump-state-stroke:     #b0b0b0;
  --ump-border-inner:     #909090;
  --ump-border-outer:     #606060;
  /* Balloon palette — dark green, white text & links */
  --ump-balloon-bg:       #1a3d28;
  --ump-balloon-heading:  #ffffff;
  --ump-balloon-text:     rgba(255,255,255,0.88);
  --ump-balloon-link:     #ffffff;
  --ump-balloon-radius:   8px;
  --ump-balloon-shadow:   0 8px 28px rgba(0,0,0,.45);
}

/* ── Container ───────────────────────────────────────────────── */
.usa-map-container {
  position: relative;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 0;
}

.usa-map-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Map geography — Light ───────────────────────────────────── */
.usa-map-container .state-fill {
  fill:         var(--ump-state-fill);
  stroke:       var(--ump-state-stroke);
  stroke-width: 0.4;
  transition:   fill 0.2s ease;
}

.usa-map-container .state-borders {
  fill:         none;
  stroke:       var(--ump-border-inner);
  stroke-width: 0.7;
  pointer-events: none;
}

.usa-map-container .nation-outline {
  fill:         none;
  stroke:       var(--ump-border-outer);
  stroke-width: 1.8;
  pointer-events: none;
}

/* ── Dark theme ──────────────────────────────────────────────── */
.usa-map-container.theme-dark {
  --ump-state-fill:    #263545;
  --ump-state-stroke:  #364d60;
  --ump-border-inner:  #3a5872;
  --ump-border-outer:  #567a96;
}

/* ── Pins ────────────────────────────────────────────────────── */
.map-pin {
  --pin-color:       var(--ump-pin-color);
  --pin-color-hover: var(--ump-pin-color-hover);
  --pin-stroke:      var(--ump-pin-stroke);
  /* transform-box: fill-box scopes transform-origin to the element itself,
     not the SVG viewport — without this, transforms jump to 0,0 corner */
  transform-box:    fill-box;
  transform-origin: center bottom;
  transition:       transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-pin.map-pin--linked { cursor: pointer; }

.map-pin.pin-hover {
  transform: translateY(-6px) scale(1.1);
}

.pin-shadow {
  fill:   rgba(0, 0, 0, 0.22);
  filter: blur(2px);
  transition: opacity 0.2s;
}
.map-pin.pin-hover .pin-shadow { opacity: 0.55; }

.pin-body {
  fill:         var(--pin-color);
  stroke:       none;
  filter:       drop-shadow(0 2px 5px rgba(0,0,0,.28));
  transition:   fill 0.18s ease, filter 0.18s ease;
}
.map-pin.pin-hover .pin-body {
  fill:   var(--pin-color-hover);
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.38));
}

.pin-ring {
  fill: rgba(255,255,255,0.18);   /* subtle darker-green halo */
  pointer-events: none;
}
.pin-dot {
  fill: #ffffff;
  pointer-events: none;
}

/* ── Rich hover balloon ──────────────────────────────────────── */
.ump-balloon {
  position:       absolute;
  width:          210px;
  background:     var(--ump-balloon-bg);
  border-radius:  var(--ump-balloon-radius);
  box-shadow:     var(--ump-balloon-shadow);
  overflow:       hidden;
  z-index:        9999;
  transform:      translateY(-100%) translateY(-18px);
  transition:     opacity 0.18s ease;
  line-height:    1.4;

  /* Subtle bottom arrow pointing down to pin */
  &::after {
    content:      '';
    position:     absolute;
    bottom:       -8px;
    left:         50%;
    transform:    translateX(-50%);
    width:        0;
    height:       0;
    border-left:  9px solid transparent;
    border-right: 9px solid transparent;
    border-top:   9px solid var(--ump-balloon-bg);
  }
}

/* No thumbnail — balloon is text-only */

/* Text body */
.ump-balloon__body {
  padding: 12px 14px 13px;
}

.ump-balloon__heading {
  margin:      0 0 5px;
  font-size:   14px;
  font-weight: 700;
  color:       #ffffff !important;  /* force white — theme p styles can override CSS vars */
  line-height: 1.25;
}

.ump-balloon__addr {
  margin:    0;
  font-size: 12px;
  color:     rgba(255,255,255,0.88) !important;
  line-height: 1.5;
}

.ump-balloon__phone {
  margin:    4px 0 0;
  font-size: 12px;
  color:     var(--ump-balloon-text);
}

.ump-balloon__cta {
  margin:      8px 0 0;
  font-size:   11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ump-balloon__cta a,
.ump-balloon__cta a:visited,
.ump-balloon__cta a:hover {
  color:           var(--ump-balloon-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.9;
}

.ump-balloon__cta a:hover {
  opacity: 1;
}

/* ── Keyboard focus ──────────────────────────────────────────── */
.map-pin:focus { outline: none; }
.map-pin:focus-visible .pin-body {
  filter: drop-shadow(0 0 0 3px rgba(255,255,255,.8))
          drop-shadow(0 0 0 5px var(--pin-color));
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ump-balloon {
    width: 175px;
  }
  .ump-balloon__img {
    height: 90px;
  }
}