/*
Theme Name: Hello Ainor
Theme URI: https://loterio.com.br/
Description: Tema filho do Hello Elementor. Existe por um motivo só: usar o
  cabeçalho e o rodapé próprios (fusion-home-ainor/includes/shell*.php) em TODAS
  as páginas do site, e não apenas na home. Antes disso, o cabeçalho vinha de um
  elementskit_template (post 38524) — o que prendia 166 MB de plugins do Elementor
  só para desenhar uma barra de contato e um menu.
Author: Jeferson
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-ainor
*/

/* Enfileirado DEPOIS do CSS do tema pai e do <style> inline do shell.

   O que entra aqui: só o necessário para o conteúdo servido pelo TEMA conviver
   com o shell, que abre com `*{margin:0;padding:0}` e `a{text-decoration:none}`
   — regras escritas para uma landing page, que achatam texto editorial.

   O corpo das postagens e das páginas normais NÃO passa por aqui: quem o
   desenha é o JB Postagens (.jfb-noticia-*), que é full-bleed, declara as
   próprias margens e não fica dentro de #content. O que sobra sem dono é o
   template-parts/single.php e o 404 do tema pai — e é exatamente o que estas
   regras cobrem, escopadas em #content para não vazar para o resto. */

/* ------------------------------------------------------------------
   Cor de link no cabeçalho e no rodapé
   O shell declara `a{color:inherit}`, mas ele é <style> inline no <head>
   e o theme.css do Hello Elementor entra DEPOIS, com `a{color:#c36}` —
   mesma especificidade, e quem vem por último ganha. Resultado medido em
   11/09/2026: 14 links do shell em rosa, entre eles os sete do rodapé.
   Na home isso não aparecia, porque lá o corpo é template do plugin.

   :where() tem especificidade ZERO, então esta regra empata com o `a` do
   tema (e vence por ordem) e continua perdendo para .tb-mail-primary e
   .fc-primary, que pintam de branco de propósito. Escrever `.footer a`
   apagaria esses dois.
   ------------------------------------------------------------------ */
/* Cor PADRAO de link. Sem esta linha quem responde e o `a{color:#c36}` do
   reset.css do hello-elementor, e todo link sem cor propria sai rosa: medido em
   18/09/2026, 4 na /contato/ (.pf-method) e 4 na /palestras/ (.pl-card), mais os
   links de imagem do corpo dos posts. Cada componente que liga deve declarar a
   sua; isto e a rede que impede o rosa de ser o padrao de quem esquecer.

   E green-800 e nao o green-700 primario: sobre branco, 7,68:1 contra 2,54:1 —
   cor de LINK carrega texto, entao ela responde ao piso de 4,5:1 do WCAG AA, que
   o primario nao alcanca. Especificidade (0,0,1), igual a do reset: perde para
   qualquer classe e vence o reset pela ordem. Fica ANTES do :where() abaixo de
   proposito — os dois sao (0,0,1), e o do shell precisa ganhar por vir depois. */
a {
  color: var(--green-800, #065f46);
}

:where(.topbar, .nav, .drawer, .footer) a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Cor de BOTAO — a mesma historia do link acima, um andar abaixo
   O reset.css do Hello Elementor pinta TODO botao de rosa:
     [type=button],[type=submit],button{border:1px solid #c36;color:#c36}
     ...:hover, ...:focus       {background-color:#c36;color:#fff}

   O shell ja declara o que cada botao deve ser — so que ele e <style> INLINE
   no <head> e o reset.css entra DEPOIS: em empate de especificidade quem vem
   por ultimo ganha, entao as regras do shell estavam mortas. Medido em
   18/09/2026 na /politica-de-privacidade/: borda rosa de 1px em .nav-search-btn,
   .drawer-close, .totop e no botao Buscar; e hover rosa solido nos quatro, mais
   no Buscar. O caso visivel (X e setas do lightbox em rosa sobre fundo preto)
   e do mesmo reset e foi fechado no dono dele, o jb-postagens.

   Aqui NAO cabe :where(): especificidade zero perderia para `button` (0,0,1).
   Estas regras repetem a especificidade do reset e vencem pela ORDEM — o
   style.css do filho depende de 'hello-elementor' e e enfileirado por ultimo.
   Logo abaixo, os quatro botoes que o shell desenhou voltam a mandar, com
   escopo (0,2,1) para vencer o hover generico desta mesma folha.
   ------------------------------------------------------------------ */
button,
[type="button"],
[type="submit"] {
  color: var(--green-800, #065f46);
  border-color: transparent;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
  background-color: var(--green-50, #ecfdf5);
  color: var(--green-800, #065f46);
}

/* Os quatro hovers que o shell desenhou e o reset vinha comendo. Repetidos
   aqui porque esta e a unica folha com a ordem certa; os valores sao os do
   shell-head.php (jb-home-ainor) e mudam junto com ele. */
.nav .nav-search-btn:hover,
.nav .nav-search-btn:focus {
  background-color: var(--green-50, #ecfdf5);
  color: var(--green-600, #059669);
}

.nav .burger:hover,
.nav .burger:focus {
  background-color: var(--green-50, #ecfdf5);
  color: var(--green-800, #065f46);
}

.drawer .drawer-close:hover,
.drawer .drawer-close:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #cfe0d4;
}

body .totop:hover,
body .totop:focus {
  background-color: var(--gold, #d4af37);
  color: var(--green-950, #022c22);
}

.nav .nav-search button:hover,
.nav .nav-search button:focus {
  background-color: var(--green-800, #065f46);
  color: #fff;
}

#content.site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  font-size: 1.0625rem;
  line-height: 1.7;
}

#content.site-main .page-header {
  margin-bottom: 1.5em;
}

#content.site-main .entry-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.2;
}

#content.site-main p,
#content.site-main ul,
#content.site-main ol,
#content.site-main blockquote,
#content.site-main table,
#content.site-main figure {
  margin: 0 0 1.25em;
}

#content.site-main ul,
#content.site-main ol {
  padding-left: 1.5em;
}

#content.site-main li {
  margin-bottom: 0.4em;
}

#content.site-main h2,
#content.site-main h3,
#content.site-main h4 {
  margin: 1.6em 0 0.6em;
  line-height: 1.25;
}

/* O shell zera o sublinhado de todo link; em texto corrido isso apaga a única
   pista de que a palavra é clicável. */
#content.site-main .page-content a {
  color: var(--green-600, #059669);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#content.site-main img {
  height: auto;
  margin-inline: auto;
}