/**
 * Single Post — FJPN Site
 *
 * Adapta o template de post individual do tema pai (BigHearts) ao design
 * novo. NÃO reescreve o template — só reveste com tipografia, cores e
 * espaçamento do design system (tokens.css / base.css).
 *
 * Mapeamento de classes do tema pai (lidas em, somente leitura):
 * - wp-content/themes/bighearts/templates/post/single/post-2.php (layout
 *   default, single_type-2 — imagem depois do título) e post-1.php
 *   (single_type-1 — imagem antes do título). Ambos produzem a MESMA
 *   árvore de classes, só muda a ordem de renderização.
 * - wp-content/themes/bighearts/core/class/single-post.php (BigHearts_Single_Post
 *   — gera .post_categories, .meta-data, .blog-post_media).
 * - wp-content/themes/bighearts/templates/post/post-navigation.php
 *   (navegação prev/next).
 * - wp-content/themes/bighearts/css/pluggable/blog-post-single.css
 *   (CSS do pai já aplicado a essas classes — usado para calibrar
 *   especificidade dos seletores abaixo).
 *
 * Estrutura real (confirmada no PHP, não presumida):
 *
 *   article.blog-post.blog-post-single-item
 *     div.single_meta (post_class)
 *       div.item_wrapper
 *         div.blog-post_content
 *           span.post_categories > span > a       (categoria)
 *           div.meta-data > span.post_author/.post_date/.comments_post
 *           h2.blog-post_title                    (título do post)
 *           div.blog-post_media > div.blog-post_media_part > img.blog-img
 *           ... the_content() SEM wrapper próprio — p/h2/h3/h4/ul/ol/
 *               blockquote/table/img/figure ficam soltos aqui dentro,
 *               irmãos do título e da imagem, não dentro de um
 *               .entry-content. Por isso os seletores de corpo usam
 *               ">" (filho direto de .blog-post_content) e excluem
 *               .blog-post_title explicitamente nos headings.
 *           div.single_post_info > div.tagcloud-wrapper > div.tagcloud > a
 *           div.post_info-divider
 *           div.author-info_wrapper (se ativado nas opções do tema)
 *   section.bighearts-post-navigation
 *     div.prev-link_wrapper / div.next-link_wrapper
 *       div.info_wrapper > a > h4.prev_title/.next_title + span.meta-data
 *
 * Especificidade: o CSS do child carrega depois do pai (functions.php
 * enfileira as seções com dependência em fjpn-base, que depende do
 * style.css pai). Nos pontos em que o pai usa 2–3 classes encadeadas,
 * repetimos a mesma cadeia (empate de especificidade + ordem de fonte
 * vence) em vez de subir especificidade à toa. `!important` só aparece
 * onde o pai usa `!important` primeiro ou onde o valor vem inline via
 * PHP (documentado no local exato).
 *
 * NÃO editar wp-content/themes/bighearts/, functions.php, tokens.css
 * nem base.css a partir daqui.
 */

/* ==========================================================
 * 0. MEDIDA DE LEITURA
 * O container padrão (.wgl-container, 1280px) é largo demais pra texto
 * corrido — 65–75 caracteres por linha é o ideal de legibilidade. Em vez
 * de mexer no grid da coluna (afetaria o layout de sidebar do tema pai),
 * limitamos a largura dos elementos de leitura e centralizamos com
 * margin auto. A imagem destacada (.blog-post_media) fica de fora de
 * propósito — permanece na largura total da coluna (hero editorial),
 * só o texto corrido é estreitado.
 * ========================================================== */

.blog-post-single-item .blog-post_content > .post_categories,
.blog-post-single-item .blog-post_content > .meta-data,
.blog-post-single-item .blog-post_content > .blog-post_title,
.blog-post-single-item .blog-post_content > p,
.blog-post-single-item .blog-post_content > h2:not(.blog-post_title),
.blog-post-single-item .blog-post_content > h3,
.blog-post-single-item .blog-post_content > h4,
.blog-post-single-item .blog-post_content > ul,
.blog-post-single-item .blog-post_content > ol,
.blog-post-single-item .blog-post_content > blockquote,
.blog-post-single-item .blog-post_content > table,
.blog-post-single-item .blog-post_content > figure,
.blog-post-single-item .blog-post_content > pre,
.blog-post-single-item .blog-post_content > dl {
  max-width: 70ch; /* ~65–75 caracteres em Inter 18px, ver §1 abaixo */
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================
 * 1. CABEÇALHO DO POST
 * Categoria, meta (data/autor/comentários), título, imagem destacada.
 * ========================================================== */

/* Categoria — badge pill, mesmo padrão visual dos cards de Programas
   (.post_categories não tem estilo de cor no CSS do pai, só position;
   a cor/pill vem do CSS global do tema — sobrescrevemos por completo). */
.blog-post-single-item .blog-post_content .post_categories {
  display: block;
  margin-bottom: var(--fjpn-gap-icon-text);
}

.blog-post-single-item .blog-post_content .post_categories a {
  display: inline-flex;
  align-items: center;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  font-weight: var(--fjpn-weight-bold);
  letter-spacing: var(--fjpn-tracking-badge);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fjpn-blue-primary);
  background: var(--fjpn-blue-light);
  padding: var(--fjpn-gap-icon-text) var(--fjpn-padding-badge-x);
  border-radius: var(--fjpn-radius-full);
  transition: background var(--fjpn-duration-background) var(--fjpn-ease-simple),
    color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

.blog-post-single-item .blog-post_content .post_categories a:hover {
  background: var(--fjpn-blue-primary);
  color: var(--fjpn-white);
}

/* Meta-data (data/autor/comentários) — .post_date herda font/color de
   .meta-data via `inherit` no CSS do pai (blog-post-single.css linha
   13–18), então basta estilizar o container pra cascatear pros spans,
   incluindo o ícone (::before usa currentColor implícito da fonte de
   ícones). */
.blog-post-single-item .blog-post_content .meta-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fjpn-gap-medium);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  font-weight: var(--fjpn-weight-medium);
  color: var(--fjpn-text-muted);
}

.blog-post-single-item .blog-post_content .meta-data a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.blog-post-single-item .blog-post_content .meta-data a:hover {
  color: var(--fjpn-blue-primary);
}

/* Título — seletor espelha exatamente `.single_meta .blog-post_title`
   do pai (mesma especificidade, 2 classes); como o child carrega
   depois, a ordem de fonte decide sem precisar de !important. */
.blog-post-single-item .blog-post_title {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-lg);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
}

@media (min-width: 768px) {
  .blog-post-single-item .blog-post_title {
    font-size: var(--fjpn-text-heading-lg-md);
  }
}

/* Imagem destacada — seletor espelha
   `.blog-post-single-item .blog-post_media .blog-post_media_part img`
   do pai (mesma cadeia de 3 classes + elemento), só troca o radius
   fixo (10px) pelo token e soma sombra de card. */
.blog-post-single-item .blog-post_media .blog-post_media_part,
.blog-post-single-item .blog-post_media .blog-post_media_part img {
  border-radius: var(--fjpn-radius-xl);
}

.blog-post-single-item .blog-post_media .blog-post_media_part img {
  box-shadow: var(--fjpn-shadow-card);
  width: 100%;
  height: auto;
}

/* ==========================================================
 * 2. TIPOGRAFIA DO CORPO
 * Parágrafo confortável para leitura longa: 18px (--fjpn-text-body-lg,
 * o mesmo tamanho usado no parágrafo de destaque do Hero) com
 * line-height 1.625 (--fjpn-leading-relaxed) — o valor pedido para
 * texto corrido, já documentado como o mais comum do site.
 * ========================================================== */

.blog-post-single-item .blog-post_content > p {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  font-weight: var(--fjpn-weight-regular);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-slate-700);
  margin: 0 0 var(--fjpn-gap-grid);
}

.blog-post-single-item .blog-post_content > p:last-child {
  margin-bottom: 0;
}

/* Hierarquia de heading dentro do corpo — usa a escala do componente
   Heading (tokens.css §6), um degrau abaixo do título do post pra
   manter a hierarquia visual clara. */
.blog-post-single-item .blog-post_content > h2:not(.blog-post_title) {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-md);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
  margin: var(--fjpn-padding-card-stat) 0 var(--fjpn-gap-medium);
}

.blog-post-single-item .blog-post_content > h3 {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-sm);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
  margin: var(--fjpn-gap-grid) 0 var(--fjpn-gap-medium);
}

.blog-post-single-item .blog-post_content > h4 {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  font-weight: var(--fjpn-weight-bold);
  line-height: var(--fjpn-leading-snug);
  color: var(--fjpn-text-primary);
  margin: var(--fjpn-gap-grid) 0 var(--fjpn-gap-icon-text);
}

.blog-post-single-item .blog-post_content > h2:not(.blog-post_title):first-child,
.blog-post-single-item .blog-post_content > h3:first-child,
.blog-post-single-item .blog-post_content > h4:first-child {
  margin-top: 0;
}

/* ==========================================================
 * 3. ELEMENTOS DE CONTEÚDO
 * Listas, citações, links inline, imagens com legenda, tabelas, código.
 * ========================================================== */

/* Listas */
.blog-post-single-item .blog-post_content > ul,
.blog-post-single-item .blog-post_content > ol {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-slate-700);
  margin: 0 0 var(--fjpn-gap-grid);
  padding-left: var(--fjpn-gap-grid);
}

.blog-post-single-item .blog-post_content li + li {
  margin-top: var(--fjpn-gap-icon-text);
}

.blog-post-single-item .blog-post_content li > ul,
.blog-post-single-item .blog-post_content li > ol {
  margin-top: var(--fjpn-gap-icon-text);
  margin-bottom: 0;
}

/* Citação — barra de destaque na cor de marca (mesma lógica do
   .fjpn-section-divider em base.css: laranja como acento editorial),
   fundo azul claro (--fjpn-blue-light) igual ao usado nas outras
   seções do site pra "caixas de destaque". */
.blog-post-single-item .blog-post_content > blockquote {
  margin: var(--fjpn-gap-grid) auto;
  padding: var(--fjpn-padding-card);
  border-left: var(--fjpn-border-width-outline) solid var(--fjpn-orange-primary);
  border-radius: 0 var(--fjpn-radius-lg) var(--fjpn-radius-lg) 0;
  background: var(--fjpn-blue-light);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  font-style: italic;
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-text-primary);
}

.blog-post-single-item .blog-post_content > blockquote p {
  margin: 0;
}

.blog-post-single-item .blog-post_content > blockquote p + p {
  margin-top: var(--fjpn-gap-icon-text);
}

.blog-post-single-item .blog-post_content > blockquote cite {
  display: block;
  margin-top: var(--fjpn-gap-icon-text);
  font-style: normal;
  font-size: var(--fjpn-text-small);
  font-weight: var(--fjpn-weight-semibold);
  color: var(--fjpn-text-muted);
}

/* Links inline — sublinhado sempre visível (requisito WCAG: não
   depender só de cor pra distinguir link de texto normal). Escopo
   restrito a links DENTRO de elementos de corpo (p/li/blockquote/
   figcaption/table/headings de conteúdo) pra não pegar os links de
   .post_categories, .meta-data ou .single_post_info, que já têm
   estilo próprio nas seções 1 e 4. */
.blog-post-single-item .blog-post_content > p a,
.blog-post-single-item .blog-post_content li a,
.blog-post-single-item .blog-post_content > blockquote a,
.blog-post-single-item .blog-post_content figcaption a,
.blog-post-single-item .blog-post_content table a,
.blog-post-single-item .blog-post_content > h2:not(.blog-post_title) a,
.blog-post-single-item .blog-post_content > h3 a,
.blog-post-single-item .blog-post_content > h4 a {
  color: var(--fjpn-blue-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

.blog-post-single-item .blog-post_content > p a:hover,
.blog-post-single-item .blog-post_content li a:hover,
.blog-post-single-item .blog-post_content > blockquote a:hover,
.blog-post-single-item .blog-post_content figcaption a:hover,
.blog-post-single-item .blog-post_content table a:hover,
.blog-post-single-item .blog-post_content > h2:not(.blog-post_title) a:hover,
.blog-post-single-item .blog-post_content > h3 a:hover,
.blog-post-single-item .blog-post_content > h4 a:hover {
  color: var(--fjpn-blue-dark);
}

/* Imagens de conteúdo — nunca estouram o container. Escopo amplo
   (qualquer <img> dentro de .blog-post_content) porque imagens de
   corpo de texto podem estar soltas ou dentro de <figure>/<a>. */
.blog-post-single-item .blog-post_content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fjpn-radius-lg);
}

.blog-post-single-item .blog-post_content > figure {
  margin: var(--fjpn-gap-grid) auto;
}

.blog-post-single-item .blog-post_content figure img {
  display: block;
  margin: 0 auto;
}

.blog-post-single-item .blog-post_content figcaption {
  margin-top: var(--fjpn-gap-icon-text);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  font-style: italic;
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-text-muted);
  text-align: center;
}

/* Tabelas — sem wrapper de rolagem disponível no HTML do editor
   clássico/Wix migrado, então a rolagem horizontal fica na própria
   tabela (técnica padrão pra tabela responsiva sem markup extra). */
.blog-post-single-item .blog-post_content > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-slate-700);
  margin: 0 auto var(--fjpn-gap-grid);
}

.blog-post-single-item .blog-post_content table th,
.blog-post-single-item .blog-post_content table td {
  padding: var(--fjpn-gap-icon-text) var(--fjpn-gap-medium);
  border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  text-align: left;
}

.blog-post-single-item .blog-post_content table th {
  font-weight: var(--fjpn-weight-bold);
  color: var(--fjpn-text-primary);
  background: var(--fjpn-bg-soft);
}

.blog-post-single-item .blog-post_content table tr:nth-child(even) td {
  background: var(--fjpn-bg-soft);
}

/* Código — inline e bloco */
.blog-post-single-item .blog-post_content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--fjpn-blue-dark);
  background: var(--fjpn-blue-light);
  padding: 0.15em 0.4em;
  border-radius: var(--fjpn-radius-default);
}

.blog-post-single-item .blog-post_content > pre {
  margin: 0 auto var(--fjpn-gap-grid);
  padding: var(--fjpn-padding-card);
  border-radius: var(--fjpn-radius-lg);
  background: var(--fjpn-slate-900);
  overflow-x: auto;
}

.blog-post-single-item .blog-post_content pre code {
  font-size: var(--fjpn-text-small);
  color: var(--fjpn-white);
  background: transparent;
  padding: 0;
}

/* ==========================================================
 * 4. RODAPÉ DO POST
 * Tags e navegação entre posts (prev/next).
 * ========================================================== */

/* Tags — the_tags() do WordPress core não aplica classe própria no
   <a>, então o seletor precisa ser pelo container (.tagcloud-wrapper
   .tagcloud a), confirmado em post-2.php linha 56. */
.blog-post-single-item .single_post_info .tagcloud-wrapper .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fjpn-gap-icon-text);
}

.blog-post-single-item .single_post_info .tagcloud-wrapper .tagcloud a {
  display: inline-flex;
  align-items: center;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  font-weight: var(--fjpn-weight-semibold);
  text-decoration: none;
  color: var(--fjpn-text-muted);
  background: var(--fjpn-bg-soft);
  border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  padding: var(--fjpn-gap-icon-text) var(--fjpn-gap-medium);
  border-radius: var(--fjpn-radius-full);
  transition: background var(--fjpn-duration-background) var(--fjpn-ease-simple),
    color var(--fjpn-duration-color) var(--fjpn-ease-simple),
    border-color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

.blog-post-single-item .single_post_info .tagcloud-wrapper .tagcloud a:hover {
  color: var(--fjpn-white);
  background: var(--fjpn-blue-primary);
  border-color: var(--fjpn-blue-primary);
}

/* Navegação entre posts — .bighearts-post-navigation está fora de
   .blog-post_content (é uma <section> irmã, renderizada por
   get_template_part('templates/post/post-navigation') em single.php),
   então não herda a medida de leitura da seção 0; mantém a largura
   total da coluna, o que já é correto pro layout de 2 blocos
   lado a lado do pai. Só a tipografia/cor muda pra combinar com a marca. */
.bighearts-post-navigation .prev_title,
.bighearts-post-navigation .next_title {
  font-family: var(--fjpn-font-sans);
  font-weight: var(--fjpn-weight-bold);
  color: var(--fjpn-text-primary);
  transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

.bighearts-post-navigation .info_wrapper > a:hover .prev_title,
.bighearts-post-navigation .info_wrapper > a:hover .next_title {
  color: var(--fjpn-blue-primary);
}

.bighearts-post-navigation .meta-data .date_post {
  font-family: var(--fjpn-font-sans);
  color: var(--fjpn-text-muted);
}

.bighearts-post-navigation .image_prev,
.bighearts-post-navigation .image_next {
  border-radius: var(--fjpn-radius-lg);
}

.bighearts-post-navigation .image_prev img,
.bighearts-post-navigation .image_next img {
  border-radius: inherit;
}

/* Autor — cartão de bio no rodapé, quando ativado nas opções do tema. */
.author-info_wrapper {
  border-radius: var(--fjpn-radius-2xl);
  box-shadow: var(--fjpn-shadow-card);
  background: var(--fjpn-white);
}

.author-info_name {
  font-family: var(--fjpn-font-sans);
  font-weight: var(--fjpn-weight-extrabold);
  color: var(--fjpn-text-primary);
}

.author-info_description {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-slate-700);
}

/* ==========================================================
 * 5. RESPONSIVO
 * Abaixo de 768px a medida de leitura em ch deixa de fazer sentido
 * (a tela já é mais estreita que 70ch) — usa 100% pra não sobrar
 * padding artificial nas laterais.
 * ========================================================== */

@media (max-width: 767px) {
  .blog-post-single-item .blog-post_content > .post_categories,
  .blog-post-single-item .blog-post_content > .meta-data,
  .blog-post-single-item .blog-post_content > .blog-post_title,
  .blog-post-single-item .blog-post_content > p,
  .blog-post-single-item .blog-post_content > h2:not(.blog-post_title),
  .blog-post-single-item .blog-post_content > h3,
  .blog-post-single-item .blog-post_content > h4,
  .blog-post-single-item .blog-post_content > ul,
  .blog-post-single-item .blog-post_content > ol,
  .blog-post-single-item .blog-post_content > blockquote,
  .blog-post-single-item .blog-post_content > table,
  .blog-post-single-item .blog-post_content > figure,
  .blog-post-single-item .blog-post_content > pre,
  .blog-post-single-item .blog-post_content > dl {
    max-width: 100%;
  }
}