/*
 * base.css — tipografia, layout e a estrutura do site. Mobile first.
 *
 * "Mobile first" aqui é literal: os estilos fora de media query valem para a
 * tela estreita, e os `@media (min-width: ...)` só ACRESCENTAM. Escrever ao
 * contrário (desktop e depois encolher) é o que produz os bugs de mobile que
 * este arquivo existe para corrigir.
 *
 * Breakpoints: 640px (tablet pequeno) e 900px (desktop).
 */

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O GeneratePress põe 17px/1.5 por padrão. Para texto longo de resenha,
   1.7 de entrelinha respira melhor. */
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

.entry-content,
.entry-summary {
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ==========================================================================
   Títulos: serif editorial
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.main-title,
.widget-title {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* O H1 do artigo. No mobile ele não pode gritar: `clamp` deixa o tamanho
   acompanhar a tela sem media query. */
.entry-title {
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: var(--esp-4);
}

h2 {
  font-size: clamp(1.25rem, 4vw, 1.625rem);
  line-height: 1.25;
  margin-top: var(--esp-7);
  margin-bottom: var(--esp-3);
}

h3 {
  font-size: clamp(1.125rem, 3.2vw, 1.3125rem);
  line-height: 1.3;
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-2);
}

h4, h5, h6 {
  font-size: 1.0625rem;
  margin-top: var(--esp-5);
  margin-bottom: var(--esp-2);
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.site-header {
  background-color: var(--card);
  border-bottom: 1px solid var(--line);
}

.inside-header {
  padding-top: var(--esp-4);
  padding-bottom: var(--esp-4);
}

/* O GeneratePress emite o título como `<h1 class="main-title">` na home e
   `<p class="main-title">` nas demais páginas (inc/structure/header.php).
   As duas formas precisam do mesmo tratamento. */
.main-title {
  font-size: clamp(1.375rem, 4.5vw, 1.75rem);
  line-height: 1.15;
  margin: 0;
}

.main-title a {
  color: var(--ink);
  text-decoration: none;
}

.main-title a:hover,
.main-title a:focus {
  color: var(--accent);
}

.site-description {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-top: var(--esp-1);
  line-height: 1.4;
}

/* A navegação: alvo de toque confortável, e o menu mobile sem a caixa cinza
   dura que o padrão do tema desenha. */
.main-navigation {
  background-color: var(--card);
  border-bottom: 1px solid var(--line);
}

.main-navigation .main-nav ul li a {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: var(--toque);
  padding-left: var(--esp-4);
  padding-right: var(--esp-4);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--accent);
  background-color: var(--accent-bg);
}

/* O botão do menu mobile. O padrão do tema é um bloco cinza; aqui ele fica
   limpo e com área de toque de verdade.
 *
 * O `display: inline-flex` + `line-height: 1` são o conserto do baseline gap:
 * o botão contém dois `<svg>` inline, que sentam na baseline e somavam o
 * espaço do descender.
 *
 * O SELETOR PRECISA DE `.main-navigation`, e isso não é estilo: o tema pai
 * emite, no CSS dinâmico inline, `@media (max-width: 768px) {
 * .main-navigation .menu-toggle { display: block } }` — especificidade 20.
 * Um `button.menu-toggle` solto tem especificidade 11 e PERDIA: o
 * `display: inline-flex` daqui nunca era aplicado, e o botão ficava `block`,
 * com os dois `<svg>` na baseline somando o descender. Era por isso que ele
 * media 62px com `min-height: 44px`.
 *
 * `.main-navigation button.menu-toggle` (21) vence por especificidade, sem
 * `!important` e sem depender da ordem das folhas. */
.main-navigation .menu-toggle,
.main-navigation button.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  height: var(--toque);
  min-height: var(--toque);
  padding: 0 var(--esp-3);
}

/* O ícone: centralizado e com altura travada no glifo.
 *
 * O `height: 1em` não é cosmético. O pai define `.gp-icon { display:
 * inline-flex; align-self: center }`, e o botão é flex, então o ícone deveria
 * encolher ao SVG de 17px — mas não encolhia, porque o `<svg>` dentro dele
 * tinha margem vertical e a caixa do ícone ia a 65px. Travar em `1em` fecha a
 * porta para qualquer margem futura no SVG: a altura do ícone passa a ser a do
 * glifo, sempre. Ver a nota sobre a causa raiz em componentes.css. */
.main-navigation .menu-toggle .gp-icon {
  display: inline-flex;
  align-items: center;
  height: 1em;
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation button.menu-toggle:hover,
.main-navigation button.menu-toggle:focus {
  background-color: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-line);
}

/* A barra de busca que o tema injeta DENTRO da navegação é o que duplicava a
   busca no mobile: aparecia aqui e de novo no widget. O widget sai pelo
   functions.php; a da navegação fica, porque é a útil. */
.navigation-search input[type="search"] {
  min-height: var(--toque);
  border-radius: var(--raio);
}

/* --- O botão de menu, enquanto não houver menu -------------------------
 *
 * O GeneratePress imprime o botão "Menu" em dois lugares, e nenhum dos dois
 * pergunta se existe um menu atribuído:
 *
 *   1. o do cabeçalho, que o filtro `generate_has_inline_mobile_toggle` em
 *      functions.php desliga (esse passa por filtro);
 *   2. o de dentro do `#site-navigation`, impresso por
 *      `generate_navigation_position()` sem condição nenhuma.
 *
 * Este site não tem menu: o local `primary` está registrado, mas nenhum menu
 * foi criado nem atribuído. Os dois botões abriam um painel vazio.
 *
 * A classe `sabedoria-sem-menu` é adicionada ao `<body>` pelo functions.php
 * SOMENTE quando `has_nav_menu( 'primary' )` é falso. Quando o Eliel criar o
 * menu, a classe deixa de ser emitida, estas regras viram letra morta e os
 * botões voltam sozinhos. */
.sabedoria-sem-menu .main-navigation .menu-toggle,
.sabedoria-sem-menu .mobile-menu-control-wrapper {
  display: none;
}

/* Sem menu, a navegação é uma faixa vazia: a borda de baixo e o fundo não
   separam nada de nada. */
.sabedoria-sem-menu .main-navigation {
  border-bottom: 0;
  background-color: transparent;
}

/* ==========================================================================
   Conteúdo
   ========================================================================== */

.site-content {
  padding-top: var(--esp-5);
  padding-bottom: var(--esp-6);
}

/* Sem barra lateral (forçado no functions.php). O container fica centrado e
   a medida de leitura manda. */
.separate-containers .inside-article,
.one-container .site-main {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}

.separate-containers .inside-article {
  padding: var(--esp-5);
}

.entry-content > * {
  max-width: var(--medida);
}

/* Parágrafos: o respiro entre eles é o que faz texto longo ser legível. */
.entry-content p {
  margin-bottom: 1.35em;
}

/* Links no corpo: sublinhado discreto, porque num site de resenha o link é
   parte da informação (a fonte, a loja, a resenha relacionada). */
.entry-content a {
  color: var(--accent);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.entry-content a:hover,
.entry-content a:focus {
  color: var(--accent-strong);
  text-decoration-thickness: 2px;
}

/* Listas: o marcador na cor do mecanismo, e o recuo que não come a largura. */
.entry-content ul,
.entry-content ol {
  padding-left: 1.25em;
  margin-bottom: 1.35em;
}

.entry-content li {
  margin-bottom: var(--esp-2);
}

.entry-content ul li::marker {
  color: var(--accent);
}

/* Citação: a voz de terceiro. Borda na cor do mecanismo, itálico contido. */
.entry-content blockquote,
.wp-block-quote {
  border-left: 3px solid var(--accent-line);
  background-color: var(--accent-bg);
  margin: var(--esp-5) 0;
  padding: var(--esp-4) var(--esp-5);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-style: normal;
  color: var(--ink);
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content blockquote cite {
  display: block;
  margin-top: var(--esp-2);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--muted);
}

/* Código e monoespaçado: nunca deve estourar a largura no mobile. */
.entry-content code,
.entry-content pre {
  font-size: 0.875rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
}

.entry-content pre {
  padding: var(--esp-4);
  overflow-x: auto;
}

.entry-content code {
  padding: 0.1em 0.35em;
}

.entry-content pre code {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Imagens e SVGs: nunca maiores que a coluna. O `height: auto` é o que
   impede a distorção quando o tema do WordPress define altura. */
.entry-content img,
.entry-content svg,
.entry-content figure {
  max-width: 100%;
  height: auto;
}

/* Separador: uma linha de papel, não um buraco. */
.entry-content hr,
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--esp-7) 0;
}

/* ==========================================================================
   Meta do artigo
   ========================================================================== */

.entry-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--esp-4);
}

.entry-meta a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-meta a:hover {
  color: var(--accent);
}

/* ==========================================================================
   Arquivo e cards (a home)
   ==========================================================================
   O site é uma lista de resenhas. Cada artigo é um card que convida ao
   clique, com a categoria visível: é o que diz ao leitor, antes de entrar, se
   aquilo é uma resenha de livro ou uma comparação de traduções da Bíblia.
   ========================================================================== */

.site-main article {
  margin-bottom: var(--esp-4);
}

/* No arquivo, o card inteiro respira. */
.separate-containers .site-main > article .inside-article {
  padding: var(--esp-5);
}

.site-main article .entry-title {
  margin-bottom: var(--esp-2);
}

.site-main article .entry-title a {
  color: var(--ink);
  text-decoration: none;
}

.site-main article .entry-title a:hover,
.site-main article .entry-title a:focus {
  color: var(--accent);
}

/* O resumo: duas ou três linhas, cortadas com elegância. */
.entry-summary {
  color: var(--muted);
  margin-bottom: 0;
}

.entry-summary p {
  margin-bottom: var(--esp-3);
}

.entry-summary p:last-child {
  margin-bottom: 0;
}

/* A categoria: um rótulo discreto, não um selo gritante. Cor de papel com
   tinta de mecanismo. */
.cat-links {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background-color: var(--accent-bg);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  padding: 0.2em 0.7em;
  margin-bottom: var(--esp-2);
}

.cat-links a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Paginação
   ========================================================================== */

.paging-navigation {
  border-top: 1px solid var(--line);
  padding-top: var(--esp-5);
}

.paging-navigation .page-numbers {
  display: inline-block;
  min-width: var(--toque);
  min-height: var(--toque);
  line-height: var(--toque);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--raio);
  color: var(--ink);
  text-decoration: none;
  margin-right: var(--esp-1);
}

.paging-navigation .page-numbers.current,
.paging-navigation .page-numbers:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.site-footer,
.site-info {
  background-color: var(--card);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-info {
  padding: var(--esp-5) var(--esp-4);
  line-height: 1.6;
  text-align: center;
}

.site-info .site-nature {
  display: block;
  margin-top: var(--esp-2);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted);
}

.site-info a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

/* Foco sempre visível: quem navega por teclado precisa ver onde está. O
   contorno usa a cor do mecanismo, e não o azul padrão do navegador. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--raio);
}

/* O link "pular para o conteúdo" só aparece no foco. */
.skip-link:focus {
  background-color: var(--card);
  color: var(--accent);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Telas maiores
   ========================================================================== */

@media (min-width: 640px) {
  .separate-containers .inside-article,
  .separate-containers .site-main > article .inside-article {
    padding: var(--esp-6);
  }

  .site-content {
    padding-top: var(--esp-6);
    padding-bottom: var(--esp-8);
  }
}

@media (min-width: 900px) {
  .inside-header {
    padding-top: var(--esp-5);
    padding-bottom: var(--esp-5);
  }

  .separate-containers .inside-article,
  .separate-containers .site-main > article .inside-article {
    padding: var(--esp-7);
  }
}