/* ============================================================
   CANTOS LITÚRGICOS — PATCH: Correções de cor e layout
   Arquivo: assets/css/liturgia-page-fixes.css

   ENQUEUE: No functions.php, adicionar após cl_estilos()
   (ou após reading-area-white se já estiver enfileirado):

     wp_enqueue_style(
       'cl-liturgia-fixes',
       get_template_directory_uri() . '/assets/css/liturgia-page-fixes.css',
       ['cl-main', 'cl-reading-white'],
       '1.0.0'
     );
   ============================================================ */


/* ============================================================
   FIX 1 — SEÇÕES LITÚRGICAS NA PÁGINA CLARA (body.page)
   Problema: .liturgia-secao usa var(--cor-card-bg) = #142033
   e textos claros, mas a página já tem fundo branco.
   Solução: Sobrescreve fundo, borda e textos internos com
   tokens do tema claro (definidos em reading-area-white.css).
   ============================================================ */

/* Container geral do shortcode [liturgia_completa] */
body.page .liturgia-completa {
  color: var(--cl-read-text, #1A1A1A);
}

/* Título da celebração */
body.page .liturgia-completa__titulo {
  color: var(--cl-read-heading, #111111) !important;
  border-bottom-color: rgba(201, 168, 76, 0.3) !important;
  font-style: italic; /* mantém o italic original */
}

/* Cartão de cada seção (1ª Leitura, Salmo, etc.) */
body.page .liturgia-secao {
  background: var(--cl-read-bg, #FFFFFF) !important;
  border-color: rgba(201, 168, 76, 0.2) !important;
  border-left-color: var(--cl-read-accent-solid, #C9A84C) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Título de cada seção (ex: "📖 1ª Leitura") */
body.page .liturgia-secao__titulo {
  color: var(--cl-read-heading, #111111) !important;
}

/* Referência bíblica (ex: "Is 49,1-6") */
body.page .liturgia-secao__ref {
  color: var(--cl-read-link, #8B6914) !important;
}

/* Subtítulo / introdução da perícope */
body.page .liturgia-secao__subtitulo {
  color: var(--cl-read-text-sec, #555555) !important;
}

/* Texto corrido da leitura */
body.page .liturgia-secao__texto {
  color: var(--cl-read-text, #1A1A1A) !important;
}

body.page .liturgia-secao__texto p {
  color: var(--cl-read-text, #1A1A1A) !important;
}

/* Intro em itálico (ex: "Leitura do Livro de...") */
body.page .liturgia-secao__intro {
  color: var(--cl-read-text-sec, #555555) !important;
}

/* Refrão do salmo */
body.page .liturgia-secao__refrao {
  color: var(--cl-read-heading, #111111) !important;
}

/* Indicador de cor litúrgica (bolinha + texto) */
body.page .liturgia__cor {
  color: var(--cl-read-text-sec, #555555) !important;
}

/* Celebração destacada (abaixo do título h2) */
body.page .liturgia__celebracao {
  color: var(--cl-read-text-sec, #555555) !important;
}


/* ============================================================
   FIX 2 — ESPAÇO / ARREDONDAMENTO INDESEJADO NO TOPO DO POST
   Problema: O card .single-post tem border-radius:12px e
   algum padding/margin extra cria um gap visual branco acima
   do header do artigo (visível na imagem 2).
   Solução: Garante que o header grude no topo do card,
   sem padding extra antes do primeiro elemento.
   ============================================================ */

/* Remove qualquer margem/padding que empurre o header para baixo */
body.single .single-post__header:first-child,
body.single .single-post > .single-post__header:first-child {
  margin-top: 0 !important;
  padding-top: var(--espaco-lg, 1.5rem) !important;
}

/* Garante que o border-radius do topo acompanhe o card */
body.single .single-post__header {
  border-radius: 12px 12px 0 0;
  overflow: hidden; /* corta qualquer filho que vaze */
}

/* Se houver imagem destacada ANTES do header (alguns templates),
   ela também precisa do border-radius no topo */
body.single .single-post__thumb:first-child img,
body.single .single-post > .single-post__thumb:first-child {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* Remove gap entre o card e o que vem antes dele (ex: breadcrumbs) */
body.single .single-wrapper {
  padding-top: var(--espaco-xl, 2rem);
}

/* Mobile */
@media (max-width: 768px) {
  body.single .single-post__header {
    border-radius: 8px 8px 0 0;
  }
}

@media (max-width: 480px) {
  body.single .single-post__header {
    border-radius: 0;
  }
}