/* Tuba Lyra — language switcher */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--border-strong, rgba(14, 17, 22, 0.16));
  border-radius: 10px;
  cursor: pointer;
  color: var(--text, #0E1116);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.lang-toggle:hover { border-color: var(--accent, #C7842F); color: var(--accent, #C7842F); }
.lang-toggle:focus-visible { outline: none; border-color: var(--accent, #C7842F); box-shadow: 0 0 0 3px rgba(199, 132, 47, 0.18); }

.lang-flag { font-size: 18px; line-height: 1; }
.lang-chev { transition: transform 0.2s ease; flex-shrink: 0; }
.lang-toggle[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(14, 17, 22, 0.10);
  border-radius: 12px;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.22), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
  list-style: none;
  z-index: 250;
  animation: lang-menu-in 0.16s ease-out;
}

@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0E1116;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  user-select: none;
}

.lang-menu li:hover,
.lang-menu li:focus-visible {
  background: rgba(199, 132, 47, 0.10);
  color: #A06420;
  outline: none;
}

.lang-menu li[aria-selected="true"] {
  background: rgba(199, 132, 47, 0.14);
  color: #A06420;
  font-weight: 600;
}

.lang-flag-small { font-size: 16px; line-height: 1; }

/* Dark variant — for headers/contexts on a dark background */
.lang-switcher.is-dark .lang-toggle,
.is-dark > .lang-switcher .lang-toggle {
  border-color: rgba(250, 250, 247, 0.22);
  color: #FAFAF7;
}
.lang-switcher.is-dark .lang-toggle:hover,
.is-dark > .lang-switcher .lang-toggle:hover {
  border-color: #F0A93D;
  color: #F0A93D;
}