/* Reusable world map for articles — shows a few countries highlighted,
   always visible under the article hero. Used on pages with a
   <div class="article-map"> block; the SVG is injected by article-map.js so
   it can be reused across articles without copy-pasting the whole map markup.

   A page can optionally add data-tip-<code> attributes to the div; when it
   does, article-map.js appends the .article-map-caption line below and the
   named countries become hover/focus/tap interactive (styles further down). */

.article-map {
  max-width: 640px;
  margin: 32px auto 40px;
  padding: 20px;
  background: var(--parchment-dim);
  border-radius: 4px;
}

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

/* Base country color — deliberately quiet so the highlighted ones stand out */
.article-map svg path,
.article-map svg g {
  fill: var(--parchment);
  stroke: var(--wine-deep);
  stroke-width: 0.5;
}

/* Some countries (e.g. France, Argentina) are <g> groups wrapping several
   <path>s for islands/territories — target those child paths explicitly,
   since the generic "path" rule above would otherwise override the fill
   they'd normally inherit from a highlighted parent <g>. This highlights
   the whole group by default, which is correct for archipelago countries
   (Japan, Philippines, ...) that have no single "mainland" piece. */
.article-map svg .highlighted,
.article-map svg .highlighted path {
  fill: var(--wine);
}

/* But where the map does mark a specific mainland piece (France, Argentina,
   the UK, the US, ...), highlight only that — not overseas territories like
   French Guiana that happen to share the same country group. */
.article-map svg .highlighted:has(path.mainland) path:not(.mainland) {
  fill: var(--parchment);
}

/* Secondary highlight tier (data-highlight-alt) — for countries that belong
   to the story in a different way than the main ones. On the smoke-taint
   piece: South Africa, where the smoky character is a winemaking choice, not
   wildfire taint. Same shape as the .highlighted rules above, different fill. */
.article-map svg .highlighted-alt,
.article-map svg .highlighted-alt path {
  fill: var(--gold);
}

.article-map svg .highlighted-alt:has(path.mainland) path:not(.mainland) {
  fill: var(--parchment);
}

/* Countries article-map.js has made interactive (it adds tabindex to each).
   Show a pointer, and give keyboard users a visible focus ring. */
.article-map svg [tabindex] {
  cursor: pointer;
}
.article-map svg [tabindex]:focus-visible {
  outline: 2px solid var(--wine-deep);
  outline-offset: 1px;
}

/* The country currently hovered / focused / tapped, set by article-map.js.
   Kept subtle — just a firmer outline so it's clear which country the caption
   below is describing. Covers both single-path countries and <g> groups. */
.article-map svg .tip-active,
.article-map svg .tip-active path {
  stroke: var(--wine-deep);
  stroke-width: 1.5;
}

/* Caption line under the map, populated by article-map.js on hover/focus/tap.
   Only rendered on pages that set data-tip-* attributes. min-height reserves
   room for two lines so the layout doesn't jump as the text swaps. */
.article-map-caption {
  margin: 14px 0 0;
  min-height: 2.8em;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.75;
  text-align: center;
}