@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/map.css
   The map page — templates/views/map.php, assets/js/map.js
   (2.6.1, DEV_PLAN_Stage3 §4.2)
   ------------------------------------------------------------
   Ben's choices (22–23 October 2026, the boards):
     - our own outline with a dot per review, and a panel with
       "Show the map", until the visitor clicks — no Google;
     - pins style A: a drop with an icon (a van for a review, a
       book for a post), in the reviews green / posts blue; a
       picked pin grows and gets the GOLD OUTLINE ("selected"
       everywhere on this site);
     - groups: a white circle with the count in a ring split
       posts blue / reviews green;
     - the popup is the review card's 'popup' shape
       (review_card.css) — in Google's InfoWindow on a computer,
       in a sheet from the bottom on a phone.
   The colours read the site's tokens (--reviews-mid,
   --journal-mid, --mwd-gold — header_footer_v2.css).

   ⚠ STATES ARE CLASSES on .map-page (map.js): .is-loading,
     .is-live. Never the hidden attribute.
   ⚠ .js / .no-js come from <html> (the layout's first line).

   2.6.1.2: the posts — blue dots, the post legend, the GeoNames
   credit.
   2.6.3 (Ben, 24 Oct): the switch, Posts | Reviews — one kind
   at a time. The side is a class on the section
   (.map-page--posts / --reviews, set by the page and by map.js);
   it slides the switch's thumb, colours it, and picks the
   legend's line. Previous file: "map - v2 (pre-2.6.3).css".
   ============================================================ */

.map-page { padding: 0 0 4rem; }
.map-page__wrap { max-width: 1100px; }   /* the map tone's width — the title above lines up (header_footer_v2.css) */

.map-page__intro {
  max-width: 43.2em;
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.map-page__filter { margin: 0 0 1rem; }
/* 2.7.3.4 — the Year and Country buttons (components/filter_picks.php, filter_bar.css): side by side,
   about the width of the switch and a half on a computer; the full width on a phone. Previous file:
   "map - (pre-2.7.3.4).css". */
.map-page__picks .filter-picks__row { max-width: 520px; }
.map-page__picks .filter-bar__toggle.filter-picks__pick { min-height: 52px; }
.map-page__picks .filter-picks__value { font-size: .95rem; }

/* ------------------------------------------------------------
   The switch — Posts | Reviews (2.6.3). Two links in a white
   pill, the filter bar's height; a thumb slides under the
   current one, in that side's colour, with white text on it.
   Equal halves (the grid), so the thumb is half the pill.
   It is its own control, not a second filter (filter_bar.css
   is the one filter pattern).
------------------------------------------------------------ */
.map-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 .9rem;
  padding: 3px;
  border: 1px solid #cfd6e1;
  border-radius: 999px;
  background: #fff;
}
.map-switch::before {   /* the thumb */
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--journal-mid, #0861c4);
  transition: transform .2s ease, background-color .2s ease;
}
.map-page--reviews .map-switch::before {
  transform: translateX(100%);
  background: var(--reviews-mid, #14731c);
}
.map-switch__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 999px;
  color: #394150;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
}
.map-switch__option:not(.is-current):hover { color: var(--mhl-blue, #1657aa); }
.map-switch__option.is-current { color: #fff; }
.map-switch__option:focus-visible {
  outline: 3px solid var(--mhl-blue, #1657aa);
  outline-offset: 2px;
}
.map-switch__count { font-size: .86em; font-weight: 400; opacity: .8; }

/* A country with nothing on the current side — map.js marks its item (the row's gaps close up) */
.map-page .filter-bar li.is-empty { display: none; }

/* ------------------------------------------------------------
   The box — our outline and the panel, then Google's map
------------------------------------------------------------ */
.map-box {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #e4eaf4;   /* the outline's sea */
  box-shadow: 0 0 0 1px #dfe4ec;
}

.map-box__placeholder { position: relative; }

/* The outline and its dots share ONE box, so the dots stay on their places whatever the panel
   does (the panel moves under the outline on smaller screens). */
.map-box__picture { position: relative; }
.map-box__outline {
  display: block;
  width: 100%;
  height: auto;
}
.map-box__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-box__dot {
  r: 6px;   /* in the outline's units (1200 wide); the attribute says the same for old browsers */
  fill: var(--reviews-mid, #14731c);
  stroke: #fff;
  stroke-width: 1.5;
}
.map-box__dot--post { r: 5px; fill: var(--journal-mid, #0861c4); }   /* 2.6.1.2 — a post; a touch smaller, the reviews stay on top */
.map-box__dot.is-out { display: none; }   /* another country picked in the filter */
/* 2.6.4 — the review a review page's "On our map" picked (?review=): gold and larger, drawn last so
   on top. Previous file: "map - v3 (pre-2.6.4).css". */
.map-box__dot.is-picked { r: 10px; fill: var(--mwd-gold, #d7a93b); stroke-width: 2.5; }

/* The panel sits in the top-right corner — north-east Europe, where there are few pins — so the
   dots stay in sight; no veil over them. */
.map-box__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.25rem;
  pointer-events: none;   /* the outline under it stays as it is; the card takes the clicks */
}
.map-box__card {   /* compact: over the outline it must hide as few dots as it can */
  pointer-events: auto;
  width: 100%;
  max-width: 350px;
  box-sizing: border-box;
  padding: 1.35rem 1.5rem 1.25rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
  text-align: center;
}
.map-box__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto .7rem;
  border-radius: 50%;
  background: linear-gradient(105deg, #0a3a40 0%, #0e5960 48%, #1b8187 100%);   /* the map's band (.mwd-hero--tone-map) */
  color: #fff;
}
.map-box__icon svg { width: 22px; height: 22px; }
.map-box__title {
  margin: 0 0 .4rem;
  font-size: 1.25rem;
  line-height: 1.3;
}
.map-box__text,
.map-box__nojs {
  margin: 0 0 1rem;
  font-size: .9rem;
  line-height: 1.55;
}
.map-box__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1.25rem;
  margin: .8rem 0 0;
  font-size: .88rem;
}
.map-box__policy { color: #566275; }

/* 2.7.4.4 — the map's option B (DEV_PLAN_Stage3 §4.4): the tick under "Show the map" */
.map-box__always {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: .75rem 0 0;
  color: #566275;
  font-size: .85rem;
  line-height: 1.4;
  cursor: pointer;
}
.map-box__always input { margin: 0; flex: none; }

/* JavaScript on or off (<html>, the layout's first line) */
.js .map-box__nojs   { display: none; }
.no-js .map-box__show,
.no-js .map-box__always { display: none; }
.map-page.is-loading .map-box__show { cursor: progress; }

/* Google's map — shown once it is there */
.map-box__canvas { display: none; }
.map-page.is-live .map-box__placeholder { display: none; }
.map-page.is-live .map-box__canvas {
  display: block;
  aspect-ratio: 1200 / 680;   /* the outline's shape, so nothing jumps */
  min-height: 420px;
}

/* ------------------------------------------------------------
   The pins (style A) — the content of Google's markers, built by
   map.js. Google puts a marker's bottom centre on its place, so
   the drop's tip sits on it.
------------------------------------------------------------ */
.map-pin {
  line-height: 0;
  cursor: pointer;
  filter: drop-shadow(0 2px 2px rgba(16, 24, 40, .35));
  transform-origin: 50% 100%;
  transition: transform .15s ease;
}
.map-pin:hover    { transform: scale(1.12); }
.map-pin.is-picked { transform: scale(1.28); }
.map-pin__drop {
  stroke: #fff;
  stroke-width: 1.6;
}
.map-pin--review .map-pin__drop { fill: var(--reviews-mid, #14731c); }
.map-pin--post .map-pin__drop   { fill: var(--journal-mid, #0861c4); }
.map-pin.is-picked .map-pin__drop {
  stroke: var(--mwd-gold, #d7a93b);
  stroke-width: 2.6;
}
.map-pin__icon {
  fill: none;
  stroke: #fff;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-pin__wheel { fill: #fff; }

/* Groups — the ring's split is set by map.js (style.background) */
.map-group {
  display: flex;
  width: 34px;
  height: 34px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--reviews-mid, #14731c);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .3);
  cursor: pointer;
  transform: translateY(50%);   /* centred on its place, not standing on it */
}
.map-group--m { width: 40px; height: 40px; }
.map-group--l { width: 46px; height: 46px; }
.map-group__count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  color: #1d2433;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

/* ------------------------------------------------------------
   The popup on a computer — inside Google's InfoWindow
   ⚠ The two !important rules are the file's only ones: Google
     writes the InfoWindow's padding and its inner box's overflow
     and max-height inline, which nothing else can out-rank.
------------------------------------------------------------ */
.map-page .gm-style .gm-style-iw-c {
  padding: 0 !important;
  border-radius: 14px;
}
.map-page .gm-style .gm-style-iw-d {
  overflow: auto !important;
}
.map-popup {
  position: relative;
  width: 300px;
  max-width: 100%;
}
.map-popup__close,
.map-sheet__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: #1d2433;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .2);
  cursor: pointer;
}
.map-popup__close:focus-visible,
.map-sheet__close:focus-visible {
  outline: 2px solid var(--journal-mid, #0861c4);   /* focus rings on light are the posts blue */
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   The popup on a phone — a sheet from the bottom of the map
------------------------------------------------------------ */
.map-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  max-height: 85%;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 -8px 24px rgba(16, 24, 40, .18);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
.map-sheet.is-open {
  transform: translateY(0);
  visibility: visible;
}
.map-sheet__close {
  width: 44px;   /* a finger's target */
  height: 44px;
}

/* ------------------------------------------------------------
   Under the map: the legend (once the map is there) and, with
   posts on the map, the GeoNames credit (CC BY 4.0 — always shown)
------------------------------------------------------------ */
.map-page__under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin: .8rem 0 0;
}
.map-legend {
  display: none;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #566275;
  font-size: .88rem;
}
.map-page.is-live .map-legend { display: flex; }
.map-page__credit {
  margin: 0 0 0 auto;
  color: #566275;
  font-size: .82rem;
}
.map-page__credit a { color: inherit; }

/* 2.7.4.4 — "Stop showing Google maps automatically": only while the choice is kept (.is-remembered,
   map.js), then its "Done" line (.is-forgotten). Classes, never the hidden attribute. */
.map-page__forget {
  display: none;
  margin: 0;
  color: #566275;
  font-size: .82rem;
}
.map-page.is-remembered .map-page__forget,
.map-page.is-forgotten .map-page__forget { display: block; }
.map-page__forget-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.map-page.is-forgotten .map-page__forget-btn { display: none; }
.map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.map-legend__pin       { fill: var(--reviews-mid, #14731c); }
.map-legend__pin--post { fill: var(--journal-mid, #0861c4); }
.map-legend__group {
  display: inline-flex;
  width: 18px;
  height: 18px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--reviews-mid, #14731c);
}
.map-legend__group span {
  flex: 1;
  border-radius: 50%;
  background: #fff;
}
/* One side at a time (2.6.3): its pin's line, and the groups' ring in its colour */
.map-page--posts .map-legend__item--review,
.map-page--reviews .map-legend__item--post { display: none; }
.map-page--posts .map-legend__group { background: var(--journal-mid, #0861c4); }

/* ------------------------------------------------------------
   Tablets and phones — the panel under the outline (over it, it
   would hide most of the dots), the dots bigger
------------------------------------------------------------ */
@media only screen and (max-width: 900px) {
  .map-box__panel {
    position: static;
    padding: 0;
  }
  .map-box__card {
    max-width: none;
    padding: 1.4rem 1.25rem 1.5rem;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Phones — and the map taller than it is wide */
@media only screen and (max-width: 640px) {
  .map-box__dot       { r: 11px; stroke-width: 2.5; }   /* about 3px on a 390px phone */
  .map-box__dot--post { r: 9px; }
  .map-box__dot.is-picked { r: 17px; stroke-width: 4; }   /* 2.6.4 */
  .map-page.is-live .map-box__canvas {
    aspect-ratio: auto;
    height: 72vh;
    min-height: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-pin,
  .map-sheet,
  .map-switch::before,
  .map-switch__option { transition: none; }
}