/* === Mobile Overlay Navigation (desktop-hidden) === */
/* Hide overlay UI by default on desktop */
.mobile-nav, .mobile-nav__close { display: none; }
.nav-toggle { display: none; margin-left:auto; font-size:26px; background:none; border:0; line-height:1; cursor:pointer }

@media (max-width: 768px){
  /* Show hamburger on mobile, hide desktop nav */
  header nav#primary-nav{ display:none; }
  .nav-toggle{ display:inline-block; }

  /* Overlay container (only on mobile) */
  .mobile-nav{
    display:block;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
  }
  .mobile-nav__backdrop{
    position:absolute; inset:0;
    background: rgba(0,0,0,.35);
    opacity:0; transition: opacity .25s ease;
  }
  .mobile-nav__panel{
    position:absolute; top:0; right:0; bottom:0; width: 80%;
    max-width: 360px;
    background:#fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    padding: 20px 16px 24px;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
    overflow-y:auto;
  }
  .mobile-nav__close{
    display:block;
    font-size:28px; background:none; border:0; cursor:pointer; line-height:1;
    position:absolute; top:12px; right:16px;
  }
  #mobile-nav-menu ul{ list-style:none; padding:0; margin:48px 0 0 0; }
  #mobile-nav-menu li{ margin:0; }
  #mobile-nav-menu a{
    display:block; padding:14px 6px; text-decoration:none;
    border-bottom:1px solid #eee;
    font-size:18px;
  }

  /* Open state */
  body.nav-open .mobile-nav{ pointer-events: auto; }
  body.nav-open .mobile-nav__backdrop{ opacity:1; }
  body.nav-open .mobile-nav__panel{ transform: translateX(0); }
}