/* ---- contact.css ---- */
/*
  Contact form styles, shared by the homepage form and /contact (brief 6.9).
*/

.contact-details {
  font-style: normal;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.contact-form[hidden] {
  display: none;
}

.honeypot {
  position: absolute;
  inline-size: var(--visually-hidden-size);
  block-size: var(--visually-hidden-size);
  overflow: hidden;
  clip-path: inset(50%);
}

.field-hint {
  font-size: var(--step--1);
  margin-block-start: calc(var(--space-3xs) * -1);
}

.form-more {
  max-inline-size: var(--form-max);
  border-block: var(--rule-hair) solid var(--rule-light);
}

.form-more summary {
  min-block-size: var(--target-min);
  padding-block: var(--space-xs);
  font-family: var(--font-structural);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.form-more-fields {
  padding-block-end: var(--space-m);
}

.form-privacy {
  font-size: var(--step--1);
}

.form-status:empty {
  display: none;
}

/* The in-place success state replaces the form. */
.form-success {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block-start: var(--space-s);
  border-block-start: var(--rule-strong) solid var(--state-ok);
}

.form-success [hidden],
.form-success[hidden] {
  display: none;
}

@media (width >= 48rem) {
  .contact-details {
    grid-column: 1 / 4;
  }

  .contact-form-wrap {
    grid-column: 4 / -1;
  }
}

@media (width >= 64rem) {
  .contact-form-wrap {
    grid-column: 4 / 10;
  }
}

/* ---- map.css ---- */
/*
  Footprint map (brief 6.1). Colours: non-operating countries silver at low
  opacity with hairline strokes; operating countries petrol; Kenya amber
  with a heavier ink stroke (amber alone is 1.83:1 on paper, so the ink
  outline carries the shape). Node labels are HTML, positioned by
  generated classes (src/css.11ty.js), so their size never scales with
  the map.
*/

.map-records {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.map-count {
  font-size: var(--step-3);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.map-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.map-canvas {
  position: relative;
}

.footprint-map {
  inline-size: 100%;
  overflow: visible;
}

.country {
  stroke: var(--ink);
  stroke-width: var(--map-stroke);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill-opacity var(--dur-fast) var(--ease-out);
}

/* The visible ring is the two-tone overlay below, which follows the
   country's shape. The outline stays (transparent) so forced-colours
   modes, which ignore the overlay's colours, still draw one. */
.country:focus-visible {
  outline: var(--focus-width) solid transparent;
  box-shadow: none;
}

.country.base {
  fill: var(--silver);
  fill-opacity: var(--map-fill-quiet);
}

.country.base:hover,
.country.base[aria-checked="true"] {
  fill-opacity: var(--map-fill-hover);
}

.country.op {
  fill: var(--petrol);
}

.country.op:hover,
.country.op.is-highlighted {
  fill: var(--petrol-bright);
}

.country.hq {
  fill: var(--amber);
  stroke-width: var(--map-stroke-hq);
}

.country.disputed {
  stroke-dasharray: var(--map-dash);
}

.map-overlay path {
  fill: none;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.map-selected {
  stroke: var(--ink);
  stroke-width: var(--map-stroke-selected);
}

/* Keyboard focus: the site's two-tone ring, amber inside ink. */
.map-focus-outer,
.map-focus-inner {
  visibility: hidden;
}

.footprint-map:has(.country:focus-visible) .map-focus-outer {
  visibility: visible;
  stroke: var(--ink);
  stroke-width: var(--map-focus-outer);
}

.footprint-map:has(.country:focus-visible) .map-focus-inner {
  visibility: visible;
  stroke: var(--amber);
  stroke-width: var(--map-focus-inner);
}

.map-leader {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.map-node {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: var(--map-stroke-node);
  vector-effect: non-scaling-stroke;
}

.map-label {
  position: absolute;
  translate: 0 -50%;
  padding-inline-start: var(--space-2xs);
  font-size: var(--step-0);
  line-height: 1;
}

.map-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.map-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block-start: var(--space-s);
  border-block-start: var(--rule-strong) solid var(--ink);
}

.map-register {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs) var(--space-m);
  padding: 0;
  list-style: none;
}

.map-register button {
  padding: var(--space-2xs) 0;
  border: 0;
  background: none;
  color: var(--petrol);
  text-align: start;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-rest);
  text-underline-offset: var(--underline-offset);
  transform-origin: 0 50%;
  transition:
    scale var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.map-register button:hover {
  color: var(--petrol-bright);
  text-decoration-thickness: var(--underline-hover);
}

/* The market under the pointer (or keyboard focus) on the map: its name
   grows in place. scale, not font-size, so the list never reflows. */
.map-register button.is-highlighted {
  scale: var(--map-name-grow);
  color: var(--petrol-bright);
  text-decoration-thickness: var(--underline-hover);
}

.map-register button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: var(--weight-bold);
  text-decoration-line: none;
}

@media (width >= 48rem) {
  .map-records {
    grid-column: 1 / 4;
  }

  .map-figure,
  .map-aside {
    grid-column: 4 / -1;
  }
}

@media (width >= 64rem) {
  .map-figure {
    grid-column: 4 / 10;
  }

  .map-aside {
    grid-column: 10 / -1;
  }
}

/* ---- The draw-in (brief 5.1): the site's single orchestrated moment ---- */

/* Set by the script only when the draw-in will run, so the map is never
   hidden without JavaScript, under reduced motion, or on a repeat visit. */
.map-will-draw .country {
  fill-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.map-will-draw .country.disputed,
.map-will-draw .map-overlay,
.map-will-draw .map-nodes {
  opacity: 0;
}

.map-drawn .country {
  transition: fill-opacity var(--dur-base) var(--ease-out);
}

.map-drawing .country:not(.disputed) {
  animation: draw-in var(--dur-slow) var(--ease-out) var(--draw-delay, 0ms) forwards;
}

.map-drawn .country.disputed,
.map-drawn .map-overlay,
.map-drawn .map-nodes {
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* ---- generated from africaMap.json ---- */
.map-label-nairobi { left: 81.93%; top: 56.96%; }