/* =============================================================================
   casa_bandeiras.css — companion de casa_bandeiras.js (Casa OXXY, oxxy.ai/casa)
   =============================================================================

   HISTÓRICO: LANE BANDEIRAS (28/08, manhã) = bloco 1 abaixo (bandeira igual
   ao desktop). LANE TOPBAR-FINA (28/08, noite) = blocos 2-4: ordem direta
   do Founder — "ao invés de 3 bandeiras em linha, prefiro uma só igual ao
   desktop, onde se clica abre as bandeiras, pra economizar espaço e ficar
   melhor visualmente. As letras de aumentar/diminuir também: menos
   destaque. Precisa ser tudo fino, nada gritante."

   Carrega DEPOIS de casa.css (já é assim hoje, sem mudança de costura).
   !important só onde a regra concorrente de casa.css tem especificidade
   igual ou maior (documentado regra a regra). Autocontido de propósito:
   tamanhos/cores/raios redeclarados, não depende de nenhuma classe de
   casa.css continuar exatamente igual amanhã.

   NAMESPACE RESERVADO (próximas lanes, não reusem): .casa-bandeira-desktop,
   .casa-topbarmenu, .casa-topbarmenu-pop, .casa-topbarmenu-aberto,
   .casa-topbarmenu-caret. */

/* =============================================================================
   1) bandeira igual ao desktop (LANE BANDEIRAS, mantido 1:1 — escopo
      original: só o desenho da bandeira, nada do botão em si)
   ============================================================================= */
.casa-idiomas .casa-idioma-bandeira {
  filter: none !important;
}
.casa-idiomas .casa-bandeira-desktop {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  transform: none !important;
  opacity: .5;
  transition: opacity .15s ease;
}
.casa-idiomas .casa-idioma-btn:hover .casa-bandeira-desktop {
  opacity: .85;
  transform: none !important;
}
.casa-idiomas .casa-idioma-btn[aria-pressed="true"] .casa-bandeira-desktop {
  opacity: 1;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .casa-idiomas .casa-bandeira-desktop { transition: none; }
}

/* =============================================================================
   2) LANE TOPBAR-FINA — "1 bandeira só, clique abre as outras": esconde a
      letra PT/EN/ES (o desktop, fonte desta lane, também nunca mostra essa
      letra — só a bandeira). Nome acessível não perde nada: os 3 botões já
      têm aria-label próprio (Português/English/Español) que cobre o botão
      inteiro no casa.html original — o texto era só reforço visual.
   ============================================================================= */
.casa-idiomas .casa-idioma-txt { display: none; }

/* =============================================================================
   3) menu colapsável genérico (idioma + tamanho de letra, mesmo mecanismo —
      pedido literal do Founder: "mesmo padrão" pros dois). A "face" (botão
      visível fora do pop) é sempre o 1º filho-elemento do grupo —
      casa_bandeiras.js garante isso ao mover os nós reais.
   ============================================================================= */
.casa-topbarmenu { position: relative; }

.casa-topbarmenu-pop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--oxxy-panel-strong);
  border: 1px solid var(--oxxy-border);
  border-radius: var(--oxxy-radius-sm);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  z-index: 25; /* mesma faixa do FAB/WhatsApp — abaixo do composer (30), nunca acima */
  min-width: max-content;
}
.casa-topbarmenu.casa-topbarmenu-aberto .casa-topbarmenu-pop { display: flex; }

.casa-topbarmenu-pop .casa-idioma-btn,
.casa-topbarmenu-pop .casa-tamanho-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* caret discreto: mora DENTRO de cada botão (aria-hidden), CSS só mostra o
   do 1º filho (a face). Clicar nele é clicar no próprio botão. */
.casa-topbarmenu-caret {
  display: none;
  margin-left: 4px;
  font-size: 7px;
  line-height: 1;
  opacity: .55;
  vertical-align: middle;
  transition: transform .15s ease;
}
.casa-topbarmenu > :first-child .casa-topbarmenu-caret { display: inline-block; }
.casa-topbarmenu.casa-topbarmenu-aberto > :first-child .casa-topbarmenu-caret {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .casa-topbarmenu-caret { transition: none; }
}

/* =============================================================================
   4) LANE TOPBAR-FINA — "tudo fino, nada gritante": peso de fonte mais
      leve em todo o conjunto (Silêncio/Mapa/idioma/tamanho/Tema/Tela
      cheia) e o gradiente da marca vira ACENTO (borda fina), nunca mais
      fundo chapado, nos estados ativos/abertos. O logo NÃO é tocado aqui
      (fora do escopo desta lane — casa.css/casa.html).
   ============================================================================= */
.casa-idioma-btn, .casa-topbar-btn, .casa-tamanho-btn {
  font-weight: 600 !important;
}

/* truque de "borda gradiente, miolo sólido": 2 camadas de background, uma
   em padding-box (o miolo, cor sólida do painel) e outra em border-box (o
   gradiente, só aparece na faixa da borda). Substitui o preenchimento
   chapado (background:var(--oxxy-grad)) que existia antes nestes 3
   seletores em casa.css. */
.casa-idioma-btn[aria-pressed="true"],
.casa-tamanho-btn[aria-pressed="true"] {
  background:
    linear-gradient(var(--oxxy-panel-strong), var(--oxxy-panel-strong)) padding-box,
    var(--oxxy-grad) border-box !important;
  border: 1.5px solid transparent !important;
  color: var(--oxxy-ink) !important;
}
.casa-topbar-btn[aria-pressed="true"],
.casa-topbar-btn[aria-expanded="true"] {
  background:
    linear-gradient(var(--oxxy-panel), var(--oxxy-panel)) padding-box,
    var(--oxxy-grad) border-box !important;
  border: 1.5px solid transparent !important;
  color: var(--oxxy-ink) !important;
}

/* =============================================================================
   5) mobile — com 1 bandeira + tamanho recolhido, cabe numa linha só.
      min-height/min-width de 44px em casa.css (@media max-width:768px)
      infla o botão visualmente; aqui devolvemos o visual compacto e
      confiamos no ::after invisível de 44px que casa.css já define pra
      QUALQUER largura de tela (mesma filosofia que o próprio arquivo já
      documenta: alvo de toque expandido por pseudo-elemento, sem inflar o
      botão visível). Textos sem aria-label própria (Silêncio/Tema/Tela
      cheia) usam a MESMA técnica de .sr-only de casa.css, redeclarada aqui
      pra este arquivo não depender daquele não mudar — nunca
      display:none em texto informativo, só clip visual (nome acessível
      continua existindo). "Mapa" fica de fora (não tem ícone pra
      substituir o texto sem criar marcação nova).
   ============================================================================= */
@media (max-width: 700px) {
  .casa-topbar-acoes { gap: 5px !important; }

  .casa-idioma-btn, .casa-topbar-btn, .casa-tamanho-btn { min-height: 0 !important; }
  .casa-idioma-btn, .casa-topbar-btn { padding: 7px 10px !important; }
  .casa-tamanho-btn { min-width: 0 !important; padding: 7px 9px !important; }

  #casa-silencio-btn-txt, #casa-tema-btn-txt, #casa-fullscreen-btn-txt {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .casa-topbar-btn-ico { margin: 0; }
}

/* Faixa mais estreita (o próprio casa.css já teria feito o topbar quebrar em
   2 linhas de QUALQUER jeito, ≤480px, por causa do .casa-topbar{flex-wrap}):
   aperta só o suficiente (gap do container + padding lateral da barra +
   padding dos botões, nunca o logo) pra logo + todos os controles caberem
   numa linha só, sem precisar diminuir a marca. Números batidos ao vivo no
   Chrome em 390px (ver relatório da lane) — se um dia a lista de botões
   crescer, é aqui que se reaperta primeiro. */
@media (max-width: 480px) {
  .casa-topbar { gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .casa-topbar-acoes { gap: 4px !important; }
  .casa-idioma-btn, .casa-topbar-btn { padding: 6px 9px !important; }
  .casa-tamanho-btn { padding: 6px 7px !important; }
}