/**
 * Language Switcher — Frontend Styles
 *
 * Reproduces .nav-lang (desktop) and .drawer-lang (mobile) exactly from
 * the Buchhandlung List design, scoped under .ls-switcher.
 *
 * Design tokens:
 *   --primary:   #202684
 *   --cream:     #FAF7F2
 *   --ink-light: #3D3D5C
 *   --rule:      rgba(32,38,132,0.15)
 */

.ls-switcher {
  display: flex;
  gap: 0;
}

.ls-switcher a {
  text-decoration: none;
  transition: all 0.25s ease;
}

/* Label rendered via CSS so TranslatePress cannot see it as translatable text */
.ls-lang-link::before {
  content: attr(data-lang);
}

/* ── Desktop variant ─────────────────────────────────────────────────────── */

.ls-switcher--desktop.ls-switcher--preset {
  font-family: 'Literata', serif;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.ls-switcher--desktop.ls-switcher--preset .ls-lang-link {
  color: #3D3D5C;
  padding: 5px 12px;
  border: 1px solid rgba(32, 38, 132, 0.15);
  border-right: none;
}

.ls-switcher--desktop.ls-switcher--preset .ls-lang-link:last-child {
  border-right: 1px solid rgba(32, 38, 132, 0.15);
}

.ls-switcher--desktop.ls-switcher--preset .ls-lang-link:hover,
.ls-switcher--desktop.ls-switcher--preset .ls-lang-link.ls-active {
  background: #202684;
  color: #FAF7F2;
  border-color: #202684;
}

.ls-switcher--desktop.ls-switcher--preset .ls-lang-link.ls-active + .ls-lang-link {
  border-left-color: #202684;
}

/* ── Mobile variant ──────────────────────────────────────────────────────── */

.ls-switcher--mobile.ls-switcher--preset {
  font-family: 'Literata SC', 'Literata', serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-top: 40px;
}

.ls-switcher--mobile.ls-switcher--preset .ls-lang-link {
  color: #3D3D5C;
  padding: 8px 18px;
  border: 1px solid rgba(32, 38, 132, 0.15);
  border-right: none;
}

.ls-switcher--mobile.ls-switcher--preset .ls-lang-link:last-child {
  border-right: 1px solid rgba(32, 38, 132, 0.15);
}

.ls-switcher--mobile.ls-switcher--preset .ls-lang-link.ls-active,
.ls-switcher--mobile.ls-switcher--preset .ls-lang-link:hover {
  background: #202684;
  color: #FAF7F2;
  border-color: #202684;
}

.ls-switcher--mobile.ls-switcher--preset .ls-lang-link.ls-active + .ls-lang-link {
  border-left-color: #202684;
}

/* ── Accessibility ───────────────────────────────────────────────────────── */

.ls-lang-link:focus-visible {
  outline: 2px solid #202684;
  outline-offset: 2px;
  z-index: 1;
  position: relative;
}