/* ===========================================================================
   Seletor de idioma — três opções, não duas.
   ---------------------------------------------------------------------------
   O site estático alternava entre dois idiomas com UM link ("EN" ↔ "PT"), e
   `.lang-switch` em instrument.css estiliza exatamente isso: um <a> com borda,
   respiro e 44px de altura.

   Com três idiomas o elemento vira um grupo com três filhos, e aquelas regras
   passam a valer para o container — o que produz uma borda em volta de tudo e
   um alvo de toque errado. Este arquivo corrige o container e move a aparência
   para os filhos.

   Fica separado de instrument.css de propósito: aquele arquivo é copiado byte
   a byte do site estático, e mantê-lo idêntico é o que permite comparar os
   dois lado a lado para provar que a conversão não perdeu nada.
   ========================================================================= */

/* o container deixa de parecer um botão.
   `gap: 0` é decisão, não descuido: com 2px de vão entre os itens, um clique
   que caísse no meio não fazia nada — e a pessoa clicava de novo. Foi o
   defeito relatado como "preciso clicar duas vezes". Aqui os alvos se tocam, e
   a separação é feita por borda, que não consome área clicável. */
.lang-switch {
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--r-btn);
  min-height: 0;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
}

/* cada idioma vira o botão que o link único era.
   `min-width: 44px` atende a WCAG 2.5.5: os alvos estavam com 37px, abaixo do
   mínimo, num grupo de três — três alvos pequenos e colados erram mais que um
   grande. */
.lang-switch > a,
.lang-switch > span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 8px var(--space-3);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--border-subtle);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-switch > :first-child {
  border-left: 0;
}

.lang-switch > a {
  color: var(--text-muted);
}

.lang-switch > a:hover,
.lang-switch > a:focus-visible {
  color: var(--accent);
  background: rgba(34, 224, 232, 0.08);
}

/* O idioma corrente NÃO é link: é estado.
   Precisa parecer estado, senão a pessoa clica nele esperando abrir opções —
   e nada acontece, o que também produz o segundo clique. Daí `cursor: default`
   e o contraste invertido: o ativo é o preenchido, os outros são os vazios.
   A régua embaixo dá um segundo sinal além da cor, para quem não distingue
   ciano de cinza. */
.lang-switch > span[aria-current] {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  cursor: default;
  position: relative;
}

.lang-switch > span[aria-current]::after {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* --- na gaveta do telefone: nomes por extenso, ocupando a largura ------- */
.lang-switch--gaveta {
  display: flex;
  margin-top: var(--space-3);
  width: 100%;
}

.lang-switch--gaveta > a,
.lang-switch--gaveta > span {
  flex: 1;
  min-height: 48px;
}

/* --- no rodapé: fica na linha de baixo, entre os dois textos ------------
   Estava dentro da coluna "Contato" e custava 27px de rolagem horizontal na
   página inteira: o rodapé é um grid de 5 colunas dimensionado para o
   conteúdo que já existia, e três idiomas não cabem numa delas. */
.lang-switch--rodape {
  gap: var(--space-1, 4px);
}

/* 44px também aqui. A primeira versão usava 36px "porque é rodapé" — mas o
   alvo não fica menor por estar no fim da página, e no telefone é justamente
   onde o polegar chega com menos precisão. */
.lang-switch--rodape > a,
.lang-switch--rodape > span {
  padding: 6px var(--space-3);
  min-height: 44px;
}

.lang-switch--rodape > span[aria-current]::after {
  bottom: 6px;
}

/* Em telas estreitas o rodapé empilha; centralizar evita o seletor ficar
   sozinho e desalinhado embaixo do texto. */
@media (max-width: 640px) {
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}