/* ════════════════════════════════════════════════════════════════════
 *  NEOMETRIX · MOBILE MENU · Glass Stack
 *  Brand-aligned to nav.css desktop dropdown tokens.
 *  Active ONLY on mobile/tablet (≤ 991px). Desktop is untouched.
 *  ──────────────────────────────────────────────────────────────────── */
 @media (min-width: 992px) {
   .nmx-mobile-menu{
      display: none;
   }
 }
@media (max-width: 991px) {

   /* Hide the default Bootstrap navbar-collapse on mobile — replaced by our menu */
   #main-navigation-wrapper #main-navigation.navbar-collapse {
      display: none !important;
   }


/*    .abar-header .logo-menu img {
        width: auto;
        float: left;
        height: 30px;
    }*/
   /* Lock scroll while menu is open */
   body.nmx-menu-locked { overflow: hidden; }

   /* ─── The menu overlay ─── */
   .nmx-mobile-menu {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(8, 8, 12, 0.92);
      backdrop-filter: blur(18px) saturate(1.6);
      -webkit-backdrop-filter: blur(18px) saturate(1.6);
      border-top: 2px solid #0855A6;
      z-index: 200000;             /* above the sticky nav (z-index 111110) */
      overflow-y: auto;
      font-family: 'Lato', sans-serif;
      opacity: 0; pointer-events: none;
      transition: opacity 0.24s ease;
      -webkit-overflow-scrolling: touch;
   }
   .nmx-mobile-menu.is-open { opacity: 1; pointer-events: auto; }

   /* atmospheric blue/gold wash */
   .nmx-mobile-menu::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
         radial-gradient(circle at 100% 0%, rgba(8,85,166,0.18), transparent 55%),
         radial-gradient(circle at 0% 100%, rgba(200,150,62,0.06), transparent 55%);
   }
   .nmx-mobile-menu > * { position: relative; }

   /* ─── Menu header (logo + close) ─── */
   .nmx-mh {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px !important;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      background: rgba(10, 22, 40, 0.4);
   }
   .nmx-mh .nmx-logo {
      height: 30px; width: auto; display: block;
   }
   .nmx-mh .nmx-close {
      width: 36px; height: 36px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 50%;
      background: transparent;
      color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.18s, border-color 0.18s;
      padding: 0;
   }
   .nmx-mh .nmx-close:hover {
      background: #0855A6; border-color: #0855A6;
   }
   .nmx-mh .nmx-close svg { width: 12px; height: 12px; }

   /* ─── Menu items ─── */
   .nmx-list { padding: 8px 0; list-style: none; margin: 0; }
   .nmx-list li { list-style: none; }

   .nmx-item, button.nmx-item {
      position: relative;
      display: grid; grid-template-columns: 24px 1fr auto;
      align-items: center; gap: 14px;
      padding: 13px 24px;
      width: 100%; text-align: left;
      color: rgba(255,255,255,0.82) !important;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      background: transparent;
      transition: padding 0.22s, background 0.22s, color 0.22s;
      font-family: 'Montserrat', sans-serif !important;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      box-sizing: border-box;
      border-left: 0; border-right: 0; border-top: 0;
      opacity: 0; transform: translateX(-12px);
   }
   .nmx-mobile-menu.is-open .nmx-item {
      animation: nmx-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
   }
   .nmx-mobile-menu.is-open .nmx-item:nth-of-type(1) { animation-delay: 0.05s; }
   .nmx-mobile-menu.is-open .nmx-item:nth-of-type(2) { animation-delay: 0.10s; }
   .nmx-mobile-menu.is-open .nmx-item:nth-of-type(3) { animation-delay: 0.15s; }
   .nmx-mobile-menu.is-open .nmx-item:nth-of-type(4) { animation-delay: 0.20s; }
   .nmx-mobile-menu.is-open .nmx-item:nth-of-type(5) { animation-delay: 0.25s; }
   .nmx-mobile-menu.is-open .nmx-item:nth-of-type(6) { animation-delay: 0.30s; }
   .nmx-mobile-menu.is-open .nmx-item:nth-of-type(7) { animation-delay: 0.35s; }
   @keyframes nmx-in {
      to { opacity: 1; transform: translateX(0); }
   }

   /* left accent bar — matches desktop dropdown's hover pattern */
   .nmx-item::before {
      content: ''; position: absolute; left: 0; top: 50%;
      width: 3px; height: 60%; background: #0855A6;
      transform: translateY(-50%) scaleY(0);
      transform-origin: center; transition: transform 0.22s;
   }
   .nmx-item:hover,
   .nmx-item:focus-visible {
      background: rgba(8, 85, 166, 0.12);
      color: #fff !important;
      padding-left: 26px;
   }
   .nmx-item:hover::before,
   .nmx-item:focus-visible::before,
   .nmx-item.is-open::before {
      transform: translateY(-50%) scaleY(1);
   }
   .nmx-item.is-open {
      background: rgba(8, 85, 166, 0.18);
      color: #fff !important;
      padding-left: 26px;
   }

   .nmx-item .nmx-icon {
      color: rgba(255,255,255,0.25);
      transition: color 0.22s;
      display: flex; align-items: center; justify-content: center;
   }
   .nmx-item .nmx-icon svg { width: 18px; height: 18px; display: block; color: #C8963E;}
   .nmx-item:hover .nmx-icon,
   .nmx-item:focus-visible .nmx-icon,
   .nmx-item.is-open .nmx-icon { color: #4da3ff; }

   .nmx-item .nmx-body { min-width: 0; }
   .nmx-item .nmx-name {
      font-family: 'Montserrat', sans-serif !important;
      font-weight: 500;
      font-size: 15px; line-height: 1.25;
      letter-spacing: 0.005em;
      color: inherit;
   }
   .nmx-item .nmx-hint {
      font-family: 'Lato', sans-serif;
      font-size: 11.5px;
      font-weight: 400;
      margin-top: 1px;
      transition: color 0.22s;
   }
   .nmx-item:hover .nmx-hint,
   .nmx-item.is-open .nmx-hint { color: rgba(255,255,255,0.5); }

   .nmx-item .nmx-chev {
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      color: rgba(255,255,255,0.25);
      transition: color 0.22s, transform 0.32s;
      line-height: 1;
   }
   .nmx-item:hover .nmx-chev,
   .nmx-item:focus-visible .nmx-chev { color: #4da3ff; transform: translateX(3px); }
   .nmx-item.is-open .nmx-chev { color: #C8963E; transform: rotate(90deg) translateX(0); }

   /* ─── Submenu (collapsible) ─── */
   .nmx-sub {
      max-height: 0; overflow: hidden;
      transition: max-height 0.32s ease;
      background: rgba(0, 0, 0, 0.18);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      list-style: none; padding: 0; margin: 0;
   }
   .nmx-sub.is-open { max-height: 600px; }

   .nmx-sub-item, a.nmx-sub-item {
      display: grid; grid-template-columns: 12px 1fr;
      gap: 14px; align-items: center;
      padding: 11px 24px 11px 64px;
      width: 100%; text-align: left;
      color: rgba(255,255,255,0.68) !important;
      transition: background 0.18s, color 0.18s, padding 0.18s;
      background: transparent;
      text-decoration: none;
      box-sizing: border-box;
   }
   .nmx-sub-item::before {
      content: ''; width: 12px; height: 1px;
      background: #C8963E; opacity: 0.5;
      transition: opacity 0.18s, background 0.18s;
   
   }
   .nmx-sub-item:hover,
   .nmx-sub-item:focus-visible {
      background: rgba(8, 85, 166, 0.12);
      color: #fff !important;
      padding-left: 68px;
   }
   .nmx-sub-item:hover::before,
   .nmx-sub-item:focus-visible::before {
      opacity: 1; background: #C8963E;
   }
   .nmx-sub-item .nmx-sub-name {
      font-family: 'Lato', sans-serif !important;
      font-weight: 400; font-size: 13.5px;
      line-height: 1.3; color: inherit;
   }

   /* ─── Menu footer (CTA only) ─── */
   .nmx-foot {
      padding: 22px 24px 32px;
      border-top: 1px solid rgba(255,255,255,0.05);
      background: rgba(0, 0, 0, 0.25);
   }
   .nmx-cta {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; padding: 13px 18px;
      background: transparent;
      border: 1.5px solid #C8963E;
      color: #C8963E !important;
      font-family: 'Montserrat', sans-serif !important;
      font-weight: 600;
      font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
      transition: color 0.22s;
      position: relative; overflow: hidden;
      text-decoration: none; cursor: pointer;
      box-sizing: border-box;
      border-radius: 0;
   }
   .nmx-cta::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, #C8963E 0%, #E2B567 100%);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.32s ease;
      z-index: -1;
   }
   .nmx-cta:hover {
      color: #0A1628 !important;
      border-color: #C8963E;
   }
   .nmx-cta:hover::before { transform: scaleX(1); }
   .nmx-cta .nmx-arrow { transition: transform 0.22s; font-size: 16px; line-height: 1; }
   .nmx-cta:hover .nmx-arrow { transform: translateX(4px); }
}