/* ==========================================================================
   Royal Garagem — correções de chrome do tema REHub
   Plugin royal-garagem-ui · versão 1.1.0

   ESCOPO DESTE ARQUIVO
   Somente o que o tema pai desenha e os templates não alcançam:
     1. identidade móvel (logotipo do cabeçalho e do painel deslizante);
     2. menu móvel lateral;
     3. foco visível global.

   O QUE **NÃO** ESTÁ AQUI (e não deve voltar)
   Estilo de template — hero, seções, cartões, formulários, tipografia da
   página. Isso vive no child theme `royal-garagem-child`:
     - tokens e base .......... royal-garagem-child/style.css
     - home ................... royal-garagem-child/assets/css/home.css
     - blindagem .............. royal-garagem-child/assets/css/blindagem.css

   Na versão 1.0.0 este arquivo continha regras de template (.rg-hero,
   .rg-bl2-*, .rg-campo, .rg-ic). Foram removidas na 1.1.0 para que cada regra
   exista em um lugar só. Se uma regra parece precisar existir aqui e no child,
   ela está no nível errado.

   POLÍTICA DE !important
   Nenhuma regra usa !important. Todo conflito com o tema é resolvido por
   especificidade, comentado com a regra do REHub que está sendo vencida.
   Isso é possível porque as utilidades de cor do REHub (.whitecolor,
   .blackcolor) declaram cor sem !important.

   SEM overflow-x. Transbordamento se corrige na origem.
   ========================================================================== */

/* Cores locais do plugin.
   Declaradas aqui de propósito: o plugin precisa funcionar mesmo sem o child
   theme ativo (por exemplo, durante uma troca de tema). São os mesmos valores
   dos tokens do child, e não são usadas por nenhum template. */
.rg-ui-tokens,
:root {
  --rg-ui-ink: #23272A;
  --rg-ui-on-dark: #EDEBE6;
  --rg-ui-on-dark-soft: #C6C3BB;

  /* Acento decorativo. Sobre grafite dá 6,59:1; sobre branco, só 2,29:1. */
  --rg-ui-gold: #C9A84C;

  /* Dourado funcional para indicador de foco em fundo claro.
     WCAG 1.4.11 exige 3:1 para componente de interface; #C9A84C não alcança
     sobre branco. #7A6220 dá 5,84:1 sobre branco e 5,44:1 sobre o papel frio. */
  --rg-ui-gold-dark: #7A6220;
}

/* ==========================================================================
   1. IDENTIDADE MÓVEL — remover o logotipo "ReCompare" do tema
   --------------------------------------------------------------------------
   Causa raiz: as opções do tema `rehub_logo_inmenu_url` e `logo_mobilesliding`
   ainda apontam para o logotipo do demo `recompare.wpsoul.net`. São lidas por
   rehub_add_elem_to_footer() e rh_custom_sliding_elements(), em
   rehub-theme/functions.php. O logotipo de desktop (`rehub_logo`) já é o Royal
   — por isso o defeito só aparece no celular.

   O JS troca src e alt e marca a imagem com data-royal-logo. O CSS abaixo é a
   rede de segurança: esconde qualquer logotipo ainda não marcado. Se o JS
   falhar, o resultado é NENHUM logotipo — nunca a marca errada.

   Correção definitiva: trocar as duas opções no painel do tema.
   ========================================================================== */

a.logo_image_mobile img:not([data-royal-logo]),
#mobpanelimg:not([data-royal-logo]) {
  visibility: hidden;
}

a.logo_image_mobile img[data-royal-logo],
#mobpanelimg[data-royal-logo] {
  visibility: visible;
}

/* O logotipo Royal usado no móvel é a versão clara, que exige fundo escuro. */
#rhmobtoppnl {
  background-color: var(--rg-ui-ink);
}

/* ==========================================================================
   2. MENU MÓVEL — fundo sólido, texto legível, alvo de 44 px e foco
   --------------------------------------------------------------------------
   Causa raiz: o painel lateral é um CLONE do menu de desktop — custom.js do
   tema copia o HTML de .top_menu para #slide-menu-mobile. A classe
   .whitecolor, necessária no cabeçalho escuro do desktop, vem junto. O tema
   tem a regra `#slide-menu-mobile ul li.menu-item.whitecolor > a{color:#fff}`
   e o painel tem `background-color:#fff`. Branco sobre branco: 1,00:1.

   Correção: painel grafite sólido e cor clara declarada com especificidade
   acima da do tema.
   ========================================================================== */

#slide-menu-mobile ul.off-canvas,
#slide-menu-mobile ul ul.sub-menu {
  background-color: var(--rg-ui-ink);
}

/* Vence `#slide-menu-mobile ul li.menu-item.whitecolor > a` (0,2,3) do tema,
   com (0,3,3). */
#slide-menu-mobile ul.off-canvas li.menu-item > a,
#slide-menu-mobile ul.off-canvas li.menu-item.whitecolor > a,
#slide-menu-mobile ul.sub-menu li.menu-item > a,
#slide-menu-mobile ul.sub-menu li.menu-item.whitecolor > a {
  color: var(--rg-ui-on-dark);
  /* Alvo de toque: o tema usa line-height 22px + padding 10px = 42px. */
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
  display: flex;
  align-items: center;
}

#slide-menu-mobile ul.off-canvas li.menu-item,
#slide-menu-mobile ul.sub-menu li.menu-item {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* O custom.js do tema gera o span de submenu já com a classe .blackcolor
   (color:#111), ilegível sobre o painel grafite. A regra do tema é
   `#slide-menu-mobile ul .blackcolor > span.submenu-toggle` (1,2,2);
   esta é (1,3,2) e vence sem !important. */
#slide-menu-mobile ul.off-canvas span.submenu-toggle,
#slide-menu-mobile ul.sub-menu span.submenu-toggle,
#slide-menu-mobile ul.off-canvas span.submenu-toggle.blackcolor,
#slide-menu-mobile ul.off-canvas span.submenu-toggle .rhicon {
  width: 44px;
  height: 44px;
  line-height: 44px;
  color: var(--rg-ui-on-dark-soft);
}

#slide-menu-mobile ul.off-canvas li.back-mb span,
#slide-menu-mobile ul.sub-menu li.back-mb span {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--rg-ui-on-dark);
  min-height: 44px;
  display: flex;
  align-items: center;
}

#slide-menu-mobile ul.off-canvas li.menu-item > a:hover,
#slide-menu-mobile ul.off-canvas li.menu-item > a:focus,
#slide-menu-mobile ul.sub-menu li.menu-item > a:hover,
#slide-menu-mobile ul.sub-menu li.menu-item > a:focus {
  color: var(--rg-ui-gold);
  background-color: rgba(255, 255, 255, 0.06);
}

#slide-menu-mobile ul.off-canvas .rh-menu-label,
#slide-menu-mobile ul.off-canvas .subline {
  color: var(--rg-ui-on-dark-soft);
}

/* ==========================================================================
   3. FOCO VISÍVEL — global
   --------------------------------------------------------------------------
   Correção global controlada: o tema não fornece indicador de foco adequado em
   nenhuma página. Vale para todo o site, inclusive páginas que não usam os
   templates Royal — por isso mora no plugin, e não no child theme.

   :focus-visible não afeta clique de mouse, só navegação por teclado.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--rg-ui-gold-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Defesa contra `outline: none !important`

   O CSS adicional do Customizer do site publicado contém:

       input:focus, select:focus, textarea:focus { outline: none !important; }

   Isso apaga o indicador de foco de todo campo de formulário — quem navega por
   teclado deixa de saber onde está. É falha de acessibilidade (WCAG 2.4.7).

   A regra do Customizer é (0,1,1) com `!important` e é impressa DEPOIS do CSS
   dos plugins, então vence empates. Para recuperar o foco é preciso mais
   especificidade E `!important`. A pseudo-classe repetida eleva para (0,2,1)
   sem alterar o que casa — é o truque mínimo que resolve.

   CORREÇÃO DEFINITIVA (painel): remover `outline:none` do CSS adicional.
   Depois disso, este bloco pode sair.
   -------------------------------------------------------------------------- */
input:focus-visible:focus-visible,
select:focus-visible:focus-visible,
textarea:focus-visible:focus-visible {
  outline: 3px solid var(--rg-ui-gold-dark) !important;
  outline-offset: 2px;
}

/* Sobre superfície escura o dourado sozinho tem contraste insuficiente contra
   o grafite; o anel branco garante o contorno visível nos dois fundos. */
.rg-escuro a:focus-visible,
.rg-escuro button:focus-visible,
#slide-menu-mobile a:focus-visible,
#slide-menu-mobile span.submenu-toggle:focus-visible,
#rhmobtoppnl a:focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.55);
}

/* Atalho para pular a navegação — melhora teclado e leitor de tela.
   Só aparece quando recebe foco. */
.rg-pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 14px 22px;
  background: var(--rg-ui-ink);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.rg-pular-para-conteudo:focus {
  left: 0;
  color: #FFFFFF;
}