/* Seletor de idioma + neutralização do visual padrão do Google.

   Arquivo isolado de propósito: se um dia a tradução sair do projeto, apagar
   este CSS, o JS, os dois partials e as marcações translate="no" encerra o
   assunto. Nada do header depende daqui. */

/* ------------------------------------------ o que o Google injeta na página */

/* A barra superior do widget, num iframe com a classe .skiptranslate. O
   seletor é específico (iframe + a classe do próprio Google) para não alcançar
   nenhum elemento do site: os iframes daqui são o mapa e o vídeo, sem essa
   classe. */
iframe.skiptranslate,
.skiptranslate > iframe {
  display: none !important;
}

/* Ao mostrar aquela barra, o Google empurra a página com body{top:40px}. O
   site nunca posiciona o body, então zerar aqui não desfaz nada nosso. */
body {
  top: 0 !important;
}

/* O <select> nativo do widget: fica no DOM porque o TranslateElement precisa
   dele, mas quem o visitante vê é o nosso seletor. Fora da vista sem
   display:none — alguns navegadores param de processar o que está oculto. */
#google_translate_element {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A aba flutuante do widget — o quadradinho que aparece num canto da tela
   alguns segundos depois de a página abrir.

   Lida direto do el_main do Google: ele cria um <div> container, injeta um
   <iframe> dentro e marca o div com a classe goog-te-ftab-float ("ftab" =
   floating tab). A posição vem de um switch cujo ramo padrão é
   `top: 0, left: 20` — o canto superior esquerdo.

   Esconder só o iframe filho não bastava: ele já cai na regra de
   iframe.skiptranslate acima, mas o div container tem estilo próprio no CSS do
   Google e continuava desenhado na tela. Quem some aqui é o container.

   É uma segunda interface de tradução, redundante com o seletor do header —
   não é peça do mecanismo. O TranslateElement e o cookie googtrans, que fazem
   a tradução acontecer, seguem intactos. */
.goog-te-ftab-float {
  display: none !important;
}

/* O balão de "texto original" que o Google mostra ao passar o mouse sobre um
   trecho traduzido. Nasce com display:none e só aparece no hover; some aqui
   porque é UI do widget flutuando sobre o conteúdo da Matrix. O id é gerado
   pelo el_main e não existe em lugar nenhum do site. */
#goog-gt-tt {
  display: none !important;
}

/* O spinner de progresso do widget — o disco branco com o ícone do Translate e
   o anel azul girando, que fica preso no canto superior esquerdo.

   Lido do el_main e do CSS do próprio Google. A função que o cria monta
   exatamente esta árvore:

     <div class="…-wOHMyf">            ← posicionado, position:fixed
       <div class="…-OiiCO">           ← disco de 104px, ícone do Translate
         <svg viewBox="0 0 66 66">     ← gira (spinner-rotator)
           <circle r="30" stroke-linecap="round" stroke="#4285F4">

   E o CSS do Google explica o comportamento:

     .…-wOHMyf         { position: fixed; left: -1000px; top: -1000px }  ← em repouso
     .…-wOHMyf-ti6hGc  { left: -14px;    top: -14px }                    ← quando ativo
     .…-OiiCO-ti6hGc   { opacity: 1 }

   Ou seja: em repouso ele mora fora da tela; ao ficar ativo, o modificador o
   traz para -14px/-14px — o canto superior esquerdo. É indicador de progresso,
   não peça do mecanismo: some daqui sem afetar a tradução.

   Duas regras de propósito. A primeira mira o wrapper pela classe e é exata
   hoje. A segunda é a rede de segurança para quando o Google recompilar e
   trocar os hashes: identifica o componente pela estrutura e pelas medidas do
   desenho, que não mudam com a ofuscação. Nenhum SVG do site tem viewBox
   66x66 nem círculo de raio 30 — conferido em todo o projeto. */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
  display: none !important;
}

div:has(> div > svg[viewBox="0 0 66 66"] > circle[r="30"][stroke-linecap="round"]) {
  display: none !important;
}

/* Realce amarelo que o Google aplica ao texto traduzido ao passar o mouse. */
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------ o nosso seletor */

/* O contexto de posicionamento do menu. Do tamanho do conteudo, nunca
   esticado: se este bloco ocupar a largura ou a altura de uma celula do grid,
   o menu (top:100%; right:0) passa a ancorar na celula e abre longe do botao.
   Por isso flex:0 0 auto e align-self:center, e nao apenas position:relative. */
.lang {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  line-height: 0;
}

.lang__botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(35, 31, 32, 0.16);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lang__botao:hover {
  border-color: var(--color-text);
}

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

.lang__bandeira {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  /* A moldura evita que a faixa branca do Brasil e da Espanha se dissolva no
     fundo claro do header. */
  box-shadow: 0 0 0 1px rgba(35, 31, 32, 0.12);
}

.lang__sigla {
  letter-spacing: 0.02em;
}

.lang__seta {
  width: 10px;
  height: 7px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.lang__botao[aria-expanded="true"] .lang__seta {
  transform: rotate(180deg);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 178px;
  padding: 6px;
  border: 1px solid rgba(35, 31, 32, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(35, 31, 32, 0.12);
}

.lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lang__item:hover {
  background: var(--cream, #f6f3ef);
}

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

.lang__item[aria-current="true"] {
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------------------------------------------------------------- celular */

@media (max-width: 1199px) {
  /* A partir daqui o header esta no modo compacto: fica a bandeira e a sigla,
     sem a seta, para dividir a barra com o botao do menu.
     O menu continua ancorado à direita, dentro da tela. */
  .lang__botao {
    padding: 7px 10px;
    gap: 6px;
  }

  .lang__seta {
    display: none;
  }
}

@media (max-width: 400px) {
  .lang__sigla {
    display: none;
  }

  .lang__menu {
    min-width: 160px;
  }
}

/* Trava de seguranca em qualquer largura: ancorado a direita do botao, o menu
   nunca deve ultrapassar a borda da tela. */
.lang__menu {
  max-width: calc(100vw - 2 * var(--gutter, 20px));
}