/*
 * PlankGoodz — cabeçalho, rodapé e fundo do site.
 *
 * Separado de `pg-blocks.css` de propósito: os blocos só carregam onde existem,
 * mas cabeçalho e rodapé aparecem em TODA página. Este arquivo é pequeno e vai
 * no site inteiro; o outro continua pagando só onde é usado.
 *
 * Alinha o tema Kadence ao design aprovado. Trocas feitas e por quê:
 *  - fundo #f7fafc -> #f2f4f8: o branco-azulado do tema deixava os cartões
 *    brancos sem contorno; o cinza do design faz o cartão saltar.
 *  - borda verde-neon do cabeçalho: sobra da identidade de loja. Vira azul do
 *    design, fino, para não competir com o hero escuro logo abaixo.
 *  - links do rodapé #4a5568 sobre #0a0a0a: contraste ~2,4:1, abaixo do mínimo
 *    de 4,5:1 da WCAG. Passam para #9aa4ba (~7:1) e ficam brancos no hover.
 */

/*
 * 29/10/2026: cabeçalho e rodapé eram #0d1017, quase preto. Num site de corpo
 * claro isso lia como moldura de outro projeto, não como a mesma peça. Troca
 * para um azul-ardósia profundo: continua escuro o bastante para separar
 * cabeçalho do conteúdo, mas pertence à mesma família do azul dos blocos.
 * Contraste do texto #a9b3c7 sobre #1b2434: acima do mínimo de 4,5:1 da WCAG.
 */
:root{
  --pg-bg:#f2f4f8; --pg-ink:#0d1017; --pg-line:#d7dce6;
  --pg-accent:#2f6bff; --pg-accent2:#1b4fd8; --pg-muted:#5d6475;
  --pg-dark:#1b2434; --pg-dark-2:#232e41; --pg-dark-line:rgba(255,255,255,.12);
  --pg-dark-txt:#a9b3c7;
}

/* ---------------------------------------------------------------- fundo */
/*
 * `!important` aqui é intencional. O Kadence imprime as cores escolhidas no
 * Personalizar como CSS inline com especificidade maior que a nossa, então sem
 * isto o tema vence. Medido em 28/10/2026: `.site-header` continuava #0a0a0a e
 * `.entry` continuava creme (#f0efe8) mesmo com a nossa regra carregada.
 */
body{background:var(--pg-bg) !important}
/*
 * O Kadence pinta `#wrapper` de creme (#f0efe8). Nos posts o fundo do conteúdo
 * cobria isso, mas no arquivo de categoria a cor do tema aparecia nas laterais:
 * 29/10/2026, a página de categoria estava bege enquanto o site é cinza-azulado.
 * Transparente no wrapper deixa o `body` aparecer.
 */
html body #wrapper{background:transparent !important}
/* o card creme do conteúdo era o "content-bg" do Kadence: some para o fundo do
   site aparecer atrás dos blocos */
.entry,.entry.content-bg,.content-bg,.single-entry,.post-21 .entry,
article.entry,body.single-entry .entry{background:transparent !important;box-shadow:none !important}
.site-container,.content-area,#primary,.site-content{background:transparent !important}
/* respiro entre o cabeçalho e o primeiro bloco (o hero encostava na barra) */
.site-main{padding-top:28px}

/* ---------------------------------------------------------------- cabeçalho */
/*
 * Especificidade propositalmente alta (`html body #masthead`): o Kadence emite a
 * cor do cabeçalho com seletor de ID e `!important` num <style> inline que vem
 * depois do nosso arquivo. Medido em 28/10/2026: `.site-header` e até `#masthead`
 * sozinhos não venciam; a borda mudava mas o fundo continuava #0a0a0a.
 */
html body #masthead.site-header,
html body .site-header,
html body .site-header-row,
html body .site-header-wrap{
  background:var(--pg-dark) !important;
  border-bottom:1px solid var(--pg-dark-line) !important;
  box-shadow:0 1px 0 rgba(13,16,23,.06),0 8px 24px rgba(13,16,23,.07);
}
/*
 * Os invólucros internos do Kadence trazem fundo próprio e às vezes gradiente
 * do Personalizar. Medido em 29/10/2026: `.site-header-row-container-inner`
 * pintava #0a0a0a por cima do nosso #1b2434, então o cabeçalho aparecia com
 * duas cores e uma faixa clara atravessando. Aqui tudo abaixo do wrap fica
 * transparente: a cor passa a vir de um lugar só, o `--pg-dark` acima.
 */
html body .site-header-row-container,
html body .site-header-row-container-inner,
html body .site-header-inner-wrap,
html body .site-header-main-section,
html body .site-header-main-section-inner{
  background:transparent !important;
  background-image:none !important;
}
/* a faixa verde-neon era da loja; o fio azul amarra com o resto do site */
.site-header::after{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,var(--pg-accent),#7b5cff 55%,#12b5a0);
}
.site-header-row{border:0!important}

/* menu */
/*
 * Os links traziam fundo #0a0a0a do Personalizar do Kadence, o que desenhava
 * três caixas pretas no meio de um cabeçalho azul-ardósia. Medido em
 * 29/10/2026 junto com o fundo dos invólucros: o cabeçalho tinha quatro cores.
 * Fundo transparente; o destaque fica no sublinhado e num realce suave.
 */
html body .site-header .header-navigation .menu-item > a,
html body .site-header .main-navigation .menu-item > a{
  background:transparent !important;
  background-image:none !important;
  border-radius:9px;
}
html body .site-header .header-navigation .menu-item > a:hover,
html body .site-header .main-navigation .menu-item > a:hover{
  background:rgba(255,255,255,.08) !important;
}
.site-header .header-navigation a,
.site-header .main-navigation a{
  color:#e6eaf2;font-weight:600;letter-spacing:.1px;transition:color .18s,background .18s}
.site-header .header-navigation a:hover,
.site-header .main-navigation a:hover{color:#fff}
.site-header .menu-item.current-menu-item > a,
.site-header .menu-item.current_page_item > a{color:#fff}
/* sublinhado animado no item ativo e no hover: dá o acento do design sem
   encher o cabeçalho de caixa colorida */
.site-header .header-navigation .menu-item > a{position:relative}
.site-header .header-navigation .menu-item > a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;
  background:var(--pg-accent);transform:scaleX(0);transform-origin:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.site-header .header-navigation .menu-item > a:hover::after,
.site-header .header-navigation .menu-item.current-menu-item > a::after{transform:scaleX(1)}

/* submenu */
.site-header .header-navigation ul ul{
  background:var(--pg-dark-2);border:1px solid var(--pg-dark-line);border-radius:14px;
  overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.45);padding:6px}
.site-header .header-navigation ul ul a{border-radius:9px;color:var(--pg-dark-txt)}
.site-header .header-navigation ul ul a:hover{background:rgba(255,255,255,.07);color:#fff}
.site-header .header-navigation ul ul .menu-item > a::after{display:none}

/* nome do site e busca */
.site-header .site-title,.site-header .site-title a{color:#fff;font-weight:800;letter-spacing:-.4px}
.site-header .search-toggle-open,.site-header .header-navigation .search-toggle-open{color:#e6eaf2}
.site-header .search-toggle-open:hover{color:#fff}
/* menu do celular */
.mobile-navigation,.mobile-navigation a{background:var(--pg-dark);color:#e6eaf2}
.mobile-navigation a:hover{color:#fff}

/* ---------------------------------------------------------------- rodapé */
.site-footer{
  background:var(--pg-dark) !important;color:var(--pg-dark-txt) !important;
  border-top:1px solid var(--pg-dark-line) !important}
.site-footer::before{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,#12b5a0,#7b5cff 45%,var(--pg-accent))}
.site-footer-wrap{padding-top:10px}
.site-footer a{color:var(--pg-dark-txt) !important;transition:color .18s}
.site-footer a:hover{color:#fff !important}
.site-footer .footer-navigation a{font-weight:600}
.site-footer .site-info,.site-footer .footer-html{color:#6e7892;font-size:13px}
/* separador sutil entre a navegação do rodapé e o aviso de copyright */
.site-footer .site-bottom-footer-wrap{border-top:1px solid var(--pg-dark-line);margin-top:8px}

/*
 * Caixa de autor fora.
 *
 * O Kadence imprime "plankgoodz" com avatar cinza vazio no fim de todo post.
 * Num site de review quem assina é a marca, e um avatar em branco só avisa que
 * ninguém cuidou daquilo. Sai pelo CSS, não pelo Personalizar, para a decisão
 * ficar versionada junto com o resto do design.
 */
.entry-author-style-center,.entry-author-profile,.post-author-box,
.single .entry-author,.entry-meta .posted-by{display:none !important}

@media (max-width:760px){
  .site-main{padding-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .site-header .header-navigation .menu-item > a::after{transition:none}
}