/* ExtremeHub — seletor global de região (N-I18N-REGION-ONLY).
 * ============================================================
 *
 * POR QUE ESTE ARQUIVO EXISTE. As regras `.lang-*` moravam em `eh-app.css`, que só o
 * `index.html` carrega. O seletor agora é obrigatório em TODA superfície — landing,
 * painéis, Admin, KB, páginas legais, reset e 404 — e três dessas páginas não carregam
 * uma linha de JS ou CSS da aplicação. Duplicar as regras por página criaria o mesmo
 * componente em cinco lugares, que é exatamente o que o contrato proíbe: UM componente
 * global canônico. Então as regras saíram de `eh-app.css` e vieram para cá, e esta folha
 * é carregada por todas as páginas.
 *
 * TODA VAR TEM FALLBACK. Em `eh-app.css` o tema define `--border`, `--text`, `--card`,
 * `--bg2`, `--accent`. Nas páginas legais e no 404 essas variáveis podem não existir —
 * sem fallback o botão nasceria transparente sobre fundo transparente, ou seja, invisível.
 * Os valores de reserva reproduzem o tema escuro do produto.
 */

.lang-switcher{position:relative;flex-shrink:0}

/* O botão mostra `BR · PT`: região à esquerda, idioma à direita.
   NÃO existe bandeira aqui, e a ausência é deliberada — ver a nota em eh-i18n-dom.js:
   o Chrome no Windows não desenha emoji de bandeira e renderiza os dois indicadores
   regionais como LETRAS, então `🇬🇧` virava o texto "GB" e o botão lia "GB GB · PT". */
.lang-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .6rem;border-radius:8px;border:1px solid var(--border,#2a2a2a);background:none;color:var(--text,#ededed);cursor:pointer;font-size:.8rem;transition:all .2s;min-height:2.75rem;padding-inline:.75rem}
.lang-btn:hover{border-color:var(--accent,#22c55e);color:var(--accent,#22c55e)}
.lang-btn:focus-visible{outline:2px solid var(--accent,#22c55e);outline-offset:2px}
.lang-code{font-weight:600;letter-spacing:.03em}
.lang-flag{font-size:1rem;line-height:1}

.lang-menu{position:absolute;top:calc(100% + .4rem);right:0;min-width:12rem;background:var(--card,#141414);border:1px solid var(--border,#2a2a2a);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:.35rem;display:none;z-index:60}
.lang-menu.open{display:block}

/* Teto de altura: com as 7 regiões o menu podia ultrapassar a viewport em 320px.
   Rolar DENTRO do menu mantém o documento sem scroll lateral e o rodapé alcançável. */
.lang-menu{max-height:min(70vh,26rem);overflow-y:auto}

.lang-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .6rem;border-radius:6px;background:none;border:none;color:var(--text,#ededed);cursor:pointer;font-size:.85rem;text-align:left;transition:background .15s;min-height:2.75rem}
.lang-item:hover{background:var(--bg2,#1e1e1e)}
.lang-item.active{color:var(--accent,#22c55e);font-weight:600}
.lang-item:focus-visible{outline:2px solid var(--accent,#22c55e);outline-offset:-2px}

/* O código do país (BR, US…) fica em largura fixa para os nomes alinharem numa coluna. */
.lang-item-code{display:inline-block;min-width:1.9rem;font-weight:600;letter-spacing:.03em;color:var(--muted,#8b8b8b)}
.lang-item.active .lang-item-code{color:var(--accent,#22c55e)}

/* Título do menu. Sobrou UMA seção — `País ou região` — porque a seção `Idioma` foi
   removida por decisão do proprietário: a região passou a decidir o idioma sozinha. */
.lang-section{padding:.45rem .6rem .25rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#8b8b8b);font-weight:600}

/* Nas páginas sem shell da aplicação (legais, 404, KB) o seletor se posiciona sozinho no
   canto superior direito, sem depender de um header que não existe lá. */
.lang-switcher.lang-floating{position:fixed;top:1rem;right:1rem;z-index:120}
@media (max-width:480px){
  .lang-switcher.lang-floating{top:.5rem;right:.5rem}
  .lang-menu{min-width:11rem}
}