/* ===========================================================================
   map.css — the "where was this painted?" map.

   Its own file rather than a section of blocks.css, because the map is drawn
   in two places now: the block on an artwork page, and the whole-screen page
   at /map. Both are pulled in by whoever renders a map, so a page without one
   carries none of this.
   =========================================================================== */

/**
 * The map's own palette, in one place.
 *
 * map.js reads these off the page and falls back to the same values if they
 * are missing, so the islands, the roads and anything drawn beside the map —
 * the side panel's edge, for one — can all quote the same colour instead of
 * keeping private copies of it.
 */
:root {
  --map-land: #16232f;
  --map-stroke: #c9d6e2;
  --map-water: rgba(0, 0, 0, 0);
  --map-road: #4a6377;
  --map-road-minor: #33475a;
  --map-label: #b8c8d6;
}

/* The other blocks each set the room under their own heading; this one never
   did, and sat on the map. */
.b-map h2 {
  margin-bottom: 16px;
}

.b-map__canvas {
  /* MapLibre needs a height on the container or it renders nothing at all. */
  height: 420px;
  width: 100%;
  border: 1px solid var(--color-3);
  background: var(--color-1);
}
.b-map__fallback {
  padding: 20px;
  font-family: var(--font-family-1);
  color: var(--color-4);
}

/* The painting itself is the pin: no frame and no shadow, held in a square so
   every pin takes the same room on the map and fills it. */
.b-map__marker {
  width: 32px;
  height: 32px;
  cursor: default;
  /* Above the town names. The labels are added after the pins — they wait on
     their file to load — so without this they are painted over the paintings
     purely by document order. */
  z-index: 2;
  /* On the box as well as the painting, so the selected outline follows the
     same curve rather than drawing a square around a rounded picture. */
  border-radius: 3px;
}
.b-map__marker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
/**
 * On the map page each pin is a way into the painting it marks.
 *
 * The hover effect belongs to the image inside, never to the marker itself:
 * MapLibre positions a marker by writing `transform: translate(…)` onto it on
 * every frame, so a transition on that element's transform animates each of
 * those writes and the pins visibly trail the map as it is dragged. A
 * `transform` set here would lose to the inline one anyway.
 */
.b-map__marker--link {
  cursor: pointer;    /* the base rule says default; a link is not that */
}
.b-map__marker--link img {
  transition: transform 0.12s ease-out;
}
/* Hover only where there is a pointer to hover with. On a phone a tap leaves
   :hover stuck on whichever pin was last touched, and it stayed enlarged after
   its panel was closed. */
@media (hover: hover) {
  .b-map__marker--link:hover img { transform: scale(1.12); }
}
.b-map__marker--link:focus-visible img {
  transform: scale(1.12);
}
/* On a painting's own page there is one pin and it is the painting itself, so
   it can afford to be seen. The map page keeps the smaller size above: there
   are twenty-odd pins there, and they have to share the island. */
.b-map .b-map__marker {
  width: 56px;
  height: 56px;
}

/* The one whose painting is open in the panel. An outline rather than a border,
   so the painting keeps its size and does not shift as it is picked. */
.b-map__marker--on {
  outline: 2px solid var(--color-5);
}
/* A place to go rather than a painting: round, ringed in the site's orange,
   so the two kinds of pin read apart at a glance. */
.b-map__marker--place,
.b-map__marker--place img { border-radius: 50%; }
.b-map__marker--place { box-shadow: 0 0 0 2px var(--color-5); }
.b-map__marker--place.b-map__marker--on { outline: 0; box-shadow: 0 0 0 3px #fff; }
.b-map__marker--dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-5);
}

/* Town names. A dot marks the place, the name sits to its right. Neither takes
   the pointer, or dragging the map would stop wherever a label happened to be. */
.b-map__place {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 3px;
  font-family: var(--font-family-1);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--map-label, #b8c8d6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.b-map__place[hidden] { display: none; }
.b-map__place::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--map-label, #b8c8d6);
  flex: none;
}

/**
 * MapLibre's own zoom control, redrawn.
 *
 * Square, white on nothing, no shadow — and its + and − replaced outright,
 * because the ones it ships are a heavy rounded glyph baked into an image
 * that no amount of styling will thin down.
 */
.b-map .maplibregl-ctrl-group,
.mappage .maplibregl-ctrl-group {
  background: transparent;
  border: 1px solid var(--color-2);
  border-radius: 0;
  box-shadow: none;
}
.b-map .maplibregl-ctrl-group button,
.mappage .maplibregl-ctrl-group button {
  border-radius: 0;
  background: transparent;
}
.b-map .maplibregl-ctrl-group button + button,
.mappage .maplibregl-ctrl-group button + button { border-top: 1px solid var(--color-2); }

/**
 * The button element has to be named here. MapLibre's own icon rule is
 * `.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon`,
 * and anything shorter loses to it — quietly, leaving its heavy rounded plus
 * in place and this rule looking as though it does nothing.
 */
.b-map .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.mappage .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 9v11M9 14.5h11' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
.b-map .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
.mappage .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M9 14.5h11' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}

.b-map__frame { position: relative; }

/* In the map's bottom right corner — zoom has the top right. Opaque enough to
   read over the coastline and the roads, small enough not to cover them. */
.b-map__open {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(11, 21, 30, 0.85);
  border: 1px solid var(--color-2);
  border-radius: 3px;
  color: var(--color-2);
  font-family: var(--font-family-1);
  font-size: var(--font-size-4);
  line-height: 1.2;
  text-decoration: none;
}
.b-map__open:hover {
  background: var(--color-2);
  color: var(--color-1);
}

/* The same chevron the artwork page points back with, turned to point on. It
   follows the label's colour, so it inverts with the link on hover. */
.b-map__arrow {
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-right: 2px;
}

/* Straight under the map, not in MapLibre's corner and not below the button:
   it captions the thing above it. */
.b-map__credit {
  margin: 8px 0 0;
  font-family: var(--font-family-1);
  font-size: 12px;
  color: var(--color-4);
}

@media (max-width: 700px) {
  .b-map__canvas { height: 300px; }
  .b-map__marker { width: 26px; height: 26px; }
  .b-map .b-map__marker { width: 46px; height: 46px; }
  .b-map__place { font-size: 12px; }
}

/* A finger is not a cursor. 26px is a hard target to land and an easy one to
   miss into the map, which pans instead; 36 is about the smallest a thumb
   finds first time. The pin is drawn at that size rather than given an
   invisible margin, so what is tapped is what is seen. */
@media (pointer: coarse) {
  .mappage .b-map__marker { width: 36px; height: 36px; }
  .mappage .maplibregl-ctrl-group button { width: 36px; height: 36px; }
}
.b-map__open .b-map__arrow { width: 5px; height: 5px; }