/* BDA Genesis – Hamburger Navigation (Variant 2)
   Scope: mobile-only (<= 768px). Desktop layout remains unchanged. */

@media (max-width: 768px){
  /*
    Mobile horizontal scroll prevention:
    The off-canvas drawer is translated outside the viewport when closed.
    On some mobile browsers this can still increase the scrollable width,
    allowing sideways swipe and causing content to appear "cut off".
  */
  html, body{ overflow-x: hidden; }

  /*
    Mobile stacking context hardening:
    Some mobile browsers can create unexpected stacking contexts around sticky headers.
    We force a clear z-index order so the drawer sits above the overlay, and both sit
    above page content. This also prevents the overlay from intercepting taps on menu items.
  */
  .site-header{ z-index: 1002; }

  .site-header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Ensure brand stays compact */
  .brand img{
    height: 40px;
    width: auto;
  }

  /* Toggle button */
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #ffffff;
    cursor: pointer;
  }

  .nav-toggle:focus{
    outline: 2px solid rgba(0,0,0,0.35);
    outline-offset: 2px;
  }

  .nav-toggle .nav-toggle__icon{
    width: 18px;
    height: 12px;
    position: relative;
    display: inline-block;
  }

  .nav-toggle .nav-toggle__icon::before,
  .nav-toggle .nav-toggle__icon::after,
  .nav-toggle .nav-toggle__icon span{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0,0,0,0.70);
    border-radius: 2px;
  }

  .nav-toggle .nav-toggle__icon::before{ top: 0; }
  .nav-toggle .nav-toggle__icon span{ top: 5px; }
  .nav-toggle .nav-toggle__icon::after{ top: 10px; }

  /* Default: hide horizontal nav list on mobile */
  .site-nav{
    display: none;
  }

  /* Keep CTA visible (Contact button) */
  .header-cta{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Overlay */
  .nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
    z-index: 1000;
  }

  /* Drawer */
  .site-nav.nav-drawer{
    position: fixed;
    top: 0;
    right: 0;
    width: min(86vw, 320px);
    height: 100vh;
    background: #ffffff !important;
    border-left: 1px solid rgba(0,0,0,0.12);
    padding: 16px;
    display: block;
    transform: translateX(102%);
    transition: transform 180ms ease;
    z-index: 1001;
    pointer-events: auto;
  }

  .site-nav.nav-drawer ul{
    display: grid;
    gap: 8px;
    padding: 8px 0 0 0;
    margin: 0;
    list-style: none;
  }

  .site-nav.nav-drawer a{
    display: block;
    padding: 12px 10px;
    border-radius: 12px;
    text-decoration: none;
  }

  /* Open state */
  body.nav-open{
    overflow: hidden;
  }

  body.nav-open .nav-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  body.nav-open .site-nav.nav-drawer{
    transform: translateX(0);
  }
}

/* Safety: do not affect desktop */
@media (min-width: 769px){
  .nav-toggle{ display: none !important; }
  .nav-overlay{ display: none !important; }
}