/* =========================================================
   BLOG — SINGLE.PHP
   Adicionar ao final do style.css.
   Usa as mesmas variáveis já definidas em :root (não cria cores novas).
========================================================= */

/* Banner do post: mesma base de .banner-intro-interna, mas bem mais compacto —
   o .banner-intro-interna base já vem com min-height:78vh do style.css principal,
   então aqui sobrescrevemos para não perder a primeira dobra em fundo azul. */
.blog-banner {
  min-height: 34vh !important;
  padding: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-banner .col-texto h1 {
  width: 100%;
  font-size: calc(var(--fonte-xl) * 0.55);
  margin-bottom: 0.75rem !important;
}
.badge-categoria {
  display: inline-block;
  background: var(--verde);
  color: var(--azul) !important;
  font-size: var(--fonte-micro);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 90px;
  margin-bottom: 1rem;
}
.post-meta,
.post-meta span {
  color: var(--verde) !important;
  font-size: var(--fonte-mini);
}
.post-meta{
  margin: auto;
}

@media (max-width: 768px) {
  .blog-banner {
    min-height: 28vh !important;
    padding: 1.8rem 0;
  }
  .blog-banner .col-texto h1 {
    font-size: calc(var(--fonte-xl) * 0.42);
  }
}

/* Breadcrumb */
.breadcrumb-post {
  font-size: var(--fonte-micro);
  color: var(--cinza-escuro);
  padding: 1rem 0;
}
.breadcrumb-post .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  row-gap: 0.3rem;
}
.breadcrumb-post a {
  color: var(--azul);
  font-weight: 600;
}
.breadcrumb-post span {
  color: var(--cinza-escuro);
}
@media (max-width: 768px) {
  .breadcrumb-post {
    padding: 0.75rem 0;
  }
  .breadcrumb-post .container {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    font-size: calc(var(--fonte-micro) * 0.95);
  }
}

/* Conteúdo do post */
.post-thumb {
  border-radius: 24px;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.post-content h2 {
  font-size: var(--fonte-gd);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.post-content h3 {
  font-size: var(--fonte-md);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.post-content p,
.post-content li {
  font-size: var(--fonte-pq);
  line-height: 1.7;
}
.post-content ul {
  list-style: square;
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}
.post-content a {
  color: var(--azul);
  text-decoration: underline !important;
  font-weight: 600;
}

/* Bloco de "resposta rápida" dentro do conteúdo (AEO) */
.post-content div[style*="border-left"] {
  border-radius: 12px;
  background: var(--cinza-claro) !important;
  border-left: 4px solid var(--azul) !important;
}

/* Tags */
.tag-pill {
  background: var(--cinza-claro);
  color: var(--azul) !important;
  font-size: var(--fonte-micro);
  padding: 0.35rem 0.9rem;
  border-radius: 90px;
  font-weight: 600;
}

/* Box do autor */
.autor-box {
  background: var(--cinza-claro);
  border-radius: 24px;
  padding: 1.2rem;
}
.autor-box .autor-foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Sidebar */
.cta-sidebar {
  background: var(--azul) !important;
  border-radius: 24px;
  padding: 1.5rem;
}
.cta-sidebar h3,
.cta-sidebar p {
  color: var(--branco) !important;
}
.sidebar-box {
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 0px 18px rgba(0, 0, 0, 0.06);
}
.lista-categorias li,
.lista-recentes li {
  margin-bottom: 0.75rem;
}
.lista-categorias a {
  color: var(--cinza-escuro);
  font-size: var(--fonte-mini);
}
.lista-categorias a:hover {
  color: var(--azul);
}
.lista-recentes a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--azul);
  font-size: var(--fonte-mini);
  font-weight: 600;
}
.lista-recentes img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

/* =========================================================
   SUMÁRIO AUTOMÁTICO (TOC)
   Duas versões no HTML, uma visível por vez via CSS:
   - .toc-mobile: accordion nativo (<details>), visível até 991px
   - .toc-desktop: card sticky na sidebar, visível a partir de 992px
========================================================= */
.toc-box {
  background: var(--cinza-claro);
  border-left: 3px solid var(--verde);
  border-radius: 12px;
  display: none; /* só aparece depois que o JS confirma 2+ H2 (.toc-ready) */
}
.toc-box.toc-ready {
  display: block;
}

/* --- Versão mobile/tablet (accordion) --- */
.toc-mobile {
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.toc-mobile summary {
  cursor: pointer;
  color: var(--azul);
  font-size: var(--fonte-mini);
  list-style: none;
}
.toc-mobile summary::-webkit-details-marker {
  display: none;
}
.toc-mobile summary::after {
  content: "▾";
  float: right;
  transition: transform 0.2s ease;
}
.toc-mobile[open] summary::after {
  transform: rotate(180deg);
}
.toc-mobile .lista-toc {
  margin-top: 0.9rem;
}
@media (min-width: 992px) {
  .toc-mobile {
    display: none !important;
  }
}

/* --- Versão desktop (sticky na sidebar) --- */
.toc-desktop {
  display: none;
}
@media (min-width: 992px) {
  .toc-desktop.toc-ready {
    display: block;
    /* position: sticky;
    top: 100px; */
  }
}

/* Lista (compartilhada pelas duas versões) */
.lista-toc {
  padding-left: 0;
}
.lista-toc li {
  margin-bottom: 0.6rem;
  list-style: none;
}
.lista-toc a {
  display: block;
  color: var(--cinza-escuro);
  font-size: var(--fonte-mini);
  line-height: 1.3;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  transition: 0.18s ease all;
}
.lista-toc a:hover {
  color: var(--azul);
}
.lista-toc a.ativo {
  color: var(--azul);
  font-weight: 700;
  border-left-color: var(--azul);
}

/* Sidebar como coluna flex: Categorias/Recentes ficam ancorados
   no rodapé da coluna (mesma altura da coluna de conteúdo, graças
   ao align-items:stretch padrão do .row do Bootstrap), sobrando
   espaço no meio para o TOC "flutuar" via sticky durante o scroll. */
.sidebar-flex {
  display: flex;
  flex-direction: column;
  /* min-height: 100%; */
}
.sidebar-bottom {
  margin-top: auto;
}

/* =========================================================
   FAQ EM ACCORDION
   Usa <details>/<summary> nativos — sem JS, acessível,
   e o conteúdo continua no DOM (bom pra SEO/AEO mesmo fechado).
========================================================= */
.faq-list {
  margin-top: 1.5rem;
}
.faq-item {
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: 16px;
  padding: 1rem 1.3rem;
  margin-bottom: 0.9rem;
  transition: 0.18s ease all;
}
.faq-item[open] {
  border-color: var(--azul);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary h3 {
  margin: 0 !important;
  font-size: var(--fonte-pq) !important;
  color: var(--azul) !important;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--azul);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  margin: 0.9rem 0 0 0;
  font-size: var(--fonte-mini);
}

/* Posts relacionados — reaproveita .card já existente */
.relacionados-section {
  background: var(--cinza-claro);
}
.blog-card-img {
  border-radius: 16px;
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.blog-card-img-fallback {
  object-fit: contain;
  padding: 2.5rem;
  background: var(--cinza-claro);
}

/* =========================================================
   CARDS DE LISTAGEM (home.php, archive.php, search.php)
========================================================= */
.badge-categoria-card {
  display: inline-block;
  background: var(--verde);
  color: var(--azul);
  font-size: var(--fonte-micro);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.8rem;
  border-radius: 90px;
  margin-bottom: 0.6rem;
  align-self: flex-start;
}
.blog-card-data {
  color: var(--cinza-escuro);
  opacity: 0.7;
  margin-bottom: 0.4rem !important;
}

/* =========================================================
   PAGINAÇÃO
========================================================= */
.blog-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.8rem;
  border-radius: 8px;
  font-size: var(--fonte-mini);
  color: var(--azul);
  background: var(--cinza-claro);
  text-decoration: none;
}
.blog-pagination span.current {
  background: var(--azul);
  color: var(--branco);
  font-weight: 700;
}
.blog-pagination a:hover {
  background: var(--verde);
}

/* =========================================================
   FORMULÁRIO DE BUSCA (search.php)
========================================================= */
.search-form-page {
  display: flex;
  gap: 0.75rem;
  max-width: 560px;
}
.search-form-input {
  flex: 1;
  border: 1px solid var(--cinza-claro);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: var(--fonte-mini);
}
.search-form-input:focus {
  outline: none;
  border-color: var(--azul);
}

/* =========================================================
   ESTADO VAZIO (sem posts / sem resultados de busca)
========================================================= */
.no-results-box {
  max-width: 520px;
  margin: 0 auto;
}
.no-results-box p {
  color: var(--cinza-escuro);
}