/* =============================================================================
 * pccx — language switcher (Furo-aware).
 *
 * Rendered inside Furo's sidebar, immediately below `.sidebar-brand`, by
 * `_templates/sidebar/brand.html`. Style matches Furo's own sidebar typography
 * and is theme-aware via Furo CSS variables — no hardcoded colors.
 * ============================================================================= */

.pccx-langswitch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 0.25rem 0 0.75rem;
  padding: 0.1rem 0.25rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-foreground-muted);
  text-align: center;
}

.pccx-langswitch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  color: var(--color-foreground-secondary);
  text-decoration: none !important;
  transition:
    background-color 120ms ease-in-out,
    color            120ms ease-in-out;
}

.pccx-langswitch__btn:hover {
  background-color: var(--color-background-hover);
  color: var(--color-brand-primary);
}

.pccx-langswitch__btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.pccx-langswitch__btn.is-active {
  color: var(--color-brand-primary);
  font-weight: 700;
  cursor: default;
}

.pccx-langswitch__btn.is-active:hover {
  background-color: transparent;
}

.pccx-langswitch__sep {
  user-select: none;
  color: var(--color-foreground-border);
}

/* -- Mobile (Furo's mobile header shows the sidebar via the drawer) -------- */
@media (max-width: 67em) {
  .pccx-langswitch {
    margin-block: 0.5rem 0.75rem;
    font-size: 0.88rem;
  }
}