/*
Theme Name:   Leitor Esperto
Template:     generatepress
Description:  Tema filho do GeneratePress — aplica o visual aprovado na Fase 4.1.1 (design/*.dc.html) ao site.
Author:       Leitor Esperto
Version:      1.0.0
*/

/* ==========================================================================
   Tokens — extraídos do mockup aprovado (design/Main.dc.html, Lista.dc.html,
   Livro.dc.html). Qualquer cor usada abaixo deve vir daqui, não de um valor
   novo — é o que mantém o site fiel ao que foi aprovado.
   ========================================================================== */
:root {
  --le-navy:        #02162D; /* wordmark "LEITOR", header do destaque, footer */
  --le-navy-light:  #16303E; /* variações sobre navy (bordas, hover) */
  --le-teal:        #14606A; /* wordmark "ESPERTO", links, ícones secundários */
  --le-amber:       #FCA413; /* bico da coruja — CTA, destaque */
  --le-cream:       #FAF7F2; /* fundo geral do site */
  --le-cream-card:  #F3EEE6; /* fundo de tag/badge/callout */
  --le-white:       #FFFFFF;

  --le-text:        #2C3A42; /* corpo de texto padrão */
  --le-text-muted:  #55666F; /* texto secundário */
  --le-text-soft:   #6B7B85; /* metadados, legendas */
  --le-border:      #E5DED4; /* borda padrão de card */
  --le-border-soft: #EFE9E0; /* divisórias internas (linhas de tabela) */

  --le-footer-text: #B8C7CF;
  --le-footer-muted:#8FA5B0;
  --le-footer-border: #2E5568;

  --le-positive:    #4A7C59; /* "para quem é" */
  --le-negative:    #A65340; /* "para quem não é" */

  --le-font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
  --le-font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --le-radius-card: 10px;
  --le-radius-btn:  6px;
  --le-content-width: 1180px;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background: var(--le-cream);
  color: var(--le-text);
  font-family: var(--le-font-body);
}

/* Reset básico de imagem responsiva. O logo tem width="520" fixo no HTML
   (atributo nativo da mídia importada) — sem isto ele não encolhe em tela
   estreita e sozinho já estoura a largura do header em mobile (achado
   testando em viewport real de 390px, não visível olhando o CSS). */
img { max-width: 100%; height: auto; }

a { color: var(--le-navy); }
a:hover, a:focus { color: var(--le-teal); }

h1, h2, h3, h4,
.entry-title,
.entry-title a {
  font-family: var(--le-font-heading);
  font-weight: 600;
  color: var(--le-navy);
  letter-spacing: -0.015em;
}

.site-content, .entry-content {
  color: var(--le-text);
}

/* ==========================================================================
   Header — fundo creme, logo à esquerda, nav + busca (mockup usa header
   claro de propósito: o wordmark do logo é navy e ficaria ilegível sobre
   fundo escuro — ver commit da Fase 4.1.1).
   ========================================================================== */
.site-header,
.site-header .inside-header {
  background: var(--le-cream);
}

.site-header {
  border-bottom: 1px solid var(--le-border);
}

/* mockup: logo com 54px de altura no header — sem isto ele renderiza no
   tamanho nativo do arquivo (~200px), grande demais e, em mobile, largo
   o bastante pra forçar scroll horizontal sozinho. */
.site-logo img {
  height: 54px;
  width: auto;
  max-width: 100%;
}

.site-header .main-title a,
.site-header .main-title a:hover {
  font-family: var(--le-font-heading);
  font-weight: 600;
  color: var(--le-navy);
  letter-spacing: -0.01em;
}

/* O logo (via WP custom-logo) já traz o wordmark "Leitor Esperto" desenhado
   — o <h1> de texto do GP ao lado dele duplica a marca. Esconder só quando
   o logo existir, pra não sumir com o título em instalações sem logo. */
.site-logo + .site-branding .main-title {
  display: none;
}

.main-navigation,
.main-navigation .inside-navigation {
  background: transparent;
}

.main-navigation .main-nav ul li a {
  color: var(--le-text-muted);
  font-family: var(--le-font-body);
  font-weight: 500;
  font-size: 15px;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a {
  color: var(--le-navy);
  background: transparent;
}

.main-navigation .main-nav ul ul {
  background: var(--le-white);
  border: 1px solid var(--le-border);
  border-radius: 8px;
  overflow: hidden;
}

/* ==========================================================================
   Footer — navy, texto claro, o mesmo tom do bloco "Em destaque" e
   "Qual eu escolheria" do mockup.

   #footer-widgets e .site-footer são IRMÃOS no HTML do GeneratePress, não
   pai/filho — regra que só mira .site-footer nunca alcança os widgets de
   rodapé. Achado revisando o tema no navegador: a área de widgets ficava
   com fundo branco (herdado de .footer-widgets{background:var(--base-3)}
   do próprio GP) e texto quase invisível.
   ========================================================================== */
.site-footer,
.site-footer .site-info,
#footer-widgets,
#footer-widgets .footer-widgets-container {
  background: var(--le-navy);
  color: var(--le-footer-text);
}

#footer-widgets .widget-title,
#footer-widgets h2, #footer-widgets h3 {
  color: var(--le-cream);
  font-family: var(--le-font-heading);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}

#footer-widgets a { color: var(--le-footer-text); }
#footer-widgets a:hover { color: var(--le-amber); }
#footer-widgets .widget { margin: 0; }

.site-footer a {
  color: var(--le-footer-text);
}

.site-footer a:hover {
  color: var(--le-amber);
}

.site-footer .copyright-bar {
  border-top: 1px solid var(--le-footer-border);
}

.site-footer .widget-title,
.site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--le-cream);
  font-family: var(--le-font-heading);
}

/* ==========================================================================
   Conteúdo — Gutenberg. É aqui que os 26 posts gerados pelo pipeline
   (parágrafo, heading h2/h3, separador) realmente vivem.
   ========================================================================== */
.entry-content {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.7;
}

.entry-content > .alignwide,
.entry-content > .alignfull { max-width: none; }

.entry-content p {
  color: var(--le-text);
  margin: 0 0 22px;
}

.entry-content h2 {
  font-size: 28px;
  line-height: 1.25;
  margin: 48px 0 16px;
  padding-top: 8px;
}

.entry-content h3 {
  font-size: 19px;
  line-height: 1.3;
  color: var(--le-navy);
  margin: 28px 0 10px;
}

/* separador (<hr>) do Gutenberg — usado pra dividir seções, ex. entre livros */
.entry-content hr,
.entry-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--le-border);
  margin: 40px 0;
}

.entry-content ul, .entry-content ol {
  padding-left: 22px;
  line-height: 1.7;
}

.entry-content li { margin-bottom: 6px; }

.entry-content strong { color: var(--le-navy); font-weight: 600; }

/* Espaço reservado pro botão/link de afiliado de cada livro dentro da
   Lista — hoje é só um placeholder tracejado (sem conta Amazon Associates
   ainda, ver checklist administrativo); quando o ASIN existir, vira botão
   de verdade no mesmo lugar. Mesma linguagem visual do placeholder da
   página do livro (single-livro.php). */
.le-affiliate-slot {
  border: 1px dashed var(--le-border);
  color: var(--le-text-soft);
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 4px 0 28px;
}

/* Disclosure de afiliado: é sempre o último parágrafo do conteúdo gerado
   pelo pipeline (ver scripts/content/publish.py). Destacar visualmente
   como um aviso, não como texto corrido comum. */
.entry-content > p:last-of-type {
  background: var(--le-cream-card);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--le-text-soft);
  line-height: 1.6;
  margin-top: 32px;
}

/* Metadados do post (data, autor) */
.entry-meta, .entry-meta a {
  color: var(--le-text-soft);
  font-size: 14px;
}

/* ==========================================================================
   Botões e elementos de ação — âmbar sobre navy, como o CTA "Ver na Amazon"
   do mockup.
   ========================================================================== */
.button, .wp-block-button__link, input[type="submit"] {
  background: var(--le-amber);
  color: var(--le-navy);
  border-radius: var(--le-radius-btn);
  font-weight: 600;
  border: none;
  padding: 12px 22px;
}

.button:hover, .wp-block-button__link:hover {
  background: #E0921A;
  color: var(--le-navy);
}

/* ==========================================================================
   Página institucional / conteúdo genérico — cards leves, mesma linguagem
   visual dos cartões do mockup (branco, borda clara, cantos arredondados).
   ========================================================================== */
.page .entry-content,
.single-livro .entry-content {
  max-width: 760px;
}

/* ==========================================================================
   Responsivo — a regra do artifact/mockup também vale aqui: nunca deixar
   o corpo rolar na horizontal.
   ========================================================================== */
@media (max-width: 768px) {
  .entry-content { font-size: 16px; }
  .entry-content h2 { font-size: 24px; }
}

/* ==========================================================================
   Nuvem de categorias — widget da sidebar-1 (functions.php,
   LE_Category_Cloud_Widget). Título em barra navy, corpo creme com os
   links do wp_tag_cloud() (tamanho já vem inline via style="font-size").
   ========================================================================== */
.le-cat-cloud {
  border: 1px solid var(--le-border);
  border-radius: var(--le-radius-card);
  overflow: hidden;
}

.le-cat-cloud-title {
  margin: 0;
  padding: 14px 20px;
  background: var(--le-navy);
  color: var(--le-cream);
  font-family: var(--le-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.le-cat-cloud-body {
  padding: 20px 22px;
  background: var(--le-white);
  line-height: 2.1;
  text-align: center;
}

.le-cat-cloud-body a {
  display: inline-block;
  margin: 0 6px;
  color: var(--le-navy);
  font-family: var(--le-font-body);
  font-weight: 500;
  text-decoration: none;
}

.le-cat-cloud-body a:hover,
.le-cat-cloud-body a:focus {
  color: var(--le-amber);
}

/* Grids da home (front-page.php) — "display:grid" inline não colapsa
   sozinho. Sem isto, os cards de 2-3 colunas ficavam espremidos em vez de
   empilhar, e a página inteira ganhava scroll horizontal em mobile (achado
   testando em viewport 390px real, não só olhando o CSS). */
@media (max-width: 640px) {
  .le-grid-2, .le-grid-3 {
    grid-template-columns: 1fr !important;
  }
}