/* components/map.css — Kenya county SVG heat map (shared/_kenya_map) */

.kenya-map {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.kenya-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

.kenya-map__county {
  fill: var(--color-gray-200, #e5e4e0);
  stroke: var(--color-white, #fafafa);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition: fill 120ms ease, opacity 120ms ease;
}

.kenya-map__county--has-data {
  cursor: pointer;
}

.kenya-map__svg:hover .kenya-map__county--has-data {
  opacity: 0.55;
}

.kenya-map__county:hover,
.kenya-map__county:focus {
  opacity: 1 !important;
  stroke: var(--color-gray-900, #1c1c1a);
  stroke-width: 1.1;
  outline: none;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.kenya-map__tooltip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 12px));
  pointer-events: none;
  background: var(--color-gray-900, #1c1c1a);
  color: var(--color-white, #fafafa);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  border: 1px solid var(--color-gray-900, #1c1c1a);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kenya-map__tooltip[hidden] {
  display: none;
}

.kenya-map__tooltip strong {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 13px;
}

.kenya-map__tooltip span {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--color-gray-200, #e5e4e0);
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.kenya-map__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.kenya-map__legend-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--color-gray-500, #737370);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kenya-map__legend-bar {
  width: 160px;
  height: 8px;
  border-radius: 100px;
  background: linear-gradient(
    to right,
    var(--color-red-600, #c0392b),
    var(--color-gray-200, #e5e4e0),
    var(--color-blue-600, #1a4fd6)
  );
}

@media (max-width: 768px) {
  .kenya-map { max-width: 100%; }
  .kenya-map__legend-bar { width: 120px; }
}