/* =========================================================
   Clynx Mobile Nav — v1.3 (Scoped Mobile Panel)
   - Desktop menu is untouched.
   - Mobile panel uses cloned markup only.
   ========================================================= */

/* Hamburger button */
.cx-burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
}
.cx-burger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
}

/* Mobile panel container */
.cx-mobile-panel{
  display:none;
}

/* Mobile behavior */
@media (max-width: 980px){
  .cx-burger{display:flex;}

  /* Hide desktop nav + CTA on mobile (panel replaces them) */
  .cx-header .cx-nav{ display:none !important; }
  .cx-header .cx-cta{ display:none !important; }

  .cx-mobile-panel{
    position:absolute;
    left: 14px;
    right: 14px;
    top: 70px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(11,18,32,.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 55px rgba(0,0,0,.55);
    z-index: 9999;
  }
  .cx-mobile-panel.is-open{display:flex;}

  /* Mobile nav layout */
  .cx-mobile-panel .cx-nav{ display:block !important; }
  .cx-mobile-panel .cx-nav ul{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .cx-mobile-panel .cx-nav ul > li{ width:100%; }

  /* Collapsible submenus: hidden by default */
  .cx-mobile-panel .cx-nav ul li ul.sub-menu{
    display:none !important;
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow:none !important;
    padding: 6px 0 0 !important;
    margin: 6px 0 0 12px !important;
    min-width: 0 !important;
  }
  .cx-mobile-panel .cx-nav ul li.clynx-sub-open > ul.sub-menu{
    display:block !important;
  }

  /* Parent row: link + toggle button */
  .cx-mobile-panel .cx-nav ul > li.menu-item-has-children{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  .cx-mobile-panel .cx-nav ul > li.menu-item-has-children > a{
    flex: 1 1 auto;
    width: auto;
    justify-content:flex-start !important;
  }

  .clynx-sub-toggle{
    margin-left:auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.92);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
  }

  /* CTA inside panel */
  .cx-mobile-panel .cx-cta{
    display:flex !important;
    width:100%;
    gap: 10px;
  }
  .cx-mobile-panel .cx-cta a{ width:100%; }
}

/* Ensure toggle never shows on desktop even if injected elsewhere */
@media (min-width: 981px){
  .clynx-sub-toggle{ display:none !important; }
}