/* Heritage Crest - interactive area map (incs/area-map.php + js/hcb-areamap.js), 27 Oct.
   Towns only: no tiles, no Google, no base pin (Dan, 10 Oct). Gold #ac8d56 on cream, Urbanist like the rest of the site. */
.hcb-amap { --gold: #ac8d56; --ink: #1a1a1a; --cream: #f7f5f1; position: relative; }
.hcb-amap-regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.hcb-amap-chip { font: 500 13px/1 'Urbanist', sans-serif; letter-spacing: .04em; color: var(--ink); background: #fff;
  border: 1px solid rgba(172, 141, 86, .45); border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s; }
.hcb-amap-chip:hover { border-color: var(--gold); }
.hcb-amap-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.hcb-amap-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.hcb-amap-stage { position: relative; background: var(--cream); border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 60px -30px rgba(40, 30, 10, .35); }
.hcb-amap-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.hcb-amap-tz { transform: scale(var(--zm, var(--z, 1))); }
.hcb-amap-coast, .hcb-amap-border, .hcb-amap-link { vector-effect: non-scaling-stroke; }

/* land, sea, coast */
#hcb-amap-dots circle { fill: #b9ab93; }
#hcb-amap-dots-far circle { fill: #cfc5b4; }
.hcb-amap-landdots { fill: url(#hcb-amap-dots); }
.hcb-amap-essex { fill: url(#hcb-amap-dots-far); opacity: .55; }
.hcb-amap-coast { fill: none; stroke: #cbb894; stroke-width: 1.3; stroke-linejoin: round; }
.hcb-amap-border { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-dasharray: 5 6; opacity: .55; }
.hcb-amap-sea { font: italic 400 15px 'Urbanist', sans-serif; letter-spacing: .3em; fill: #a89f90; text-transform: uppercase; text-anchor: middle; }
#hcb-amap-halo stop { stop-color: var(--gold); }
.hcb-amap-halos circle { transition: opacity .6s; }

/* towns */
.hcb-amap-town { cursor: pointer; outline: none; }
.hcb-amap-town text { font: 600 15px 'Urbanist', sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--cream); stroke-width: 5px;
  stroke-linejoin: round; letter-spacing: .02em; transition: fill .25s, opacity .4s; }
.hcb-amap-dot { fill: var(--gold); stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), fill .25s; }
.hcb-amap-ping { fill: var(--gold); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hcb-amap-town:hover .hcb-amap-dot, .hcb-amap-town:focus-visible .hcb-amap-dot, .hcb-amap-town.is-active .hcb-amap-dot { transform: scale(1.45); fill: var(--ink); }
.hcb-amap-town:focus-visible text { text-decoration: underline; }
.hcb-amap-town.is-active text { fill: var(--gold); }
.hcb-amap-town.is-active .hcb-amap-ping { animation: hcb-amap-ping 1.8s ease-out infinite; }
@keyframes hcb-amap-ping { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
.hcb-amap-village circle { fill: #fff; stroke: var(--gold); stroke-width: 1.5; }
.hcb-amap-village text { font: italic 400 12px 'Urbanist', sans-serif; fill: #6b6355; paint-order: stroke; stroke: var(--cream); stroke-width: 4px; }

/* links to the nearest towns, with miles */
.hcb-amap-link { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 3 6; fill: none; stroke-linecap: round;
  animation: hcb-amap-draw .9s ease-out both; }
@keyframes hcb-amap-draw { from { stroke-dashoffset: 120; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
.hcb-amap-mi rect { fill: #fff; stroke: rgba(172, 141, 86, .55); stroke-width: 1; }
.hcb-amap-mi text { font: 600 12px 'Urbanist', sans-serif; fill: var(--ink); text-anchor: middle; }
.hcb-amap-mi { animation: hcb-amap-fade .5s .35s ease-out both; }
@keyframes hcb-amap-fade { from { opacity: 0; } to { opacity: 1; } }

/* region filter */
.hcb-amap[data-region="west"] .hcb-amap-town:not([data-r="west"]), .hcb-amap[data-region="mid"] .hcb-amap-town:not([data-r="mid"]),
.hcb-amap[data-region="east"] .hcb-amap-town:not([data-r="east"]), .hcb-amap[data-region="sussex"] .hcb-amap-town:not([data-r="sussex"]) { opacity: .28; }
.hcb-amap[data-region="west"] .hcb-amap-halos circle:not([data-r="west"]), .hcb-amap[data-region="mid"] .hcb-amap-halos circle:not([data-r="mid"]),
.hcb-amap[data-region="east"] .hcb-amap-halos circle:not([data-r="east"]), .hcb-amap[data-region="sussex"] .hcb-amap-halos circle:not([data-r="sussex"]) { opacity: .15; }
.hcb-amap-town { transition: opacity .4s; }

/* entrance: land fades in, towns pop in one after another */
.hcb-amap .hcb-amap-landdots, .hcb-amap .hcb-amap-essex, .hcb-amap .hcb-amap-coast, .hcb-amap .hcb-amap-border { transition: opacity 1.1s ease-out; }
.hcb-amap.is-pre .hcb-amap-landdots, .hcb-amap.is-pre .hcb-amap-essex, .hcb-amap.is-pre .hcb-amap-coast, .hcb-amap.is-pre .hcb-amap-border { opacity: 0; }
.hcb-amap.is-pre .hcb-amap-dot { transform: scale(0); }
.hcb-amap.is-pre .hcb-amap-town text, .hcb-amap.is-pre .hcb-amap-halos circle { opacity: 0; }
.hcb-amap .hcb-amap-town .hcb-amap-dot { transition-delay: calc(var(--i) * 55ms + .35s); }
.hcb-amap .hcb-amap-town text { transition-delay: calc(var(--i) * 55ms + .5s); }
.hcb-amap.is-live .hcb-amap-town .hcb-amap-dot, .hcb-amap.is-live .hcb-amap-town text { transition-delay: 0s; }

/* the live card */
.hcb-amap-card { position: absolute; right: 22px; bottom: 22px; width: min(340px, calc(100% - 44px)); padding: 18px 20px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(20, 15, 5, .45); font-family: 'Urbanist', sans-serif; color: var(--ink);
  transition: opacity .35s, transform .35s; }
.hcb-amap-card:empty { opacity: 0; transform: translateY(8px); pointer-events: none; }
.hcb-amap-card .k { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.hcb-amap-card h3 { font-size: 22px; font-weight: 500; margin: 0 0 6px; color: var(--ink); }
.hcb-amap-card p { font-size: 14px; line-height: 1.5; color: #555; margin: 0 0 10px; }
.hcb-amap-card .ph { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; margin: 0 0 10px; background: #eee; }
.hcb-amap-card .nb { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; margin: 0 0 12px; }
.hcb-amap-card .nb a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(172, 141, 86, .5); }
.hcb-amap-card .nb a:hover { color: var(--gold); }
.hcb-amap-card .go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--ink);
  padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: background .25s; }
.hcb-amap-card .go:hover { background: var(--gold); color: #fff; }
.hcb-amap-hint { text-align: center; font-size: 13px; color: #777; margin: 12px 0 0; }

/* town pages: no region chips, a little more room for the card */
[data-amap-focus] .hcb-amap-regions { display: none; }

@media (max-width: 760px) {
  .hcb-amap-stage { border-radius: 12px; }
  .hcb-amap-town text { font-size: 26px; stroke-width: 7px; }
  .hcb-amap-village text { font-size: 20px; }
  .hcb-amap-sea { font-size: 22px; }
  .hcb-amap-mi text { font-size: 20px; }
  .hcb-amap-card { position: static; width: auto; margin: 12px 0 0; background: #fff; }
  .hcb-amap-card:empty { display: none; }
  .hcb-amap-chip { padding: 9px 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hcb-amap *, .hcb-amap *::before, .hcb-amap *::after { animation: none !important; transition: none !important; }
}

/* Areas We Cover page section */
.aw-mapsec { padding: 100px 24px 90px; background: #fff; }
.aw-mapwrap { max-width: 1180px; margin: 36px auto 0; }
@media (max-width: 760px) { .aw-mapsec { padding: 64px 16px 56px; } .aw-mapwrap { margin-top: 24px; } }