/* Emoji font fallbacks for consistent rendering.
   NEVER set emoji fonts as the primary family on whole menus/popovers —
   on iOS, Apple Color Emoji stretches Latin glyphs into wide letter-spacing. */
:root {
  --emoji-fonts: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Twemoji Mozilla","EmojiOne Color","Segoe UI Symbol", system-ui, sans-serif;
}

.emoji-font,
.emoji,
.mud-typography .emoji,
.mud-button .emoji,
.mud-menu .emoji,
.mud-popover .emoji,
.mud-dialog .emoji {
  font-family: var(--emoji-fonts) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

/* Twemoji images sizing/alignment */
.twemoji, .emoji img.twemoji {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em; /* similar to Bootstrap */
}

/* Also prefer color-emoji for any element explicitly requesting it */
[data-emoji], .use-emoji-font {
  font-family: var(--emoji-fonts) !important;
}

/* All Mud menus/popovers: restore normal UI typography on every viewport.
   (Previously emoji-primary font-family broke Latin spacing on mobile Safari.) */
.mud-popover,
.mud-popover .mud-typography,
.mud-popover .mud-list-item,
.mud-popover .mud-list-item-text,
.mud-popover .mud-button-label,
.mud-menu .mud-typography,
.mud-menu .mud-list-item,
.mud-menu .mud-list-item-text,
.mud-menu .mud-button-label {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-align: start;
  text-justify: auto;
  font-kerning: normal;
  font-family: var(--font-primary, var(--mud-typography-default-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)) !important;
}

.mud-popover .emoji,
.mud-menu .emoji {
  font-family: var(--emoji-fonts) !important;
}