/*
 * LanguageSwitcher widget — CSS-only dropdown.
 * Reveal on :hover or keyboard :focus-within (a11y).
 */

.lang-switcher {
  position: relative;
  display: inline-block;
}

.lang-switcher__current {
  background: none;
  border: none;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0.02em;
}

.lang-switcher__current:hover,
.lang-switcher__current:focus {
  outline: none;
  opacity: 0.8;
}

.lang-switcher__caret {
  font-size: 0.7em;
  line-height: 1;
}

.lang-switcher__menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 64px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.lang-switcher:hover .lang-switcher__menu,
.lang-switcher:focus-within .lang-switcher__menu {
  display: block;
}

.lang-switcher__link {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  color: #333;
}

.lang-switcher__link:hover {
  background: #f5f5f5;
  text-decoration: none;
}

/*
 * Flat variant — used in the mobile header. Two inline pills, the active
 * language is non-clickable; the alternate is a plain link that swaps the
 * URL prefix on tap. No dropdown, no JS.
 */
/*
 * Mobile header: stretch the icon row to fill the bar so that the
 * lang-switcher's margin-left:auto can push the language pills all the
 * way to the viewport edge instead of stopping at the icons' content box.
 */
.mobile-header__top .header__btns {
  width: 100%;
}

.lang-switcher--flat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.lang-switcher__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #1d1929;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switcher__pill:hover {
  text-decoration: none;
  color: #e106a4;
}

.lang-switcher__pill--active,
.lang-switcher__pill--active:hover {
  background: #e106a4;
  color: #fff;
  cursor: default;
}