/* VietBridge responsive mobile navigation
   - No dark overlay/backdrop
   - Menu links remain clickable
   - Works above page alerts/carousels
*/

header{
  position:sticky;
  top:0;
  z-index:50000 !important;
  background:#fff;
}

header.header-scrolled{
  box-shadow:0 8px 24px rgba(67,42,29,.10);
  background:#fff;
}

.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #e7dcd5;
  border-radius:12px;
  background:#fff;
  color:#7a3d1f;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:50003 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}

.menu-toggle-bars{
  position:relative;
}

.menu-toggle-bars::before,
.menu-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
}

.menu-toggle-bars::before{top:-7px}
.menu-toggle-bars::after{top:7px}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars{
  background:transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before{
  top:0;
  transform:rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after{
  top:0;
  transform:rotate(-45deg);
}

.mobile-menu-title,
.nav-icon{
  display:none;
}

/* Never darken/block the page */
.mobile-menu-backdrop{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:transparent !important;
}

@media(max-width:900px){
  header{
    isolation:isolate;
    overflow:visible !important;
  }

  header .container{
    overflow:visible !important;
  }

  header nav{
    min-height:66px;
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    overflow:visible !important;
  }

  header .brand{
    min-width:0;
    flex:1 1 auto;
  }

  header .brand img{
    width:auto;
    height:40px !important;
    max-width:58px;
    object-fit:contain;
  }

  header .brand span{
    font-size:17px !important;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  header .actions{
    display:flex !important;
    align-items:center;
    margin-left:auto;
    flex:0 0 auto;
    position:relative;
    z-index:50003;
  }

  header .actions > .btn{
    display:none !important;
  }

  .menu-toggle{
    display:inline-flex !important;
  }

  header .navlinks{
    display:flex !important;
    position:fixed !important;
    top:66px !important;
    right:10px !important;
    left:auto !important;
    width:min(330px,calc(100vw - 20px)) !important;
    height:auto !important;
    max-height:calc(100dvh - 78px) !important;
    padding:12px !important;
    margin:0 !important;

    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;

    background:#fff !important;
    border:1px solid #eadfd8 !important;
    border-radius:16px !important;
    box-shadow:0 18px 50px rgba(55,38,30,.16) !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    z-index:50002 !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-8px) scale(.98) !important;
    transform-origin:top right;
    pointer-events:none !important;

    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility .18s ease !important;
  }

  header .navlinks.show{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) scale(1) !important;
    pointer-events:auto !important;
  }

  .mobile-menu-title{
    display:flex;
    align-items:center;
    gap:9px;
    padding:7px 8px 12px;
    margin-bottom:4px;
    border-bottom:1px solid #eee4de;
    color:#7a3d1f;
    font-weight:900;
    font-size:16px;
    pointer-events:none;
  }

  .mobile-menu-title img{
    width:34px !important;
    height:34px !important;
    object-fit:contain;
  }

  header .navlinks a{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    min-height:48px !important;
    padding:11px 12px !important;
    margin:0 !important;

    color:#3f342e !important;
    background:#fff !important;
    border-radius:10px !important;
    text-decoration:none !important;
    font-size:16px !important;
    font-weight:700 !important;

    position:relative !important;
    z-index:1 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(122,61,31,.10);
  }

  header .navlinks a:hover,
  header .navlinks a:focus,
  header .navlinks a:active{
    color:#7a3d1f !important;
    background:#fbf4ec !important;
    outline:none;
  }

  header .navlinks a[aria-current="page"]{
    color:#7a3d1f !important;
    background:#f5e8db !important;
  }

  .nav-icon{
    display:inline-block;
    width:24px;
    flex:0 0 24px;
    text-align:center;
  }

  body.menu-open{
    overflow-x:hidden;
  }

  /* Never let page overlays cover the mobile menu */
  .site-alert,
  .sponsored-section,
  main,
  footer{
    z-index:auto !important;
  }
}

@media(max-width:520px){
  header nav{
    min-height:62px;
  }

  header .brand img{
    height:36px !important;
    max-width:52px;
  }

  header .brand span{
    font-size:15px !important;
  }

  .menu-toggle{
    width:40px;
    height:40px;
  }

  header .navlinks{
    top:62px !important;
    right:8px !important;
    width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 72px) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  header .navlinks{
    transition:none !important;
  }
}