/*
 * Country map, replacing the MapSVG plugin. Colours and sizes follow its
 * saved settings: 1500x700 frame, #e1f0f6 background and countries,
 * #667176 borders. The tooltip reuses the theme's .map__tooltip styles in
 * knowledge-exchange.css.
 */
.country-map {
  position: relative;
}

.country-map__canvas {
  aspect-ratio: 1500 / 700;
  background: #e1f0f6;
  width: 100%;
}

.country-map__canvas svg {
  display: block;
  height: 100%;
  touch-action: pan-y;
  user-select: none;
  width: 100%;
}

.country-map--dragging .country-map__canvas svg {
  cursor: grabbing;
}

.country-map__region {
  fill: #e1f0f6;
  stroke: #667176;
  stroke-miterlimit: 10;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* Country pages: fade every country but the current one, as the theme's
   old .single-country .mapsvg rules intended. */
.country-map--focus .country-map__region.is-enabled:not(.is-active) {
  fill-opacity: 0.3;
  transition: fill-opacity 0.2s ease-in-out;
}

.country-map--focus .country-map__region.is-enabled:not(.is-active):hover,
.country-map--focus .country-map__region.is-focused {
  fill-opacity: 1;
}

.country-map__region.is-active {
  filter: drop-shadow(0.5px 0.5px 0.5px rgba(0, 0, 0, 0.8));
}

.country-map__region.is-focused {
  stroke: #000;
  stroke-width: 2px;
}

.country-map__tooltip {
  max-width: 275px;
  min-width: 100px;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

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

/* The country list is the keyboard, screen reader and no-JS route. With
   the map running it is visually hidden but still focusable. */
.country-map__list {
  columns: 12em;
  list-style: none;
  margin: 0;
  padding: 15px;
}

.country-map--js .country-map__list {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.country-map:not(.country-map--js) .country-map__canvas {
  display: none;
}