/* ============================================================
 * Multisite language switcher (ET / RU / EN)
 * v1.7.25
 *
 * Visual: pill-button row inline in the header.
 * Active language: brand green pill with ink text.
 * Inactive: subtle ghost pills that fill on hover.
 *
 * On mobile (≤640px): condensed — slightly smaller padding,
 * still always visible.
 * ============================================================ */

.km-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: rgba(10, 22, 40, 0.04);
  border-radius: 999px;
  font-family: "Geist Mono", ui-monospace, monospace;
  /* v1.7.40: keep all 3 pills visible on cramped mobile headers —
   * was being squeezed to ~zero width by flex siblings. */
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.km-lang-switch__item {
  display: flex;
  margin: 0;
  flex-shrink: 0;
}
.km-lang-switch__link {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--km-ink, #0A1628);
  opacity: 0.55;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
  line-height: 1;
}
.km-lang-switch__link:hover,
.km-lang-switch__link:focus-visible {
  opacity: 1;
  background: rgba(10, 22, 40, 0.08);
  outline: none;
}
/* v1.7.39: stronger contrast for current pill — white text on green
 * makes the active language unambiguous on both desktop and mobile.
 * Was previously dark ink on green — fine on desktop but mushy on phones. */
.km-lang-switch__item.is-current .km-lang-switch__link {
  background: var(--km-green-500, #10B981);
  color: #ffffff;
  opacity: 1;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(16, 185, 129, .25);
}
.km-lang-switch__item.is-current .km-lang-switch__link:hover {
  background: var(--km-green-500, #10B981);
}
.km-lang-switch__flag {
  /* v1.7.40: flag icons hidden globally — flag-icon-css library not loaded,
   * spans render as empty boxes. The 2-letter codes (ET/RU/EN) carry full
   * meaning on their own. To re-enable: enqueue flag-icon-css and uncomment
   * the box-sizing rules below. */
  display: none;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background-size: cover;
  background-position: 50% 50%;
  /* Don't show the literal "et"/"ru"/"en" text from MSLS-style spans */
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.km-lang-switch__label {
  font-size: 11px;
  line-height: 1;
}

/* Compact variant (mobile menu drawer / footer use) */
.km-lang-switch--compact {
  gap: 2px;
  padding: 3px;
}
.km-lang-switch--compact .km-lang-switch__link {
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: .1em;
}
.km-lang-switch--compact .km-lang-switch__flag {
  width: 12px;
  height: 9px;
}

/* Mobile (≤640px): tighter pills, with always-visible labels.
 * v1.7.39: was 10px font — too small to read on phones. Bumped to 13px
 * with bolder weight so all 3 codes (ET/RU/EN) are immediately legible
 * without zooming.
 *
 * v1.7.40: hide flag spans on mobile entirely. The flag classes
 * (flag-icon-ee, flag-icon-ru, flag-icon-us) rely on the optional
 * flag-icon-css library which isn't loaded — so they render as empty
 * boxes. The 2-letter codes alone are unambiguous (ET / RU / EN).
 * Also force labels visible at any width — never collapse to flag-only. */
@media (max-width: 640px) {
  .km-lang-switch {
    gap: 2px;
    padding: 3px;
  }
  .km-lang-switch__link {
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    gap: 0;
  }
  .km-lang-switch__flag {
    display: none !important;
  }
  .km-lang-switch__label {
    display: inline-block !important;
    font-size: 13px !important;
  }
}