/* ============================================================
   CANTOS LITÚRGICOS — PATCH: ÁREA DE LEITURA FUNDO BRANCO
   Arquivo: assets/css/reading-area-white.css
   Versão:  1.0.0
   
   ESCOPO: Aplica fundo branco + tipografia escura APENAS nas
   áreas de leitura (single, archive, page). Header, footer,
   sidebar, hero e widgets permanecem no tema escuro.
   
   ENQUEUE: No functions.php, adicionar após cl_estilos():
     wp_enqueue_style(
       'cl-reading-white',
       get_template_directory_uri() . '/assets/css/reading-area-white.css',
       ['cl-main'],
       '1.0.0'
     );
   ============================================================ */


/* ============================================================
   1. VARIÁVEIS LOCAIS DO TEMA CLARO (área de leitura)
   Sobrescreve as variáveis globais escuras dentro do contexto
   de leitura sem afetar o restante do layout.
   ============================================================ */

/* Tokens de cor do tema claro — referenciados abaixo */
:root {
  --cl-read-bg:           #FFFFFF;
  --cl-read-bg-alt:       #F8F7F4;      /* fundo levemente creme, mais suave que branco puro */
  --cl-read-border:       #E8E2D8;      /* borda sutil, tom quente */
  --cl-read-text:         #1A1A1A;      /* texto principal — quase preto */
  --cl-read-text-sec:     #555555;      /* texto secundário — cinza médio */
  --cl-read-text-ter:     #888888;      /* metadados, datas */
  --cl-read-heading:      #111111;      /* títulos fortes */
  --cl-read-link:         #8B6914;      /* dourado escurecido p/ contraste WCAG AA no branco */
  --cl-read-link-hover:   #C9A84C;      /* dourado original no hover */
  --cl-read-accent:       rgba(201, 168, 76, 0.12); /* fundo de destaque sutil */
  --cl-read-accent-solid: #C9A84C;
  --cl-read-card:         #FFFFFF;
  --cl-read-sombra:       0 2px 16px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   2. FUNDO DA PÁGINA NAS VIEWS DE LEITURA
   Afeta body.single, body.archive, body.page, body.search
   — NÃO afeta body.home (front-page tem hero escuro).
   ============================================================ */

body.single,
body.page:not(.home),
body.archive,
body.search,
body.tag,
body.author,
body.category,
body.date {
  background-color: var(--cl-read-bg-alt);
}


/* ============================================================
   3. WRAPPERS DE CONTEÚDO — fundos brancos explícitos
   ============================================================ */

/* Single Post */
body.single .single-post,
body.single .single-wrapper {
  background: transparent;  /* o wrapper apenas configura o padding */
}

/* O card do artigo em si */
body.single .single-post {
  background: var(--cl-read-bg) !important;
  border: 1px solid var(--cl-read-border) !important;
  border-radius: 12px;
  box-shadow: var(--cl-read-sombra);
}

/* Página estática */
body.page .page-artigo {
  background: var(--cl-read-bg) !important;
  border: 1px solid var(--cl-read-border) !important;
  border-radius: 12px;
  box-shadow: var(--cl-read-sombra);
  padding: 2rem 2.5rem 2.5rem;
}

/* Archive / listagem */
body.archive .post-lista-item,
body.search  .post-lista-item,
body.tag     .post-lista-item,
body.author  .post-lista-item,
body.category .post-lista-item,
body.date    .post-lista-item {
  background: var(--cl-read-bg) !important;
  border: 1px solid var(--cl-read-border) !important;
  box-shadow: var(--cl-read-sombra);
}

/* Card padrão de posts (seções da front-page que aparecem também em archives) */
body.archive  .post-card,
body.search   .post-card,
body.category .post-card,
body.tag      .post-card,
body.author   .post-card,
body.date     .post-card {
  background: var(--cl-read-bg) !important;
  border-color: var(--cl-read-border) !important;
}


/* ============================================================
   4. TIPOGRAFIA DA ÁREA DE LEITURA — COR ESCURA
   ============================================================ */

/* Texto corrido */
body.single .entry-content,
body.page   .entry-content,
body.single .single-post__conteudo,
body.page   .page-artigo__conteudo {
  color: var(--cl-read-text) !important;
  font-size: 1.0625rem;   /* 17px — leiturabilidade ótima */
  line-height: 1.85;
}

/* Parágrafos */
body.single .entry-content p,
body.page   .entry-content p {
  color: var(--cl-read-text);
}

/* Títulos dentro do conteúdo */
body.single .entry-content h1,
body.single .entry-content h2,
body.single .entry-content h3,
body.single .entry-content h4,
body.single .entry-content h5,
body.single .entry-content h6,
body.page   .entry-content h1,
body.page   .entry-content h2,
body.page   .entry-content h3,
body.page   .entry-content h4,
body.page   .entry-content h5,
body.page   .entry-content h6 {
  color: var(--cl-read-heading) !important;
}

/* Título do post (h1 no header do artigo) */
body.single .single-post__titulo,
body.page   .page-artigo__titulo {
  color: var(--cl-read-heading) !important;
}

/* Links dentro do conteúdo */
body.single .entry-content a,
body.page   .entry-content a {
  color: var(--cl-read-link) !important;
}
body.single .entry-content a:hover,
body.page   .entry-content a:hover {
  color: var(--cl-read-link-hover) !important;
}

/* Metadados do post (data, autor, tempo de leitura) */
body.single .single-post__meta-item,
body.single .single-post__meta-item svg {
  color: var(--cl-read-text-ter) !important;
}

/* Legenda da imagem destacada */
body.single .single-post__thumb-legenda,
body.page   .page-artigo__thumb figcaption {
  color: var(--cl-read-text-sec) !important;
  background: var(--cl-read-bg-alt);
  padding: 0.5rem 1.5rem;
}

/* Excerpt nos cards de listagem */
body.archive  .post-lista-item__excerpt,
body.search   .post-lista-item__excerpt,
body.category .post-lista-item__excerpt,
body.tag      .post-lista-item__excerpt,
body.author   .post-lista-item__excerpt,
body.date     .post-lista-item__excerpt {
  color: var(--cl-read-text-sec) !important;
}

/* Título nos cards de listagem */
body.archive  .post-lista-item__titulo a,
body.search   .post-lista-item__titulo a,
body.category .post-lista-item__titulo a,
body.tag      .post-lista-item__titulo a,
body.author   .post-lista-item__titulo a,
body.date     .post-lista-item__titulo a {
  color: var(--cl-read-heading) !important;
}
body.archive  .post-lista-item__titulo a:hover,
body.category .post-lista-item__titulo a:hover,
body.tag      .post-lista-item__titulo a:hover {
  color: var(--cl-read-link) !important;
}

/* Data nos cards de listagem */
body.archive  .post-lista-item__data,
body.search   .post-lista-item__data,
body.category .post-lista-item__data {
  color: var(--cl-read-text-ter) !important;
}


/* ============================================================
   5. ELEMENTOS INTERNOS DO CONTEÚDO
   ============================================================ */

/* Blockquote */
body.single .entry-content blockquote,
body.page   .entry-content blockquote {
  background: var(--cl-read-bg-alt) !important;
  border-left-color: var(--cl-read-accent-solid) !important;
  color: var(--cl-read-text-sec) !important;
}

/* Tabela */
body.single .entry-content th,
body.page   .entry-content th {
  background: var(--cl-read-bg-alt) !important;
  color: var(--cl-read-heading) !important;
  border-color: var(--cl-read-border) !important;
}
body.single .entry-content td,
body.page   .entry-content td {
  border-color: var(--cl-read-border) !important;
  color: var(--cl-read-text) !important;
}

/* Code inline */
body.single .entry-content code,
body.page   .entry-content code {
  background: var(--cl-read-bg-alt) !important;
  color: #8B3A00 !important;  /* laranja escuro — legível no branco */
  border: 1px solid var(--cl-read-border);
}

/* Pre / cifras — já está branco no main.css, reafirmamos */
body.single .entry-content pre,
body.single .single-post__conteudo pre,
body.page   .entry-content pre,
body.page   .page-artigo__conteudo pre {
  background: #FFFFFF !important;
  color: #1A1A1A !important;
  border: 1px solid var(--cl-read-border) !important;
}
body.single .entry-content pre b,
body.single .entry-content pre strong {
  color: #c9540a !important; /* acorde — já definido no main.css */
}


/* ============================================================
   6. HEADER DO SINGLE POST (área acima do conteúdo)
   ============================================================ */

body.single .single-post__header {
  background: var(--cl-read-bg);
  border-bottom: 1px solid var(--cl-read-border);
  border-radius: 12px 12px 0 0;
}

/* Categoria badge */
body.single .single-post__categoria {
  /* mantém dourado sobre branco — bom contraste */
  color: var(--cl-read-link) !important;
  border-color: rgba(201, 168, 76, 0.5) !important;
  background: rgba(201, 168, 76, 0.06) !important;
}

/* Rodapé do post (tags + compartilhar) */
body.single .single-post__rodape {
  background: var(--cl-read-bg);
  border-top: 1px solid var(--cl-read-border) !important;
  border-radius: 0 0 12px 12px;
}

/* Labels de tags e compartilhamento */
body.single .single-post__tags-label,
body.single .single-post__compartilhar-label {
  color: var(--cl-read-text-sec) !important;
}

/* Tags */
body.single .tag {
  background: var(--cl-read-bg-alt) !important;
  color: var(--cl-read-link) !important;
  border-color: rgba(201, 168, 76, 0.3) !important;
}
body.single .tag:hover {
  background: var(--cl-read-accent-solid) !important;
  color: #fff !important;
}


/* ============================================================
   7. NAVEGAÇÃO ENTRE POSTS
   ============================================================ */

body.single .navegacao-posts {
  background: var(--cl-read-bg);
  border: 1px solid var(--cl-read-border);
  border-radius: 12px;
  padding: 1.25rem 1.75rem;
  box-shadow: var(--cl-read-sombra);
}

body.single .navegacao-posts__label {
  color: var(--cl-read-text-ter) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.single .navegacao-posts__link {
  color: var(--cl-read-heading) !important;
}
body.single .navegacao-posts__link:hover {
  color: var(--cl-read-link) !important;
}


/* ============================================================
   8. POSTS RELACIONADOS
   ============================================================ */

body.single .posts-relacionados {
  /* mantém fundo transparente — cartões abaixo têm fundo próprio */
}

body.single .posts-relacionados__titulo {
  color: var(--cl-read-heading) !important;
}

body.single .post-card--relacionado {
  background: var(--cl-read-bg) !important;
  border-color: var(--cl-read-border) !important;
  box-shadow: var(--cl-read-sombra);
}

body.single .post-card--relacionado .post-card__titulo {
  color: var(--cl-read-heading) !important;
}

body.single .post-card--relacionado .post-card__data {
  color: var(--cl-read-text-ter) !important;
}


/* ============================================================
   9. ARCHIVE HEADER
   ============================================================ */

body.archive  .archive-header,
body.search   .archive-header,
body.category .archive-header,
body.tag      .archive-header,
body.author   .archive-header,
body.date     .archive-header {
  background: var(--cl-read-bg);
  border-bottom: 1px solid var(--cl-read-border);
}

body.archive  .archive-header__titulo,
body.category .archive-header__titulo,
body.tag      .archive-header__titulo,
body.author   .archive-header__titulo,
body.date     .archive-header__titulo {
  color: var(--cl-read-heading) !important;
}

body.archive  .archive-header__desc,
body.category .archive-header__desc {
  color: var(--cl-read-text-sec) !important;
}

/* Contador de resultados */
body.archive  .archive-resultado,
body.category .archive-resultado,
body.tag      .archive-resultado {
  color: var(--cl-read-text-sec) !important;
}
body.archive  .archive-resultado strong,
body.category .archive-resultado strong {
  color: var(--cl-read-heading) !important;
}


/* ============================================================
   10. BREADCRUMBS
   ============================================================ */

body.single   .breadcrumbs,
body.page     .breadcrumbs,
body.archive  .breadcrumbs,
body.category .breadcrumbs {
  color: var(--cl-read-text-ter) !important;
}

body.single   .breadcrumbs a,
body.page     .breadcrumbs a,
body.archive  .breadcrumbs a,
body.category .breadcrumbs a {
  color: var(--cl-read-link) !important;
}


/* ============================================================
   11. PAGINAÇÃO DO ARCHIVE
   ============================================================ */

body.archive  .paginacao .page-numbers,
body.category .paginacao .page-numbers,
body.tag      .paginacao .page-numbers {
  background: var(--cl-read-bg) !important;
  color: var(--cl-read-text) !important;
  border-color: var(--cl-read-border) !important;
}

body.archive  .paginacao .page-numbers.current,
body.category .paginacao .page-numbers.current {
  background: var(--cl-read-accent-solid) !important;
  color: #fff !important;
  border-color: var(--cl-read-accent-solid) !important;
}

body.archive  .paginacao .page-numbers:hover,
body.category .paginacao .page-numbers:hover {
  border-color: var(--cl-read-accent-solid) !important;
  color: var(--cl-read-link) !important;
}


/* ============================================================
   12. ESTADO VAZIO (sem resultados)
   ============================================================ */

body.archive  .sem-resultados,
body.search   .sem-resultados {
  background: var(--cl-read-bg) !important;
  border: 1px solid var(--cl-read-border) !important;
  border-radius: 12px;
  padding: 3rem 2rem;
  box-shadow: var(--cl-read-sombra);
}

body.archive  .sem-resultados__titulo,
body.search   .sem-resultados__titulo {
  color: var(--cl-read-heading) !important;
}

body.archive  .sem-resultados__texto,
body.search   .sem-resultados__texto {
  color: var(--cl-read-text-sec) !important;
}


/* ============================================================
   13. FORMULÁRIO DE BUSCA (quando aparece na área de leitura)
   ============================================================ */

body.archive  .formulario-busca__grupo,
body.search   .formulario-busca__grupo,
body.single   .formulario-busca__grupo {
  border-color: var(--cl-read-border) !important;
  background: var(--cl-read-bg) !important;
}

body.archive  .formulario-busca__campo,
body.search   .formulario-busca__campo,
body.single   .formulario-busca__campo {
  background: var(--cl-read-bg) !important;
  color: var(--cl-read-text) !important;
}

body.archive  .formulario-busca__campo::placeholder,
body.search   .formulario-busca__campo::placeholder {
  color: var(--cl-read-text-ter) !important;
}


/* ============================================================
   14. PÁGINA ESTÁTICA (page.php)
   ============================================================ */

body.page .page-wrapper {
  padding-block: 2.5rem;
}

body.page .page-artigo__titulo {
  color: var(--cl-read-heading) !important;
}

body.page .page-artigo__conteudo {
  color: var(--cl-read-text) !important;
}


/* ============================================================
   15. RESPONSIVIDADE — LEITURA EM MOBILE
   ============================================================ */

@media (max-width: 768px) {
  body.single .single-post {
    border-radius: 8px;
  }
  body.page .page-artigo {
    padding: 1.25rem 1rem 2rem;
    border-radius: 8px;
  }
  body.single .single-post__header {
    border-radius: 8px 8px 0 0;
  }
  body.single .single-post__rodape {
    border-radius: 0 0 8px 8px;
  }
}

@media (max-width: 480px) {
  body.single .single-post,
  body.page   .page-artigo {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}