/*
	Theme Name: Royal Garagem
	Theme URI: https://royalgaragem.com.br
	Description: Child theme do REHub para o Royal Garagem. Contém os templates próprios (home e Blindagem) e os tokens visuais da marca. As correções de chrome do tema (identidade móvel, menu móvel, foco) ficam no plugin royal-garagem-ui, não aqui.
	Author: Royal Consultant Cars
	Author URI: https://royalgaragem.com.br
	Version: 1.25.3
	Template: rehub-theme
*/

/* ==========================================================================
   ATENÇÃO — COMO ESTE ARQUIVO É CARREGADO

   O tema pai registra a folha principal assim (rehub-theme/functions.php:26):

       wp_register_style('rhstyle', get_stylesheet_directory_uri() . '/style.css', …)

   `get_stylesheet_directory_uri()` aponta para o tema ATIVO. Com o child ativo,
   o handle `rhstyle` passa a ser ESTE arquivo — não o style.css de 139 KB do pai.

   Por isso o functions.php do child enqueue o CSS do pai separadamente, sob o
   handle `rhstyle-parent`, ANTES deste. A ordem final é:

       1. rhstyle-parent  → rehub-theme/style.css   (prioridade 10)
       2. rhstyle         → este arquivo            (prioridade 11, pelo pai)
       3. royal-garagem-ui/assets/css/royal-ui.css  (prioridade 20, depende de rhstyle)
       4. assets/css/home.css ou blindagem.css      (só na página correspondente)

   Não mover regras de template para cá: este arquivo carrega em TODA página.
   Aqui ficam apenas tokens e base. CSS de template vive em assets/css/.
   ========================================================================== */

:root {
  /* Paleta — AUDITORIA_VISUAL_E_DIRETRIZES_UX_2026-08-17.md, seção 3 */
  --rg-ink: #23272A;          /* grafite principal */
  --rg-charcoal: #171A1C;     /* carvão profundo */
  --rg-white: #FFFFFF;
  --rg-paper: #F6F7F7;        /* papel frio */
  --rg-text: #2F3437;         /* texto principal em fundo claro */
  --rg-muted: #687076;        /* texto secundário */
  /* Dourado de ACENTO — decorativo apenas (filetes, marcadores, fundo de CTA).
     2,29:1 sobre branco: não serve para texto nem para indicador de foco. */
  /* PALETA DA MARCA — corrigida em 26/08/2026.

     O #C9A84C que estava aqui NAO era da Royal: era `rehub_custom_color`, a
     cor padrao do tema REHub na instalacao de demonstracao. Eu a peguei da
     configuracao do tema no inicio do projeto, tratei como "o dourado da
     Royal" e cheguei a escrever isso na documentacao — sem nunca abrir os
     arquivos de logo.

     As cores reais, amostradas pixel a pixel de
     `01_Marca_e_Conteudo/Identidade/Logos/`:
       Logo_Royal_Icone.png ...... #40484B ardosia · #B2BBC0 prata
       Logo_Royal_Completo.png ... #293032 grafite · #ABB2B3 prata

     Nao ha dourado em nenhum dos quatro arquivos. O manual de marca
     (`Identidade_Royal_Carros.docx`) e de posicionamento e nao especifica cor
     nenhuma — conferido, nao suposto.

     Os nomes das variaveis continuam `--rg-gold*` de proposito: renomear
     quebraria dezenas de regras em seis folhas sem ganho nenhum. O que muda e
     o valor. */
  --rg-gold: #B2BBC0;        /* prata da coroa */

  /* Dourado FUNCIONAL — texto pequeno, sublinhado de link e foco em fundo claro.
     A auditoria sugeria #987A27, mas ele dá 4,08:1 sobre branco e 3,80:1 sobre
     o papel frio — reprova no AA para texto normal (mínimo 4,5:1). Escurecido
     para #7A6220: 5,84:1 sobre branco e 5,44:1 sobre papel. */
  --rg-gold-dark: #4A5257;   /* prata escurecida, para texto sobre fundo claro */
  --rg-green: #2F6F55;        /* confirmação, uso restrito */

  /* Texto sobre superfície escura */
  --rg-on-dark: #EDEBE6;
  --rg-on-dark-soft: #C6C3BB;

  /* Linhas e superfícies */
  --rg-rule: rgba(35, 39, 42, 0.12);
  --rg-rule-dark: rgba(255, 255, 255, 0.12);

  /* Tipografia */
  --rg-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo — seção 4 da auditoria */
  --rg-leitura: 720px;        /* largura máxima de leitura */
  --rg-conteudo: 1180px;      /* largura máxima de conteúdo */
  --rg-secao-y: 104px;        /* espaçamento vertical entre seções, desktop */
  --rg-secao-y-mob: 64px;     /* idem, celular */
  --rg-raio: 12px;
}

@media (max-width: 760px) {
  :root { --rg-secao-y: var(--rg-secao-y-mob); }
}

/* ==========================================================================
   Base — vale para os templates Royal, sem afetar o resto do tema
   ========================================================================== */

.rg-root {
  font-family: var(--rg-sans);
  background: var(--rg-paper);
  color: var(--rg-text);
  /* Sem overflow-x aqui de propósito: esconder transbordamento mascara o
     defeito em vez de corrigi-lo. Se aparecer rolagem horizontal, achar o
     elemento causador (previa-local: ?diag=1). */
}

.rg-root *,
.rg-root *::before,
.rg-root *::after { box-sizing: border-box; }

/* Corpo entre 16 e 18px — o tema usa 14px, pequeno demais para leitura. */
.rg-root p,
.rg-root li { font-size: 17px; line-height: 1.7; }

@media (max-width: 760px) {
  .rg-root p,
  .rg-root li { font-size: 16px; line-height: 1.65; }
}

/* ==========================================================================
   Contraste de títulos sobre superfície escura

   DOIS adversários, descobertos em momentos diferentes:

   1. O tema pai declara `h1..h6{color:#111111}` (rehub-theme/style.css:31).
      Declaração direta vence valor herdado, então um título dentro de um bloco
      grafite que apenas herda `color` sai #111.

   2. **RESOLVIDO em 17/08/2026.** O plugin `royal-garagem` injetava no <head>:

          h1,h2,h3,h4,h5,h6 { color: var(--rg-grafite) !important; }

      `--rg-grafite` é #23272A — o mesmo grafite do hero, ou seja, título
      invisível. Essa era a causa raiz, e a declaração de `color` foi removida
      na origem (`plugins/royal-garagem/royal-garagem.php`); `font-family` e
      `letter-spacing` continuam lá.

   O `!important` abaixo existia para contrapor o item 2, que não existe mais.
   **Mantido mesmo assim, de propósito:** o adversário 1 continua ativo, e o
   plugin é editável pelo painel por quem não conhece esta correção. Tirar as
   duas defesas na mesma rodada trocaria um defeito conhecido por um
   desconhecido — e este é justamente o defeito que já passou meses no ar sem
   ninguém notar.

   Quando sair: depois de uma rodada de verificação visual em todas as telas
   com o item 2 já resolvido, confirmando que a especificidade (0,1,1) basta
   sozinha contra o `h1..h6{color:#111}` do pai.
   ========================================================================== */
.rg-escuro h1,
.rg-escuro h2,
.rg-escuro h3,
.rg-escuro h4 { color: var(--rg-white) !important; }

.rg-escuro { background-color: var(--rg-ink); color: var(--rg-on-dark); }
.rg-escuro p { color: var(--rg-on-dark-soft); }

/* ==========================================================================
   Títulos das páginas legadas sobre fundo escuro — rodada 4

   Royal Lab, Comparativos e Agente Royal. Os templates já vieram para o child,
   mas a marcação deles é a original e **não usa a classe `.rg-escuro`**. Cada
   um tem um herói escuro que define a cor do texto no contêiner (`#EDEBE6` ou
   `#fff`), e o título não a recebe: o REHub declara `h1 { color:#111 }`, e
   **regra direta sempre vence herança**, por mais específico que seja o
   contêiner.

   Medido em produção em 17/08/2026, antes desta correção:

       "Royal Lab"                 #111 sobre #23272A → 1,25:1
       "Comparativo Royal do Mês"  #111 sobre #23272A → 1,25:1
       "Quer comparar outros carros?" idem            → 1,25:1

   O mínimo da WCAG AA para texto grande é 3:1. Na prática, é título preto
   sobre fundo quase preto — ilegível.

   `color: inherit` devolve o título à cor que o próprio herói já definiu, em
   vez de fixar um valor aqui. Assim, se o fundo do herói mudar amanhã, o
   título acompanha sozinho — fixar `#fff` criaria a próxima falha silenciosa,
   no dia em que alguém clarear o fundo.

   Sem `!important`: a regra de origem é `h1{...}`, especificidade (0,0,1), e
   estes seletores são (0,1,1). Especificidade basta; não há `!important` do
   outro lado para contrapor.

   TEMPORÁRIO — mas não pelo motivo que eu tinha escrito aqui antes. A versão
   anterior deste comentário dizia "sai quando estas páginas forem para o child
   theme". Elas foram, e a regra continua necessária: **mudar o arquivo de
   pasta não muda as classes que a marcação usa**. Estas três páginas seguem
   com heróis próprios (`.rg-lab-hero`, `.rg-cp-hero`, `.rg-cp-cta`) em vez de
   `.rg-escuro`.

   Sai de verdade quando a marcação das três for reescrita para usar
   `.rg-escuro`, como os demais templates Royal. Aí estas seis linhas viram
   redundância e devem ser apagadas junto.
   ========================================================================== */
.rg-lab-hero h1,
.rg-lab-hero h2,
.rg-cp-hero h1,
.rg-cp-hero h2,
.rg-cp-cta h1,
.rg-cp-cta h2 { color: inherit; }

/* Utilitários de largura */
.rg-wrap { max-width: var(--rg-conteudo); margin-inline: auto; padding-inline: 24px; }
.rg-leitura { max-width: var(--rg-leitura); }

@media (max-width: 760px) {
  .rg-wrap { padding-inline: 20px; }
}

/* Respeito a redução de movimento — WCAG 2.3.3 / auditoria seção 8 */
@media (prefers-reduced-motion: reduce) {
  .rg-root *,
  .rg-root *::before,
  .rg-root *::after {
    animation-duration: 0.01ms !important;   /* zera animação; ver nota abaixo */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Os !important acima são a exceção documentada: precisam vencer qualquer
   transição declarada depois, inclusive por plugins de terceiros. É o padrão
   recomendado para esta media query e não afeta cor, layout ou tipografia. */

/* ==========================================================================
   Faixa de identificação do rodapé

   Estrutura real, lida do HTML servido em 18/08/2026:
     #footercustomarea > .footerside.widget_text > .textwidget

   O texto encostava na borda da janela, sem margem, em toda página. Estas
   regras dão a ele a mesma largura de contêiner e o mesmo respiro do resto
   do site — nada além disso.

   ESCOPO DELIBERADAMENTE ESTREITO. Uma tentativa anterior mirou
   `.footer-bottom a` e `.footerside ul`, acertando também a lista de links do
   rodapé: os links ganharam sublinhado atravessando a coluna e os marcadores
   continuaram, porque não são marcadores de lista. Ficou pior que antes e foi
   revertida. Enquanto a estrutura da lista não for lida com a mesma precisão
   desta faixa, ela não é tocada.
   ========================================================================== */
/* Um rodapé, não dois.

   Havia duas faixas empilhadas com fundos diferentes: a de identificação
   legal em claro e a de navegação em escuro, separadas por uma emenda
   visível. Lia como dois rodapés de temas diferentes — que é o que eram.
   Agora as duas dividem o mesmo fundo e a emenda vira um filete. */
#footercustomarea {
  background: var(--rg-charcoal);
  border-top: 3px solid var(--rg-gold);
}
#footercustomarea .textwidget {
  max-width: var(--rg-conteudo);
  margin-inline: auto;
  padding: 26px 24px 20px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--rg-on-dark-soft);
}
#footercustomarea .textwidget strong { color: var(--rg-on-dark); }
/* Os dois links legais vinham no dourado claro do tema pai: 2,13:1 sobre o
   fundo #F6F7F7 — reprova em WCAG AA para texto. O dourado escuro mantém a
   mesma família de cor e passa. Sublinhado permanente porque são links dentro
   de um parágrafo, onde a cor sozinha não os distingue (WCAG 1.4.1). */
#footercustomarea .textwidget a {
  color: var(--rg-gold);
  text-decoration: underline;
}
#footercustomarea .textwidget a:focus-visible {
  outline: 3px solid var(--rg-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Lista de navegação do rodapé escuro

   Estrutura lida do HTML servido em 18/08/2026:
     .footer-bottom.dark_style
       > .rh-container
         > .footer_widget
           > .widget_nav_menu
             > .menu-menu-principal-container
               > ul.menu > li[.menu-item-has-children] > ul.sub-menu

   Eram sete itens com marcador de disco, em coluna única, parecendo rascunho.
   Marcador de disco numa lista de navegação não informa nada.

   ESCOPO FECHADO em `.footer-bottom .widget_nav_menu`. Uma tentativa anterior
   mirou `.footerside ul` e `.footer-bottom a`, atingiu também a faixa de
   identificação e encheu tudo de sublinhado — ficou pior e foi revertida.
   Nada aqui altera cor, sublinhado ou tipografia: só remove o marcador,
   distribui em colunas e dá alvo de toque decente.
   ========================================================================== */
.footer-bottom .widget_nav_menu ul.menu,
.footer-bottom .widget_nav_menu ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-bottom .widget_nav_menu ul.menu li {
  margin: 0;
  padding-left: 0;
}
/* O marcador do tema pai pode vir de list-style ou de ::before — as duas
   possibilidades são neutralizadas, porque não dá para saber qual sem
   inspecionar cada tema, e ambas são inofensivas de desligar. */
.footer-bottom .widget_nav_menu ul.menu li::before,
.footer-bottom .widget_nav_menu ul.menu li::marker {
  content: none;
}
/* 7px de respiro davam 32px de altura: passa no minimo de 24px da WCAG 2.5.8
   (AA), mas fica abaixo dos 44px que este site adota. Com min-height e
   alinhamento vertical o alvo cresce sem depender do tamanho da fonte. */
.footer-bottom .widget_nav_menu ul.menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 4px;
  line-height: 1.4;
}
.footer-bottom .widget_nav_menu ul.sub-menu {
  margin-left: 2px;
  padding-left: 14px;
  border-left: 1px solid var(--rg-rule-dark);
}

/* Sete itens de topo cabem em duas colunas sem ficar apertado. */
@media (min-width: 700px) {
  .footer-bottom .widget_nav_menu > .menu-menu-principal-container > ul.menu {
    columns: 2;
    column-gap: 36px;
  }
  .footer-bottom .widget_nav_menu > .menu-menu-principal-container > ul.menu > li {
    break-inside: avoid;
  }
}

.footer-bottom .widget_nav_menu a:focus-visible {
  outline: 3px solid var(--rg-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   Rodapé — continuação

   A silhueta de montanha que vinha como fundo (`royal-rodape-fundo.jpg`,
   1600×246) é decoração de tema: não tem relação com carro, com blindagem
   nem com a Royal. Era o que fazia o rodapé parecer emprestado. Removida.

   A emenda entre as duas faixas some porque `#footercustomarea` acima já
   está no mesmo tom.
   ========================================================================== */
.footer-bottom {
  background-image: none !important;
  background-color: var(--rg-charcoal) !important;
  padding-block: 6px 40px;
}

/* Título de cada coluna: era texto solto do mesmo tamanho dos links. */
.footer-bottom .widget .title {
  color: var(--rg-on-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rg-rule-dark);
}

/* Contato: YouTube e WhatsApp eram palavras soltas numa lista com marcador,
   sem parecer canal de contato nem link. */
.footer-bottom .widget_text .textwidget ul { list-style: none; margin: 0; padding: 0; }
.footer-bottom .widget_text .textwidget li { margin: 0; }
.footer-bottom .widget_text .textwidget li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--rg-on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--rg-rule-dark);
}
.footer-bottom .widget_text .textwidget li a:hover { color: var(--rg-gold); }
.footer-bottom .widget_text .textwidget li:last-child a { border-bottom: 0; }
.footer-bottom .widget_text .textwidget li a:focus-visible {
  outline: 3px solid var(--rg-gold); outline-offset: -3px;
}

/* O tema divide o rodapé em três colunas, mas só existem dois blocos — o
   terço da direita ficava vazio. As duas colunas passam a ocupar a linha,
   com o mapa mais largo que o contato. */
.footer-bottom .col_wrap_three { display: flex; flex-wrap: wrap; gap: 40px; }
.footer-bottom .col_wrap_three > .footer_widget { flex: 1 1 340px; max-width: none; width: auto; }
.footer-bottom .col_wrap_three > .footer_widget:first-child { flex: 1.6 1 420px; }

/* Doze itens em coluna única viravam uma tira comprida. */
@media (min-width: 700px) {
  .footer-bottom .widget_nav_menu ul.menu { columns: 2; column-gap: 40px; }
  .footer-bottom .widget_nav_menu ul.menu > li { break-inside: avoid; }
}