/* =====================================================================
   Translate Job — seletor PT | ES | EN dentro do menu mobile (off-canvas)
   Card t_ab77b998 · escopo CORRIGIDO pelo dono:
   "É o menu de idioma que está errado e não centralizado."

   Este arquivo NÃO toca no painel, nos itens do menu (rótulos, ordem, URLs),
   no botão de fechar nem no cabeçalho do drawer.

   v1.2.0 (card t_46522670) — o dono pediu respiro também no celular:
   os 6 itens de topo tinham 40px de altura e 5px de intervalo. Passam a
   44px de altura (alvo de toque WCAG 2.5.5, igual ao dos rótulos PT|ES|EN
   do seletor) e 8px de intervalo. Só altura/intervalo: rótulo, ordem e
   URL intactos.

   O que ele corrige, só no bloco .bw-lang do off-canvas:
   1. CENTRALIZAÇÃO — o seletor estava à esquerda enquanto os itens do menu
      são centralizados. Agora o grupo fica no mesmo eixo dos itens.
   2. DESALINHAMENTO VERTICAL — o tema força `display: block` nos <a> do
      off-canvas (`.main-navigation.slideout-navigation .main-nav > ul > li > a`
      e afins). Os rótulos ES/EN, que são <a>, ficavam colados no topo da
      caixa de 44 px enquanto o idioma ativo (um <span>) ficava centralizado —
      era isso que fazia os separadores parecerem "um alto, outro curto".
      Os três rótulos passam a usar o mesmo display/centralização.
   3. SEPARADORES — 1 × 13 px, #b3b3b3, `align-self: center` e 2 px de cada
      lado (o CSS do designer deixa 18 px no slideout e sem centralização
      explícita). Espaçamento simétrico: 2 px + barra + 2 px entre as caixas.

   O idioma ativo continua sendo <span aria-current="true"> com sublinhado
   verde (regra do designer em seletor.css) — nada muda nisso.
   No header desktop nada muda: estas regras só valem dentro do off-canvas.

   Reversível: desligar o módulo "7 · Seletor no menu mobile" no admin.
   ===================================================================== */

/* ---------- 1. o grupo no eixo central dos itens do menu ------------- */
#generate-slideout-menu .bw-lang-item,
#generate-slideout-menu.do-overlay .bw-lang-item {
  text-align: center;
}

#generate-slideout-menu .bw-lang,
#generate-slideout-menu .slideout-navigation .bw-lang {
  justify-content: center;
  text-align: center;
}

/* ---------- 2. os três rótulos com o MESMO display ------------------- */
/* O `!important` vence o `display: block` que o offside.min.css aplica nos
   links do off-canvas ((1,1,3) de especificidade): sem ele o <a> (ES/EN)
   desalinha verticalmente do <span> do idioma ativo. */
#generate-slideout-menu .bw-lang .bw-lang__item,
#generate-slideout-menu .bw-lang a.bw-lang__item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
  text-align: center;
}

/* ---------- 3. separadores iguais ------------------------------------ */
#generate-slideout-menu .bw-lang .bw-lang__sep {
  display: block;
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  min-width: 1px;
  height: 13px;
  min-height: 0;
  margin: 0 2px;
  padding: 0;
  border: 0;
  background: #b3b3b3;
}

/* ---------- 4. altura e respiro dos itens de topo -------------------- */
/* Card t_46522670: 40px de altura e 5px de intervalo (medido em 360/390/768)
   deixavam o menu sem respiro. 44px = alvo de toque mínimo (WCAG 2.5.5) e
   a mesma altura dos rótulos PT|ES|EN do seletor; 8px de intervalo.
   O `> li` pega só os itens de TOPO — submenus ficam como estão — e o
   :not() preserva o <li> do seletor, que tem espaçamento próprio. */
#generate-slideout-menu .main-nav > ul > li:not(.bw-lang-item) {
  margin-bottom: 8px;
}

#generate-slideout-menu .main-nav > ul > li > a {
  height: 44px;
  line-height: 44px;
}