/* =========================================================================
   Coverage map — London / Essex
   Theme: gold on charcoal. Every town is its own shaded section.
   Pairs with coverage-map.svg + coverage-map.js

   Colour system
   -------------
   Each region has its own four-step gold family:
     London  pale cream-gold
     Essex   amber ochre
   Within a region the step comes from how far a town sits from that region's
   centre, so each one carries a soft vignette and reads as a single mass.
   All of it is custom properties — override them, don't edit this file.
   ========================================================================= */

.cm-wrap {
  /* --- surface ---------------------------------------------------------- */
  --cm-bg:          #1a1a18;

  /* --- London: pale cream-gold ----------------------------------------- */
  --cm-london-0:    #f2e9c4;
  --cm-london-1:    #ebe1b0;
  --cm-london-2:    #e3d89b;
  --cm-london-3:    #d9cd86;

  /* --- Essex: amber ochre ---------------------------------------------- */
  --cm-essex-0:     #e2cd85;
  --cm-essex-1:     #d7c069;
  --cm-essex-2:     #cab24f;
  --cm-essex-3:     #baa23a;

  /* --- interaction ------------------------------------------------------ */
  --cm-active:      #443e16;   /* the section under the cursor  */
  --cm-active-edge: #e9d97c;   /* its rim light                 */

  /* --- lines ------------------------------------------------------------ */
  --cm-divider:     rgba(56, 47, 14, .34);  /* town to town, tone on tone */
  --cm-water:       rgba(26, 24, 12, .42);  /* the Thames                 */
  --cm-border:      #15140d;                /* county outline             */

  /* --- type & accents --------------------------------------------------- */
  --cm-ink:         #efe9d1;
  --cm-ink-on-gold: #3b3512;
  --cm-accent:      #dccb52;
  --cm-radius:      6px;

  position: relative;
  display: block;
  padding: 22px;
  border-radius: var(--cm-radius);
  background: var(--cm-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--cm-ink);
}

@media (max-width: 860px) {
  .cm-wrap { padding: 12px; }
}

/* transparent variant — drops the charcoal card, keeps the map.
   Add class cm-bare to .cm-wrap. */
.cm-wrap.cm-bare { background: none; padding: 0; border-radius: 0; }

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

.cm-map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: manipulation;
}

/* the shadow the landmass casts on the background */
.cm-lift path { fill: #000; }

/* --- town sections ---------------------------------------------------- */

.cm-area {
  stroke: var(--cm-divider);
  stroke-width: .75;
  stroke-linejoin: miter;
  stroke-miterlimit: 8;
  cursor: pointer;
  outline: none;
  transition: fill .16s ease;
}

.cm-area[data-region="london"][data-tint="0"] { fill: var(--cm-london-0); }
.cm-area[data-region="london"][data-tint="1"] { fill: var(--cm-london-1); }
.cm-area[data-region="london"][data-tint="2"] { fill: var(--cm-london-2); }
.cm-area[data-region="london"][data-tint="3"] { fill: var(--cm-london-3); }

.cm-area[data-region="essex"][data-tint="0"] { fill: var(--cm-essex-0); }
.cm-area[data-region="essex"][data-tint="1"] { fill: var(--cm-essex-1); }
.cm-area[data-region="essex"][data-tint="2"] { fill: var(--cm-essex-2); }
.cm-area[data-region="essex"][data-tint="3"] { fill: var(--cm-essex-3); }

/* the section you're pointing at */
.cm-area:hover,
.cm-area.is-hot {
  fill: var(--cm-active);
  stroke: var(--cm-active-edge);
  stroke-width: 1.6;
}

/* --- county outlines, stroked over the sections ----------------------- */

.cm-outline {
  fill: none;
  stroke: var(--cm-border);
  stroke-width: 2.2;
  stroke-linejoin: miter;
  stroke-miterlimit: 8;
  pointer-events: none;
}

/* the Thames — clipped to the coverage area, drawn over the sections */
.cm-river {
  fill: none;
  stroke: var(--cm-water);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* the London / Essex line, drawn from the section edges that separate them */
.cm-divide {
  fill: none;
  stroke: var(--cm-border);
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
}

/* --- captions --------------------------------------------------------- */

.cm-region-label {
  fill: var(--cm-ink-on-gold);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .16em;
  text-anchor: middle;
  pointer-events: none;
  opacity: .62;
  transition: opacity .16s ease;
}
/* hide a county's caption while one of its towns is lit, so the two
   labels can't collide */
.cm-region-label.is-muted { opacity: 0; }

.cm-town-label {
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  fill: #fdf8e2;
  paint-order: stroke;
  stroke: #17150a;
  stroke-width: 3.6px;
  stroke-linejoin: round;   /* keep the text halo soft */
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.cm-town-label.is-hot { opacity: 1; }

/* print every town name: add cm-labels-always to .cm-wrap. Names whose
   section is too narrow to hold them ([data-tiny]) stay hidden until
   hovered, so dense inner London doesn't become a pile of text. */
.cm-wrap.cm-labels-always .cm-town-label {
  opacity: .85; fill: var(--cm-ink-on-gold); stroke: none; font-weight: 500;
}
.cm-wrap.cm-labels-always .cm-town-label[data-tiny] { opacity: 0; }
.cm-wrap.cm-labels-always .cm-town-label.is-hot {
  opacity: 1; fill: #fdf8e2; font-weight: 600;
  paint-order: stroke; stroke: #17150a;
}

/* =========================================================================
   Crawlable / keyboard index
   -------------------------------------------------------------------------
   A real <ul> of every town link, off-screen for sighted mouse users. It is
   what search engines follow and what no-JS visitors get. Because the links
   are genuinely focusable, tabbing walks through them: each one pops into
   view as a chip and lights its section on the map.
   ========================================================================= */

.cm-index { position: absolute; left: 0; right: 0; height: 0; }
.cm-index ul { list-style: none; margin: 0; padding: 0; }

.cm-index h2,
.cm-index h3,
.cm-index a {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cm-index a:focus {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: auto; height: auto;
  margin: 10px 0 0;
  padding: 9px 16px;
  clip: auto;
  overflow: visible;
  border-radius: 999px;
  background: var(--cm-accent);
  color: var(--cm-ink-on-gold);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  z-index: 5;
}

/* ------------------------------------------------------------ a11y misc -- */

.cm-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cm-wrap * { transition: none !important; }
}

/* =========================================================================
   Optional light variant — add class cm-light to .cm-wrap
   ========================================================================= */
.cm-wrap.cm-light {
  --cm-bg:          #ffffff;
  --cm-divider:     rgba(255, 255, 255, .8);
  --cm-border:      #8a8046;
  --cm-ink:         #2c2a1c;
  --cm-accent:      #a8951a;
  --cm-active:      #514a1c;
  --cm-active-edge: #2c280d;
  --cm-water:       rgba(90, 108, 120, .55);
}
.cm-wrap.cm-light .cm-lift path { fill: transparent; }
.cm-wrap.cm-light .cm-index a:focus { color: #fff; }