/*
 * GE2studio V1.10.1 — mobile navigation visual refinement.
 *
 * The previous circular control was visually too prominent next to the
 * wordmark.  Keep a 44–46px accessible tap target, but make the visible icon
 * editorial, compact and aligned with the right edge of the header.
 */

@media (max-width: 1100px) {
  .site-header .mobile-menu-toggle {
    position: relative;
    top: 0 !important;
    box-sizing: border-box;
    width: 46px !important;
    height: 46px !important;
    padding: 10px 1px 10px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .site-header .mobile-menu-toggle .mobile-menu-bar {
    display: block;
    height: 2px !important;
    flex: 0 0 2px !important;
    border-radius: 999px;
    background: rgba(244, 240, 232, .96) !important;
    transform-origin: center;
    transition: width .18s ease, transform .2s ease, opacity .16s ease, background-color .18s ease;
  }

  .site-header .mobile-menu-toggle .mobile-menu-bar:nth-child(1),
  .site-header .mobile-menu-toggle .mobile-menu-bar:nth-child(3) {
    width: 25px !important;
  }

  .site-header .mobile-menu-toggle .mobile-menu-bar:nth-child(2) {
    width: 17px !important;
    background: var(--orange-bright) !important;
  }

  .site-header .mobile-menu-toggle:hover {
    background: rgba(244, 240, 232, .045) !important;
  }

  .site-header .mobile-menu-toggle:focus-visible {
    outline: 2px solid rgba(221, 100, 44, .82);
    outline-offset: 2px;
  }

  .site-header .mobile-menu-toggle:active {
    background: rgba(244, 240, 232, .075) !important;
  }

  .site-header .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bar:nth-child(1) {
    width: 24px !important;
    transform: translateY(7px) rotate(45deg);
  }

  .site-header .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bar:nth-child(2) {
    width: 0 !important;
    opacity: 0;
  }

  .site-header .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bar:nth-child(3) {
    width: 24px !important;
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 360px) {
  .site-header .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .mobile-menu-toggle,
  .site-header .mobile-menu-toggle .mobile-menu-bar {
    transition: none !important;
  }
}