/*
 Theme Name: Astra Child
 Template: astra
 Version: 1.0.2
*/

/* ===== Tokens globais (herda do grid) ===== */
:root{
  /* Paleta do grid (já existente) */
  /* --cb-text, --cb-accent, --cb-border, --cb-bg devem existir.
     Se algum não existir, os fallbacks abaixo assumem. */
  --cb-text: var(--cb-text, #1f2937);
  --cb-accent: var(--cb-accent, #E06436);
  --cb-border: var(--cb-border, #4a5568);
  --cb-bg: var(--cb-bg, #ffffff);

  /* Alias para o single */
  --sp-text: var(--cb-text);
  --sp-accent: var(--cb-accent);
  --sp-border: var(--cb-border);
  --sp-bg: var(--cb-bg);
  --sp-pill-bg: #ffffff;     /* pílula branca p/ categoria */
  --sp-pill-tx: #4a4a4a;     /* cinza para categoria */
}

/* ===== Fundo global sempre branco e fonte Poppins ===== */
body, .site, .sp-post{
  background: #ffffff !important;
  font-family: 'Poppins', sans-serif;
}

/* ===== Single Post: fundo cinza igual ao header ===== */
body.single-post,
.single-post .site,
.single-post .sp-post{
  background: #f0f0f1 !important;
}

/* ===== Container do single ===== */
.sp-post{ max-width: 1100px; margin: 0 auto; padding: 24px; }
.sp-article{ background: var(--sp-bg); }

/* ===== Linha 1: Categorias (pílulas) ===== */
.sp-cats{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:center;
  margin: 6px 0 18px;
}
.sp-cat{
  display:inline-block;
  padding: 6px 12px;
  border-radius:999px;
  background: var(--sp-pill-bg);
  color: var(--sp-pill-tx);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none; /* sem sublinhado */
}

.sp-cats{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:center;
  margin: 6px 0 18px;
  filter: brightness(0.96);
}
.sp-cat{
  display:inline-block;
  padding: 6px 12px;
  border-radius:999px;
  background: var(--sp-pill-bg);
  color: var(--sp-pill-tx);
  font-weight: 700;
  font-size: .95rem;
  filter: brightness(0.96);
}

/* ===== Linha 2: Título ===== */
.sp-title{
  margin: 0 0 28px;            /* mais espaço antes da imagem */
  color: #2f4a57;              /* azul-escuro do seu heading */
  font-weight: 800;
  font-size: 1.68rem;          /* ~20% menor que 2.1rem */
  line-height: 1.3;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

/* ===== Linha 3: Imagem de capa ===== */
.sp-hero{
  margin: 0 0 32px;            /* mais espaço antes do conteúdo */
  border: 2px solid var(--sp-border); /* borda escura */
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}
.sp-hero-img{
  display:block; width:100%; height:auto; object-fit:cover;
}

/* ===== Linha 4: Conteúdo ===== */
.sp-content{
  color: var(--sp-text);
  font-size: 1rem;
  line-height: 1.8;
  font-family: 'Poppins', sans-serif;
}
.sp-content > *:first-child{ margin-top: 0; }
.sp-content p{ margin: 0 0 22px; }
.sp-content a{
  color: var(--sp-accent);
  text-decoration: none;
  font-weight: 700;
}
.sp-content a:hover{ opacity:.9; }
.sp-content img{ max-width:100%; height:auto; border-radius:8px; }
.sp-content h2, .sp-content h3, .sp-content h4{
  color:#2f4a57; margin: 28px 0 14px; line-height:1.3;
  font-family: 'Poppins', sans-serif;
}

/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .sp-post{ padding: 18px; }
  .sp-title{ font-size: 1.5rem; }
}
@media (max-width: 640px){
  .sp-title{ font-size: 1.3rem; }
}

/* força base consistente */
html { font-size: 16px; } /* opcional, mas ajuda a padronizar rem */

/* header: garante dimensões iguais ao estático */
header { background:#f0f0f1; }
.header-container { max-width: 1200px; padding: 0 20px; }
header .logo { height: 140px !important; object-fit: contain; }  /* mesmo do estático */

/* links do menu – mesmo “30px” que você usa no estático */
header .navbar-nav .nav-link {
  font-size: 30px !important;
  font-weight: 500;
  padding: .5rem 1rem;
  color: #000;
}

/* espaçamentos do navbar */
header .navbar { padding-top: 0; padding-bottom: 0; }
header .navbar .container.header-container { min-height: 80px; } /* ajuste fino */


/* --- Fundo do SINGLE POST (cinza igual ao header) --- */
body.single-post,
.single-post .site {
  background: #f0f0f1 !important;  /* mesmo tom do header */
}

/* Mantém o “cartão” do artigo branco (se quiser o conteúdo destacado) */
.single-post .sp-article,
.single-post .entry-content {
  background: #ffffff;
}

/* Evita que contêineres internos pintem o fundo e “anulem” o cinza externo */
.single-post .site-content,
.single-post .content-area,
.single-post .ast-container {
  background: transparent !important;
}

/* === SINGLE POST: tudo com fundo CINZA e nada branco por dentro === */

/* pinta o fundo estrutural todo */
body.single-post,
body.single-post #page,
body.single-post .site,
body.single-post .site-content,
body.single-post .content-area,
body.single-post .ast-container,
body.single-post .site-main {
  background-color: #f0f0f1 !important;
}

/* remove fundos brancos de wrappers/artigos/conteúdo */
body.single-post .sp-article,
body.single-post .ast-article-single,
body.single-post .entry-content,
body.single-post .hentry,
body.single-post article,
body.single-post .post,
body.single-post .type-post {
  background: transparent !important;
  box-shadow: none !important; /* se algum “card” tiver sombra */
  border: 0 !important;        /* e borda simulando cartão */
}

/* Gutenberg/blocks que às vezes trazem background */
body.single-post .wp-block-group,
body.single-post .wp-block-cover,
body.single-post .wp-block-columns {
  background: transparent !important;
}

/* === Fundo CINZA só na página do Blog (ID 6667) === */
.page-id-6667,
.page-id-6667 #page,
.page-id-6667 .site,
.page-id-6667 .site-content,
.page-id-6667 .content-area,
.page-id-6667 .ast-container {
  background: #f0f0f1 !important;
}

/* NÃO neutraliza os cards - eles podem ter fundo branco */
/* Esconde o footer vazio do Astra */
#colophon.site-footer {
  display: none !important;
}

/* Remove espaço excessivo no topo do single post */
.single-post .site-content,
.single-post .content-area,
.single-post .sp-post {
  padding-top: -5px !important;  /* ajuste fino, pode ser 10px, 20px, etc */
  margin-top: 0 !important;
}
.single-post .ast-container {
  margin-top: 0 !important;
  padding-top: -5px !important;
}