@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/filter_bar.css
   The filter bar — components/filter_bar.php (2.4.5)
   ------------------------------------------------------------
   ONE FILTER PATTERN for the site (DEV_PLAN_Stage3 §4.1, Ben,
   13 October 2026: "keep it consistent", "not sure about the
   gold"):
     - a WHITE pill showing the current choice and its count;
     - a PALE BLUE Filter button with the funnel icon, and a gold
       dot when a filter is on (2.4.7.1, Ben's option "C" at
       38px — it was solid blue and 44px, and looked bigger than
       the chips);
     - an inline panel of options in the listing chip style,
       where ONLY the current option is marked: a GOLD OUTLINE
       with dark gold text (2.4.7.1, Ben — it was gold-filled);
     - under it, the results line ("Showing 1–12 of 23 posts"),
       .filter-bar__status (2.4.7.1; search's line moved here).
   Built for the search page; the posts and reviews listings
   took it with decision 9 (2.4.6), adding the desktop quick
   row (bottom of this file).

   ⚠ The panel is closed by CLASS, never by the hidden
     attribute (a display rule defeats [hidden]).
   ⚠ JAVASCRIPT ON OR OFF comes from <html> since 2.4.7: the
     layout's first <head> line turns .no-js into .js before the
     page is drawn. With .js the panel starts CLOSED (no open-then-
     snap-shut flash while filter_bar.js loads); with .no-js it
     stays open and the Filter button, which would do nothing,
     hides. (Until 2.4.7 the bar carried .filter-bar--nojs, which
     only the script at the end of the page could remove.)
   ⚠ The trade-off: if filter_bar.js ever fails to load while
     .js is set, the panel stays shut and Filter does nothing —
     so this file, filter_bar.js and the layout go up together.
   ⚠ Contrast (2.4.7.1): the selected chip's #976b10 on white is
     4.7:1, and its weight (500 against the chips' light text)
     marks it without relying on colour alone; the button's
     #0f3f7d on #eef3fb is about 9:1. The pager's current page is
     now the only gold-FILLED "selected" state (Ben's call).
   ⚠ The type colours fall back to the search page's tokens
     (--result-post / --result-review, search.css).
   ============================================================ */

.filter-bar { margin:0; }

.filter-bar__row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.filter-bar__current {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  box-sizing:border-box;
  padding:0 16px;
  border:1px solid #cfd6e1;
  border-radius:999px;
  background:#fff;
  color:#20242b;
  font-size:.9rem;
  font-weight:500;
}
.filter-bar__count { font-size:.86em; font-weight:400; opacity:.75; }

.filter-bar__dot {
  display:inline-block;
  flex:0 0 auto;
  width:9px;
  height:9px;
  border-radius:50%;
}
.filter-bar__dot--post   { background:var(--result-post, #222d5a); }
.filter-bar__dot--review { background:var(--result-review, var(--reviews-mid, #14731c)); }	/* 2.6.0: the fallback is the reviews colour (was #2c7a56) — DEV_PLAN_Stage3 §4.16 */
/* The current pill's dot shows only for a type — "All results" has none. */
.filter-bar__current .filter-bar__dot:not(.filter-bar__dot--post):not(.filter-bar__dot--review) { display:none; }

/* The Filter button — Ben's "C" (2.4.7.1): pale blue, 38px (the chips are 40px), text at
   weight 500 and a 14px icon, so it no longer outweighs the chips. Until 2.4.7.1 it was the
   solid secondary blue, 44px, weight 600: "filter-bar - v3 (pre-2.4.7.1).css". */
.filter-bar__toggle {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:38px;
  box-sizing:border-box;
  padding:0 14px;
  border:1px solid #c9d8ef;
  border-radius:999px;
  background:#eef3fb;
  color:#0f3f7d;
  font:inherit;
  font-size:.85rem;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.filter-bar__toggle:hover {
  border-color:var(--mhl-blue, #1657aa);
  background:#e1eaf8;
}
/* Blue, as the chips' focus ring: the old light gold all but vanished on the pale button. */
.filter-bar__toggle:focus-visible { outline:3px solid var(--mhl-blue, #1657aa); outline-offset:2px; }
.filter-bar__icon { flex:0 0 auto; width:14px; height:14px; }
.filter-bar__on {
  display:none;
  position:absolute;
  top:5px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c89b3f;
  box-shadow:0 0 0 2px #eef3fb;   /* a ring in the button's colour, so the dot reads on the border */
}
.filter-bar__toggle.is-active .filter-bar__on { display:block; }
.no-js .filter-bar__toggle { display:none; }

.filter-bar__panel {
  max-width:640px;
  margin-top:10px;
  padding:16px 18px 18px;
  border:1px solid #e3e7f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 22px rgba(22,40,80,.08);
}
.js .filter-bar__panel:not(.is-open) { display:none; }

.filter-bar__heading {
  margin:0 0 8px;
  color:#566275;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.filter-bar__options + .filter-bar__heading { margin-top:16px; }

.filter-bar__options {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.filter-bar__option {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  box-sizing:border-box;
  padding:0 14px;
  border:1px solid #e3e7f0;
  border-radius:999px;
  background:#fff;
  color:#394150;
  font-size:.9rem;
  white-space:nowrap;
  text-decoration:none;
  transition:border-color .2s ease, color .2s ease;
}
.filter-bar__option:hover { border-color:var(--mhl-blue, #1657aa); color:var(--mhl-blue, #1657aa); }
.filter-bar__option:focus-visible { outline:3px solid var(--mhl-blue, #1657aa); outline-offset:2px; }
/* The selected option — a gold OUTLINE (Ben, 2.4.7.1; it was gold-filled). Everywhere the
   bar is: the panel, the listings' quick row, the search page. */
.filter-bar__option.is-current,
.filter-bar__option.is-current:hover {
  border-color:#c89b3f;
  background:#fff;
  color:#976b10;
  font-weight:500;
}

/* The results line under the bar — "Showing 1–12 of 23 posts" (2.4.7.1, Ben: "same as
   search"). One definition for the listings and search: until 2.4.7.1 search printed its own
   .search-status in the view and styled it in search.css.
   2.4.7.2 (Ben's tweak): smaller, italic, weight 500, in the panel heading's grey #566275 —
   the colour this component already uses (5.7:1 on the page; Ben's first pick #6a7382 was
   4.4:1, just under the 4.5:1 that text this size needs). */
.filter-bar__status {
  margin:14px 0 0;
  color:#566275;
  font-size:0.9em;
  font-style:italic;
  font-weight:500;
}

@media (prefers-reduced-motion: reduce) {
  .filter-bar__toggle,
  .filter-bar__option { transition:none; }
}

/* ------------------------------------------------------------
   The quick row — the listings, desktop only (2.4.6, decision 9)
   "All posts", the 4 with the most posts, then Filter; it takes
   the pill's place above 900px (the site's tablet break, as
   main.css's ful-hide/tab-hide). The options are the panel's
   chips, so the current one is gold here too (Ben, 13 Oct: the
   quick row counts as options). The search page has no quick
   row (.filter-bar--quick is absent), so nothing here touches it.
------------------------------------------------------------ */
.filter-bar__quick { display:none; }
@media only screen and (min-width:901px) {
  .filter-bar__quick {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
  }
  .filter-bar--quick .filter-bar__current { display:none; }
}

/* ------------------------------------------------------------
   The filter as SEVERAL BUTTONS — components/filter_picks.php
   (2.7.3.4, DEV_PLAN_Stage3 §4.22, Ben: the sidebar map box's
   Year and Country, and the map page "this way"). The same
   filter in another arrangement: a button per choice, each its
   own list (the panel and options above, unchanged). The buttons
   are .filter-bar__toggle in the board's shape — white, the
   label over the choice, a chevron; the gold outline + dot (the
   site's "selected") when the choice is not "All". Moved here
   from sidebar.css (2.7.3.2), where they were the box's alone;
   a caller sizes the row and the lists (sidebar.css, map.css).
------------------------------------------------------------ */
.filter-picks__row {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.5rem;
}
.filter-bar__toggle.filter-picks__pick {
  display:flex;
  gap:.5rem;
  min-width:0;
  min-height:48px;
  padding:.35rem .65rem .35rem .8rem;
  border:1px solid #cfd6e1;
  border-radius:12px;
  background:#fff;
  color:#20242b;
  text-align:left;
}
.filter-bar__toggle.filter-picks__pick:hover { border-color:var(--mhl-blue, #1657aa); background:#fff; }
.filter-bar__toggle.filter-picks__pick[aria-expanded="true"] { border-color:#9fb7dc; background:#eef3fb; }
.filter-bar__toggle.filter-picks__pick.is-active { border-color:#c89b3f; color:var(--mwd-gold-dark, #8a5a18); }
.filter-picks__pick .filter-bar__on { box-shadow:0 0 0 2px #fff; }
.filter-picks__text {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
}
.filter-picks__label {
  color:#566275;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.3;
  text-transform:uppercase;
}
.filter-picks__value {
  overflow:hidden;
  font-size:.9rem;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.filter-picks__chevron { flex:none; transition:transform .2s ease; }
.filter-picks__pick[aria-expanded="true"] .filter-picks__chevron { transform:rotate(180deg); }
.filter-bar__panel.filter-picks__panel { margin-top:.5rem; }
.filter-picks li.is-empty { display:none; }   /* an option with nothing in the current choice */

@media (prefers-reduced-motion: reduce) {
  .filter-picks__chevron { transition:none; }
}