/* Mobile language switcher clickability and layout safety.
   Global controls for EN | 中文 in the sticky header. */
:root {
  --mezzo-mobile-lang-z-index: 100003;
  --mezzo-mobile-lang-touch-height: 4rem;
  --mezzo-mobile-lang-font-size: 1.6rem;
  --mezzo-mobile-lang-gap: 0.52rem;
}

@media (max-width: 1080px) {
  html body .site-header .brand,
  html body .site-header a.brand {
    max-width: calc(100% - 20rem) !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  html body .site-header .mezzo-language-switcher-header-mobile {
    position: relative !important;
    z-index: var(--mezzo-mobile-lang-z-index) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: var(--mezzo-mobile-lang-touch-height) !important;
    padding: 0.55rem 0.75rem !important;
    gap: var(--mezzo-mobile-lang-gap) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html body .site-header .mezzo-language-switcher-header-mobile a,
  html body .site-header .mezzo-language-switcher-header-mobile .mezzo-lang-link {
    position: relative !important;
    z-index: calc(var(--mezzo-mobile-lang-z-index) + 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 3.4rem !important;
    min-height: 3.2rem !important;
    padding: 0.2rem 0.15rem !important;
    font-size: var(--mezzo-mobile-lang-font-size) !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html body .site-header .mobile-toggle,
  html body .site-header button.mobile-toggle {
    position: relative !important;
    z-index: calc(var(--mezzo-mobile-lang-z-index) + 2) !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 760px) {
  html body .site-header .brand,
  html body .site-header a.brand {
    max-width: calc(100% - 17rem) !important;
  }
}

@media (max-width: 390px) {
  html body .site-header .brand,
  html body .site-header a.brand {
    max-width: calc(100% - 16rem) !important;
  }

  html body .site-header .mezzo-language-switcher-header-mobile {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}