/**
 * Styles for the drawn map in gb-map.js.
 *
 * WITH THE COMPONENT, NOT WITH ONE OF ITS USERS. These lived in the
 * caravan demo's stylesheet while the script was shared, so the Club
 * demo mounted the same map and got an unstyled one: the coastline
 * filled black because `fill: url(#land)` was never applied, and every
 * pin stacked into the page as an ordinary button because nothing
 * positioned it. A shared component with private styles is a component
 * that works exactly once.
 *
 * THEMED BY THE PAGE. Colours come from custom properties the host
 * stylesheet already defines, with fallbacks, so the same map reads as
 * the Wayfarer Club on one site and as the Caravan and Motorhome Club
 * on another without a fork.
 */

/* ---------------------------------------------------------------- MAP
   The caravan club's site picker. A drawn map, not a surveyed one:
   see shared/caravan-map.js for why there is no tile server here.

   THE PINS ARE BUTTONS positioned over the drawing, so everything that
   makes a control usable -- focus ring, tab order, Enter and Space --
   is the browser's job rather than this file's. */
.map-layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
/* ON A PHONE THE MAP COMES FIRST. In one column the panel would sit
   above it saying "choose a pin" with every pin below the fold, which
   is an instruction pointing at nothing. Side by side the reading
   order is the source order and this is undone. */
.map-layout > :last-child { order: -1; }
@media (min-width: 60rem) {
  .map-layout { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .map-layout > :last-child { order: 0; }
}
.map-frame {
  position: relative;
  /* The sea. Cool enough that the land reads as land, pale enough that
     a pin on the coast still has contrast against it. */
  background: linear-gradient(180deg, #e8eff3, #dde8ee);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem;
  box-shadow: var(--shadow);
}
/* THE MAP'S ROOM BEFORE IT IS DRAWN (CLS, 24 Sep 2026). The host (#map on
   both finders) is empty until the campsite index arrives, and then became
   the frame below -- 645px of map that pushed the rest of the finder down.
   The shape is the frame's: a 27rem stage at the viewBox's 0.698 plus the
   frame's padding and border, which comes to about 0.71. The width is
   stated because a grid item with auto margins shrinks to its content. */
#map:empty { width: 100%; max-width: 28.6rem; margin: 0 auto; aspect-ratio: 0.71; }
/* THE STAGE IS THE SHARED FRAME. Its aspect ratio is set inline from
   the SVG's own viewBox, so the drawing fills it exactly and a pin at
   40% across the box is at 40% across the drawing. Without that the
   SVG letterboxes and the pins drift sideways into the sea. */
.map-stage {
  position: relative;
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
}
.map-art { display: block; width: 100%; height: 100%; }
.map-land {
  fill: url(#land);
  stroke: #6f8a5e;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.map-pins { position: absolute; inset: 0; pointer-events: none; }

/* 28px of target on a 14px dot: WCAG 2.5.8 wants 24, and two pins in
   the Lake District are close enough that the extra helps. */
.map-pin {
  position: absolute;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  padding: 0;
  border: 0; background: none; cursor: pointer;
  pointer-events: auto;
  display: grid; place-items: center;
}
/* AN AUTHOR `display` BEATS THE `hidden` ATTRIBUTE. The UA stylesheet
   gives [hidden] display:none, and the `display:grid` above silently
   overrode it -- so filtering the list to "Dorset" left all twenty-four
   pins on the map while the cards below correctly showed two. The list
   and the map disagreeing is precisely what driving both from one
   search was meant to prevent. */
.map-pin[hidden] { display: none; }

.map-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: transform .12s ease;
}
.map-pin:hover .map-dot { transform: scale(1.35); }
.map-pin.is-on .map-dot {
  background: var(--brand-deep, var(--brand));
  transform: scale(1.5);
}
/* The name shows on hover, on focus and while chosen. Twenty-four
   labels at once is a wall of text over a small country. */
.map-tag {
  position: absolute; left: 50%; bottom: 100%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  background: var(--ink); color: #fff;
  font-size: .75rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 6px;
  opacity: 0; transition: opacity .12s ease;
  pointer-events: none;
}
.map-pin:hover .map-tag,
.map-pin:focus-visible .map-tag,
.map-pin.is-on .map-tag { opacity: 1; }
.map-pin.is-on { z-index: 3; }
.map-pin:hover, .map-pin:focus-visible { z-index: 4; }

.map-pick {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 1.25rem; box-shadow: var(--shadow);
}
.map-pick h3 { margin: 0 0 .25rem; }
.map-pick .note { margin: 0 0 .75rem; }
.map-note { color: var(--ink-soft); font-size: .85rem; margin: .6rem 0 0; }


/* HIDDEN LABELS TAKE NO ROOM (demo walk, 375 wide): at opacity 0 every
   pin's name still counted as layout, and those near the edges made the
   whole finder page 455px wide on a phone -- it scrolled sideways. Out
   of the layout until shown, and the frame clips sideways as a backstop
   for a shown label at the coast. */
.map-tag { display: none; }
.map-pin:hover .map-tag,
.map-pin:focus-visible .map-tag,
.map-pin.is-on .map-tag { display: block; }
.map-frame { overflow-x: clip; }