/*rzm:s48*/
/*!
 * Mobile header search -- open/close styling.
 * Owner: rozhika-live-search-ui  (behaviour: the inline `rzls-msearch` module)
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 * ---------------------------------------------------------------------------
 * Until 2026-08-15 the mobile header search was styled by three authorities at
 * once -- Code Snippets snippet #10, rozhika-mega-menu/assets/css/mega-menu-rtl.css,
 * and premium-product-enhancer -- each overriding the others with !important.
 * Besides being unmaintainable, it was the single largest INP cost on the site.
 *
 * The old markup hung state off <body>:
 *
 *     body.search-is-open ... > li:not(.header-search-form) { display: none }
 *     body.search-is-open ... .has-icon *                   { visibility: visible }
 *
 * Chrome keys its style-invalidation set on the RIGHTMOST COMPOUND of a
 * selector. `li:not(...)` keys on the tag `li`, and `*` keys on everything, so
 * toggling one class on <body> forced a style recalculation of every <li> --
 * or every element -- in the document. Measured on live, mobile profile, 4x CPU
 * throttle, median of 15 toggles:
 *
 *     body.search-is-open           56 ms (home) / 74 ms (product) / 94 ms (category)
 *     same class, rules deleted    6.2 ms /  7.9 ms / 16.4 ms
 *     equivalent class on a leaf   0.0 ms
 *
 * First-party RUM over 5,448 real interactions confirmed the impact: this tap
 * was the #1 INP culprit at p75 456 ms, with 80% of taps over 200 ms and
 * presentation delay (i.e. style + layout + paint) the dominant phase.
 *
 * ---------------------------------------------------------------------------
 * THE INVARIANT THIS FILE MAINTAINS
 * ---------------------------------------------------------------------------
 * 1. State classes live on the elements that actually change:
 *       .rzls-msearch-open    on the search <li>
 *       .rzls-msearch-active  on the <ul class="header-bottom-nav">
 *    Never on <body> or <html>.
 * 2. Every selector's rightmost compound is a CLASS -- never a bare tag, never
 *    `*`, never `:not()` without a class. This keeps invalidation proportional
 *    to what changed.
 * 3. Only `display` (plus a compositor-only animation) flips on open/close.
 *    All geometry is static, so opening the search cannot relayout the page.
 * 4. Exactly one animation mechanism. The old code ran a CSS @keyframes
 *    animation AND jQuery .fadeIn()/.fadeOut() on the same element at the same
 *    time, so jQuery wrote inline opacity every frame while the keyframes tried
 *    to own the same property.
 *
 * RUCSS: `.rzls-msearch-*` never appears in server-rendered HTML, so WP Rocket's
 * Remove Unused CSS would tree-shake this file away. rozhika-live-search-ui.php
 * appends it to `rocket_usedcss_content` (the same seam the plugin already uses
 * for its JS-injected dropdown markup), so the rules survive on every page.
 */

@media screen and (max-width: 849px) {

  /* ---- Static geometry: never changes, so it never invalidates on toggle ---- */
  #wide-nav .header-bottom-nav.mobile-nav > li.header-search-form {
    display: none;
    position: relative;
    z-index: 30;
    width: 100%;
    max-width: 100%;
  }

  #wide-nav li.header-search-form .header-search-form-wrapper,
  #wide-nav li.header-search-form .searchform-wrapper,
  #wide-nav li.header-search-form .searchform,
  #wide-nav li.header-search-form .searchform-wrapper .flex-row {
    width: 100%;
    max-width: 100%;
  }

  /* Let the live-search dropdown escape the row instead of being clipped. */
  #wide-nav li.header-search-form,
  #wide-nav li.header-search-form .header-search-form-wrapper,
  #wide-nav li.header-search-form .searchform-wrapper {
    overflow: visible;
  }

  /* ---- Open ---------------------------------------------------------------- */
  #wide-nav .header-bottom-nav.mobile-nav > li.header-search-form.rzls-msearch-open {
    display: block;
  }

  /* ---- Closing (removed on animationend by the module) -------------------- */
  #wide-nav .header-bottom-nav.mobile-nav > li.header-search-form.rzls-msearch-closing {
    display: block;
    pointer-events: none;
  }

  /* ---- Siblings step aside ------------------------------------------------
     Hidden through a class the module stamps on them at init, so the
     invalidation set stays keyed on `.rzls-nav-item` rather than on `li`.    */
  #wide-nav .header-bottom-nav.mobile-nav.rzls-msearch-active > .rzls-nav-item {
    display: none;
  }

  /* The search field should feel like a real search bar once it takes the row. */
  #wide-nav li.header-search-form.rzls-msearch-open .searchform-wrapper {
    display: block;
  }

  #wide-nav li.header-search-form.rzls-msearch-open .search-field {
    width: 100%;
    min-height: 38px;
    font-size: 15px; /* >=16px avoids iOS zoom-on-focus; 15px matches the theme */
  }

  @keyframes rzls-msearch-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes rzls-msearch-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-8px); }
  }
}

/* Small phones: keep the field comfortable without overflowing the row. */
@media screen and (max-width: 420px) {
  #wide-nav li.header-search-form.rzls-msearch-open .search-field {
    min-height: 36px;
    font-size: 14px;
  }
}

@media screen and (max-width: 849px) and (prefers-reduced-motion: reduce) {
  #wide-nav .header-bottom-nav.mobile-nav > li.header-search-form.rzls-msearch-open,
  #wide-nav .header-bottom-nav.mobile-nav > li.header-search-form.rzls-msearch-closing {
  }
}