/* ============================================================
   SEARCH OVERLAY — full-screen search dropdown chrome.

   Lifted verbatim from canon `flibbr-design-mockup-final-homepage.html`
   (lines 1429–1545 of canon CSS) at v0.5.51.

   The overlay is a fixed-position dialog that slides in from the
   top-edge when #search-trigger (in site-header.php) or
   .nav-drawer-search (in site-nav-drawer.php) is clicked. Both
   triggers declare `aria-controls="search-overlay"`.

   Behaviour is in `assets/js/search-overlay.js` — open/close,
   focus trap, Esc-to-close, body-scroll lock. The IIFE pattern
   matches site-nav-drawer.js (which itself comments that it
   "mirrors search-overlay IIFE from canon homepage").

   Form submission: in canon HTML, action="#" + onsubmit="return false;"
   (mockup-only). Theme part `template-parts/search-overlay.php`
   submits to home_url('/') with name="s" — standard WP search.

   Scope of this file:
     - .search-overlay              : container chrome (fixed inset-0)
     - .search-overlay.is-open      : open-state transitions
     - .search-overlay-bar          : top bar with mark + close
     - .search-overlay-mark         : "Flibbr®" wordmark on bar
     - .search-overlay-close        : close button (cross icon)
     - .search-overlay-body         : centred content well
     - .search-overlay-form         : the search input row
     - .search-glyph                : magnifier in front of input
     - .search-overlay-input        : the actual <input type="search">
     - .search-suggestions          : suggested-searches row below
   ============================================================ */

  .search-overlay {
    position: fixed; inset: 0;
    background: var(--paper);
    z-index: 100;
    /* hidden state */
    opacity: 0; visibility: hidden;
    transform: translateY(-12px);
    transition:
      opacity     var(--motion-duration-content) var(--motion-ease-content),
      transform   var(--motion-duration-content) var(--motion-ease-content),
      visibility  0s linear var(--motion-duration-content);
    display: flex; flex-direction: column;
  }
  .search-overlay.is-open {
    opacity: 1; visibility: visible;
    transform: translateY(0);
    transition:
      opacity     var(--motion-duration-content) var(--motion-ease-content),
      transform   var(--motion-duration-content) var(--motion-ease-content),
      visibility  0s linear 0s;
  }
  .search-overlay-bar {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--rule-soft);
    padding-block: var(--s-4);
  }
  .search-overlay-mark {
    font-family: var(--serif); font-weight: 600;
    font-size: 18px; color: var(--ink-quiet);
    letter-spacing: -0.005em;
  }
  .search-overlay-mark em { font-style: italic; font-weight: 400; }
  .search-overlay-close {
    background: transparent; border: 0; padding: var(--s-2);
    color: var(--ink-quiet); cursor: pointer; line-height: 0;
    border-radius: 1px;
    transition: color var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .search-overlay-close:hover { color: var(--ink); }
  .search-overlay-close svg { display: block; width: 22px; height: 22px; }

  .search-overlay-body {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    padding-block: var(--s-9) var(--s-7);
  }
  .search-overlay-form {
    width: 100%;
    max-width: var(--measure);
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s-3);
    display: flex; align-items: center; gap: var(--s-3);
  }
  .search-overlay-form svg.search-glyph {
    width: 22px; height: 22px;
    color: var(--ink-quiet);
    flex-shrink: 0;
  }
  .search-overlay-input {
    flex: 1;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.625rem, 1.05rem + 1.6vw, 2.25rem); /* matches t-display-2 */
    line-height: 1.18;
    color: var(--ink);
    background: transparent;
    border: 0; outline: 0;
    padding-block: var(--s-2);
  }
  .search-overlay-input::placeholder {
    color: var(--ink-quiet);
    font-style: italic;
    opacity: 1; /* normalise across browsers */
  }
  .search-overlay-input:focus { outline: 0; }

  .search-suggestions {
    width: 100%;
    max-width: var(--measure);
    margin-top: var(--s-5);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s-3) var(--s-4);
  }
  .search-suggestions .label {
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-quiet);
  }
  .search-suggestions a {
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    color: var(--ink-soft); text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition:
      color var(--motion-duration-ui) var(--motion-ease-ui),
      border-color var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .search-suggestions a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink-quiet);
  }

  @media (max-width: 880px) {
    .search-suggestions a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding-top: 12px;
      padding-bottom: 12px;
      box-sizing: border-box;
    }
  }

  @media (max-width: 540px) {
    .search-overlay-body { padding-block: var(--s-7) var(--s-5); }
    .search-suggestions { gap: var(--s-2) var(--s-3); }
  }

  /* reduced motion: collapse all overlay transitions to instant. */
  @media (prefers-reduced-motion: reduce) {
    .search-overlay,
    .search-overlay.is-open {
      transition: none;
    }
  }