/* Coverage map (components/coverage-map.php, generated by tools/geo/build-map.js): homepage hero, areas hub and area pages */
/* ---------- Hero map: 50 miles around Southall (26 October 2026) ---------- */
.hmap { position: relative; display: grid; gap: 12px; }
.hmap__frame { position: relative; width: 100%; aspect-ratio: 1; max-height: 640px; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--line-on-ink); background: radial-gradient(circle at 50% 48%, #173656 0%, #0F2338 48%, #0B1A2B 76%); box-shadow: var(--shadow-hero); }
.hmap__svg { display: block; width: 100%; height: 100%; }
.hmap__svg text { font-family: var(--font-body); }
.hmap__land { fill: rgba(250, 247, 242, 0.035); stroke: rgba(250, 247, 242, 0.12); stroke-width: 0.8; stroke-linejoin: round; }
.hmap__land--london { fill: rgba(250, 247, 242, 0.05); stroke: rgba(250, 247, 242, 0.08); stroke-width: 0.5; }
.hmap__area { fill: rgba(213, 88, 63, 0.2); stroke: rgba(227, 163, 34, 0.5); stroke-width: 0.9; stroke-linejoin: round; transition: fill 260ms var(--ease-out), stroke 260ms; cursor: pointer; }
.hmap__area.is-lit { fill: rgba(227, 163, 34, 0.34); stroke: #E3A322; }
.hmap__river { fill: none; stroke: #6E9FD0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.hmap__road { fill: none; stroke: rgba(250, 247, 242, 0.13); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.hmap__road--m { stroke: rgba(227, 163, 34, 0.5); stroke-width: 1.5; }
.hmap__ring { fill: none; stroke: url(#hmapHeat); stroke-width: 2.2; stroke-dasharray: 1.4 1; transform-origin: 50% 50%; transform-box: fill-box; animation: hmapSpin 120s linear infinite; }
.hmap__ringlabel { fill: #E3A322; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.hmap__shield rect { fill: #1C3A5C; stroke: rgba(250, 247, 242, 0.3); stroke-width: 0.8; }
.hmap__shield text { fill: var(--chalk-000); font-size: 9.5px; font-weight: 800; }
.hmap__other circle { fill: rgba(250, 247, 242, 0.32); }
.hmap__other text { fill: rgba(250, 247, 242, 0.38); font-size: 10px; font-weight: 600; }
.hmap__town { cursor: default; outline: none; }
.hmap__town circle { fill: var(--chalk-000); stroke: var(--navy-950); stroke-width: 1.6; transition: r 200ms var(--ease-out), fill 200ms; }
.hmap__town text { fill: rgba(250, 247, 242, 0.82); font-size: 11.5px; font-weight: 700; opacity: 0; transition: opacity 200ms; paint-order: stroke; stroke: rgba(11, 26, 43, 0.85); stroke-width: 3px; stroke-linejoin: round; }
.hmap__town .hmap__job { fill: #E3A322; font-size: 10px; font-weight: 600; }
.hmap__town.is-named text:not(.hmap__job) { opacity: 1; }
.hmap__town:hover text, .hmap__town:focus-visible text, .hmap__town.is-lit text { opacity: 1; }
.hmap__town:hover circle, .hmap__town:focus-visible circle, .hmap__town.is-lit circle { r: 5.5; fill: #E3A322; }
.hmap__base text { fill: var(--chalk-000); font-size: 14px; font-weight: 800; paint-order: stroke; stroke: rgba(11, 26, 43, 0.85); stroke-width: 3px; }
.hmap__base .hmap__baselabel { fill: #E3A322; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.hmap__node { fill: var(--clay-600); stroke: var(--chalk-000); stroke-width: 2.5; }
.hmap__halo { fill: rgba(194, 69, 44, 0.28); }
.hmap__pulse { fill: none; stroke: var(--clay-500); stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: hmapPulse 2.4s var(--ease-out) infinite; }
.hmap__tag { position: absolute; left: 16px; top: 16px; z-index: 2; }
.hmap__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hmap__chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--weight-bold); color: var(--chalk-000); background: var(--paper-a08); border: 1px solid var(--line-on-ink); transition: background var(--dur-hover), border-color var(--dur-hover), color var(--dur-hover); }
.hmap__chip:hover, .hmap__chip:focus-visible, .hmap__chip.is-lit { background: rgba(227, 163, 34, 0.18); border-color: #E3A322; color: var(--chalk-000); }
@media (max-width: 599px) {
  .hmap__town text { font-size: 17px; stroke-width: 4px; }
  .hmap__town .hmap__job { font-size: 14px; }
  .hmap__town:not(.is-named) text { display: none; }
  .hmap__town.is-lit text, .hmap__town:focus-visible text { display: inline; }
  .hmap__other { display: none; }
  .hmap__base text { font-size: 20px; }
  .hmap__base .hmap__baselabel { font-size: 13px; }
  .hmap__ringlabel { font-size: 17px; }
  .hmap__shield { transform-box: fill-box; }
}
@keyframes hmapPulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
@keyframes hmapSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hmap__ring, .hmap__pulse { animation: none; } }
@media (max-width: 599px) {
  .hmap__town.is-named:not(.is-key) text { display: none; }
  .hmap__town.is-lit text, .hmap__town:focus-visible text { display: inline; }
  .hmap__town.is-key text { font-size: 22px; }
  .hmap__base text { font-size: 24px; }
}
/* ---------- Hero map refinements (27 October 2026) ---------- */
.hmap__edges path { fill: none; stroke: #E3A322; stroke-width: 2.6; stroke-linejoin: round; opacity: 0.85; }
.hmap__area { fill: #2B2735; stroke: #2B2735; stroke-width: 1; transition: fill 260ms var(--ease-out), stroke 260ms; }
.hmap__area.is-lit { fill: #5A3E2C; stroke: #5A3E2C; }
.hmap__road { stroke: rgba(250, 247, 242, 0.08); stroke-width: 0.7; }
.hmap__road--m { stroke: rgba(227, 163, 34, 0.55); stroke-width: 1.4; }
.hmap__ring { stroke-width: 1.6; stroke-dasharray: 0.7 0.9; }
.hmap__ring--25 { stroke: rgba(250, 247, 242, 0.18); stroke-width: 1; stroke-dasharray: 0.4 1.2; animation: none; }
.hmap__pill rect { fill: var(--navy-950); stroke: rgba(227, 163, 34, 0.7); stroke-width: 1; }
.hmap__pill text { fill: #E3A322; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hmap__pill--25 rect { stroke: rgba(250, 247, 242, 0.25); }
.hmap__pill--25 text { fill: rgba(250, 247, 242, 0.6); }
.hmap__region { fill: rgba(250, 247, 242, 0.42); font-size: 11px; font-weight: 800; letter-spacing: 0.22em; transition: fill 260ms; pointer-events: none; }
.hmap__region.is-lit { fill: #E3A322; }
.hmap__county { fill: rgba(250, 247, 242, 0.2); font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; }
.hmap__town.is-minor circle { fill: rgba(250, 247, 242, 0.5); stroke-width: 1; }
.hmap__town.is-minor.is-lit circle, .hmap__town.is-minor:hover circle { fill: #E3A322; }
.hmap__leader { stroke: var(--chalk-000); stroke-width: 1.4; stroke-dasharray: 2 3; }
.hmap__callout rect { fill: var(--chalk-000); filter: drop-shadow(0 6px 12px rgba(6, 14, 24, 0.45)); }
.hmap__callout .hmap__callname { fill: var(--navy-950); font-size: 13px; font-weight: 800; stroke: none; }
.hmap__callout .hmap__baselabel { fill: var(--clay-600); font-size: 8.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; stroke: none; }
.hmap__legend { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-radius: 12px; background: rgba(11, 26, 43, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line-on-ink); font-size: 11px; font-weight: 600; color: var(--paper-a70); }
.hmap__legend span { display: inline-flex; align-items: center; gap: 6px; }
.hmap__key { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; }
.hmap__key--base { border-radius: 50%; background: var(--clay-600); border: 2px solid var(--chalk-000); }
.hmap__key--area { border-radius: 3px; background: #2B2735; border: 1.5px solid #E3A322; }
.hmap__key--road { height: 2px; border-radius: 2px; background: rgba(227, 163, 34, 0.8); }
.hmap__chips { flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.hmap__chips::-webkit-scrollbar { display: none; }
.hmap__chip { flex-shrink: 0; padding: 0 11px; }
@media (max-width: 599px) {
  .hmap__region { font-size: 16px; }
  .hmap__county { display: none; }
  .hmap__pill text { font-size: 14px; }
  .hmap__callout .hmap__callname { font-size: 15px; }
  .hmap__legend { left: 10px; bottom: 10px; padding: 6px 10px; gap: 4px 10px; font-size: 10px; }
  .hmap__chips { justify-content: flex-start; gap: 6px; }
}
@media (max-width: 599px) { .hmap__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } .hmap__chip { justify-content: center; padding: 0 6px; } }
.hmap { container-type: inline-size; }
@container (max-width: 579px) { .hmap__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } .hmap__chip { justify-content: center; padding: 0 6px; } }
/* ---------- Hero map hover: one tooltip and one region card, no labels added (27 October 2026) ---------- */
.hmap__town { cursor: pointer; }
.hmap__town .hmap__hit, .hmap__town:hover .hmap__hit, .hmap__town.is-lit .hmap__hit, .hmap__town:focus-visible .hmap__hit { fill: transparent; stroke: none; r: 9px; }
.hmap__town text, .hmap__town:hover text, .hmap__town.is-lit text, .hmap__town:focus-visible text { opacity: 1; display: inline; transition: opacity 220ms; }
.hmap__town .hmap__dot { transition: r 200ms var(--ease-out), fill 200ms, opacity 220ms; }
.hmap__town:hover .hmap__dot, .hmap__town:focus-visible .hmap__dot, .hmap__town.is-active .hmap__dot { r: 5.5px; fill: #E3A322; }
.hmap__town.is-lit .hmap__dot { r: 4.6px; fill: #E3A322; }
.hmap.has-region .hmap__town:not(.is-lit) text { opacity: 0.3; }
.hmap.has-region .hmap__town:not(.is-lit) .hmap__dot { opacity: 0.35; }
.hmap.has-region .hmap__region:not(.is-lit) { fill: rgba(250, 247, 242, 0.22); }
.hmap__cards { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: min(250px, 62%); pointer-events: none; }
.hmap__card { position: absolute; right: 0; bottom: 0; width: 100%; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(11, 26, 43, 0.94); border: 1px solid rgba(227, 163, 34, 0.55); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(8px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.hmap__card.is-on { opacity: 1; transform: none; }
.hmap__card strong { font: var(--weight-black) 14px/1.25 var(--font-display); color: var(--chalk-000); }
.hmap__cardtowns { font-size: 12px; line-height: 1.45; color: var(--paper-a70); }
.hmap__card ul { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid var(--line-on-ink); }
.hmap__card li { font-size: 11.5px; line-height: 1.4; color: var(--paper-a70); }
.hmap__card li b { color: #E3A322; font-weight: 700; }
.hmap__tip { position: absolute; z-index: 4; left: 0; top: 0; display: grid; gap: 2px; max-width: 220px; padding: 7px 11px; border-radius: 10px; background: var(--chalk-000); color: var(--navy-950); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55); pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.hmap__tip[hidden] { display: none; }
.hmap__tip::after { content: ""; position: absolute; left: var(--arrow, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--chalk-000); transform: rotate(45deg); }
.hmap__tip.is-below { transform: translate(-50%, 12px); }
.hmap__tip.is-below::after { bottom: auto; top: -5px; }
.hmap__tip strong { font: var(--weight-black) 13px/1.2 var(--font-display); }
.hmap__tip span { font-size: 11.5px; font-weight: 600; color: var(--clay-600); }
.hmap__tip span:empty { display: none; }
@media (max-width: 599px) {
  .hmap__town.is-named:not(.is-key) text, .hmap__town.is-named:not(.is-key):hover text, .hmap__town.is-named.is-lit:not(.is-key) text { display: none; }
  .hmap__cards { right: 8px; bottom: 8px; width: 70%; }
  .hmap__card { padding: 10px 12px; }
}
.hmap .hmap__town circle.hmap__hit, .hmap .hmap__town:hover circle.hmap__hit, .hmap .hmap__town.is-lit circle.hmap__hit, .hmap .hmap__town:focus-visible circle.hmap__hit { fill: transparent; stroke: none; r: 9px; }
.hmap .hmap__town.is-minor circle.hmap__dot { fill: rgba(250, 247, 242, 0.5); stroke: var(--navy-950); stroke-width: 1; }
.hmap .hmap__town.is-minor.is-lit circle.hmap__dot, .hmap .hmap__town.is-minor:hover circle.hmap__dot, .hmap .hmap__town.is-minor.is-active circle.hmap__dot { fill: #E3A322; }
.hmap .hmap__town:focus-visible circle.hmap__dot { stroke: var(--chalk-000); stroke-width: 2; }
@media (max-width: 599px) { .hmap__shields { display: none; } .hmap__town.is-key text { font-size: 19px; } }
@media (max-width: 399px) { .hmap__tag { display: none; } }

/* ---------- Info bar under the map: legend and region cards stacked in one cell (27 October 2026) ---------- */

.hmap__info { display: grid; align-items: center; min-height: 52px; padding: 12px 16px; border-radius: 16px; background: rgba(11, 26, 43, 0.72); border: 1px solid var(--line-on-ink); }
.hmap__info > * { grid-area: 1 / 1; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.hmap .hmap__legend { position: static; max-width: none; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hmap.has-region .hmap__legend { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.hmap .hmap__card { position: static; width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 0; transform: translateY(4px); pointer-events: none; }
.hmap .hmap__card.is-on { opacity: 1; transform: none; }
.hmap .hmap__card ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
@media (max-width: 599px) { .hmap__info { padding: 10px 12px; } .hmap .hmap__legend { left: auto; bottom: auto; } }


/* ---------- In the hero: no frame, the map sits on the hero panel and fades out at its edges (27 October 2026) ---------- */

.hero .hmap__frame { border: 0; border-radius: 0; background: none; box-shadow: none; }
.hero .hmap__svg { -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.hero .hmap__info { align-items: start; margin-top: -7%; padding-left: 0; padding-right: 0; background: none; border: 0; border-radius: 0; position: relative; z-index: 1; }

/* ---------- Glow, warmer coverage, stats and area chips (27 October 2026) ---------- */

.hmap__area { fill: url(#hmapArea); stroke: url(#hmapArea); }
.hmap__area.is-lit { fill: #6A4630; stroke: #6A4630; }
.hmap__warm { pointer-events: none; mix-blend-mode: screen; }
.hmap.has-region .hmap__warm { opacity: 0.5; transition: opacity 260ms; }
.hmap__key--area { background: radial-gradient(circle at 35% 35%, #553A33, #2A2638); }
.hero .hmap__frame { overflow: visible; }
.hero .hmap__frame::before { content: ""; position: absolute; inset: -4%; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 78, 122, 0.62) 0%, rgba(24, 56, 92, 0.38) 45%, rgba(18, 42, 70, 0.14) 72%, rgba(18, 42, 70, 0) 100%), radial-gradient(circle at 46% 42%, rgba(213, 88, 63, 0.2) 0%, rgba(213, 88, 63, 0) 34%); }
.hero .hmap__svg { position: relative; z-index: 1; }
.hero .hmap__tag { z-index: 3; }

.hmap__rest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.hmap.has-region .hmap__rest { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.hmap__stats { display: flex; }
.hmap__stats > div { display: grid; gap: 4px; padding: 0 18px; border-left: 1px solid var(--line-on-ink); }
.hmap__stats > div:first-child { padding-left: 0; border-left: 0; }
.hmap__stats dt { font: var(--weight-black) 26px/1.1 var(--font-display); letter-spacing: -0.02em; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; justify-self: start; }
.hmap__stats dd { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--paper-a70); }
.hmap .hmap__rest .hmap__legend { flex-direction: column; gap: 6px; font-size: 11px; }
.hmap .hmap__card { padding-left: 14px; border-left: 2px solid #E3A322; }

.hmap__picklabel { display: flex; align-items: center; gap: 12px; margin-top: 4px; font: var(--weight-bold) 10px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-200); }
.hmap__picklabel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-on-ink), rgba(250, 247, 242, 0)); }
.hmap .hmap__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow: visible; }
.hmap .hmap__chip { justify-content: flex-start; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; font-size: 12.5px; background: rgba(250, 247, 242, 0.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.hmap .hmap__chip:not(.hmap__chip--all)::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #E3A322; transition: background var(--dur-hover), box-shadow var(--dur-hover); }
.hmap .hmap__chip:hover::before, .hmap .hmap__chip:focus-visible::before, .hmap .hmap__chip.is-lit::before { background: #E3A322; box-shadow: 0 0 0 4px rgba(227, 163, 34, 0.18); }
.hmap .hmap__chip--all { justify-content: space-between; color: #E3A322; background: rgba(227, 163, 34, 0.08); border-color: rgba(227, 163, 34, 0.4); }
.hmap .hmap__chip--all .ico { width: 15px; height: 15px; transition: transform var(--dur-hover) var(--ease-out); }
.hmap .hmap__chip--all:hover { background: #E3A322; border-color: #E3A322; color: var(--navy-950); }
.hmap .hmap__chip--all:hover .ico { transform: translateX(3px); }
@container (max-width: 479px) {
  .hmap__stats > div { padding: 0 12px; }
  .hmap__stats dt { font-size: 22px; }
  .hmap__stats dd { font-size: 10.5px; }
  .hmap .hmap__rest .hmap__legend { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; }
  .hmap .hmap__chip { justify-content: center; gap: 6px; padding: 0 6px; font-size: 11.5px; height: 40px; white-space: normal; line-height: 1.15; text-align: center; }
  .hmap .hmap__chip:not(.hmap__chip--all)::before { display: none; }
  .hmap .hmap__chip--all { justify-content: center; }
  .hmap .hmap__chip--all .ico { display: none; }
}

/* On the light Areas hub and area pages: the info bar matches the map tile, label and chips read on the page */
:is(.aintro__hmap, .hub__map) .hmap__info { background: var(--navy-950); }
:is(.aintro__hmap, .hub__map) .hmap__picklabel { color: var(--text-muted); }
:is(.aintro__hmap, .hub__map) .hmap__picklabel::after { background: linear-gradient(90deg, var(--line-strong), rgba(11, 26, 43, 0)); }
:is(.aintro__hmap, .hub__map) .hmap .hmap__chip { color: var(--navy-800); background: var(--white); border-color: var(--line-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
:is(.aintro__hmap, .hub__map) .hmap .hmap__chip:not(.hmap__chip--all)::before { border-color: var(--clay-600); }
:is(.aintro__hmap, .hub__map) .hmap .hmap__chip:hover, :is(.aintro__hmap, .hub__map) .hmap .hmap__chip:focus-visible, :is(.aintro__hmap, .hub__map) .hmap .hmap__chip.is-lit { color: var(--chalk-000); background: var(--navy-950); border-color: var(--navy-950); }
:is(.aintro__hmap, .hub__map) .hmap .hmap__chip--all { color: var(--clay-600); background: rgba(194, 69, 44, 0.06); border-color: rgba(194, 69, 44, 0.4); }
:is(.aintro__hmap, .hub__map) .hmap .hmap__chip--all:hover { color: var(--white); background: var(--clay-600); border-color: var(--clay-600); }

/* Narrow maps: the area chips sit in an even three-column grid, "All areas" spans the last two cells, and no name
   breaks over two lines */
@container (max-width: 479px) {
  .hmap .hmap__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hmap .hmap__chip { justify-content: center; height: 38px; padding: 0 6px; font-size: 12px; white-space: nowrap; border-radius: 12px; }
  .hmap .hmap__chip--all { grid-column: span 2; }
}

/* Mobile type scale on narrow maps: labels at least 12px, area buttons 13px, the uppercase label 11px */
@container (max-width: 479px) {
  .hmap__stats dd, .hmap .hmap__rest .hmap__legend, .hmap__tip span { font-size: 12px; }
  .hmap .hmap__chip { font-size: 13px; }
  .hmap__card li { font-size: 13px; }
  .hmap__picklabel { font-size: 11px; }
}