/* ==========================================================================
   S2D26 - mobile surface fixes
   --------------------------------------------------------------------------
   WHY EVERY SELECTOR HERE IS SO LONG
   ----------------------------------
   This file is enqueued at wp_enqueue_scripts priority 23, which prints it
   around position 9 in the head. s2d26/header.css is NOT enqueued - header.php
   prints it as a hardcoded <link> near the end (position 16). Both use
   !important, so on an equal-specificity tie the THEME wins, and no enqueue
   priority can change that.

   header.css carries two mobile search-modal blocks:
     @media (max-width: 620px)  ~line 1685   html body .s2d26-search-modal...
     @media (max-width: 767px)  ~line 908    .s2d26-search-modal #search...

   A desktop emulator is wider than 767px so neither applies there and these
   rules looked correct - while every real phone is <=620px and the theme
   overrode all of them. So specificity here is deliberately pushed ABOVE the
   theme's, with `html body` plus a repeated class, and load order stops
   mattering. Do not "simplify" these selectors back down.

   Loaded site-wide from s2d26/account-cabinet.php.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. "MOST POPULAR MOVIES" must stay on one line on a phone.
   --------------------------------------------------------------------------
   Copied from the fix that already solved the identical problem for
   "Most popular TV shows" (header.css, S2D_MOBILE_TV_ACCOUNT_SURFACE_FIX_20260916).
   Same properties, same clamp, same nowrap - only the body class differs.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  html body.page-template-archive-movies.s2d26-listing-h1-v4 .page-category
  .movies-list-wrap .psyplay-api-popular-block .psyplay-api-popular-title {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: clamp(19px, 5.9vw, 24px) !important;
    letter-spacing: -.045em !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
  }
}


/* --------------------------------------------------------------------------
   2. No sweep on touch. Desktop keeps it.
   --------------------------------------------------------------------------
   A tap leaves :hover applied until the next tap elsewhere, so the menu pill
   and the dropdown replay their one-shot sweep on every item the member
   touches. The pill background itself is the hover affordance and stays; only
   the animated highlight is switched off.
   -------------------------------------------------------------------------- */

@media (hover: none) {
  html body .s2d26-header--hover-3 .s2d26-header__menu > li:hover::after,
  html body .s2d26-header--hover-3 .s2d26-header__menu > li:focus-within::after {
    animation: none !important;
    opacity: 0 !important;
  }

  html body .s2d26-header__menu > li:hover > .sub-menu::before,
  html body .s2d26-header__menu > li:focus-within > .sub-menu::before {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   3. Search modal on a phone
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* 3a. The modal must never be taller than what the member can see, and it
     must be the only thing that scrolls.

     The theme sets height/min-height:100dvh with only 20px of bottom padding,
     while env(safe-area-inset-bottom) is 0 on Android. The last rows were
     rendered but sat underneath Chrome's bottom bar with nothing left to
     scroll, which reads as "it will not scroll to the end". The 56px cushion
     clears the browser bar and the gesture strip. */
  html body .s2d26-search-modal.s2d26-search-modal.s2d26-search-modal {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) 16px
             calc(56px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__panel {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* 3b. Pull the content up. The theme pushes the brand row down by 60px and
     then adds clamp(54px,12vh,96px) above the field - together that is what
     ate the list. */
  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__top {
    min-height: 44px !important;
    transform: none !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__brand,
  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__brand img {
    width: 132px !important;
    height: 36px !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal #search.s2d26-search-modal__search {
    margin: 10px 0 0 !important;
  }

  /* 3c. The underline belongs under the INPUT.

     The line is the form's border-bottom. On desktop the field and the submit
     button share a row, so it reads as the field's underline. On a phone the
     theme makes the form a single column, the button drops BELOW the field,
     and the border ends up below the button - level with the Advanced Search
     row, striking through it. Move the border onto the field itself. */
  html body .s2d26-search-modal.s2d26-search-modal #search
  #searchform.s2d26-search-modal__form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal #search
  #searchform input.s2d26-search-modal__input.search-input {
    height: 52px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--s2d26-modal-line) !important;
    font-size: 24px !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__advanced {
    margin-top: 14px !important;
  }

  /* 3d. Release the trend list from its own scroll box.

     The theme gives .s2dst-dropdown max-height:min(58vh,660px) plus
     overflow:auto, so the list scrolled inside itself and its last rows went
     under the browser bar. The modal scrolls instead, and the list is never
     clipped. */
  html body .s2d26-search-modal.s2d26-search-modal #search .s2dst-dropdown,
  html body .s2d26-search-modal.s2d26-search-modal #search .search-suggest {
    max-height: none !important;
    height: auto !important;
    margin-top: 14px !important;
    overflow: visible !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal #search
  .s2dst-dropdown .s2dst-groups {
    grid-template-columns: 1fr !important;
  }
}