/*
 * kauekgg-editorial — theme.css
 * Camada específica do WordPress sobre o Design System v1.0 (kauekgg.com.br/SystemDesign).
 * Não redefine nenhum token: consome exclusivamente var(--...) já importadas por
 * kkgg-design-system. Nenhuma cor hexadecimal é declarada aqui.
 */

/* Barreira defensiva — o WordPress core injeta CSS de blocos (wp-block-library,
   global-styles-inline-css) com border-radius, box-shadow e gradientes de fábrica.
   Estas regras garantem os invariantes do Design System mesmo sobre esse CSS. */
* {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Acessibilidade — link "pular para o conteúdo" */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
  position: fixed;
  top: var(--s3);
  left: var(--s3);
  width: auto;
  height: auto;
  clip: auto;
  z-index: 1000;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-small);
  padding: var(--s3) var(--s4);
  outline: var(--b-heavy) solid var(--blue);
  outline-offset: 2px;
}

/* Corpo do artigo — the_content() */
.kkgg-article-body {
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--lh-text);
  color: var(--ink);
}
.kkgg-article-body > * + * {
  margin-top: var(--s5);
}
.kkgg-article-body h2 {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  line-height: var(--lh-snug);
  margin-top: var(--s7);
  margin-bottom: var(--s4);
  border-left: var(--b-heavy) solid var(--blue);
  padding-left: var(--s3);
}
.kkgg-article-body h3 {
  font-family: var(--font-display);
  font-size: var(--size-h4);
  line-height: var(--lh-snug);
  margin-top: var(--s6);
}
.kkgg-article-body ul,
.kkgg-article-body ol {
  padding-left: var(--s6);
  margin: var(--s5) 0;
}
.kkgg-article-body li + li {
  margin-top: var(--s2);
}
.kkgg-article-body hr {
  border: none;
  border-top: var(--b-structural) solid var(--ink);
  margin: var(--s7) 0;
}
.kkgg-article-body strong {
  font-weight: 700;
}
.kkgg-article-body figure {
  margin: 0;
}
.kkgg-article-body img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--b-structural) solid var(--ink);
}
.kkgg-article-body figcaption {
  font-family: var(--font-display);
  font-size: var(--size-micro);
  color: var(--ink-50);
  line-height: var(--lh-compact);
  margin-top: var(--s3);
}

/* Citação — barra lateral azul de 4px (função de Evidence/citação de dados) */
.kkgg-article-body blockquote,
.kkgg-article-body .wp-block-quote {
  background: var(--surface);
  border: var(--b-structural) solid var(--ink);
  border-left: var(--b-heavy) solid var(--blue);
  padding: var(--s5);
  font-style: italic;
  color: var(--ink-80);
}
.kkgg-article-body blockquote p:first-child,
.kkgg-article-body .wp-block-quote p:first-child {
  margin-top: 0;
}
.kkgg-article-body cite {
  display: block;
  margin-top: var(--s3);
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--size-micro);
  color: var(--ink-50);
}

/* Tabela — mesma linguagem visual de SpecTable */
.kkgg-article-body table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: var(--b-structural) solid var(--ink);
  font-size: var(--size-small);
}
.kkgg-article-body th {
  text-align: left;
  padding: var(--s3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-micro);
  color: var(--surface);
  background: var(--ink);
}
.kkgg-article-body td {
  text-align: left;
  padding: var(--s3);
  border-bottom: var(--b-hair) solid var(--rule);
  vertical-align: top;
}
.kkgg-article-body tr:last-child td {
  border-bottom: none;
}

/* Código — fundo wash, igual à regra global de <code> em base.css */
.kkgg-article-body pre {
  background: var(--wash);
  border: var(--b-structural) solid var(--ink);
  padding: var(--s4);
  overflow-x: auto;
  font-family: var(--font-display);
  font-size: var(--size-small);
}
.kkgg-article-body pre code {
  background: none;
  border: none;
  padding: 0;
}
.kkgg-article-body code {
  background: var(--wash);
  padding: 0.1em 0.35em;
}

/* Rule Box — variação de estilo de bloco para core/group (register_block_style) */
.kkgg-article-body .is-style-rulebox {
  background: var(--paper);
  border: var(--b-structural) solid var(--ink);
  padding: var(--s5);
  position: relative;
}
.kkgg-article-body .is-style-rulebox > :first-child {
  margin-top: 0;
}

/* Cartões de listagem — grade de artigos */
.article-card + .article-card {
  margin-top: 0;
}
.article-card h2 a:hover {
  color: var(--blue-deep);
}

/* Paginação editorial — sem círculo, sem canto arredondado */
.page-numbers {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-small);
  color: var(--ink);
  text-decoration: none;
  padding: var(--s2) var(--s3);
  border: var(--b-structural) solid transparent;
}
a.page-numbers:hover {
  border-color: var(--ink);
}
.page-numbers.current {
  border-color: var(--ink);
  font-weight: 700;
}

/* Menu de navegação — reset de lista para wp_nav_menu */
.site-nav {
  align-items: center;
}
.site-nav li {
  list-style: none;
  margin: 0;
}
.site-nav a {
  display: inline-block;
}
.site-nav a:hover {
  color: var(--blue-deep);
  border-bottom-color: var(--blue-deep);
}
.site-nav .current-menu-item a,
.site-nav .current-category-ancestor a,
.site-nav .current_page_item a {
  border-bottom-color: var(--ink);
  font-weight: 700;
}

/* Byline — link do autor e avatar com foto */
.byline-name a {
  color: inherit;
  text-decoration: none;
}
.byline-avatar {
  width: 56px;
  height: 56px;
  border: var(--b-heavy) solid var(--blue);
  border-radius: 0 !important;
  display: block;
  object-fit: cover;
  flex-shrink: 0;
}

/* Imagem de destaque nos cartões da listagem */
.article-card .post-thumbnail {
  border: var(--b-structural) solid var(--ink);
  margin-bottom: var(--s4);
}
.article-card .post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* Artigo individual e páginas estáticas (desacoplamento de CSS inline) */
.article-single {
  background: var(--surface);
  border: var(--b-structural) solid var(--ink);
  padding: var(--s8);
}

/* DuoPanel — Painel comparativo Faça (verde) vs Não faça (vermelho) */
.duopanel {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr 1fr;
  margin: var(--s5) 0;
}
.duopanel-yes,
.duopanel-no {
  background: var(--surface);
  border: var(--b-structural) solid var(--ink);
  border-left-width: var(--b-heavy);
  padding: var(--s4);
}
.duopanel-yes {
  border-left-color: var(--success);
}
.duopanel-no {
  border-left-color: var(--danger);
}
.duopanel-yes h4,
.duopanel-no h4 {
  font-family: var(--font-display);
  font-size: var(--size-small);
  margin: 0 0 var(--s3);
  line-height: var(--lh-snug);
}
.duopanel-yes ul,
.duopanel-no ul {
  margin: 0;
  padding-left: var(--s5);
  font-size: var(--size-small);
  line-height: var(--lh-compact);
  font-family: var(--font-text);
}
.duopanel-yes li,
.duopanel-no li {
  margin-bottom: var(--s2);
}
.duopanel-yes li:last-child,
.duopanel-no li:last-child {
  margin-bottom: 0;
}

/* Evidence — Moldura técnica com tag flutuante e legenda micro */
figure.evidence {
  position: relative;
  background: var(--surface);
  border: var(--b-structural) solid var(--ink);
  padding: var(--s4);
  margin: var(--s5) 0;
}
figure.evidence .tag {
  position: absolute;
  top: calc(-1 * var(--s3) - 2px);
  right: var(--s4);
  background: var(--blue);
  color: var(--surface);
  line-height: 1;
}
figure.evidence figcaption {
  font-family: var(--font-display);
  font-size: var(--size-micro);
  color: var(--ink-50);
  margin-top: var(--s3);
  line-height: var(--lh-compact);
}

/* Formulário de Busca */
.search-field-container {
  max-width: 540px;
}
.search-input-group {
  display: flex;
  gap: var(--s2);
  align-items: stretch;
}
.search-input-group .search-field {
  flex: 1;
  min-width: 0;
}
.search-input-group .search-submit {
  flex-shrink: 0;
  padding: var(--s3) var(--s5);
}

@media (max-width: 640px) {
  .duopanel {
    grid-template-columns: 1fr;
  }
  .article-single {
    padding: var(--s5);
  }
}