/* About page — interactive world atlas (.ww-geo, template-parts/about-map.php).
 *
 * NOT a copy of the UA site's rules. That file styles the same class names but
 * against UA tokens (--ww-surface, --ww-border-soft, --ww-shadow-sm) which do
 * not exist here; every colour below is `var(--ww-c-*, literal)` so one sheet
 * serves light and dark, and with the dark sheet absent the fallback is what a
 * visitor sees. That is this theme's standing rule and the reason nothing here
 * is a hex on its own.
 *
 * The section-local --ww-geo-* variables keep map colours in their own
 * namespace, so the SVG rules below never need a second copy. Each reads a
 * --ww-c-geo-* role with the light literal as its fallback: the dark value is
 * declared in theme-dark.css and the 2026 values in palette-2026.css, the
 * same three places as every other role. Until 2026-09-24 the dark values
 * were a second block here, which no palette could reach, so the map stayed
 * green under the 2026 design. */

.ww-geo {
  --ww-geo-ocean: var(--ww-c-geo-ocean, #EDF2F4);
  --ww-geo-land: var(--ww-c-geo-land, #CBD8CE);
  --ww-geo-line: var(--ww-c-geo-line, #FFFFFF);
  --ww-geo-grat: var(--ww-c-geo-grat, rgba(12, 30, 19, 0.07));
  --ww-geo-mark: var(--ww-c-geo-mark, #4B896A);
  --ww-geo-home: var(--ww-c-geo-home, #0F6037);
  --ww-geo-arc: var(--ww-c-geo-arc, rgba(15, 96, 55, 0.55));
  --ww-geo-tile: var(--ww-c-geo-tile, #F2F9F5);

  margin-block: var(--ww-section, 3.5rem);
}

.ww-geo__title {
  text-align: left;
  margin-bottom: var(--ww-space-3, 0.75rem);
}

.ww-geo__intro {
  color: var(--ww-c-text, #4F4F4F);
  font-size: clamp(1rem, 0.97rem + 0.13vw, 1.125rem);
  line-height: 1.5;
  max-width: var(--ww-measure-wide, 40rem);
  margin-block: 0 var(--ww-space-6, 1.5rem);
  margin-inline: 0;
}

/* The card. Surface + hairline + one elevation token, the construction the
   specification panel established. */
.ww-geo__card {
  background: var(--ww-c-surface, #FFFFFF);
  border: 1px solid var(--ww-c-rule, #E6E6E6);
  border-radius: var(--ww-radius, 16px);
  padding: clamp(1rem, 0.6rem + 1.7vw, 2rem);
  overflow: hidden;
}

/* --- the map ----------------------------------------------------------- */

.ww-geo__map {
  position: relative;
  aspect-ratio: var(--ww-geo-ratio, 1200 / 592);
  background: var(--ww-geo-ocean);
  border-radius: var(--ww-radius, 16px);
  overflow: hidden;
}

.ww-geo__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ww-geo__graticule {
  fill: none;
  stroke: var(--ww-geo-grat);
  stroke-width: 0.5;
}

/* One path carries the fill, every border and every coastline — see the
   geometry file's header. Stroking it is what draws the borders. */
.ww-geo__land {
  fill: var(--ww-geo-land);
  stroke: var(--ww-geo-line);
  stroke-width: 0.5;
}

.ww-geo__country {
  fill: var(--ww-geo-mark);
  stroke: var(--ww-geo-line);
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill var(--ww-dur-base, 200ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ww-geo__country.is-active {
  fill: var(--ww-geo-home);
}

.ww-geo__arc {
  fill: none;
  stroke: var(--ww-geo-arc);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
  opacity: 0;
  transition: opacity var(--ww-dur-slow, 300ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ww-geo__arc.is-active {
  opacity: 1;
}

/* --- pins --------------------------------------------------------------
   Only the selected pin is shown. Fourteen at once overlap: the twelve
   European points sit inside about 85x95 units of a 1200x592 map, and Belgium
   and the Netherlands are 7 units apart. `visibility` rather than `opacity`
   because a pin carries a text label — an invisible-but-present label is
   exactly the defect this theme has paid for twice. */
.ww-geo__pin {
  position: absolute;
  /* THE DOT IS THE MARKER, SO THE DOT IS WHAT GETS ANCHORED.
   *
   * This was `translate(-50%, -50%)`, which centres the whole flex ROW — dot,
   * gap AND label — on the coordinate. The dot therefore sat left of the real
   * point by half the label's width, so every pin was wrong by a different
   * amount depending on how long its country's name is. Measured on the home
   * pin: the dot landed at viewBox x=651 while Ukraine's own path spans
   * 674..734, putting "Kyiv" over Slovakia.
   *
   * -5px is half the dot's 10px width, so the DOT's centre lands on the point
   * and the label flows to its right. The vertical half still applies, because
   * the row's height IS the dot's height. */
  transform: translate(-5px, -50%);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  /* OPACITY ONLY. The first version also transitioned `visibility` with a
     0.25s delay so the fade could finish before the pin was taken out — and a
     CSS transition DOES NOT ADVANCE IN A BACKGROUND TAB. Measured with
     document.visibilityState "hidden": the deselected pin kept
     visibility:visible and opacity:1 indefinitely, so two pins showed at once
     and the label of a country nobody had selected sat on the map. Same defect
     as #floating-product-card, the consent banner and the language bar. The
     visible state must never depend on an animation completing. */
  transition: opacity var(--ww-dur-slow, 300ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ww-geo__pin.is-active {
  visibility: visible;
  opacity: 1;
}

.ww-geo__pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ww-geo-home);
  box-shadow: 0 0 0 3px var(--ww-c-surface, #FFFFFF);
  flex: 0 0 auto;
}

.ww-geo__pin-label {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ww-c-on-dark, #F9F9F9);
  background: var(--ww-c-bar, #0C1E13);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

/* --- chips: the real control ------------------------------------------- */

.ww-geo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: clamp(1rem, 0.8rem + 0.9vw, 1.5rem) 0;
}

.ww-geo__chip {
  appearance: none;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  /* 1px of --ww-c-border, not --ww-c-rule: this is a control boundary and WCAG
     1.4.11 asks 3:1 of it, which the hairline does not meet. */
  border: 1px solid var(--ww-c-border, #767676);
  background: var(--ww-c-surface, #FFFFFF);
  color: var(--ww-c-ink, #0C1E13);
  transition: background-color var(--ww-dur-fast, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), color var(--ww-dur-fast, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--ww-dur-fast, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ww-geo__chip:hover {
  border-color: var(--ww-c-accent-fill, #0F6037);
}

.ww-geo__chip.is-active {
  background: var(--ww-c-accent-fill, #0F6037);
  border-color: var(--ww-c-accent-fill, #0F6037);
  /* 5.90:1 on that fill — see theme-dark.css on why the fill and the text
     accent cannot be one token. */
  color: var(--ww-c-on-dark, #F9F9F9);
}

/* --- fact panel --------------------------------------------------------- */

.ww-geo__panel {
  display: grid;
  gap: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  margin-top: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
}

@media (min-width: 62rem) {
  .ww-geo__panel {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Cards are all rendered; the inactive ones are removed from the flow AND from
   the accessibility tree. `display: none` is correct here precisely because
   there is nothing focusable inside a fact card. */
.ww-geo__fact {
  display: none;
}

.ww-geo__fact.is-active {
  display: block;
}

.ww-geo__fact-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --ww-c-accent, not --ww-c-accent-fill. A FILL colour carries a light label
     on top of it; TEXT sits on the page ground and needs the opposite. They
     cross after dark and cannot be one token — the palette says so and this
     rule was reading the wrong half: #127342 on #1A2620 is 2.65:1, against
     4.5. --ww-c-accent is #5CC98A, 7.58:1. Light is unchanged, same fallback. */
  color: var(--ww-c-accent, #0F6037);
  margin-bottom: 0.375rem;
}

.ww-geo__fact-title {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  margin-block: 0 0.5rem;
  color: var(--ww-c-ink, #0C1E13);
}

.ww-geo__fact-text {
  margin: 0;
  color: var(--ww-c-text, #4F4F4F);
  line-height: 1.6;
  max-width: var(--ww-measure, 34rem);
}

/* --- stats -------------------------------------------------------------- */

.ww-geo__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.ww-geo__stat {
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: var(--ww-radius, 16px);
  /* NOT --ww-c-surface-2: its established fallback across 9 call sites is
     #D4D4D4, a mid-grey that reads as a dead slab behind a number, and giving
     one token two fallbacks is two colours under one name — tests/design-tokens
     fails on exactly that, which is how this line was caught. A section-local
     variable keeps the tint here without touching the shared token. */
  background: var(--ww-geo-tile);
}

.ww-geo__stat-num {
  display: block;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  font-weight: 700;
  /* The fill/text split again — see .ww-geo__fact-tag. 2.81:1 after dark, and
     this one is 26px bold so it only needed 3.0, which makes it exactly the
     kind of near-miss that survives review. */
  color: var(--ww-c-accent, #0F6037);
  font-variant-numeric: tabular-nums;
}

.ww-geo__stat-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ww-c-text, #4F4F4F);
}

@media (prefers-reduced-motion: reduce) {
  .ww-geo__country,
  .ww-geo__arc,
  .ww-geo__pin,
  .ww-geo__chip {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * The pin label is a FIXED-SIZE HTML chip on a map that scales with the
 * viewport, so its share of the panel grows as the screen shrinks. Measured at
 * a 390px phone: the map is 324px wide and the "Kyiv, Ukraine" chip is 57px of
 * that before its padding — it covered the whole of Europe, which is the part a
 * visitor is looking at.
 *
 * Below 600px the DOT stays and the chip goes. Nothing is lost: the selected
 * country is already named twice within a few hundred pixels — in the active
 * chip directly under the map, and as the heading of the fact card below it. A
 * third statement of it, painted over the countries, is what was in the way.
 *
 * Not `display:none` on the pin itself: the dot is the only thing that says
 * WHERE the selected country is.
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 37.4375em) {
  .ww-geo__pin-label {
    display: none;
  }
}