.lang-menu {
  position: relative;
}

.lang-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-inline-size: var(--tap);
  block-size: var(--tap);
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-strong);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.lang-menu__toggle::-webkit-details-marker {
  display: none;
}

.lang-menu__toggle:hover,
.lang-menu[open] > .lang-menu__toggle {
  border-color: var(--color-border-strong);
}

.lang-menu[open] > .lang-menu__toggle {
  background-color: var(--color-surface-muted);
}

.lang-menu__globe {
  flex-shrink: 0;
  color: var(--color-gold-600);
}

.lang-menu__code {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  line-height: 1;
  direction: ltr;
}

/* Arabic and Persian show a native abbreviation (ع, فا), not a Latin code:
   no letter-spacing (it breaks the joining) and a size that reads as script. */
.lang-menu__code:lang(ar),
.lang-menu__code:lang(fa) {
  font-size: var(--text-sm);
  letter-spacing: 0;
  direction: rtl;
}

.lang-menu[open] > .lang-menu__toggle::before {
  content: "";
  position: fixed;
  z-index: 19;
  inset: 0;
  cursor: default;
}

.lang-menu__panel {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + var(--space-2));
  /* Hang from the toggle's end edge so the panel opens inward. The toggle is
     the last control at the header's end on phones (Donate is hidden below
     64rem) and sits just before Donate on desktop, so this keeps the panel
     on screen at every width, in RTL and LTR alike. */
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  inline-size: 11.5rem;
  max-inline-size: calc(100vw - 2 * var(--gutter));
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  animation: lang-menu-in var(--duration-base) var(--ease-out);
}

@keyframes lang-menu-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
  }
}

.lang-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: background-color var(--duration-fast) ease;
}

.lang-menu__item:hover {
  background-color: var(--color-surface-muted);
}

.lang-menu__item[aria-current="true"] {
  background-color: var(--color-forest-50);
  color: var(--color-forest-800);
  font-weight: var(--weight-semibold);
}

.lang-menu__tag {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  direction: ltr;
}

.lang-menu__item[aria-current="true"] .lang-menu__tag {
  color: var(--color-forest-700);
}

@media (prefers-reduced-motion: reduce) {
  .lang-menu__panel {
    animation: none;
  }
}