/**
 * Location: /assets/css/header-responsive.css
 * Purpose:
 * - Responsive-only adjustments for Header (tablet/mobile).
 * - IMPORTANT: Desktop layout is controlled by /assets/css/header.css
 *   (grid centering + 700px search). This file MUST NOT override desktop.
 *
 * Related CSS:
 * - /assets/css/header.css (desktop + base header system)
 * - /assets/css/navbar.css (navbar styling)
 *
 * Linkage/Loader:
 * - Enqueued by: /inc/enqueue/frontend.php (global responsive layer)
 */

/* ======================================================
   SAFE GLOBALS (do not touch desktop layout)
====================================================== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
#page, .site, .stm-header, .stm-topbar, .stm-middlebar, .stm-navbar{
  max-width:100%;
  overflow-x:clip;
}
img, video, iframe, svg{
  max-width:100%;
  height:auto;
}

/* ======================================================
   TABLET + MOBILE ONLY (<=1024px)
   - Only responsive overrides here
====================================================== */
@media (max-width: 1024px){

  /* If any legacy CSS hides navbar, force visible */
  .stm-navbar{ display:block !important; visibility:visible !important; }
  .stm-header-nav{ display:block !important; }

  /* Smaller logo on tablet/mobile */
  .stm-mb-left__logo .custom-logo{ height:25px; width:auto; display:block; }

  /* Offcanvas then logo (supports wrappers) */
  .stm-mb-left__togglewrap{ order:1; }
  .stm-mb-left .stm-oc-toggle{ order:1; }
  .stm-mb-left__logo{ order:2; }

  /* Tablet/mobile: search should be full width (ONLY here) */
  .stm-mb-search{
    width:100%;
    max-width:none;
  }
  .stm-mb-search__inner{
    width:100% !important;
    max-width:none !important;
  }

  /* Optional: slightly tighter actions */
  .stm-mb-actions{ gap:10px; }
  .stm-mb-action--mobi{ display:inline-flex; }
}

/* ======================================================
   MOBILE ONLY (<=640px)
   - Middlebar wraps: Row1 left+right, Row2 search
====================================================== */
@media (max-width: 640px){

  .stm-middlebar__layout{
    flex-wrap:wrap;
    gap:10px;
  }

  .stm-middlebar__left{
    order:1;
    flex:0 0 auto;
  }
  .stm-middlebar__right{
    order:2;
    margin-left:auto;
    flex:0 0 auto;
  }
  .stm-middlebar__center{
    order:3;
    flex:0 0 100%;
    min-width:0;
  }

  /* Hide desktop-only helpers */
  .stm-mb-hide-mobi{ display:none !important; }
  .stm-mb-action--mobi{ display:inline-flex; }

  /* Navbar still visible under search */
  .stm-navbar{ display:block !important; }
  .stm-header-nav{ display:block !important; }
}