/* ==========================================================================
   Hall & Hoolihan — region map treatment
   Leaflet overrides + pin/zone styling. Ported from map-treatment.html.
   ========================================================================== */

.hh-map {
  position: absolute;
  inset: 0;
  background: #dfe9eb;
  font-family: var(--sans);
}

/* The basemap reads as a real map first and a branded one second. The old
   treatment pushed everything through sepia + hue-rotate, which turned land
   bright cyan and washed the Gulf out. This is a light touch instead: a small
   desaturation and a lift in brightness so the gold pins stay the loudest
   thing on the map, while land stays land and water stays water. */
.hh-map .leaflet-tile-pane {
  filter: saturate(0.82) brightness(1.03) contrast(0.96);
}

/* Barely-there warm wash. Ties the map to the palette without recolouring it. */
.hh-map__wash {
  position: absolute;
  inset: 0;
  z-index: 399;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(159, 191, 197, .07), rgba(244, 202, 120, .05));
}

.hh-map__vignette {
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  box-shadow: inset 0 0 120px 30px rgba(28, 33, 48, .07);
}

/* OSM attribution is required by the tile licence — restyled, never removed. */
.hh-map .leaflet-control-attribution {
  background: rgba(248, 249, 250, .72) !important;
  color: #5a6172 !important;
  font-family: var(--sans);
  font-size: 9px;
}
.hh-map .leaflet-control-attribution a { color: #8a6a2c !important; }

/* --------------------------------------------------------------------------
   Area zones
   -------------------------------------------------------------------------- */

.zone {
  fill: rgba(159, 191, 197, .30);
  stroke: #c9973f;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  cursor: pointer;
  transition: fill .25s, stroke-width .25s, stroke-opacity .25s;
}
.zone.is-hover {
  fill: rgba(244, 202, 120, .30);
  stroke-width: 2.5;
  stroke-dasharray: none;
}
.zone.is-selected {
  fill: url(#hhGoldWash);
  stroke: url(#hhGoldLine);
  stroke-width: 3;
  stroke-dasharray: none;
}

/* --------------------------------------------------------------------------
   Pins — rest / hover / selected (artboard 1c)
   -------------------------------------------------------------------------- */

.pin {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translate(-14px, -100%);
}

.pin__stem {
  display: grid;
  place-items: center;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(150deg, #f4ca78, #c9973f 52%, #9e6f2f);
  box-shadow: 0 3px 10px rgba(28, 33, 48, .30), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .22s ease, box-shadow .22s ease;
}
/* Little rotated square gives the circle its "dropped pin" point. */
.pin__stem::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  background: #c9973f;
  border-radius: 1px;
  transform: rotate(45deg);
}

.pin__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--off-white);
  opacity: .9;
}

.pin:hover .pin__stem,
.pin:focus-visible .pin__stem { transform: scale(1.1); }

.pin.is-selected .pin__stem {
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(244, 202, 120, .28),
              0 6px 16px rgba(28, 33, 48, .36),
              inset 0 1px 0 rgba(255, 255, 255, .6);
}

.pin__label {
  position: absolute;
  left: 34px;
  top: 2px;
  white-space: nowrap;
  padding: 5px 12px 5px 11px;
  border: 1px solid rgba(28, 33, 48, .10);
  border-radius: 999px;
  background: rgba(248, 249, 250, .94);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  box-shadow: 0 4px 14px rgba(28, 33, 48, .12);
  transition: background .22s ease, color .22s ease;
}
.pin.is-selected .pin__label {
  background: var(--ink);
  color: var(--off-white);
  border-color: transparent;
}

/* Near the right edge, flip the label to the other side of the pin. */
.pin.is-flipped .pin__label {
  left: auto;
  right: 34px;
  text-align: right;
}

.pin__sub {
  display: block;
  margin-top: 1px;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .55;
}

/* --------------------------------------------------------------------------
   HUD
   -------------------------------------------------------------------------- */

.hh-map__hud {
  position: absolute;
  /* Above Leaflet's marker pane (600) — it is a control, so pin labels drifting
     underneath it must not obscure it. */
  z-index: 650;
  left: 20px;
  top: 20px;
  pointer-events: none;
}

.hh-map__chip {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid rgba(28, 33, 48, .08);
  border-radius: 999px;
  background: rgba(248, 249, 250, .88);
  backdrop-filter: saturate(1.2);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5a6172;
}

@media (max-width: 430px) {
  .pin__label { font-size: 11.5px; padding: 4px 10px; }
  .pin__sub { display: none; }
  .hh-map__hud { left: 12px; top: 12px; }
}

/* `hidden` must beat the class's display rule, or the chip stays on screen
   when an area is selected. */
.hh-map__chip[hidden], .hh-map__hint[hidden] { display: none; }