/* v3.0.2 — make the mobile menu button visibly clickable.
   The v3 Clean Core layer made the button dark, while an older icon rule
   still painted the hamburger bars dark. This final layer forces a high
   contrast icon and a clear touch target. */

@media (max-width: 767.98px) {
  html body.vlg-theme .vlg-mobile-toggle,
  html body.vlg-theme .vlg-mobile-toggle.vlg-mobile-toggle-mobile-only {
    display: inline-grid !important;
    place-items: center !important;
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 178, 80, .25) !important;
    border-radius: 16px !important;
    background: #071224 !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(7, 18, 36, .22) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.vlg-theme .vlg-mobile-toggle-icon {
    display: block !important;
    position: relative !important;
    width: 22px !important;
    height: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.vlg-theme .vlg-mobile-toggle-icon span {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    width: 22px !important;
    height: 3px !important;
    min-height: 3px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform-origin: center !important;
    transition: top .18s ease, transform .18s ease, opacity .18s ease !important;
  }

  html body.vlg-theme .vlg-mobile-toggle-icon span:nth-child(1) { top: 0 !important; }
  html body.vlg-theme .vlg-mobile-toggle-icon span:nth-child(2) { top: 7.5px !important; }
  html body.vlg-theme .vlg-mobile-toggle-icon span:nth-child(3) { top: 15px !important; }

  html body.vlg-theme .vlg-mobile-toggle:hover,
  html body.vlg-theme .vlg-mobile-toggle:active {
    background: #0d1b32 !important;
    transform: translateY(-1px) !important;
  }

  html body.vlg-theme .vlg-mobile-toggle:focus-visible {
    outline: 3px solid rgba(255, 147, 0, .35) !important;
    outline-offset: 3px !important;
  }

  html body.vlg-theme .vlg-mobile-toggle.is-open .vlg-mobile-toggle-icon span:nth-child(1) {
    top: 7.5px !important;
    transform: rotate(45deg) !important;
  }

  html body.vlg-theme .vlg-mobile-toggle.is-open .vlg-mobile-toggle-icon span:nth-child(2) {
    opacity: 0 !important;
  }

  html body.vlg-theme .vlg-mobile-toggle.is-open .vlg-mobile-toggle-icon span:nth-child(3) {
    top: 7.5px !important;
    transform: rotate(-45deg) !important;
  }
}