/**
 * 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, .hdaf-header, .hdaf-topbar, .hdaf-middlebar, .hdaf-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 */
  .hdaf-navbar{ display:block !important; visibility:visible !important; }
  .hdaf-header-nav{ display:block !important; }

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

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

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

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

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

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

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

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

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

/* ======================================================
   Tablet/Mobile Header Vertical Balance
   - Desktop remains controlled by header.css
   - Move left logo area and right action buttons 10px down
   - Keep search/nav rendering stable on all responsive devices
====================================================== */
@media (max-width: 1024px){

  .hdaf-middlebar__layout{
    align-items:flex-start;
  }

  .hdaf-middlebar__left,
  .hdaf-middlebar__right{
    margin-top:10px;
  }

  .hdaf-middlebar__center{
    min-width:0;
  }

  .hdaf-mb-left,
  .hdaf-mb-actions{
    align-items:center;
  }
}

@media (max-width: 640px){

  .hdaf-middlebar__layout{
    row-gap:10px;
  }

  .hdaf-middlebar__left,
  .hdaf-middlebar__right{
    margin-top:10px;
  }

  .hdaf-middlebar__center{
    margin-top:0;
  }
}

/* ======================================================
   Mobile Logo Fine Tune
   - Mobile logo total visual offset: 15px down
   - Right actions remain on approved 10px offset
====================================================== */
@media (max-width: 640px){
  .hdaf-mb-left__logo{
    margin-top:5px;
  }
}