/* ============================================================
   Studio Connecta · seletor de idioma (PT / EN)
   ------------------------------------------------------------
   Componente novo: o site monolingue nao precisava dele. Usa só
   tokens do DS2 e segue o desenho da pilula do header, para não
   introduzir linguagem visual nova. Entra no header (ao lado do
   WhatsApp) e no rodape.

   Acessibilidade: o idioma atual e um <span aria-current="true">,
   nao um link morto; o outro idioma e um <a hreflang> com rotulo
   por extenso no aria-label. Area de toque de 44px garantida por
   pseudo-elemento, sem alterar a altura visual da pilula do header.
   ============================================================ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(10, 10, 11, 0.08);
  border-radius: 999px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  background: transparent;
}

.lang-switch__item {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  text-decoration: none;
  /* 55% dava 4,40:1 sobre a pilula branca do header e reprovava o AA por
     pouco. 65% sobe para 6,31:1 e o item continua subordinado ao ativo. */
  color: color-mix(in srgb, var(--sc-ink-900) 65%, transparent);
  transition:
    color 150ms var(--ease-soft, ease),
    background-color 150ms var(--ease-soft, ease);
}

/* area de toque de 44px sem mexer na altura desenhada */
.lang-switch__item::after {
  content: "";
  position: absolute;
  inset: -8px -2px;
}

.lang-switch__item:hover {
  color: var(--sc-ink-900);
  background: rgba(10, 10, 11, 0.05);
}

.lang-switch__item:focus-visible {
  outline: 2px solid var(--sc-verde-deep);
  outline-offset: 2px;
}

/* idioma em uso: nao e link, e o estado atual */
.lang-switch__item[aria-current] {
  color: var(--sc-white);
  background: var(--sc-ink-900);
  cursor: default;
}

/* ---- sobre fundo escuro (rodape, secoes .dark) ---- */
.dark .lang-switch,
.footer .lang-switch {
  border-color: rgba(255, 255, 255, 0.16);
}

.dark .lang-switch__item,
.footer .lang-switch__item {
  color: color-mix(in srgb, var(--sc-white) 60%, transparent);
}

.dark .lang-switch__item:hover,
.footer .lang-switch__item:hover {
  color: var(--sc-white);
  background: rgba(255, 255, 255, 0.1);
}

.dark .lang-switch__item[aria-current],
.footer .lang-switch__item[aria-current] {
  color: var(--sc-ink-900);
  background: var(--sc-white);
}

.dark .lang-switch__item:focus-visible,
.footer .lang-switch__item:focus-visible {
  outline-color: var(--sc-verde);
}

/* ---- no celular a troca de idioma mora dentro do Menu ----
   O cabecalho ja disputa espaco com logotipo, WhatsApp e o botao Menu, e
   o painel aberto tem z-index maior que ele, entao um seletor no topo
   ficaria coberto na hora em que a pessoa esta navegando. O site2.js clona
   o seletor para dentro do painel, logo acima do primeiro item. */
@media (max-width: 768px) {
  .header-right .lang-switch {
    display: none;
  }
}

/* o clone dentro do painel: linha propria, alinhada aos itens do menu */
.menu-lang {
  align-self: flex-start;
  margin: 4px 0 18px;
}

/* o painel e claro como o papel do DS2, entao vale a pele padrao; o que
   muda e o alvo de toque, que aqui pode ser o real, sem truque de ::after */
.menu-lang .lang-switch__item {
  min-width: 44px;
  height: 40px;
  font-size: 12px;
}

.menu-lang .lang-switch__item::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch__item {
    transition: none;
  }
}