/* mobile-drawer.css
   Mobile: header hides on scroll; a left handle opens a slide-out drawer
   with the existing page navigation.
*/

@media (max-width: 768px){
  /* Mobile header simplification: hide side logos for more space */
  header.top-nav .header-inner,
  header.site-header .header-inner{
    grid-template-columns: 1fr !important;
  }
  header.top-nav .header-inner .logo,
  header.site-header .header-inner .logo{
    display: none !important;
  }
  header.top-nav .header-inner .brand,
  header.site-header .header-inner .brand{
    text-align: center;
  }

  /* Hide header when JS adds .nav-hidden */
  header.top-nav,
  header.site-header.top-nav{
    position: sticky; /* keep existing layout until hidden */
    top: 0;
    z-index: 1000;
    transition: transform .25s ease;
  }
  header.top-nav.nav-hidden,
  header.site-header.top-nav.nav-hidden{
    transform: translateY(-110%);
  }

  /* Left grab handle (only becomes interactive when .visible is set) */
  .mobile-drawer-handle{
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 84px;
    background: rgba(15,15,15,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .mobile-drawer-handle::before{
    content:"";
    display:block;
    width: 10px;
    height: 46px;
    margin: 18px auto;
    border-radius: 8px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.22) 0px,
      rgba(255,255,255,.22) 2px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 6px
    );
  }
  .mobile-drawer-handle.visible{
    opacity: 1;
    pointer-events: auto;
  }

  /* Backdrop */
  .mobile-drawer-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .mobile-drawer-backdrop.open{
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer */
  .mobile-drawer{
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: rgba(10,10,10,.98);
    border-right: 1px solid rgba(255,255,255,.12);
    z-index: 1150;
    transition: left .25s ease;
    display: flex;
    flex-direction: column;
  }
  .mobile-drawer.open{ left: 0; }

  .mobile-drawer-header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .mobile-drawer-title{
    font-weight: 700;
    letter-spacing: .4px;
  }
  .mobile-drawer-close{
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-drawer-inner{
    overflow: auto;
    padding: 10px 12px 14px;
  }

  /* Make buttons in drawer stack nicely */
  .mobile-drawer .nav{
    display:flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .mobile-drawer .nav .btn{
    width: 100%;
    text-align: left;
  }
  .mobile-drawer .nav-categories{
    display:flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
  }

  /* Prevent background scroll when drawer is open */
  body.drawer-open{
    overflow: hidden;
    touch-action: none;
  }
}