/*
 * The combined licence + infrastructure map on about.php.
 * Enqueued by ud_enqueue_infrastructure_map() in includes/assets.php, only on
 * that page template. Everything is scoped under .ud-infra-map — about.php
 * still carries the legacy layer for the rest of the page, and this component
 * must not depend on it or leak into it.
 */
.ud-infra-map {
  --map-bg: #eef2f7;
  --map-default: #dde3ec;
  --map-licensed: #2c4c86;
  --map-licensed-hover: #35619e;
  --map-line: #ffffff;
  --map-bg-active: #e1e7f1;
  --ink: #1c2430;
  --ink-soft: #5b6472;
  --tooltip-bg: #1c2430;
  --tooltip-ink: #ffffff;

  padding-block: 24px;
  background: var(--map-bg);
}

.ud-infra-map .ud-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ud-infra-map__stage {
  position: relative;
  width: 100%;
}

/* The map's aspect ratio (1000×684) makes it taller than it needs to be at
   full container width on a wide screen — narrow it so the whole section
   fits comfortably within the viewport height instead of running off it, and
   put the legend beside it (as in the source presentation slide) rather than
   below, since narrowing the map frees up the row for it. */
@media (min-width: 901px) {
  .ud-infra-map .ud-container {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .ud-infra-map__stage {
    flex: 0 1 960px;
  }
}

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

/* Country shapes: img/europe-map.svg paths carry only id/name/d — every other
   presentation attribute (fill, stroke) was dropped when the file was inlined,
   so it all lives here. */
.ud-infra-map__svg path {
  fill: var(--map-default);
  stroke: var(--map-line);
  stroke-width: 1.2;
  transition: fill 0.15s ease;
}

.ud-infra-map__svg path.is-licensed {
  fill: var(--map-licensed);
  cursor: pointer;
}

.ud-infra-map__svg path.is-licensed:hover {
  fill: var(--map-licensed-hover);
}

.ud-infra-marker {
  cursor: pointer;
}

/* transform-box: fill-box makes the hover scale pivot on the shape's own
   centre rather than the SVG's 0,0 origin, independent of the marker <g>'s
   own translate(x y) — the two transforms don't fight. */
.ud-infra-marker circle,
.ud-infra-marker rect,
.ud-infra-marker path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.ud-infra-marker:hover circle,
.ud-infra-marker:hover rect,
.ud-infra-marker:hover path,
.ud-infra-marker.is-active circle,
.ud-infra-marker.is-active rect,
.ud-infra-marker.is-active path {
  transform: scale(1.35);
}

/* A legend category selected: its markers pulse, the rest stay as they are. */
@keyframes ud-infra-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.8);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ud-infra-marker.is-highlighted circle,
  .ud-infra-marker.is-highlighted rect,
  .ud-infra-marker.is-highlighted path {
    animation: ud-infra-pulse 1.4s ease-in-out infinite;
  }
}

.ud-infra-map__tooltip {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--tooltip-bg);
  color: var(--tooltip-ink);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
}

.ud-infra-map__tooltip strong {
  display: block;
  font-weight: 600;
}

.ud-infra-map__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ud-infra-map__legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.ud-infra-map__legend-item:hover,
.ud-infra-map__legend-item[aria-pressed="true"] {
  color: var(--ink);
}

.ud-infra-map__legend-item[aria-pressed="true"] {
  background: var(--map-bg-active);
  font-weight: 600;
}

.ud-infra-map__legend-item:focus-visible {
  outline: 2px solid var(--map-licensed);
  outline-offset: 2px;
}

.ud-infra-map__legend-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Beside the map rather than below it, so one column reads better than a
   wide, mostly-empty grid — same source-order reason the 900px/480px
   overrides below sit after the base rule instead of before it. */
@media (min-width: 901px) {
  .ud-infra-map__legend {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .ud-infra-map__legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ud-infra-map {
    padding-block: 40px;
  }

  /* The map alone runs into the container's side gutters so it can be larger
     on a phone; the legend keeps them. */
  .ud-infra-map__stage {
    width: auto;
    margin-inline: -20px;
  }

  .ud-infra-map__legend {
    grid-template-columns: 1fr;
  }

  .ud-infra-map__tooltip {
    max-width: 160px;
    white-space: normal;
    font-size: 12px;
  }
}