/* Language switcher — segmented buttons in header
 * Replaces the theme's hidden <select> with visible pill toggles.
 * Uses DoIt's CSS variables so light/dark both work.
 */
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--global-border-color, #e8e0d8);
  border-radius: 999px;
  padding: 0.15rem;
  line-height: 1;
  vertical-align: middle;
}

.language-switcher .lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--global-font-secondary-color, #5c5348);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.language-switcher .lang-btn:hover {
  color: var(--global-link-hover-color, #1e3a5f);
}

.language-switcher .lang-btn.is-active {
  background-color: var(--global-link-hover-color, #1e3a5f);
  color: var(--global-background-color, #faf8f5);
  font-weight: 600;
}

/* Desktop header: keep the same margin rhythm as other menu items */
#header-desktop .language-switcher {
  margin: 0 0.5rem;
}

/* Mobile menu drawer: full-width centered row */
#header-mobile .language-switcher {
  display: flex;
  justify-content: center;
  margin: 0.25rem 1rem;
}