/* ── Lie of the Land: UK map artwork ─────────────────────────────────────
   The UK/Ireland outlines, the OS National Grid and its letters live once in an inline
   <svg class="uk-sprite"> (see index.html / renderGuidePage) and every map reuses them
   with <use>. All styling is driven by the custom properties below so each placement
   (hero, page background, footer, report header) is just a different set of values. */

.ukmap {
  --m-moss: #3F6455; --m-deep: #2C4A3E; --m-contour: #D9CDB4; --m-mist: #ECE8DD;
  --m-rasp: #B62B57; --m-ink: #24322C; --m-paper: #F7F5EF;

  --grid-c: var(--m-contour); --grid-o: .7;  --grid-w: .7;
  --letter-c: var(--m-contour); --letter-o: .75; --letter-s: 40px;
  --ie-fill: var(--m-mist); --ie-stroke: var(--m-contour);
  --rip-c: var(--m-moss); --r1: 9; --r2: 20; --r3: 34; --o1: .13; --o2: .08; --o3: .045;
  --land-c: var(--m-moss); --land-o: .13;
  --coast-c: var(--m-deep); --coast-o: .7; --coast-w: 1.5;
  --halo: var(--m-paper);

  pointer-events: none;
}
.ukmap .map-grid     { fill: none; stroke: var(--grid-c); stroke-width: var(--grid-w); opacity: var(--grid-o); }
.ukmap .map-letters  { font-family: 'Fraunces', Georgia, serif; font-size: var(--letter-s); fill: var(--letter-c); opacity: var(--letter-o); }
.ukmap .map-ireland  { fill: var(--ie-fill); stroke: var(--ie-stroke); stroke-width: .9; }
.ukmap .map-ripple   { fill: none; stroke: var(--rip-c); stroke-linejoin: round; }
.ukmap .map-ripple-1 { stroke-width: var(--r1); opacity: var(--o1); }
.ukmap .map-ripple-2 { stroke-width: var(--r2); opacity: var(--o2); }
.ukmap .map-ripple-3 { stroke-width: var(--r3); opacity: var(--o3); }
.ukmap .map-land     { fill: var(--land-c); fill-opacity: var(--land-o); }
.ukmap .map-coast    { fill: none; stroke: var(--coast-c); stroke-width: var(--coast-w); stroke-linejoin: round; opacity: var(--coast-o); }
.ukmap .pin-dot      { fill: var(--m-rasp); stroke: #fff; stroke-width: 1.5; }
.ukmap .pin-pulse    { fill: none; stroke: var(--m-rasp); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: pinPulse 3.6s ease-out infinite; }
.ukmap .pin:nth-of-type(2) .pin-pulse { animation-delay: .6s; }
.ukmap .pin:nth-of-type(3) .pin-pulse { animation-delay: 1.2s; }
.ukmap .pin:nth-of-type(4) .pin-pulse { animation-delay: 1.8s; }
.ukmap .pin:nth-of-type(5) .pin-pulse { animation-delay: 2.4s; }
.ukmap .pin:nth-of-type(6) .pin-pulse { animation-delay: 3s; }
.ukmap .flag-pole  { fill: none; stroke: var(--m-ink); stroke-width: 5; stroke-linecap: round; }
.ukmap .flag-cloth { fill: var(--m-rasp); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.ukmap .flag-foot  { fill: var(--m-ink); stroke: #fff; stroke-width: 2.5; }
.ukmap .pin-name { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 500; fill: var(--m-ink); paint-order: stroke; stroke: var(--halo); stroke-width: 4px; }
.ukmap .pin-ref  { font-family: 'Figtree', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; fill: var(--m-rasp); paint-order: stroke; stroke: var(--halo); stroke-width: 3px; }
@keyframes pinPulse { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes mapScan  { from { transform: translateY(-260px); } to { transform: translateY(1400px); } }
@media (prefers-reduced-motion: reduce) { .ukmap * { animation: none !important; } }
@media print { .ukmap { display: none !important; } }

/* ── Home hero: large, bleeding off the right edge, with labelled pins ── */
.hero-map {
  position: absolute; z-index: 0;
  height: 100%; width: auto; top: 0; right: 2%;
  -webkit-mask-image: radial-gradient(ellipse 66% 64% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 66% 64% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%);
}
@media (max-width: 899px) {
  .hero-map { height: auto; width: 100%; right: 0; top: 24px; opacity: .42; }
  .hero-map .pin-name, .hero-map .pin-ref { display: none; }
}

/* ── Page backdrop (search form, loading, reports, guides): one faint fixed map ── */
.page-map {
  position: fixed; z-index: -1; top: 64px; right: -3%;
  height: calc(100vh - 64px); width: auto; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%);
}
.page-map { --letter-o: .38; }
.page-map .map-engrave { display: none; }
.page-map .map-scan, .page-map .pin { opacity: 0; transition: opacity .6s; }
.page-map .map-scan { animation: mapScan 4.2s linear infinite; }
@media (max-width: 899px) { .page-map { right: -30%; opacity: .4; } }
/* While a survey is being drawn up: centre the map, pulse the pins, sweep a scan line over it */
body:has(.loading-panel.active) .page-map { opacity: .9; }
body:has(.loading-panel.active) .page-map .map-scan,
body:has(.loading-panel.active) .page-map .pin { opacity: 1; }
@media (max-width: 899px) { body:has(.loading-panel.active) .page-map { right: 50%; transform: translateX(50%); opacity: .5; } }
/* Same "surveying" treatment for the guide-generating page, which has no .loading-panel */
.page-map.centred { opacity: .9; }
@media (max-width: 899px) { .page-map.centred { right: 50%; transform: translateX(50%); opacity: .5; } }
.page-map.centred .map-scan, .page-map.centred .pin { opacity: 1; }
/* A report with its own locator map doesn't also need the big backdrop */
body:has(.report-panel.active .mini-map) .page-map { display: none; }
/* The home hero has its own, larger map */
body:has(#heroSection:not([style*="none"])) .page-map { display: none; }

/* ── Footer: pale linework on dark ── */
.footer-map {
  --grid-c: #fff; --grid-o: .07; --grid-w: .8;
  --letter-c: #fff; --letter-o: .08;
  --ie-fill: rgba(255,255,255,.04); --ie-stroke: rgba(255,255,255,.18);
  --rip-c: #fff; --o1: .08; --o2: .05; --o3: .03;
  --land-c: #fff; --land-o: .05;
  --coast-c: #D9CDB4; --coast-o: .4;
  position: absolute; z-index: 0; left: 50%; top: 50%; height: 330%; opacity: .5; width: auto; transform: translate(-50%, -48%);
  -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 50%, #000 40%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 60% 40% at 50% 50%, #000 40%, rgba(0,0,0,0) 100%);
}

@media (max-width: 899px) { .footer-map { opacity: .38; height: 260%; } }

/* ── Report header: small locator map, pinned to the surveyed place ── */
.mini-map {
  --grid-o: 0; --letter-o: 0;
  --ie-stroke: var(--m-contour);
  --r1: 16; --r2: 34; --o1: .16; --o2: .08; --o3: 0;
  --land-o: .2; --coast-w: 6; --coast-o: .85;
  position: absolute; right: 0; top: 14px; height: 168px; width: auto;
}
.mini-map .pin-dot   { stroke-width: 5; }
.mini-map .pin-pulse { stroke-width: 5; }
.masthead { position: relative; }
.masthead.has-map { padding-right: 118px; }
@media (max-width: 600px) {
  .mini-map { height: 120px; top: 18px; }
  .masthead.has-map { padding-right: 84px; }
}

/* ── Report side map: whole UK in the empty space beside the report, flagged at the searched place ── */
.side-map { display: none; }
@media (min-width: 1200px) {
  .side-map {
    --sw: clamp(150px, calc((100vw - var(--col, 800px)) / 2 - 40px), 340px);
    --grid-o: .55; --letter-o: .35;
    --r1: 14; --r2: 30; --r3: 0; --o1: .16; --o2: .09; --o3: 0;
    --land-o: .2; --coast-w: 3; --coast-o: .85;
    display: block; position: fixed; z-index: 0;
    width: var(--sw); height: auto;
    top: calc(50% + 32px); transform: translateY(-50%);
    right: calc(((100vw - var(--col, 800px)) / 2 - var(--sw)) / 2);
    -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 62%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 62%, rgba(0,0,0,0) 100%);
  }
  /* the side map replaces the faint backdrop (reports and guides) */
  body:has(.side-map) .page-map { display: none; }
  /* the header map is only for narrower windows */
  .mini-map { display: none; }
  .masthead.has-map { padding-right: 0; }
}