@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/sidebar.css
   Sidebar boxes — shared by the post page and the homepage
   ------------------------------------------------------------
   Moved out of blog_post.css on 15 September 2026 so the homepage
   can use the same boxes (components/sidebar_*.php, post_sidebar.php).

   2.4.8.3: the blue box's text a little stronger, and the Subscribe box
   sticky on desktop (end of file). Previous: "sidebar - v3 (pre-2.4.8.3).css".

   2.6.5 (DEV_PLAN_Stage3 §4.18): the map box's real map and legend, the
   current country's chip, and the Subscribe box in cream. Previous:
   "sidebar - v7 (pre-2.6.5).css".
   2.6.5.1: the unused .sidebar-list rules (the Countries box) and
   --sidebar-button(-hover) removed; the Subscribe box's gold border.
   Previous: "sidebar - v8 (pre-2.6.5.1).css".

   ⚠ SELF-SUFFICIENT: every colour is a --sidebar-* property declared
   ON .sidebar-box itself, so a box renders correctly wherever it
   lands. A page re-points them from its own palette — blog_post.css
   maps its --post-* tokens, home.css its --home-* tokens. Never
   reference a page's tokens (--post-*, --home-*) in this file.
   ============================================================ */

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-box {
  --sidebar-accent:       var(--mwd-gold-dark, #a8843f);   /* box titles */
  --sidebar-link:         var(--sidebar-accent);
  --sidebar-text:         #3f4449;
  --sidebar-muted:        #6b7076;
  --sidebar-border:       #ebe8e1;
  --sidebar-radius:       var(--img-border-radius, 7px);

  padding: 1.25rem 1.4rem;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--sidebar-radius);
  background: #fff;
}
.sidebar-box__title {
  margin: 0 0 .9rem;
  color: var(--sidebar-accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Title with a "More" link beside it */
.sidebar-box__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .9rem;
}
.sidebar-box__head .sidebar-box__title { margin: 0; }
.sidebar-box__more {
  color: var(--sidebar-link);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}
.sidebar-box__more:hover { text-decoration: underline; }

.sidebar-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .62rem;
  letter-spacing: .06em;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   Buttons — the site's own since 2.4.1 (buttons.css)
   The boxes' buttons are now the site's main "btn" (Subscribe, travel advice) and
   secondary "btn btn-secondary" (Go, Open the full map), with btn--sm / btn--block.
   The .sidebar-btn family they used is retired. --sidebar-button and
   --sidebar-button-hover went in 2.6.5.1 (unused since 2.6.5, Ben: "remove").
------------------------------------------------------------ */

/* ------------------------------------------------------------
   Posts box — components/sidebar_top_posts.php
   2.4.4 (Ben, 12 October 2026): the post cards' look — the head in
   the posts colour (--tone-journal, header_footer_v2.css), 64px
   thumbnails, no rank numbers. Light gold on that navy is 5.3:1 or
   better; nothing blue goes in the head.
   Previous: "sidebar - v2 (pre-2.4.4).css".
   2.5.2 (Ben, 20 October 2026): the head is the logo blue, top-down
   from the DEEP end (--tone-journal-box), and "More" is white — light
   gold is 2.7:1 on it. Previous: "sidebar - v5 (pre-2.5.2).css".
   The "Read in" box is gone (post_sidebar.php); its .sidebar-list rules
   went in 2.6.5.1 with the Countries box.
------------------------------------------------------------ */
.sidebar-box--posts { padding: 0; overflow: hidden; }
.sidebar-box--posts .sidebar-box__head {
  align-items: center;
  margin: 0;
  padding: .85rem 1.25rem;
  background: var(--tone-journal-box, var(--tone-journal, #0861c4));   /* 2.5.2: the logo blue, top-down from the deep end */
}
.sidebar-box--posts .sidebar-box__title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
/* 2.7.0.02 (Ben, 31 October 2026): "More" is under the posts, no longer in the head — a .btn-txt
   (buttons.css) in a pale band with a rule above it, so it reads apart from the list. Previous:
   "_backups/css/sidebar - v9 (pre-2.7.0.02).css" (the head's white "More"). */
.sidebar-box--posts .sidebar-box__foot {
  padding: .75rem 1.25rem .85rem;
  border-top: 1px solid var(--sidebar-border);
  background: var(--page-bg, #f3f5f9);
}

.sidebar-rank { margin: 0; padding: .35rem 1.25rem .5rem; list-style: none; }
.sidebar-rank__item + .sidebar-rank__item { border-top: 1px solid var(--sidebar-border); }
.sidebar-rank__link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: .75rem 0;
  color: var(--sidebar-text);
  text-decoration: none;
}
.sidebar-rank__image {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #e6e9f0;   /* an item with no photo */
  object-fit: cover;
}
.sidebar-rank__title {
  display: block;
  color: #1d2433;
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
}
a.sidebar-rank__link:hover .sidebar-rank__title { color: var(--sidebar-link); }
.sidebar-rank__meta {
  display: block;
  margin-top: .2rem;
  color: #566275;   /* 6.2:1 on white; --sidebar-muted (#6b7076) is only 5.0:1, thin at this size */
  font-size: .78rem;
}

/* ------------------------------------------------------------
   Site reviews box — components/sidebar_reviews.php
   2.5.0 (DEV_PLAN_Stage3 §4.13): the reviews placed in a post. The
   posts box's look and list (above), with the head in the reviews'
   green. Previous: "sidebar - v4 (pre-2.5.0).css".
   2.6.0 (DEV_PLAN_Stage3 §4.16): the head reads --tone-reviews-box
   (header_footer_v2.css :root) — "Grass", top-down from the deep end,
   as the posts box's head reads --tone-journal-box. Until 2.6.0 it
   read --tone-reviews, which was not on :root, so its forest-green
   fallback showed. Previous: "sidebar - v6 (pre-2.6.0).css".
------------------------------------------------------------ */
.sidebar-box--reviews { padding: 0; overflow: hidden; }
.sidebar-box--reviews .sidebar-box__head {
  margin: 0;
  padding: .85rem 1.25rem;
  background: var(--tone-reviews-box, linear-gradient(180deg, #105816 0%, #14731c 45%, #188721 100%));
}
.sidebar-box--reviews .sidebar-box__title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar-review__stars {
  display: block;
  margin-top: .15rem;
  color: #d5d9e0;
  font-size: .85rem;
  letter-spacing: .05em;
  line-height: 1.2;
}
.sidebar-review__star.is-on { color: var(--mwd-gold, #d7a93b); }

/* ⚠ Unused since 2.4.4 — the box has no rank numbers. Kept for Ben to decide. */
.sidebar-rank__num {
  color: #c3c9d4;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

/* ------------------------------------------------------------
   Search — components/sidebar_search.php
------------------------------------------------------------ */
.sidebar-search { display: flex; gap: .5rem; }
.sidebar-search__input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: .65rem .8rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  font: inherit;
  font-size: .9rem;
}

/* ------------------------------------------------------------
   Map — components/sidebar_map.php
   2.6.5 (DEV_PLAN_Stage3 §4.18, Ben, 26 October 2026): THE REAL MAP — our outline with a dot
   per pin (components/map_view.php), in place of the hand-drawn illustration and its
   .sidebar-map__sea / __land / __route / __pin / __label rules. The posts' dots are the posts
   blue, a post's own pins the bright gold (the map page's "picked"), the reviews' the reviews
   green (MapBox::DOTS — posts for now). The legend repeats them, so the picture is hidden from
   screen readers. Previous file: "sidebar - v7 (pre-2.6.5).css".
------------------------------------------------------------ */
.sidebar-box--map { padding: 0; overflow: hidden; }
.sidebar-box--map .sidebar-box__head { padding: 1.25rem 1.4rem 0; }
.sidebar-map {
  display: block;
  background: #e4eaf4;   /* the outline's sea, under the drawing while it loads */
}
.sidebar-map__svg { display: block; width: 100%; height: auto; }
.sidebar-map__dot {
  fill: var(--journal-mid, #0861c4);
  stroke: #fff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.sidebar-map__dot--review { fill: var(--reviews-mid, #14731c); }
.sidebar-map__me {
  fill: var(--mwd-gold, #d7a93b);
  stroke: #fff;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.sidebar-map__body  { padding: 1rem 1.4rem 1.4rem; }

.sidebar-map__legend {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
}
.sidebar-map__key {
  --key: var(--journal-mid, #0861c4);
  --key-edge: var(--key);
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #566275;   /* 6.2:1 on white, as the posts box's meta */
  font-size: .85rem;
  line-height: 1.4;
}
.sidebar-map__key--review { --key: var(--reviews-mid, #14731c); }
.sidebar-map__key--me     { --key: var(--mwd-gold, #d7a93b); --key-edge: var(--mwd-gold-dark, #8a5a18); }
.sidebar-map__key::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--key);
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--key-edge);
}
.sidebar-map__key--me::before { width: 12px; height: 12px; }

/* 2.7.3.2 — THE BOX BY YEAR (DEV_PLAN_Stage3 §4.22, Ben; board "Map box by year"): a Year and a
   Country button under the title, each with its own list. Since 2.7.3.4 the buttons are the shared
   components/filter_picks.php (its look in filter_bar.css, .filter-picks — the map page has them
   too); this file only fits them to the box: its padding, the lists a little smaller. Hidden without
   JavaScript: the box is then the opening view (the dots the script would hide carry .is-off).
   filter_bar.css loads with this file on home, country and posts — AFTER it, hence the extra class.
   Previous files: "sidebar - (pre-2.7.3.2).css", "sidebar - (pre-2.7.3.4).css". */
.sidebar-map__filters { padding: 0 1.4rem .9rem; }
.no-js .sidebar-map__filters { display: none; }
.sidebar-map__filters .filter-bar__panel.filter-picks__panel { padding: .85rem .85rem 1rem; }
.sidebar-map__filters .filter-bar__options { gap: 6px; }
.sidebar-map__filters .filter-bar__option { min-height: 34px; padding: 0 11px; font-size: .8rem; }
.sidebar-map__dot.is-off,
.sidebar-map__me.is-off,
.sidebar-map__key.is-off { display: none; }

/* ⚠ UNUSED SINCE 2.7.3.2 — the map box's country chips (now the Country list); kept for Ben to
   decide. */
.sidebar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.sidebar-chip {
  display: inline-block;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: #eef2fa;
  color: var(--sidebar-link);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
}
a.sidebar-chip:hover { background: #dfe7f6; }
/* 2.6.5: the page's own country — the gold outline, "selected" everywhere on the site (the
   filters, the pager); its text the text gold. */
.sidebar-chip.is-current {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mwd-gold, #d7a93b);
  color: var(--mwd-gold-dark, #8a5a18);
  font-weight: 700;
}
a.sidebar-chip.is-current:hover { background: #fdf8ec; }

/* ------------------------------------------------------------
   Dark box — components/sidebar_advice.php
------------------------------------------------------------ */
.sidebar-box--dark {
  --sidebar-accent: var(--mwd-gold, #d7a93b);
  --sidebar-text:   #d9deea;
  --sidebar-border: #161b33;
  background: #161b33;
  color: var(--sidebar-text);
}
.sidebar-advice__intro {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.6;
}
.sidebar-advice__list { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.sidebar-advice__list li {
  position: relative;
  margin: .55rem 0;
  padding-left: 1.1rem;
  color: #fff;
  font-size: .9rem;
  line-height: 1.5;
}
.sidebar-advice__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mwd-gold, #d7a93b);
}

/* ------------------------------------------------------------
   Subscribe — components/sidebar_subscribe.php (a real form since 2.3.6.2)
------------------------------------------------------------ */
.sidebar-subscribe__form { margin: 0; }

/* The honeypot — shared by the sidebar boxes and the subscribe page (which loads this
   file for it). Off-screen by STYLESHEET, never by the hidden attribute or an inline
   style: a bot reads the markup, not the CSS (same rule as .reactions-prompt__hp). */
.subscribe-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sidebar-subscribe__intro {
  margin: 0 0 .9rem;
  color: var(--sidebar-muted);
  font-size: .95rem;
  line-height: 1.6;
}
.sidebar-subscribe__input {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 .75rem;
  padding: .65rem .8rem;
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  font: inherit;
}
.sidebar-subscribe__button { width: 100%; }
.sidebar-subscribe__note {
  margin: .6rem 0 0;
  color: var(--sidebar-muted);
  font-size: .8rem;
}

/* Feature variant — the Subscribe box on home, country, post and review pages.
   2.6.5 (DEV_PLAN_Stage3 §4.18, Ben, 26 October 2026: "Cream … more inviting/friendly for
   subscribers"): CREAM with a pale gold edge, ink text and the gold button, in place of the
   blue gradient (#1657aa → #3b83d8), which had come too close to the posts blue — and whose
   small print was 3.5–3.7:1. Ink on the cream is 14:1, the note 5.6:1. Post and review pages
   use this box too since 2.6.5 (they had the plain white one). The travel advice box stays
   navy (.sidebar-box--dark, Ben). Previous file: "sidebar - v7 (pre-2.6.5).css".
   2.6.5.1 (Ben, 26 October 2026: "try adding a border to the subscribe box"): a 2px gold border,
   the button's own gold, in place of the faint 1px #ecdcb0 edge. Previous file:
   "sidebar - v8 (pre-2.6.5.1).css". */
.sidebar-box--feature {
  border: 2px solid var(--mwd-gold, #d7a93b);
  background: #fbf5e6;
  color: #3f4449;
}
.sidebar-box--feature .sidebar-box__title {
  margin-bottom: .5rem;
  color: #1d2433;
  font-family: "Quicksand", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar-box--feature .sidebar-subscribe__intro { color: #3f4449; }
.sidebar-box--feature .sidebar-subscribe__input {
  border-color: #d8ccae;
  border-radius: 8px;
  background: #fff;
  color: #1d2433;
}
.sidebar-box--feature .sidebar-subscribe__input::placeholder { color: #6b7076; }
.sidebar-box--feature .sidebar-subscribe__note { color: #5b6270; }

/* Sticky on desktop — 2.4.8.3 (DEV_PLAN_Stage3 §4.1 decision 8, Ben: "yes sticky everywhere")
   The Subscribe box stays in view down the page once its sidebar has scrolled past: home,
   country, post and review pages. Only as the LAST box of a sidebar — a sticky box higher
   up would have the boxes under it slide up behind it.
   ⚠ It needs room to move: the sidebar must be as tall as the main column. The layouts set
     align-items:start, so home.css (.home-sidebar) and blog_post.css (.post-sidebar)
     stretch their sidebar back at this width.
   ⚠ And no ancestor may be a scroll container: core's .frame { overflow:hidden } was one,
     so main.css makes it overflow:clip.
   top = the desktop header once it turns fixed (.site-header.fixed, measured 55px at every
   width from 920 to 1440, 15 October 2026) + a gap. Short windows skip it, so the box is
   never cut off at the bottom: it needs about 400px (75 + the post page's 316px box), and
   520 still lets in a 1366×768 laptop once the browser's own bars have taken their share. */
@media only screen and (min-width: 901px) and (min-height: 520px) {
  .sidebar-stack > .sidebar-box--subscribe:last-child {
    position: sticky;
    top: calc(55px + 1.25rem);
  }
}