/*
 Theme Name:   Astra Varanda e Café
 Theme URI:    https://varandaecafe.com
 Description:  Tema filho do Astra para o projeto Varanda e Café
 Author:       Manuel Antonio
 Author URI:   https://varandaecafe.com
 Template:     astra
 Version:      1.0.2 (Fix de Hierarquia)

 OBS: Fontes (Lora e Open Sans) devem ser carregadas via functions.php
*/

/* --- CORES DA PALETA "REFÚGIO NATURAL" --- */
:root {
    --varanda-verde-floresta: #2F4F4F;       /* Menu, Títulos, Cor principal */
    --varanda-marrom-cafe: #6F4E37;          /* Meta, Detalhes */
    --varanda-terracota: #C08065;            /* Botões, Links, CTA (A cor do clique!) */
    --varanda-fundo-claro: #E7E5E2;          /* Fundo do Site (Creme Calmo) */
    --varanda-texto-escuro: #353535;         /* Texto geral */
    --varanda-fundo-card: #FFF2DC;           /* Fundo dos Cards */
    --varanda-fundo-header: #FDFDFD;         /* Fundo do cabeçalho (Quase branco) */
    --varanda-related-post: #FFF7E3;         /* Fundo dos cards related - MA_25.DEZ */
    --varanda-volta-topo-1: #8B7355;         /* marrom suave combinando com madeira - MA_25.DEZ */
    --varanda-volta-topo-2: #6B5843;         /* tom mais escuro ao passar o mouse - MA_25.DEZ */
}

/* ============================
   01 - Tipografia e cores base
   ================================================================== */

body { /* corpo geral */
  font-family: 'Open Sans', sans-serif; background-color: var(--varanda-fundo-claro) !important;
  color: var(--varanda-texto-escuro); line-height: 1.7; letter-spacing: 0.3px; }

/* Títulos principais e post titles */
h1, h2, h3, .post-title { font-family: 'Lora', serif; color: var(--varanda-marrom-cafe); !important; }

/* Links padrão */
a { color: var(--varanda-marrom-cafe); transition: color 0.2s ease-in-out; }
a:hover { color: var(--varanda-terracota); }

/* para o header mais fino */
.site-branding { padding: 0 !important; margin: 0 !important; }

/* ============================
   02 - Componentes (cards, botões, tags)
   ================================================================== */

.card { background: var(--varanda-fundo-card); border-radius: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

.tag { background-color: var(--varanda-verde-floresta); color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 0.8em; }

/* ============================
   03 - Menu principal / navbar
   ================================================================== */
.navbar, .main-header, .site-header { background-color: var(--varanda-fundo-header) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 10px 0; }

/* Links do menu — fonte Open Sans */
.navbar a, .main-header a, .site-header a, .menu a {
  font-family: 'Open Sans', sans-serif; font-size: 1.125rem; font-weight: 600; color: var(--varanda-verde-floresta);
  text-decoration: none; letter-spacing: 0.5px; transition: all 0.3s ease; padding: 8px 16px; border-radius: 12px; }

/* hover e ativo do menu */
.navbar a:hover, .main-header a:hover, .site-header a:hover, .menu a:hover {
  background-color: var(--varanda-terracota); color: #fff; }
.navbar a.active, .menu a.current-menu-item { background-color: var(--varanda-verde-floresta); color: #fff; }

/* espaçamento entre itens do menu (flex) */
.navbar ul, .menu ul {
  display: flex; gap: 8px; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 0; }

/* ============================
   04 - Fundo com padrão de Varanda/Jardim do conteúdo
   ================================================================== */
body.blog #content,
body.single-post #content,
body.archive #content,
body.search #content,
#content,
.site-content,
.ast-container,
.site-main {
  /* Fundo sem padrão de SVG para maior legibilidade e calma */
  background-color: var(--varanda-fundo-claro) !important;
  background-image: none !important; background-repeat: repeat; background-attachment: fixed; }

/* Fundo do “card” da página de postagem */
.single-post .entry-content,
.single-post .ast-single-post,
.single-post .site-main > article {
    background: var(--varanda-related-post) !important;  /* coloque aqui a cor desejada */
    padding: 2.2em !important; border-radius: 16px !important; }

body.blog .ast-article-inner,
body.archive .ast-article-inner,
body.search .ast-article-inner { background: var(--varanda-related-post) !important; }

/* ============================
   05 - Garantias do cabeçalho (sem padrão)
   ================================================================== */

header#masthead * { background-image: none !important; background-color: transparent !important; }

header#masthead,
.main-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap { background: var(--varanda-fundo-header) !important; background-image: none !important; }

/* ============================
   06 - Espaçamento entre header e conteúdo
   ================================================================== */

.site-content, .ast-container { margin-top: 0 !important; padding-top: 0 !important; }

/* ============================
   07 - Grid e layout dos cards do blog
   ================================================================== */

body.blog .ast-row,
body.archive .ast-row,
body.search .ast-row {
  display: flex; flex-wrap: wrap; gap: 50px; padding-left: 8%; padding-right: 8%; 
  justify-content: flex-start; align-items: flex-start; }

.ast-separate-container .ast-article-post { width: auto !important; }

/* === Cards (flex column e altura automática) === */
.ast-article-post {
  flex: 1 1 30%; width: 30%; max-width: 30%;
  background: transparent !important; margin: 0 !important; padding: 0 !important;
  box-shadow: none !important; opacity: 0; animation: fadeSlideUpShadow 0.6s ease forwards;
}
@media (min-width: 1440px) {  /* === Telas grandes – 4 colunas === */
  body.blog .ast-article-post, body.archive .ast-article-post, body.search .ast-article-post {
    flex: 1 1 22% !important; width: 22% !important; max-width: 22% !important;
  }
  body.blog .ast-row, body.archive .ast-row, body.search .ast-row {
    gap: 50px !important; padding-left: 6%; padding-right: 6%; }
}
@media (max-width: 1024px) {  /* === Tablets – 2 colunas === */
  .ast-row { gap: 30px !important; justify-content: flex-start; padding: 0 5%; }
  .ast-article-post { flex: 1 1 calc(50% - 15px); width: calc(50% - 15px); max-width: calc(50% - 15px); margin-bottom: 20px; }
}
@media (max-width: 600px) {   /* === Celulares – 1 coluna === */
  .ast-row { gap: 20px !important; justify-content: center; padding: 0 5%; }
  .ast-article-post { flex: 1 1 100%; width: 100%; max-width: 100%; }
}

/* ============================
   08 - Layout responsivo dos cards
   ================================================================== */

.ast-article-inner {
  display: flex; flex-direction: column; justify-content: flex-start; 
  background: var(--varanda-fundo-card); border-radius: 20px; box-shadow: 0 0 0 rgba(0,0,0,0); 
  transition: box-shadow 0.3s ease, transform 0.3s ease; margin: 0 !important; 
  padding: 1.6em; height: auto !important; min-height: 0 !important; overflow: visible !important;
}

/* Botões "leia mais" ficam no final do card */
.ast-article-inner .ast-post-format { margin-top: auto; }

/* Hover dos cards */
.ast-article-inner:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.12); }

/* Transição suave entre cards */
.ast-row article { transition: all 0.25s ease; }

/* Animação de entrada */
@keyframes fadeSlideUpShadow {
  0% { opacity: 0; transform: translateY(20px); box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); }
  70% { opacity: 1; transform: translateY(-5px); box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.08); }
  100% { opacity: 1; transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.08); } }

/* Delay cascata para os primeiros 6 cards (ajustável) */
.ast-article-post:nth-child(1) { animation-delay: 0s; }
.ast-article-post:nth-child(2) { animation-delay: 0.1s; }
.ast-article-post:nth-child(3) { animation-delay: 0.2s; }
.ast-article-post:nth-child(4) { animation-delay: 0.3s; }
.ast-article-post:nth-child(5) { animation-delay: 0.4s; }
.ast-article-post:nth-child(6) { animation-delay: 0.5s; }

/* --- CORREÇÃO DE LINKS DENTRO DOS CARDS --- */
/* Título dos posts na listagem */
.ast-article-post .entry-title a,
.ast-article-post .entry-title a:visited { color: var(--varanda-verde-floresta) !important; }
.ast-article-post .entry-title a:hover { color: var(--varanda-terracota) !important; }

/* Meta dados (Autor, Data, Categoria) dentro dos cards */
.ast-article-post .entry-meta,
.ast-article-post .entry-meta a,
.ast-article-post .entry-meta a:visited { color: var(--varanda-marrom-cafe) !important; }
.ast-article-post .entry-meta a:hover { color: var(--varanda-terracota) !important; }
/* --- FIM CORREÇÃO DE LINKS DENTRO DOS CARDS --- */


/* ============================
   09 - Busca personalizada (posição e aparência)
   ================================================================== */

.varandaecafe-busca { position: absolute; right: 30px; top: 70px; z-index: 99; }
@media (max-width: 1024px) { .varandaecafe-busca { top: 70px; } }
@media (max-width: 600px)  { .varandaecafe-busca { top: 85px; } }

.varandaecafe-busca form { 
  display: flex; align-items: center; background: var(--varanda-fundo-header); 
  border-radius: 40px; border: 2px solid var(--varanda-terracota); 
  padding: 5px 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.varandaecafe-busca input[type="search"] {
  border: none; outline: none; background: transparent;
  font-size: 1rem; color: var(--varanda-texto-escuro); padding: 4px 10px; width: 180px;
}
.varandaecafe-busca input[type="search"]::placeholder { color: var(--varanda-marrom-cafe); }
.varandaecafe-busca button:hover { transform: scale(1.07); opacity: 0.9; }

/* Esconde texto do botão mantendo função (alinhamento/ícone via HTML) */
.varandaecafe-busca input[type="submit"],
.varandaecafe-busca button[type="submit"] {
  color: transparent !important; background: none !important; border: none !important;
  width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important;
  overflow: hidden !important; position: absolute !important;
}

/* Oculta a busca duplicada na tela "Nenhum resultado" */
.search-no-results .page-content .search-form { display: none !important; }

/* ============================
   10 - Comentários (espaçamentos)
   ================================================================== */

#commentform p, .comment-form p { margin-top: 0; margin-bottom: 0; }
#commentform .comment-form-comment, .comment-form .comment-form-comment { margin-top: 0; margin-bottom: 0; }
#commentform .comment-form-cookies-consent, .comment-form .comment-form-cookies-consent { margin-top: 10px; margin-bottom: 10px; }

/* ============================
   11 - Arquivos / busca: remover cabeçalhos duplicados
   ================================================================== */
/* Oculta cabeçalhos de arquivo e busca nativos (substituídos via PHP) */
body.archive .site-content .ast-archive-description,
body.search-results header.page-header,
body.archive header.page-header { display: none !important; }

/* Reduz/zera containers para evitar espaço duplicado */
body.search .site-content,
body.search-results .site-content,
body.archive .site-content,
body.search #primary.content-area,
body.search-results #primary.content-area,
body.archive #primary.content-area { padding-top: 0 !important; margin-top: 0 !important; }

/* Esconde visualmente o container header das páginas de arquivo (se necessário) */
body.archive header.page-header {
  margin: 0 !important; padding: 0 !important; border: none !important;
  background: transparent !important; height: 0 !important; overflow: hidden; visibility: hidden;
}
body.archive header.page-header .ast-archive-title { display: none !important; }

/* Espaço adicional para breadcrumbs em arquivos */
body.archive .main-header-bar-breadcrumb { margin-bottom: 40px !important; }

/* Nosso título simples adicionado via PHP (controla o espaçamento) */
.varandaecafe-titulo-busca {
  padding-top: 20px !important; margin-top: 0 !important;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.1);
}
@media (max-width: 600px) { .varandaecafe-titulo-busca { padding-top: 70px !important; } }
.varandaecafe-titulo-busca h2 {
  margin-top: 0 !important; margin-bottom: 0 !important; font-size: 1.6rem; font-weight: 500; color: var(--varanda-verde-floresta); 
}

/* ============================
   12 - Navegação de posts (anterior/próximo) e relacionados
   ================================================================== */
.varandaecafe-post-nav {
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  padding: 20px 0; margin-top: 40px; font-size: 0.9em;
}
.varandaecafe-post-nav .nav-links { display:flex; justify-content:space-between; align-items:center; }
.varandaecafe-post-nav .nav-previous, .varandaecafe-post-nav .nav-next { flex-basis:48%; }
.varandaecafe-post-nav .nav-next { text-align:right; }
.varandaecafe-post-nav .nav-title { display:block; font-weight:bold; color:var(--varanda-texto-escuro); text-transform:uppercase; font-size:0.8em; }
.varandaecafe-post-nav .nav-link { color:var(--varanda-verde-floresta); text-decoration:none; font-weight:500; }
.varandaecafe-post-nav .nav-link:hover { color:var(--varanda-terracota); text-decoration:underline; }

/* Relacionados: grid de 3 colunas que vira 1 coluna no mobile */
.varandaecafe-related-posts { margin-top:40px; padding-bottom:40px; }
.varandaecafe-related-posts h3 { text-align:center; font-size:1.8em; margin-bottom:30px; }
.related-posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.related-post-card { background:var(--varanda-related-post); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.05);
  overflow:hidden; transition:all 0.3s ease; }
.related-post-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.1); transform:translateY(-5px); }
.related-post-card a { text-decoration:none; color:inherit; display:block; }
.related-post-card .related-post-thumbnail img { width:100%; height:150px; object-fit:cover; display:block; }
.related-post-card .related-post-title { font-size:1.1em; font-weight:600; padding:20px; margin:0; line-height:1.4; }

@media (max-width: 768px) {
  .related-posts-grid { grid-template-columns: 1fr; }
  .varandaecafe-post-nav .nav-links { flex-direction:column; gap:20px; }
  .varandaecafe-post-nav .nav-previous, .varandaecafe-post-nav .nav-next { flex-basis:100%; text-align:center; }
}

/* ============================
   13 - Ajuste de padding interno geral (somente nos cards de listagem)
   ================================================================== */

/* 1️⃣ Cards na listagem */
.ast-article-inner { padding: 2.2em !important; }

/* Pequena responsividade: menos padding no mobile */
@media (max-width: 768px) { .ast-article-inner { padding: 1.5em !important; } }

/* ============================
   99 - Utilitários finais e fallback
   ================================================================== */
.hidden-visually { 
  position:absolute !important; clip:rect(1px,1px,1px,1px); 
  padding:0 !important; border:0 !important; height:1px !important; width:1px !important; overflow:hidden; 
}

/* ============================================================
   BOTÃO "VOLTAR AO TOPO" – ASTRA (correção e estilização)
   ============================================================ */

#ast-scroll-top {
  background-color:var(--varanda-marrom-cafe);
  color: #fff; width: 45px; height: 45px;
  border-radius: 12px !important; /* deixa mais moderno */
  bottom: 30px !important; right: 30px !important;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: all 0.25s ease !important; opacity: 0.85;
}

#ast-scroll-top:hover { transform: scale(1.07); opacity: 0.9; }