/* ============================================================
   SipCode — Base de Conhecimento (KB) — REDESIGN PREMIUM
   ============================================================
   Fase 7 (30/08/2026). Estilo dos templates de override do
   BetterDocs criados no tema:
     - archive-docs.php            (arquivo / página principal)
     - taxonomy-doc_category.php   (página de categoria)
     - single-docs.php            (artigo individual)

   REGRA DE OURO DESTE ARQUIVO:
   Usa EXCLUSIVAMENTE as variáveis do tokens.css (--bg, --bg-alt,
   --card-bg, --text, --text-secondary, --accent, --border,
   --teal, --teal-dark, --laranja, --radius-*). NENHUMA cor fixa
   em hexadecimal no corpo — assim claro/escuro funcionam de graça,
   sem !important e sem brigar com o CSS do plugin (o CSS do plugin
   é retirado da fila no enqueue.php nestas telas).

   Prefixo de classe .sc-kb-* — namespace próprio, zero colisão
   com o BetterDocs ou com .reveal/.sc-reveal do tema.
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO MONUMENTAL (padrão Sobre/Parceiros)
   ------------------------------------------------------------ */
.sc-kb-hero{
  position:relative;
  background:var(--teal-dark);
  padding:150px 0 72px;
  text-align:center;
  overflow:hidden;
}
/* leve textura de profundidade, coerente com sobre/parceiros */
.sc-kb-hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(79,195,224,0.10), transparent 60%);
  pointer-events:none;
}
.sc-kb-hero-conteudo{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.sc-kb-hero .eyebrow{ justify-content:center; display:flex; }
.sc-kb-hero h1{
  color:#fff;
  font-size:clamp(34px, 5vw, 52px);
  line-height:1.08;
  margin:10px 0 18px;
}
.sc-kb-hero .sc-kb-sub{
  color:rgba(255,255,255,0.82);
  font-size:clamp(16px, 2vw, 19px);
  max-width:600px;
  margin:0 auto 34px;
}

/* ------------------------------------------------------------
   2. BUSCA (dentro do hero)
   Mantém o input real do BetterDocs (#betterdocs-search-input),
   mas reveste com a nossa identidade. O plugin injeta seus
   resultados via JS num container próprio; só estilizamos a casca.
   ------------------------------------------------------------ */
.sc-kb-search{ max-width:560px; margin:0 auto; position:relative; z-index:2; }
.sc-kb-search .betterdocs-searchbar-inner,
.sc-kb-search form{ position:relative; }
.sc-kb-search input[type="search"],
.sc-kb-search input[type="text"],
.sc-kb-search .betterdocs-search-field{
  width:100%;
  font-family:var(--font-body);
  font-size:16px;
  color:#fff;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:12px;
  padding:16px 20px 16px 52px;
  transition:border-color .2s ease, background .2s ease;
}
.sc-kb-search input::placeholder,
.sc-kb-search .betterdocs-search-field::placeholder{ color:rgba(255,255,255,0.55); }
.sc-kb-search input:focus,
.sc-kb-search .betterdocs-search-field:focus{
  outline:none;
  border-color:rgba(79,195,224,0.75);
  background:rgba(255,255,255,0.12);
}
.sc-kb-search .sc-kb-search-icon{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,0.6); font-size:20px; pointer-events:none; z-index:3;
}
/* dropdown de resultados do plugin, quando aparecer */
.sc-kb-search .betterdocs-search-result,
.sc-kb-search .docs-search-result{
  background:var(--card-bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  margin-top:8px;
  text-align:left;
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
}
.sc-kb-search .betterdocs-search-result a,
.sc-kb-search .docs-search-result a{ color:var(--text); }
.sc-kb-search .betterdocs-search-result a:hover,
.sc-kb-search .docs-search-result a:hover{ color:var(--accent); }

/* ------------------------------------------------------------
   3. SEÇÃO DE CATEGORIAS (grid de cards)
   ------------------------------------------------------------ */
.sc-kb-secao{ padding:72px 0 96px; background:var(--bg); }
.sc-kb-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.sc-kb-card{
  display:flex; flex-direction:column;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:26px 24px;
  text-align:left;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sc-kb-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--card-shadow);
  border-color:var(--accent);
}
.sc-kb-card-icone{
  width:52px; height:52px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
}
.sc-kb-card-icone svg{ width:26px; height:26px; }
.sc-kb-card h3{
  font-size:18px; margin:0 0 8px; color:var(--text);
}
.sc-kb-card-desc{
  font-size:14px; color:var(--text-secondary); line-height:1.55;
  margin:0 0 16px; flex:1;
}
.sc-kb-card-rodape{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--border);
}
.sc-kb-card-count{
  font-family:var(--font-head); font-weight:600; font-size:13px;
  color:var(--text-secondary);
}
.sc-kb-card-seta{
  color:var(--accent); font-family:var(--font-head); font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:4px;
  transition:gap .18s ease;
}
.sc-kb-card:hover .sc-kb-card-seta{ gap:9px; }

/* ------------------------------------------------------------
   4. PÁGINA DE CATEGORIA (lista de artigos)
   ------------------------------------------------------------ */
.sc-kb-cat-hero{
  background:var(--teal-dark);
  padding:140px 0 56px;
}
.sc-kb-cat-hero .eyebrow{ color:var(--laranja); }
.sc-kb-cat-hero h1{ color:#fff; font-size:clamp(28px,4vw,40px); margin:8px 0 12px; }
.sc-kb-cat-hero .sc-kb-sub{ color:rgba(255,255,255,0.8); font-size:16px; max-width:640px; margin:0; }

.sc-kb-breadcrumb{
  font-size:13px; color:var(--text-secondary); margin-bottom:14px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.sc-kb-breadcrumb a{ color:var(--text-secondary); }
.sc-kb-breadcrumb a:hover{ color:var(--accent); }
.sc-kb-cat-hero .sc-kb-breadcrumb,
.sc-kb-cat-hero .sc-kb-breadcrumb a{ color:rgba(255,255,255,0.7); }
.sc-kb-cat-hero .sc-kb-breadcrumb a:hover{ color:#fff; }

.sc-kb-artigos{ padding:56px 0 96px; background:var(--bg); }
.sc-kb-artigos-lista{
  display:flex; flex-direction:column; gap:12px;
  max-width:820px; margin:0 auto;
}
.sc-kb-artigo-item{
  display:flex; align-items:center; gap:16px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px 22px;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sc-kb-artigo-item:hover{
  transform:translateX(4px);
  border-color:var(--accent);
  box-shadow:var(--card-shadow);
}
.sc-kb-artigo-item .sc-kb-artigo-ic{
  color:var(--accent); font-size:20px; flex-shrink:0;
  display:inline-flex;
}
.sc-kb-artigo-item .sc-kb-artigo-ic svg{ width:20px; height:20px; }
.sc-kb-artigo-titulo{
  font-family:var(--font-head); font-weight:600; font-size:16px;
  color:var(--text); margin:0; flex:1;
}
.sc-kb-artigo-item:hover .sc-kb-artigo-titulo{ color:var(--accent); }
.sc-kb-artigo-seta{ color:var(--text-secondary); font-size:18px; flex-shrink:0; }

/* ------------------------------------------------------------
   5. ARTIGO INDIVIDUAL (leitura + TOC)
   ------------------------------------------------------------ */
.sc-kb-single-hero{
  background:var(--teal-dark);
  padding:140px 0 48px;
}
.sc-kb-single-hero .eyebrow{ color:var(--laranja); }
.sc-kb-single-hero h1{ color:#fff; font-size:clamp(28px,4vw,42px); margin:8px 0 0; max-width:820px; }

.sc-kb-single-wrap{ padding:56px 0 96px; background:var(--bg); }
.sc-kb-single-grid{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:56px;
  align-items:start;
}
.sc-kb-single-corpo{ min-width:0; }

/* Tipografia de leitura confortável (corpo do artigo) */
.sc-kb-single-corpo h2{ font-size:26px; margin:40px 0 14px; color:var(--text); }
.sc-kb-single-corpo h3{ font-size:20px; margin:30px 0 10px; color:var(--text); }
.sc-kb-single-corpo p{ font-size:17px; line-height:1.75; color:var(--text); margin:0 0 20px; }
.sc-kb-single-corpo ul,
.sc-kb-single-corpo ol{ margin:0 0 20px; padding-left:24px; color:var(--text); }
.sc-kb-single-corpo li{ font-size:17px; line-height:1.7; margin-bottom:8px; }
.sc-kb-single-corpo a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.sc-kb-single-corpo img{ border-radius:var(--radius-sm); margin:24px 0; }
.sc-kb-single-corpo blockquote{
  border-left:3px solid var(--accent);
  background:var(--bg-alt);
  padding:16px 22px; margin:24px 0;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-secondary);
}
.sc-kb-single-corpo code{
  font-family:var(--font-mono, monospace);
  background:var(--bg-alt);
  padding:2px 7px; border-radius:6px; font-size:0.9em; color:var(--text);
}
.sc-kb-single-corpo pre{
  background:var(--teal-dark); color:#F0F4F6;
  padding:20px; border-radius:var(--radius-sm);
  overflow-x:auto; margin:24px 0; font-size:14px; line-height:1.6;
}
.sc-kb-single-corpo pre code{ background:transparent; padding:0; color:inherit; }

/* TOC (sumário) lateral fixa */
.sc-kb-toc{
  position:sticky; top:110px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 20px;
}
.sc-kb-toc-titulo{
  font-family:var(--font-head); font-weight:700; font-size:12px;
  letter-spacing:1px; text-transform:uppercase; color:var(--text-secondary);
  margin:0 0 14px;
}
.sc-kb-toc ul{ list-style:none; margin:0; padding:0; }
.sc-kb-toc li{ margin-bottom:2px; }
.sc-kb-toc a{
  display:block; font-size:14px; line-height:1.4;
  color:var(--text-secondary); padding:7px 10px;
  border-radius:6px; border-left:2px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.sc-kb-toc a:hover{ color:var(--accent); background:var(--bg-alt); }
.sc-kb-toc a.sc-kb-toc-ativo{
  color:var(--accent); border-left-color:var(--accent);
  background:var(--bg-alt); font-weight:500;
}

/* Meta (categoria + data de atualização) no topo do corpo */
.sc-kb-single-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:13px; color:var(--text-secondary);
  padding-bottom:20px; margin-bottom:28px;
  border-bottom:1px solid var(--border);
}
.sc-kb-single-meta .sc-kb-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
  padding:5px 12px; border-radius:20px;
  font-family:var(--font-head); font-weight:600;
}

/* Navegação anterior/próximo (sem reactions, sem share) */
.sc-kb-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:48px; padding-top:32px; border-top:1px solid var(--border);
}
.sc-kb-nav a{
  display:flex; flex-direction:column; gap:4px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px 20px;
  transition:border-color .15s ease, transform .15s ease;
}
.sc-kb-nav a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.sc-kb-nav .sc-kb-nav-rot{ font-size:12px; color:var(--text-secondary); font-family:var(--font-head); font-weight:600; }
.sc-kb-nav .sc-kb-nav-tit{ font-size:15px; color:var(--text); font-weight:500; }
.sc-kb-nav a:hover .sc-kb-nav-tit{ color:var(--accent); }
.sc-kb-nav .sc-kb-nav-prox{ text-align:right; }

/* Voltar para a base */
.sc-kb-voltar{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:600; font-size:14px;
  color:var(--accent); margin-bottom:24px;
}
.sc-kb-voltar svg{ width:18px; height:18px; flex-shrink:0; }
.sc-kb-voltar:hover{ gap:11px; }

/* ------------------------------------------------------------
   6. ESTADO VAZIO (categoria sem artigos / busca sem resultado)
   ------------------------------------------------------------ */
.sc-kb-vazio{
  text-align:center; padding:64px 24px; max-width:480px; margin:0 auto;
  color:var(--text-secondary);
}
.sc-kb-vazio svg{ width:48px; height:48px; margin:0 auto 16px; color:var(--text-secondary); opacity:.5; }
.sc-kb-vazio h3{ font-size:20px; color:var(--text); margin:0 0 8px; }
.sc-kb-vazio p{ font-size:15px; margin:0; }

/* ------------------------------------------------------------
   7. RESPONSIVO
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .sc-kb-grid{ grid-template-columns:repeat(2, 1fr); }
  .sc-kb-single-grid{ grid-template-columns:1fr; gap:32px; }
  .sc-kb-toc{ position:static; }
}
@media (max-width:768px){
  .sc-kb-hero{ padding:120px 0 56px; }
  .sc-kb-cat-hero,
  .sc-kb-single-hero{ padding:110px 0 44px; }
  .sc-kb-grid{ grid-template-columns:1fr; }
  .sc-kb-secao{ padding:48px 0 64px; }
  .sc-kb-nav{ grid-template-columns:1fr; }
  .sc-kb-single-corpo p,
  .sc-kb-single-corpo li{ font-size:16px; }
}