@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/search.css
   Search page — the results list (DEV_PLAN §14 step 6; rebuilt 2.4.5)
   ------------------------------------------------------------
   2.4.5 (DEV_PLAN_Stage3 §4.1 decision 10, Ben, 12–13 October
   2026): one list of posts and reviews, mixed by relevance, in
   compact rows (components/search_result.php) under the filter
   bar (filter_bar.css). The search box moved into the header
   (header_footer_v2.css "hero search"). Previous file:
   "search - v3 (pre-2.4.5).css".

   ⚠ The results sit in .blog-listing (blog_listing.css), for its
     1200px width and side padding — the header lines up with it —
     and for the pager on the single-type pages.
   ⚠ Hidden by CLASS (.is-hidden, set by search.js), never by the
     hidden attribute: a display rule would defeat [hidden].
   ⚠ Without JavaScript the section keeps .search--nojs: every
     loaded row shows and "Show more" is hidden.
   ⚠ Since 2.4.7 <html> says whether JavaScript is on (.js /
     .no-js, set first thing in the layout's <head>), so with
     JavaScript the page is drawn at 12 rows from the start
     instead of showing every loaded row until search.js runs.
   ============================================================ */

/* The type colours: the posts colour for posts (the post cards' bar),
   green for reviews (the reviews header). filter_bar.css reads them
   too. 2.5.2: posts went from navy #222d5a to the logo blue's middle
   stop (--journal-mid, header_footer_v2.css). 2.6.0 (DEV_PLAN_Stage3
   §4.16): reviews went from #2c7a56 / #1c573f to the reviews colour's
   middle and deep stops ("Grass", --reviews-*). Previous file:
   "search - v10 (pre-2.6.0).css". */
.search-page-section {
  --result-post:        var(--journal-mid, #0861c4);
  --result-review:      var(--reviews-mid, #14731c);
  --result-review-dark: var(--reviews-deep, #105816);   /* the label pill: white on it is 8.6:1 */
}

.search-results { padding-top:1.25rem; padding-bottom:3rem; }

/* The results line ("Showing 12 of 215 results…") is the filter bar's since 2.4.7.1:
   .filter-bar__status in filter_bar.css, shared with the listings. Its rule here,
   .search-status { margin:14px 0 0; color:#3f4652; }, moved there unchanged. */

/* ------------------------------------------------------------
   The list — one compact row per result
   The colour bar is the grid's first column, drawn by ::before;
   the photo is on the RIGHT (Ben), so the bar sits beside the
   label and title rather than against an image.
------------------------------------------------------------ */
.search-results__list {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:22px;
}

.search-result {
  display:grid;
  grid-template-columns:6px minmax(0, 1fr) 184px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(22,40,80,.06);
  overflow:hidden;
}
.search-result::before { content:""; background:var(--result-post); }
.search-result--review::before { background:var(--result-review); }

.search-result__body {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:14px 22px 16px 20px;
}

.search-result__meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 10px;
  margin:0;
  color:#566275;
  font-size:.8125rem;
  line-height:1.4;
}
.search-result__label {
  padding:3px 9px;
  border-radius:999px;
  background:var(--result-post);
  color:#fff;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.3;
  text-transform:uppercase;
}
.search-result--review .search-result__label { background:var(--result-review-dark); }
.search-result__rating { color:#1d2433; font-weight:700; }
.search-result__star { color:#c8961f; font-weight:400; }

.search-result__title {
  margin:0;
  font-size:1.19rem;
  line-height:1.3;
}
.search-result__title a {
  color:#1d2433;
  text-decoration:underline;
  text-decoration-color:#c3cbd8;
  text-underline-offset:3px;
}
.search-result__title a:hover { color:var(--mhl-blue, #1657aa); text-decoration-color:currentColor; }

.search-result__snippet {
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:#4a515c;
  font-size:.9rem;
  line-height:1.6;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.search-result__snippet strong { color:#171d2b; font-weight:700; }

.search-result__media {
  position:relative;
  display:block;
  min-height:122px;
  background:#e6e9f0;   /* shows while the photo loads, and when there is none */
  overflow:hidden;
}
.search-result__image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

@media only screen and (max-width:600px) {
  .search-result { grid-template-columns:5px minmax(0, 1fr) 92px; }
  .search-result__body { gap:4px; padding:10px 12px 12px; }
  .search-result__meta { gap:3px 8px; font-size:.75rem; }
  .search-result__label { padding:2px 8px; font-size:.65rem; }
  .search-result__title { font-size:1.03rem; }
  .search-result__snippet { font-size:.84rem; line-height:1.5; -webkit-line-clamp:3; line-clamp:3; }
  .search-result__media { min-height:112px; }
}

/* ------------------------------------------------------------
   "Show 12 more", and the end of the list
------------------------------------------------------------ */
.search-more { margin:32px 0 0; text-align:center; }
.no-js .search-more { display:none; }   /* was .search--nojs until 2.4.7: with JavaScript the button now shows from the first paint */

/* 2.4.7 — the first paint with JavaScript ON, before search.js has run (.search--nojs is
   still on the section): the page already looks as search.js will leave it — 12 rows, no
   end block — instead of every loaded row snapping shut. search.js then takes over with
   .is-hidden. Without JavaScript (.no-js) none of this applies.
   ⚠ 13 = the step + 1: the step is posts_per_page (12, site_vars). If that changes, change
   this too — the only cost of a mismatch is a brief flash.
   ⚠ The status line's server text ("Showing 50 of …") still reads the no-JS count until
   search.js rewrites it — words only, nothing moves. */
.js .search--nojs .search-results__list .search-result:nth-child(n+13),
.js .search--nojs .search-end { display:none; }

.search-end {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid #e3e7f0;
  text-align:center;
}
.search-end__done,
.search-end__more { margin:0; }
.search-end__done { color:#3f4652; }

.search-results__list .search-result.is-hidden,
.search-more.is-hidden,
.search-end.is-hidden,
.search-end__done.is-hidden,
.search-end__more.is-hidden { display:none; }

/* ------------------------------------------------------------
   Before a search, and when nothing matched — the intro copy
------------------------------------------------------------ */
.search-intro-wrap { padding-top:.5rem; }   /* .blog-listing's own 3rem top, less: the status line or the header sits above */
.search-intro { padding:1.5rem 0 1rem; max-width:800px; }
.search-intro h2 { margin:0; }
.search-intro .accent-line { margin:1rem 0 1.5rem; }

/* ------------------------------------------------------------
   "Too short" and "nothing matched" — 2.4.5.1 (Ben, 13 October 2026)
   The message box is core's (components/msg_box.php, base.css,
   skinned by the --msg-box-* tokens in main.css); only its place
   on this page is set here. Under "nothing matched" come the
   quick links, then the intro copy WITHOUT its heading and accent
   line ("ok lets try it": the heading repeated the box) — and,
   under the quick links, without its own "Browse all posts",
   which they already hold. The --msg and --quick classes come
   from views/search.php.
------------------------------------------------------------ */
.search-intro-wrap--msg { padding-top:1.25rem; }   /* the same top as the results */
.search-msg { max-width:800px; margin:0; }
.search-intro-wrap--msg .search-intro h2,
.search-intro-wrap--msg .search-intro .accent-line,
.search-intro-wrap--quick .search-intro .btn-row { display:none; }

.search-quick { max-width:800px; margin:1.5rem 0 0; }
.search-quick__label { margin:0 0 10px; color:#3f4652; font-weight:600; }
/* the chips: the filter options' look (filter_bar.css), so one pill style on the page */
.search-quick__chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.search-quick__chip {
  display:inline-flex;
  align-items:center;
  min-height:40px;
  box-sizing:border-box;
  padding:0 16px;
  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;
}
.search-quick__chip:hover { border-color:var(--mhl-blue, #1657aa); color:var(--mhl-blue, #1657aa); }
.search-quick__chip:focus-visible { outline:3px solid var(--mhl-blue, #1657aa); outline-offset:2px; }
.search-quick__browse { display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin:1.25rem 0 0; }

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

/* ------------------------------------------------------------
   The search tips — before a search only (2.4.8, Ben, 14 October
   2026): the intro, then these tips (content/search/guide.*),
   then the country shortcuts. Each example is a link that runs
   its search.
------------------------------------------------------------ */
.search-guide { max-width:800px; margin:0 0 .25rem; }
.search-intro-wrap--msg .search-guide { margin-top:1.5rem; }   /* 2.4.8.1: under the "nothing matched" box — the countries' own gap */
.search-guide h3 { margin:0 0 .6rem; font-size:1.15rem; }
.search-tips { margin:0 0 .75rem; padding:0 0 0 1.2rem; }
.search-tips li { margin:.35rem 0; }
.search-tips a { font-weight:600; }
.search-guide p { margin:0; color:var(--card-text, #555a60); }

/* ------------------------------------------------------------
   ⚠ UNUSED SINCE 2.4.5 — the old page's form and header (the
   search box is in page_hero now), its results count and its
   separate reviews block. Kept for Ben to decide; never delete
   unasked.
------------------------------------------------------------ */
.search-header {
  padding: 3rem 0 0;
}
.search-header .container,
.search-page-section > .container { max-width: 1200px; }
.search-header h1 { margin: 0; }
.search-header .accent-line { margin: 1rem 0 0; }
.search-form {
  display: flex;
  gap: .6rem;
  margin: 1.75rem 0 0;
  max-width: 640px;
}
.search-form__input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: .8rem 1rem;
  border: 1px solid #d9d5cc;
  border-radius: 8px;
  font: inherit;
}
.search-form__input:focus {
  outline: 2px solid var(--mhl-blue, #1657aa);
  outline-offset: 1px;
  border-color: transparent;
}
.search-form__button { white-space: nowrap; }
.search-results-count {
  margin: 1.25rem 0 0;
  color: #555a60;
}
.search-results--reviews { padding-bottom: 1rem; }
.search-results__heading { margin: 0 0 1.25rem; font-size: 1.25rem; }
@media only screen and (max-width: 600px) {
  .search-header { padding-top: 2rem; }
  .search-form   { flex-wrap: wrap; }
  .search-form__input { flex: 1 0 100%; }
}