/* ============================================================
   search.css — the header search overlay + the results template
   (search.php).
   ------------------------------------------------------------
   MOBILE-FIRST. Base styles target the 390px artboard; every
   media query is min-width. Do not add max-width overrides.

   NO DESIGN EXISTS FOR EITHER SURFACE. The prototype's search
   control is a placeholder toast and the design set has no
   results page, so nothing here is traced to a design file. It is
   instead assembled out of decisions the design ALREADY made, so
   that a designer replacing it later changes values, not
   structure:

     overlay geometry  = the modal's (global.css .m434-modal) —
                         full-bleed sheet below sm, centered card
                         at sm, 4px accent rule across the top.
     result cards      = .case-card (components.css), the same
                         cell posts_feed and case_study_cards use.
     "ways forward"    = the mobile nav overlay's list treatment
                         (.m434-navmenu__list), so a dead end
                         still looks like the site.

   Colors come from tokens.css. Never hardcode one here.
   Accent TEXT is --m434-accent-text, never --red (F-16).
   ============================================================ */

/* ============================================================
   1. The overlay
   ============================================================ */

/* z-index sits between the nav overlay (300) and the modal (400).
   The three are mutually exclusive in practice — assets/js/search.js
   closes the nav overlay before opening this, and the modal is the
   only thing that may cover it — but the order still has to be
   stated or a stacking accident decides it. */
.m434-searchpanel {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
}
.m434-searchpanel.is-open { display: block; }

/* Full-bleed sheet below sm. 100dvh, not 100vh: mobile Safari's
   dynamic toolbar makes 100vh taller than the visible viewport, which
   pushes the submit button under the URL bar. */
.m434-searchpanel__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Full-bleed 4px accent rule — the modal's signature, repeated so the
   two overlays read as one family. */
.m434-searchpanel__inner::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--red);
  flex-shrink: 0;
}

.m434-searchpanel__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

/* Fixed size, deliberately not the responsive h2 ramp — same reasoning
   as .m434-modal__title: the sheet is a constant-width card at sm+, so
   a heading that grew with the viewport would wrap against the close
   button exactly where the sheet stops growing. */
.m434-searchpanel__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* Optical inset that keeps the 44x44 hit target .icon-btn defines. */
.m434-searchpanel__close { margin: -8px -8px 0 0; }

.m434-searchpanel__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px calc(28px + env(safe-area-inset-bottom));
}

.m434-searchpanel__hint {
  margin: 14px 0 0;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ============================================================
   2. The field — shared by the overlay and the results page
   ============================================================ */

.m434-search-form {
  display: grid;
  gap: 12px;
}

.m434-search-field {
  width: 100%;
  height: 56px;                 /* M: controls inside an overlay are 56px */
  padding: 0 14px;
  font-size: 16px;              /* 16px minimum blocks iOS zoom-on-focus */
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--m434-input-border);
  border-radius: 0;
  /* Safari renders type="search" as a rounded pill and adds its own
     decorations; this design has no border-radius anywhere. */
  -webkit-appearance: none;
  appearance: none;
}
.m434-search-field::-webkit-search-decoration,
.m434-search-field::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Placeholder text is TEXT: 1.4.3 applies to it at the field's own
   computed 16px/400, so the threshold is 4.5:1. --slate #6b7280 is
   4.83:1 on #ffffff but only 4.43:1 on --bg-soft #f4f5f7, which is
   the fill this very rule's `background` sets two declarations up —
   so the flat token failed on the only ground it is ever painted on.
   --m434-slate-strong #4b5563 is 6.93:1 there. (tokens.css already
   records the same #6b7280 arithmetic for --m434-slate-mute, and
   global.css declines --slate as --m434-muted-ink for this reason;
   this was the one place the sweep did not reach.)

   A LITERAL surface token, not --m434-muted-ink: that one is
   surface-adaptive and flips to rgba(255,255,255,.8) inside a dark
   band, whereas the field fill here is --bg-soft unconditionally, so
   the ground never changes and an adaptive token could only get it
   wrong. `opacity: 1` stays — Firefox dims placeholders otherwise and
   would undo the ratio. */
.m434-search-field::placeholder { color: var(--m434-slate-strong); opacity: 1; }

/* The border shift is a REINFORCEMENT of the global :focus-visible ring,
   not a replacement — outline is deliberately left alone here. The
   `outline: none` + border-recolour pattern used elsewhere in the theme
   trades a 3:1 focus indicator for a ~1.4:1 one. */
.m434-search-field:focus-visible { border-color: var(--red); }

/* ============================================================
   3. The results page
   ============================================================ */

.m434-search__summary {
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--m434-slate-strong);
  margin: 4px 0 24px;
}
.m434-search__term {
  font-weight: 700;
  color: var(--ink);
  /* A pasted query can be one unbroken 300-character token; without this
     it forces a horizontal scrollbar on the whole page. */
  overflow-wrap: anywhere;
}

/* No justify-self on the button: as a stretched grid item it is full width on
   phones — the same shape .btn-block gives every other primary button below sm —
   and the `1fr auto` column at sm sizes it to its label without further help. */
.m434-search__form {
  max-width: var(--m434-measure);
  margin: 0 0 32px;
}

/* One column on phones; the same 1 -> 2 -> 3 steps components.css gives
   .case-card grids, so a results page and a posts feed line up. NOT
   nested inside .wrap as a direct child — `.wrap:has(> .case-card)` in
   components.css would then claim the layout. */
.m434-search__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* .case-card styles the cell (ring, hover lift, media, tag, arrow).
   Only the two things it has no slot for are authored here. */
.m434-search__result-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}
.m434-search__excerpt {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--m434-slate-strong);
  margin: 0;
}

/* ---------- Empty / no-match state ---------- */
.m434-search__empty { max-width: var(--m434-measure); }
.m434-search__empty h2 { margin: 0 0 12px; }
.m434-search__empty p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--m434-slate-strong);
}

.m434-search__ways {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.m434-search__ways-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 8px;
}
.m434-search__waylist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.m434-search__waylist a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;             /* M: nav-style rows are 56px */
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
/* 19px/700 is 14.25pt bold — WCAG large text, so 3:1 applies and
   --red-dark's 4.10:1 passed. Pointed at the shared hover token so the
   overlay, the header, the footer and the block links all move as one
   and none of them can drift back under 4.5:1 if the size changes. */
.m434-search__waylist a:hover { color: var(--m434-link-ink-hover); }
.m434-search__waynum {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--m434-slate-mute);
}

/* ---------- Pagination ----------
   the_posts_pagination() emits core's own markup:
     nav.navigation.pagination > h2.screen-reader-text + div.nav-links
   The h2 is a real heading with no styles behind it in this theme, so
   it would render as a visible 26px "Search results pages" line. The
   visually-hidden rule is scoped rather than declared globally because
   .screen-reader-text is not this file's class to own. */
.m434-search-pagination {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.m434-search-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.m434-search-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.m434-search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;              /* M: 44x44 minimum hit target */
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  box-shadow: var(--m434-rule-inset);
}
.m434-search-pagination a.page-numbers:hover {
  background: var(--m434-hover-light);
  color: var(--ink);
  box-shadow: var(--m434-rule-accent);
}
.m434-search-pagination .page-numbers.current {
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
}
.m434-search-pagination .page-numbers.dots {
  box-shadow: none;
  color: var(--slate);
}

/* box-shadow-as-border vanishes in Windows High Contrast, which would
   leave the pager as bare numerals. Same fix global.css applies to the
   outline buttons. */
@media (forced-colors: active) {
  .m434-search-pagination .page-numbers { border: 1px solid ButtonText; }
}

/* ============================================================
   sm — 480px. The overlay becomes a centered card, exactly as the
   modal does at this breakpoint (M).
   ============================================================ */
@media (min-width: 480px) {
  .m434-searchpanel { display: none; padding: 24px; }
  .m434-searchpanel.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .m434-searchpanel__inner {
    position: relative;
    inset: auto;
    width: min(640px, 92vw);
    height: auto;
    max-height: 88vh;
    box-shadow: inset 0 0 0 1px var(--m434-line-4), var(--shadow-lg);
  }

  /* Field and button side by side once there is room for both. */
  .m434-search-form { grid-template-columns: 1fr auto; align-items: start; }
  .m434-search-form .btn { min-height: 56px; }
}

/* ============================================================
   md — 768px. Two result columns.
   ============================================================ */
@media (min-width: 768px) {
  .m434-search__results { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   lg — 1024px. Three result columns, matching the posts feed.
   ============================================================ */
@media (min-width: 1024px) {
  .m434-search__results { grid-template-columns: repeat(3, 1fr); }
  .m434-search__result-title { font-size: 19px; }
}

/* ============================================================
   5. The admin bar
   ------------------------------------------------------------
   `.m434-searchpanel` is `position: fixed; inset: 0; z-index: 350`,
   and #wpadminbar is `z-index: 99999`, so the bar painted over the
   panel's top strip — which is where `.m434-searchpanel__close` lives.
   Measured at 390px logged in before this rule: the close button
   occupied y 14-58 and elementFromPoint at its center returned
   `img.avatar.avatar-26.photo`, the admin bar's avatar.

   This is the search half of the pattern global.css section 7 sets up
   for `.m434-navmenu` and `.m434-modal`; the full reasoning, the
   601/783 provenance and the two custom properties are documented
   there and not repeated. The short version:

     default (<601px)  the bar is `position: absolute` and scrolls away
                       with the page, so the panel stays full-bleed and
                       is raised above it (350 + 100000, keeping its
                       place between the nav overlay and the modal).
     >= 601px          the bar is fixed and docked, so the panel starts
                       below it instead and z-index returns to 350 —
                       the bar's own dropdowns hang down into the
                       panel's area and must stay on top.

   Moving `.m434-searchpanel` rather than padding
   `.m434-searchpanel__bar` covers both layouts with one declaration:
   the full-bleed sheet below 480px, and the centered card above it,
   whose centering box now excludes the bar.

   It lives here rather than in global.css because the panel's base
   rules do, and search.css loads after global.css — a rule of equal
   specificity split across the two files would be decided by enqueue
   order instead of by intent.
   ============================================================ */

body.admin-bar .m434-searchpanel { z-index: 100350; }

/* 601 is WordPress's admin-bar breakpoint, NOT a design breakpoint.
   See global.css section 7 before touching it. */
@media (min-width: 601px) {
  body.admin-bar .m434-searchpanel {
    top: var(--m434-adminbar-offset);
    z-index: 350;
  }
}