/* =========================
   GLOBAL SAFETY
========================= */
header .navbar.glass-on-banner .nav-toggle { display: none !important; }
header .mobile-nav-panel { display: none !important; }

/* =========================
   DESKTOP (UNCHANGED CORE)
========================= */
header .navbar.glass-on-banner{
  position: fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  height: var(--nav-height, 92px) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 24px !important;
  z-index:1100 !important;
  background: rgba(255,255,255,0.12) !important;
  color:#fff !important;
  box-shadow:none !important;
  border:0 !important;
  font-family:"Montserrat","Roboto Condensed","Gotham",Arial,sans-serif !important;
}

header .navbar.glass-on-banner .logo{
  position:absolute !important;
  left:24px !important;
  display:flex !important;
  align-items:center !important;
}

header .navbar.glass-on-banner .logo-img{
  height:64px !important;
  object-fit:contain !important;
  display:none !important;
}
header .navbar.glass-on-banner .logo-1{ display:block !important; }
header .navbar.glass-on-banner .logo-2{ display:none !important; }

header .navbar.glass-on-banner .nav-links{
  list-style:none !important;
  display:flex !important;
  gap:30px !important;
  justify-content:center !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
/* Icons default hidden */
header .navbar.glass-on-banner .nav-links .menu-icon{
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Only hovered/active li shows icon */
header .navbar.glass-on-banner .nav-links li.icon-on .menu-icon{
  opacity: 1;
  transform: translateY(0);
}

header .navbar.glass-on-banner .nav-links li{
  padding:24px 6px !important;
  font-size:18px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  color:inherit !important;
  position:relative !important;
}

header .navbar.glass-on-banner:hover,
header.menu-open .navbar.glass-on-banner{
  background:#fff !important;
  color:#555 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.15) !important;
}
header .navbar.glass-on-banner:hover .logo-1,
header.menu-open .navbar.glass-on-banner .logo-1{ display:none !important; }
header .navbar.glass-on-banner:hover .logo-2,
header.menu-open .navbar.glass-on-banner .logo-2{ display:block !important; }

header.scrolled .navbar.glass-on-banner{
  background: var(--nav-scrolled-bg, rgba(255,255,255,.96)) !important;
  color: var(--nav-scrolled-fg, #555) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
}
header.scrolled .navbar.glass-on-banner .logo-1{ display:none !important; }
header.scrolled .navbar.glass-on-banner .logo-2{ display:block !important; }

/* mega dropdown */
header .mega-dropdown{
  position:fixed !important;
  top: var(--nav-height, 92px) !important;
  left:0 !important; right:0 !important;
  height: var(--submenu-height, 240px) !important;
  background:#fff !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding: calc(var(--submenu-gap, 18px) + 8px) 60px 20px !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform: translateY(-20px) !important;
  transition: opacity .35s ease, transform .35s ease !important;
  z-index:1099 !important;
  box-shadow:0 8px 16px rgba(0,0,0,0.2) !important;
}
header .mega-dropdown.active{
  opacity:1 !important;
  transform: translateY(0) !important;
  pointer-events:all !important;
}
header .menu-content{ display:none !important; }
header .menu-content.active{ display:flex !important; }

/* =========================
   MOBILE / TABLET (DRILL DOWN)
========================= */
@media (max-width: 1024px) {
  header .navbar.glass-on-banner .nav-toggle { display:inline-flex !important; }
  header .mobile-nav-panel { display:block !important; }

  header .navbar.glass-on-banner{
    justify-content:space-between !important;
    padding:0 12px !important;
    min-height:72px !important;
    height: var(--nav-height, 72px) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  }

  header .navbar.glass-on-banner .logo{ position:static !important; left:auto !important; }
  header .navbar.glass-on-banner .logo-img{ height:46px !important; }

  header .navbar.glass-on-banner .nav-links{ display:none !important; }
  header .mega-dropdown{ display:none !important; }

  /* icon-only hamburger */
  header .navbar.glass-on-banner .nav-toggle{
    appearance:none !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    padding:2px !important;
    width:auto !important;
    height:auto !important;
    cursor:pointer !important;
    color:#fff !important;
  }
  header .navbar.glass-on-banner .nav-toggle i{
    font-size:24px !important;
    line-height:1 !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  }
  header.scrolled .navbar.glass-on-banner .nav-toggle,
  header .navbar.glass-on-banner:hover .nav-toggle{
    color:#1f2937 !important;
  }

  /* overlay */
  header .mobile-nav-panel{
    position:fixed !important;
    inset:0 !important;
    top: var(--nav-height, 72px) !important;
    background: radial-gradient(circle at top right, rgba(15,23,42,.28), rgba(2,6,23,.56)) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index:1200 !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition: opacity .28s ease !important;
  }
  header.mobile-open .mobile-nav-panel{
    opacity:1 !important;
    pointer-events:all !important;
  }

  /* ✅ shorter, compact glass sidebar */
  header .mobile-nav-inner{
    position:absolute !important;
    right:10px !important;
    top:10px !important;

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

    /* ✅ not full height */
    height: min(520px, calc(100vh - 20px)) !important;

    border-radius:22px !important;
    background: linear-gradient(165deg, rgba(255,255,255,.24), rgba(255,255,255,.08)) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow: 0 28px 60px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.35) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;

    transform: translateX(108%) !important;
    transition: transform .32s cubic-bezier(.2,.8,.2,1) !important;

    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  header.mobile-open .mobile-nav-inner{ transform: translateX(0) !important; }

  header .mobile-nav-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:14px 14px 12px !important;
    border-bottom:1px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) !important;
    flex: 0 0 auto !important;
  }
  header .mobile-brand{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    color:#f8fafc !important;
    font-weight:800 !important;
    letter-spacing:.25px !important;
  }
  header .mobile-brand-dot{
    width:10px !important; height:10px !important;
    border-radius:999px !important;
    background: linear-gradient(145deg, #5eead4, #38bdf8) !important;
    box-shadow: 0 0 0 4px rgba(56,189,248,.16);
  }
  header .mobile-nav-close{
    border:1px solid rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.12) !important;
    color:#f8fafc !important;
    width:38px !important; height:38px !important;
    border-radius:12px !important;
    cursor:pointer !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* views container scroll area */
  header .mobile-view{
    flex: 1 1 auto !important;
    overflow:auto !important;
    padding:12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ROOT list (only main menus) */
  header .mobile-mainlist{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  header .main-item{
    width:100% !important;
    border:1px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(165deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important;
    color:#f8fafc !important;
    border-radius:16px !important;
    padding:12px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    cursor:pointer !important;
    box-shadow: 0 10px 24px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  header .main-left{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
  }
  header .main-ic{
    width:32px !important;
    height:32px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:12px !important;
    background: rgba(255,255,255,.18) !important;
    color:#dbeafe !important;
    flex:0 0 auto !important;
  }
  header .main-title{
    font-size:15px !important;
    font-weight:850 !important;
    letter-spacing:.2px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  header .main-arrow{ opacity:.9; }

  /* SUB view */
  header .sub-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }
  header .sub-back{
    border:1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.10) !important;
    color:#f8fafc !important;
    border-radius:14px !important;
    padding:8px 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    cursor:pointer !important;
    font-weight:750 !important;
  }
  header .sub-title{
    color:#f8fafc !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    flex: 1 1 auto !important;
    text-align:right !important;
    padding-left:8px !important;
  }

  header .sub-links{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }
  header .sub-link{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    text-decoration:none !important;
    color:#f8fafc !important;
    font-weight:700 !important;
    font-size:14px !important;
    padding:10px 11px !important;
    border-radius:14px !important;
    background: rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.20) !important;
  }
  header .sub-link i{ color:#93c5fd !important; font-size:12px !important; }
}