/* =========================================================
   Language switch — flag + ISO code, sits in the utility bar
   between the WhatsApp/phone block and the theme toggle.
   Matches the topbar's mono microtype and 32px row height.
   ========================================================= */
.mz-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  color: var(--ink-on-dark);
  font: 500 var(--t-xs)/1 var(--ff-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.mz-lang__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity var(--d-1) var(--ease);
}
.mz-lang__item:hover,
.mz-lang__item:focus-visible { opacity: 1; }
.mz-lang__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* The active language is rendered as a <span>, not a link. */
.mz-lang__item.is-active {
  opacity: 1;
  font-weight: 700;
  cursor: default;
}

.mz-lang__flag {
  font-size: 14px;
  line-height: 1;
  /* Emoji rendering varies — guarantee a colored glyph on platforms with
     monochrome system fonts (Win 10 narrow profiles) by hinting the
     emoji-color font stack. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
}

.mz-lang__code { letter-spacing: var(--tr-label); }

.mz-lang__sep {
  opacity: 0.4;
  user-select: none;
}

/* Responsive: drop the country code on very narrow screens, keep only the
   flag so the topbar stays single-row alongside the phone number. */
@media (max-width: 720px) {
  .mz-lang__code { display: none; }
  .mz-lang { gap: 4px; }
  .mz-lang__sep { display: none; }
}