/* Mobile Navigation (v12) – centered dropdown BELOW header (centered to header width)
   - Fixes hamburger clipping (safe-area aware)
   - Dropdown is centered relative to the HEADER (not the right-aligned nav)
   - Uses existing .open class toggled by JS
*/

/* Proper screen-reader-only utility */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width: 900px){
  /* Safe-area: keep header content below the notch */
  .site-header{
    padding-top: env(safe-area-inset-top);
    overflow: visible; /* allow dropdown to render outside header */
  }

  /* Make the header container the positioning context */
  .site-header .container.header-inner{
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    box-sizing: border-box;
    position: relative !important;
  }

  /* Keep the logo from pushing the toggle out */
  .brand{ min-width: 0; }
  .brand-mark{
    height: 24px !important;
    width: auto !important;
    max-width: 68vw !important;
  }

  /* Hamburger always visible */
  .nav-toggle{
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
  }

  /* IMPORTANT: nav must NOT be the positioning context (it is right-aligned).
     We anchor the dropdown to the header-inner instead. */
  .nav{ position: static !important; }

  /* Centered dropdown panel (anchored to header-inner width) */
  #primary-nav.nav-list{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: calc(100% + 14px) !important;
    transform: translateX(-50%) !important;

    width: min(360px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;

    max-height: calc(100dvh - 160px) !important;
    overflow: auto !important;

    padding: 14px !important;
    border-radius: 20px !important;

    background: rgba(8,9,14,.98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.65) !important;

    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;

    z-index: 9999 !important;
  }

  #primary-nav.nav-list.open{ display: flex !important; }

  #primary-nav.nav-list li{ width: 100% !important; }

  #primary-nav.nav-list a{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 14px 14px !important;
    border-radius: 18px !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;

    color: rgba(243,246,255,.92) !important;
    font-weight: 750 !important;
    font-size: 16px !important;
  }

  /* Cinematic contact button inside the dropdown */
  #primary-nav.nav-list a.btn{
    background: linear-gradient(135deg, rgba(255,59,48,.92), rgba(6,182,212,.82)) !important;
    color: #05060a !important;
    border: 1px solid rgba(255,255,255,.14) !important;
  }
}

/* Global: prevent accidental horizontal scroll */
html, body{ width:100%; overflow-x:hidden; }