/* GERADO por _i18n/gera-idioma.mjs — não editar à mão.
   Seletor de idioma. Altura, cor e hover do botão de tema; painel com o raio, a
   borda e a sombra do dropdown de "Serviços" — a topbar não ganha padrão novo. */
.lang { position: relative; flex: none; }
.lang__botao {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding-inline: 8px 6px; border-radius: 999px;
  background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--text-muted);
  transition: background var(--duration-base, 240ms) ease, color var(--duration-base, 240ms) ease;
}
.lang__botao:hover { background: var(--chip); color: var(--text); }
.lang__botao:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.lang__curto { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.lang__seta {
  opacity: 0.7;
  transition: transform var(--duration-base, 240ms) var(--ease-arrive, cubic-bezier(0.16, 1, 0.3, 1));
}
.lang__botao[aria-expanded="true"] .lang__seta { transform: rotate(180deg); }

/* A bandeira é um retângulo 3:2 com canto arredondado e um aro sutil, para não
   flutuar sem contorno sobre fundo claro nem sumir sobre fundo escuro. */
.lang__bandeira {
  width: 20px; height: 14px; flex: none;
  border-radius: 3px; display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.lang__lista {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  min-width: 190px; padding: 6px;
  background: var(--card); border: 1px solid var(--stroke); border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
  display: grid; gap: 2px;
  transform-origin: top right;
  opacity: 0; transform: translateY(-4px) scale(0.98);
  transition: opacity var(--duration-base, 240ms) ease,
              transform var(--duration-base, 240ms) var(--ease-arrive, cubic-bezier(0.16, 1, 0.3, 1));
}
.lang__lista[data-aberto="true"] { opacity: 1; transform: none; }
/* O display autoral vence o "display: none" que o atributo hidden traz da folha
   do navegador — sem esta linha o painel nasce aberto e não fecha nunca. */
.lang__lista[hidden] { display: none; }

.lang__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--text);
  transition: background var(--duration-base, 240ms) ease;
}
.lang__item:hover { background: var(--chip-soft); }
.lang__rotulo { flex: 1; }
.lang__check { flex: none; color: var(--brand-text); opacity: 0; }
.lang__item[aria-current="true"] .lang__check { opacity: 1; }

@media (max-width: 900px) {
  .lang__curto, .lang__seta { display: none; }
  .lang__botao { padding-inline: 6px; gap: 0; }
  /* Na topbar estreita o botão fica perto da borda esquerda: alinhado à direita
     dele, o painel saía da viewport (medido em 375px). Aqui ele abre para a
     direita, que é o lado onde sobra espaço. */
  .lang__lista { right: auto; left: 0; transform-origin: top left; }
}

@media (prefers-reduced-motion: reduce) {
  .lang__lista, .lang__seta, .lang__item, .lang__botao { transition-duration: 1ms; }
}