/* Toggle icon swap */
 .mh-menu-toggle .mh-icon-close {
     display: none;
 }

 .mh-menu-toggle.mh-is-open .mh-icon-open {
     display: none;
 }

 .mh-menu-toggle.mh-is-open .mh-icon-close {
     display: inline-block;
 }

 /* Drawer + Backdrop (mh- prefixed) */
/* Base drawer */
.mh-mobile-nav{
    position: fixed;
    inset: 0 auto 0 0;           /* left drawer, full height by default */
    width: 75%;
    max-width: 420px;
    min-width: 320px;
    height: 100svh;              /* better than 100dvh on mobile address bar changes */
    background: #011121 !important;
    transform: translateX(-100%);
    transition: transform var(--mh-speed, 320ms) ease;
    z-index: 1001;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* iOS smooth scroll */
    overscroll-behavior: contain;        /* avoid body scroll bleed */
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }
  
  /* When open, *offset* from the fixed header and *reduce* height */
  .mh-mobile-nav.mh-is-open{
    /* if your header is 48px tall, use 48px; or keep var for dynamic control */
    --mh-offset-top: 48px;
    inset: var(--mh-offset-top) auto 0 0;           /* pushes drawer below header */
    height: calc(100svh - var(--mh-offset-top));    /* keeps full visible height */
    transform: translateX(0);
  }
  
  /* Backdrop can keep covering full viewport */
  .mh-mobile-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.40);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mh-speed, 240ms) ease;
    z-index: 1000;
  }
  .mh-mobile-backdrop.mh-is-open{ opacity:1; pointer-events:auto; }
  

 .mh-body-lock {
     overflow: hidden;
     height: 100dvh;
 }

 /* Mobile-only styles + animated submenus */
 @media (max-width:1024px) {

    /* No hover/tap while menu is open */
.mh-menu-toggle.mh-is-open,
.mh-menu-toggle.mh-is-open:hover,
.mh-menu-toggle.mh-is-open:active,
.mh-menu-toggle.mh-is-open:focus,
.mh-menu-toggle.mh-is-open:focus-visible {
  background: none !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Close icon itself: never show tap highlight */
.mh-menu-toggle .mh-icon-close img {
  -webkit-tap-highlight-color: transparent;
  transition: none;
}

/* Extra guard: during the first few hundred ms of opening, ignore hover */
body.mh-opening .mh-menu-toggle:hover,
body.mh-opening .mh-menu-toggle:active,
body.mh-opening .mh-menu-toggle:focus {
  background: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

    button.sub-menu-toggle {
        display: none;
    }
     .mh-mobile-header .site-logo {
         margin: auto !important;
     }

     .mh-mobile-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         color: #fff;
         font-size: 20px;
         padding: 18px 16px;
         border-bottom: 1px solid rgba(255, 255, 255, .08);
     }

     .mh-close-nav, .mh-menu-toggle {
         background: transparent;
         border: 0;
         padding: 0;
         line-height: 0;
         cursor: pointer;
         height: 24px;
         width: 24px;
     }

     .mh-menu-container ul {
         padding-left: 0 !important;
     }

     .mh-navigation--mobile .menu li {
         list-style: none;
         padding: 0 16px;
         position: relative;
     }

     .mh-navigation--mobile .menu a {
         display: block;
         text-decoration: none;
         color: #fff;
         font-weight: 400;
         line-height: 44px;
         font-size: 16px;
     }

     /* Caret for items with children */
     .mh-navigation--mobile .menu-item-has-children>a {
         padding-right: 32px;
     }

     .mh-navigation--mobile .menu-item-has-children::after {
         content: '▼';
         position: absolute;
         right: 16px;
         top: 0;
         height: 44px;
         line-height: 44px;
         font-size: 12px;
         color: #fff;
         transition: transform 200ms ease;
         z-index: -1 !important;
     }

     .mh-navigation--mobile .menu-item-has-children.mh-is-open::after {
         transform: rotate(180deg);
     }

     /* Smooth submenu height animation (no display:none) */
     .mh-navigation--mobile .sub-menu {
         overflow: hidden;
         max-height: 0;
         /* Use the same speed var you already set on the drawer; increase a bit if you want slower open */
         transition: max-height var(--mh-speed, 320ms) ease;
         will-change: max-height;
     }

     .mh-navigation--mobile .sub-menu.mh-is-open {
         max-height: 800px;
     }

     /* big enough */
     .mh-navigation--mobile .sub-menu>li>a {
         padding-left: 12px;
     }

     /* hover state */
.mh-navigation--mobile .menu a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* light overlay */
    color: #00aced; /* or any accent color you like */
  }
 }
 @media (hover: hover) and (pointer: fine) {
    .mh-navigation--mobile .menu a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #00aced;
    }
  }