.mobile-menu-drawer,
.mobile-menu-overlay { display: none; }

@media (max-width: 1024px) {

  body.mobile-menu-open { overflow: hidden; touch-action: none; }

  .mobile-menu-overlay{
    display:block; position:fixed; inset:0;
    background: rgba(0,0,0,.55);
    z-index: 9998;
  }
  .mobile-menu-overlay[hidden]{ display:none; }

  /* Drawer base (LIGHT like your mobile header) */
  .mobile-menu-drawer{
    display:block;
    position:fixed; top:0; left:0;
    width:min(86vw, 380px);
    height:100vh;
    background: var(--white);
    color: var(--gray);
    z-index: 9999;

    transform: translateX(-105%);
    transition: transform .28s ease;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu-drawer.is-open{ transform: translateX(0); }

  /* Header: X then logo */
  .mobile-menu-drawer__header{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 14px 14px 10px;
  }

  .close-button{
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px 10px 6px 0;
    color: var(--gray);
    font-size: 34px;
    line-height: 1;
  }

  .mobile-menu-drawer__branding{
    margin-left: auto;
    display:flex;
    align-items:center;
  }

  /* Match your header rule on mobile:
     LIGHT => show dark-custom-logo-link */
  .mobile-menu-drawer__branding .custom-logo-link{ display:none; }
  .mobile-menu-drawer__branding .dark-custom-logo-link{ display:inline-flex; }

  .mobile-menu-drawer__content{ padding: 10px 10px 16px; }

  /* Menu list */
  .mobile-menu-list{
    list-style:none;
    margin:0;
    padding: 0;
  }

  .mobile-menu-list > li{ margin: 0; padding: 0; }

  /* Parent link row */
  .mobile-menu-list > li > a{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;

    padding: 14px 10px;
    text-decoration:none;

    color: var(--gray);
    font-size: 13px;
  }

  /* Parent open state like screenshot (blue) */
  .mobile-menu-list > li.is-sub-open > a{
    color: var(--adjaranet-color) !important;
  }

  /* Caret on the right for items with children */
  .mobile-menu-list .menu-item-has-children > a::after{
    content:"";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg);
    flex: 0 0 auto;
    margin-left: 10px;
  }
  .mobile-menu-list .is-sub-open.menu-item-has-children > a::after{
    transform: rotate(-135deg); /* points up */
  }

  /* Your walker icon (we'll move it after text via JS) */
  #mobile-menu-list .menu-item-icon{
    display:inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
  }
  #mobile-menu-list .menu-item-icon svg {
    width:100%;
    height:100%;
  }
#mobile-menu-list .menu-item-icon svg,
#mobile-menu-list .menu-item-icon svg path {
   fill: currentColor !important;
  }


  /* Sub menu */
  .mobile-menu-list .sub-menu{
    list-style:none;
    margin: 0;
    padding: 0 0 6px 0;
    display:none;
  }
  .mobile-menu-list li.is-sub-open > .sub-menu{ display:block; }

  .mobile-menu-list .sub-menu li a{
    display:block;
    padding: 14px 10px;
    text-decoration:none;
    color: var(--gray);
    font-size: 12px;
    font-weight: 500;
  }

  /* Theme switch row (below nav) */
  .drawer-theme-toggle{
    width:100%;
    padding: 14px 10px;

    display:flex;
    align-items:center;
    gap: 14px;

    border: 0;
    cursor:pointer;

    color: var(--gray);
    font-size: 12px;
    text-align:left;
  }
.drawer-theme-toggle { background: none; }
  /* DARK MODE */
  body.dark-mode .mobile-menu-drawer{
    background: var(--dark) !important;
    color: var(--white);
  }

  /* DARK => show normal custom-logo-link like your header */
  body.dark-mode .mobile-menu-drawer__branding .custom-logo-link{ display:inline-flex !important; }
  body.dark-mode .mobile-menu-drawer__branding .dark-custom-logo-link{ display:none !important; }

  body.dark-mode .close-button{ color: var(--white); }

  body.dark-mode .mobile-menu-list > li > a,
  body.dark-mode .mobile-menu-list .sub-menu li a{
    color: var(--white);
  }

  body.dark-mode .drawer-theme-toggle{
    color: var(--white);
  }

  body.dark-mode .mobile-menu-overlay{
    background: rgba(0,0,0,.65);
  }
}


/* Ensure arrow animates nicely */
.mobile-menu-list .menu-item-has-children > a::after{
  content:"";
  width: 10px;
  height: 10px;

  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;

  transform: rotate(45deg);
  transition: transform .22s ease;   /* ✅ transition */
  flex: 0 0 auto;
  margin-left: 10px;
}

.mobile-menu-list .is-sub-open.menu-item-has-children > a::after{
  transform: rotate(-135deg);       /* ✅ rotates smoothly */
}

/* Optional: submenu open animation (height + fade) */
.mobile-menu-list .sub-menu{
  display:block;                    /* keep it block so it can animate */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s ease, opacity .20s ease;
}

.mobile-menu-list li.is-sub-open > .sub-menu{
  max-height: 900px;                /* big enough */
  opacity: 1;
}


/* Icon first, then text */
#mobile-menu-list > li > a{
  justify-content: flex-start;  /* stops pushing items apart */
}

#mobile-menu-list > li > a .menu-item-icon{
  order: -1;            /* ✅ icon comes first */
  margin-right: 12px;   /* spacing between icon and text */
}

#mobile-menu-list > li > a::after{
  margin-left: auto;    /* ✅ arrow stays on far right */
}