/* Mobile menu placement override
   Keeps the control inside the viewport regardless of header/container width. */

@media screen and (max-width: 900px) {
  html body .site-header .menu-toggle {
    position: fixed !important;
    z-index: 1001 !important;
    top: 11px !important;
    right: 64px !important;
    left: auto !important;
    display: flex !important;
    width: 46px !important;
    height: 46px !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body .site-header .menu-toggle-control {
    position: fixed !important;
    z-index: 1002 !important;
    top: 11px !important;
    right: 64px !important;
    left: auto !important;
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 0 !important;
    transform: none !important;
  }
}

@media screen and (max-width: 480px) {
  html body .site-header .menu-toggle,
  html body .site-header .menu-toggle-control {
    right: 32px !important;
  }
}

@media screen and (max-width: 360px) {
  html body .site-header .menu-toggle,
  html body .site-header .menu-toggle-control {
    top: 13px !important;
    right: 20px !important;
    width: 42px !important;
    height: 42px !important;
  }
}