/*
 * Mobile Navigation — Samanvi Technologies
 * #site-navigation stays display:block but is off-screen (right:-110vw)
 * so Max Mega Menu initializes normally. We slide it in with right:0.
 */

/* ── Hide hamburger on desktop — shown only inside the mobile media query ── */
.samanvi-hamburger {
  display: none;
}

/* ── Overlay ── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 22, 40, 0.55);
  z-index: 9998;
  cursor: pointer;
}

/* ════════════════════════════════
   MOBILE ≤ 768px
════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Header stays as a horizontal row ── */
  .inside-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .inside-header > *:not(:last-child) {
    margin-bottom: 0 !important;
  }

  /* ── 2. Move #site-navigation off-screen (NOT display:none)
     position:fixed removes it from flex flow AND keeps it in layout
     so Max Mega Menu initializes its JS handlers correctly ── */
  #site-navigation {
    position: fixed !important;
    top: 0 !important;
    right: -110vw !important;
    left: auto !important;
    width: 300px !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    background: #091628 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    float: none !important;
    display: block !important;
    transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;        /* no accidental clicks when hidden */
  }

  /* ── Slide in when open ── */
  #site-navigation.samanvi-open {
    right: 0 !important;
    box-shadow: -6px 0 32px rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto;
  }

  /* ── 3. Our hamburger button ── */
  .samanvi-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    z-index: 10001;
  }

  .hb-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #091628;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
  }

  /* Hide our hamburger when drawer is open — Max Mega Menu's green toggle handles close */
  .samanvi-hamburger.is-open {
    display: none !important;
  }

  /* ── 4. When open: force-show inside-navigation and mega-menu-wrap
     GP's generated CSS hides .mega-menu-wrap via:
     .has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav) { display:none }
     Our selector (2 IDs + 1 class) beats GP's (1 ID + 4 classes) ── */
  #site-navigation.samanvi-open .inside-navigation {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #site-navigation.samanvi-open #mega-menu-wrap-primary,
  #site-navigation.samanvi-open .mega-menu-wrap {
    display: block !important;
    width: 100% !important;
  }

  /* Hide GP's inner menu-toggle (we have our own in the header) */
  #site-navigation .inside-navigation > button.menu-toggle {
    display: none !important;
  }

  /* ── 5. Max Mega Menu toggle button inside drawer — style as a label ── */
  #mega-menu-wrap-primary .mega-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
  }

  /* ── 6. Top-level menu items ── */
  #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    color: rgba(255, 255, 255, 0.82) !important;
    padding: 0.9rem 1.5rem !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
  }

  #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover {
    color: #00a896 !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }

  #mega-menu-primary > li.current-menu-item > a.mega-menu-link,
  #mega-menu-primary > li.current-menu-ancestor > a.mega-menu-link {
    color: #00a896 !important;
    border-left: 3px solid #00a896 !important;
    padding-left: calc(1.5rem - 3px) !important;
  }

  /* ── 7. Sub-menu items ── */
  #mega-menu-primary .mega-sub-menu {
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    box-shadow: none !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  #mega-menu-primary .mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0.65rem 1.5rem 0.65rem 2rem !important;
    font-size: 0.88rem !important;
    font-family: 'Poppins', sans-serif !important;
    display: block !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  #mega-menu-primary .mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
    color: #00a896 !important;
  }

  /* Section headings inside mega panels */
  #mega-menu-primary .mega-menu-column > .mega-menu-link {
    color: #00a896 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 0.75rem 1.5rem 0.35rem 2rem !important;
    pointer-events: none !important;
    display: block !important;
  }

  /* Mega menu columns — stack vertically */
  #mega-menu-primary .mega-menu-row,
  #mega-menu-primary .mega-menu-col {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  /* Call link */
  #mega-menu-primary > li.mega-menu-item:last-child > a.mega-menu-link {
    color: #00a896 !important;
    font-weight: 600 !important;
  }
}