/* ==============================================================
   TranCuong2026 - Mobile menu layering/opacity FINAL authority
   2026-08-17
   Scope <= 860px only. Desktop menu is untouched.
   Fixes overlay accidentally covering the navigation stacking context.
   ============================================================== */
@media (max-width:860px){
  /* Layer order must be: page < overlay < navigation/drawer. */
  .mobile-menu-overlay{
    z-index:2147483000!important;
    background:rgba(4,18,31,.68)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    mix-blend-mode:normal!important;
  }
  body.mobile-menu-lock .mobile-menu-overlay{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Critical: the nav stacking context itself must sit ABOVE overlay.
     A child's z-index cannot escape a lower parent stacking context. */
  #mainNavigation.main-menu-wrap,
  #mainNavigation.main-menu-wrap.menu-open{
    z-index:2147483100!important;
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    mix-blend-mode:normal!important;
  }

  #mainNavigation .main-menu-shell,
  #mainNavigation .primary-menu-host,
  #mainNavigation .mobile-menu-panel-head,
  #mainNavigation .primary-menu-host>.menu-root,
  #mainNavigation .primary-menu-host>.sf-menu,
  #mainNavigation .primary-menu-host>ul,
  #mainNavigation .menu-root li,
  #mainNavigation .sf-menu li,
  #mainNavigation .menu-sub,
  #mainNavigation .menu-root li ul,
  #mainNavigation .sf-menu li ul,
  #mainNavigation .menu-root li>a,
  #mainNavigation .sf-menu li>a,
  #mainNavigation .menu-sub li>a,
  #mainNavigation .mobile-home-button,
  #mainNavigation .mobile-menu-toggle,
  #mainNavigation .mobile-submenu-toggle{
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    mix-blend-mode:normal!important;
  }

  #mainNavigation .primary-menu-host{
    z-index:2147483200!important;
    box-shadow:-18px 0 52px rgba(0,0,0,.34)!important;
  }
  #mainNavigation.menu-open .mobile-menu-toggle{
    z-index:2147483300!important;
    background:#153a58!important;
    border-color:rgba(255,255,255,.45)!important;
    box-shadow:0 5px 18px rgba(0,0,0,.28)!important;
  }

  /* Generic fallback for all public themes: solid panel, crisp text. */
  #mainNavigation .primary-menu-host{
    background-color:#f5f8fb!important;
    background-image:none!important;
  }
  #mainNavigation .mobile-menu-panel-head{
    background-color:#153a58!important;
    background-image:none!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
  #mainNavigation .mobile-menu-panel-title,
  #mainNavigation .mobile-menu-panel-note{
    text-shadow:none!important;
  }
  #mainNavigation .primary-menu-host>.menu-root,
  #mainNavigation .primary-menu-host>.sf-menu,
  #mainNavigation .primary-menu-host>ul{
    background:#f5f8fb!important;
    color:#17354f!important;
    -webkit-text-fill-color:#17354f!important;
  }
  #mainNavigation .menu-root>li,
  #mainNavigation .sf-menu>li{
    background:transparent!important;
  }
  #mainNavigation .menu-root>li>a,
  #mainNavigation .sf-menu>li>a,
  #mainNavigation .menu-home-link{
    background:#fff!important;
    color:#17354f!important;
    -webkit-text-fill-color:#17354f!important;
    border-color:#cbd9e4!important;
    text-shadow:none!important;
  }
  #mainNavigation .menu-root>li>a *,
  #mainNavigation .sf-menu>li>a *,
  #mainNavigation .menu-home-link *{
    color:inherit!important;
    -webkit-text-fill-color:inherit!important;
    text-shadow:none!important;
  }
  #mainNavigation .menu-sub,
  #mainNavigation .menu-root li ul,
  #mainNavigation .sf-menu li ul{
    background:#eaf1f6!important;
    background-image:none!important;
    border-color:#b9ccda!important;
  }
  #mainNavigation .menu-sub li>a,
  #mainNavigation .sf-menu li ul li>a{
    background:#fff!important;
    color:#23465e!important;
    -webkit-text-fill-color:#23465e!important;
    border-color:#cfdae3!important;
    text-shadow:none!important;
  }
  #mainNavigation .menu-sub li>a *,
  #mainNavigation .sf-menu li ul li>a *{
    color:inherit!important;
    -webkit-text-fill-color:inherit!important;
    text-shadow:none!important;
  }

  /* Theme-specific headers retain identity while keeping content opaque. */
  body.home-layout-modern #mainNavigation .mobile-menu-panel-head{
    background:#164f9e!important;
  }
  body.home-layout-modern #mainNavigation .primary-menu-host{
    background:#f3f7fb!important;
  }
  body.home-layout-modern #mainNavigation .menu-root>li>a,
  body.home-layout-modern #mainNavigation .sf-menu>li>a{
    color:#173b59!important;
    -webkit-text-fill-color:#173b59!important;
  }

  body.home-layout-transport #mainNavigation .mobile-menu-panel-head,
  body.layout-transport #mainNavigation .mobile-menu-panel-head,
  body.transport-layout #mainNavigation .mobile-menu-panel-head,
  body[data-home-layout="transport"] #mainNavigation .mobile-menu-panel-head,
  body[data-layout="transport"] #mainNavigation .mobile-menu-panel-head{
    background:#0b3552!important;
  }
  body.home-layout-transport #mainNavigation .primary-menu-host,
  body.layout-transport #mainNavigation .primary-menu-host,
  body.transport-layout #mainNavigation .primary-menu-host,
  body[data-home-layout="transport"] #mainNavigation .primary-menu-host,
  body[data-layout="transport"] #mainNavigation .primary-menu-host{
    background:#f4f8fb!important;
  }
  body.home-layout-transport #mainNavigation .menu-root>li>a,
  body.layout-transport #mainNavigation .menu-root>li>a,
  body.transport-layout #mainNavigation .menu-root>li>a,
  body[data-home-layout="transport"] #mainNavigation .menu-root>li>a,
  body[data-layout="transport"] #mainNavigation .menu-root>li>a{
    color:#102f46!important;
    -webkit-text-fill-color:#102f46!important;
  }

  body.home-layout-fengshui #mainNavigation .mobile-menu-panel-head,
  body.fengshui-theme-active #mainNavigation .mobile-menu-panel-head{
    background:#641322!important;
  }
  body.home-layout-mechanical #mainNavigation .mobile-menu-panel-head,
  body.mechanical-theme-active #mainNavigation .mobile-menu-panel-head{
    background:#283845!important;
  }
}