/*
 * CONTEÚDO EDITORIAL (B10): post, arquivo do blog, institucional e 404 — uma folha só.
 *
 * Gabarito = prototipo/post.html + prototipo/blog.html + prototipo/style.css (o clone nunca
 * reformou o blog nem as institucionais). Todo rem do protótipo foi convertido pra px na base
 * 16 e a paleta trocada 1:1 pelos tokens do casco (--elf-*).
 * Breakpoints da casa: 1023.98 / 767.98 (max-width).
 *
 * Divergências deliberadas do protótipo, todas registradas na entrega:
 *  · cor de AÇÃO = roxo #8224E3 (D27, cor única do site) no lugar do azul #6671FF do protótipo;
 *    a paginação é a exceção — ela já foi entregue em azul no B5 e telas irmãs não divergem.
 *  · alvos de toque a 44px (protótipo: 40px) — regra de CONTROLE da v2.
 *  · migalha com os números do tema (12px), não os do protótipo (13px).
 */

/* ═══ largura da tela: alinha com o header/rodapé (.elf-container = 1400) ═══
   o .elf-wrap do casco é 1200 — mesmo remendo que produto.css:8 e loop.css:9 fazem */
.elf-conteudo-tela .elf-conteudo { max-width: var(--elf-container); padding: 0 22px 48px; }
@media (max-width: 767.98px) {
  .elf-conteudo-tela .elf-conteudo { padding: 0 14px 40px; }
}

/* ═══ POST ═══
   protótipo: .post-container tem 720px COM 16px de respiro próprio = 688px de texto útil.
   Aqui o respiro já vem do .elf-conteudo, então a coluna é 688 direto — repetir os 16px
   encolheria o texto no 390 de 362px pra 330px. */
.elf-artigo { max-width: 688px; margin: 12px auto 0; }
.elf-artigo-topo { margin-bottom: 24px; }
.elf-artigo-titulo {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--elf-text);
  text-wrap: balance;
}
.elf-artigo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.8125rem;
  /* o protótipo pede --text-tertiary (#999), que dá 2,85:1 sobre o branco e reprova no AA.
     Contraste é CONTROLE, e aí a regra v2 vence o gabarito: #666 = 5,74:1. */
  color: var(--elf-text-secondary);
}
/* date_i18n em pt_BR entrega "02 jun 2026"; o protótipo mostra "02 Jun 2026" */
.elf-artigo-meta time { text-transform: capitalize; }

/* a foto real do blog é 600×400 (3:2) e o protótipo pede 16/9: o corte é o desenho dele.
   A caixa fixa reserva o lugar antes da imagem chegar (sem salto de layout). */
.elf-artigo-foto {
  margin: 0 0 32px;
  aspect-ratio: 16 / 9;
  background: var(--elf-bg-tertiary);
  border-radius: var(--elf-radius);
  overflow: hidden;
}
.elf-artigo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ═══ TIPOGRAFIA DO CONTEÚDO DO DONO (post e institucional bebem da MESMA fonte) ═══
   O protótipo só veste p, h2 e h3; o conteúdo real dos 27 posts + 8 páginas usa 20 tags, e o
   base.css não zera lista nem heading — sem estas regras, ul/ol/h4/h5/tabela/citação saem no
   default do navegador (Times, recuo de 40px).
   TODOS os seletores são DESCENDENTES, nunca filho direto: em 4 posts o texto está enterrado
   em até 12 <div> aninhadas (lixo de colagem do ChatGPT) e um `>` não alcançaria nada. */
.elf-artigo-corpo,
.elf-pagina {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--elf-text-secondary);
  overflow-wrap: break-word;          /* link cru e palavra longa não estouram o 390 */
}
.elf-pagina { max-width: 688px; margin: 12px auto 0; }

.elf-artigo-corpo p,
.elf-pagina p { margin: 0 0 20px; }

.elf-artigo-corpo h2,
.elf-pagina h2 { margin: 32px 0 12px; font-size: 1.25rem; font-weight: 700; color: var(--elf-text); }
.elf-artigo-corpo h3,
.elf-pagina h3 { margin: 24px 0 8px; font-size: 1.1rem; font-weight: 600; color: var(--elf-text); }
/* h2 e h3 do corpo ficam SEM line-height de propósito: o protótipo também não declara
   (post.html:14-15) e os dois herdam o 1.8 do corpo. Fidelidade por medida. */
/* h4 e h5 não existem no protótipo (aparecem em 5 e 2 posts): mesma progressão, escala nossa */
.elf-artigo-corpo h4,
.elf-pagina h4 { margin: 20px 0 8px; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--elf-text); }
.elf-artigo-corpo h5,
.elf-pagina h5 { margin: 16px 0 6px; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--elf-text); }

.elf-artigo-corpo ul, .elf-artigo-corpo ol,
.elf-pagina ul, .elf-pagina ol { margin: 0 0 20px; padding-left: 22px; }
.elf-artigo-corpo li,
.elf-pagina li { margin-bottom: 8px; }

/* o protótipo tem `a { color: inherit; text-decoration: none }` global e não sobrescreve no
   corpo do texto — os 264 links dos posts sairiam cinza, iguais ao texto. CONTROLE vence. */
.elf-artigo-corpo a,
.elf-pagina a { color: var(--elf-roxo); text-decoration: underline; }
.elf-artigo-corpo strong,
.elf-pagina strong { color: var(--elf-text); font-weight: 600; }

.elf-artigo-corpo blockquote,
.elf-pagina blockquote {
  margin: 24px 0;
  padding: 12px 0 12px 16px;
  border-left: 3px solid var(--elf-roxo);
  color: var(--elf-text);
}

.elf-artigo-corpo img,
.elf-pagina img {
  display: block;
  max-width: 100%;                    /* e não width: as fotos coladas no corpo são recortes
                                         de 300px — esticar pra 688 as entregaria borradas */
  height: auto;
  margin: 20px 0;
  border-radius: var(--elf-radius);
}
/* B62 (#88): a foto do card de produto da vitrine "Elfbar Brasil indica" (o [html_block] no corpo) segue o card
   (loja.css: caixa quadrada com 5% de margem), não a regra da foto do texto, que a descia 20px e cortava */
:is(.elf-artigo-corpo, .elf-pagina) .elf-card-foto img { height: 100%; margin: 0; border-radius: 0; }

/* uma tabela de 6 colunas estoura o 390: a rolagem horizontal fica presa na figura, nunca no
   corpo da página. `has-fixed-layout` do Gutenberg não faz nada sem o wp-block-library, então
   o table-layout sai daqui. */
.elf-artigo-corpo figure,
.elf-pagina figure { margin: 20px 0; overflow-x: auto; }
.elf-artigo-corpo table,
.elf-pagina table {
  width: 100%;
  min-width: 520px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.elf-artigo-corpo th, .elf-artigo-corpo td,
.elf-pagina th, .elf-pagina td {
  padding: 10px 12px;
  border: 1px solid var(--elf-border-light);
  text-align: left;
}

/* institucional: o <h1> vem DENTRO do conteúdo (com text-align inline em 7 das 8) */
.elf-pagina h1 { margin: 0 0 24px; font-size: 1.75rem; font-weight: 700; line-height: 1.3; color: var(--elf-text); }
/* o [rank_math_contact_info] rende 3 seções VAZIAS (telefone, extra, mapa) e o CSS do plugin
   dá 16px de margem em cada: ~48px de vão morto no fim de /contato/ */
.rank-math-contact-section:empty { display: none; }

/* ═══ CARD DE POST (arquivo + relacionados) ═══
   prefixo próprio: a faixa de posts da HOME (B7) usa .elf-post* com as medidas do mockup.
   As regras miram sempre a CLASSE, nunca a tag — o nível do título muda entre as duas telas. */
.elf-artigo-card {
  position: relative;                 /* âncora da folha esticada do título (ver adiante) */
  border: 1px solid var(--elf-border-light);
  border-radius: var(--elf-radius);
  overflow: hidden;
  background: var(--elf-bg);
  transition: box-shadow .2s;
}
.elf-artigo-card:hover { box-shadow: var(--elf-shadow-hover); }
/* sem foto destacada a caixa cinza fica sozinha — é o "[ Imagem ]" do protótipo */
.elf-artigo-card-foto { display: block; aspect-ratio: 16 / 9; background: var(--elf-bg-tertiary); }
.elf-artigo-card-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.elf-artigo-card-corpo { padding: 16px; }
.elf-artigo-card-data {
  display: block;
  margin-bottom: 5.6px;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--elf-text-secondary);   /* mesmo motivo do .elf-artigo-meta: AA vence o #999 do protótipo */
  text-transform: uppercase;
  letter-spacing: .05em;
}
.elf-artigo-card-titulo { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--elf-text); }
/* o título é o alvo principal do card e a caixa dele tem 21px numa linha; a folha esticada
   leva o toque ao card inteiro sem inflar o desenho */
.elf-artigo-card-titulo a { position: static; color: inherit; text-decoration: none; }
.elf-artigo-card-titulo a::after { content: ""; position: absolute; inset: 0; }
.elf-artigo-card-titulo a:hover { color: var(--elf-roxo); }
.elf-artigo-card-resumo { margin: 0 0 12px; font-size: 0.8125rem; line-height: 1.6; color: var(--elf-text-secondary); }
.elf-artigo-card-mais {
  position: relative;
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--elf-roxo);
  text-decoration: none;
}
.elf-artigo-card-mais:hover { text-decoration: underline; }
/* alvo de toque de 44px sem inflar o card.
   A sobreposição com o título acima não erra o destino: os dois links vão ao mesmo post. */
.elf-artigo-card-mais::after { content: ""; position: absolute; inset: -13px 0; }

/* ═══ POSTS RELACIONADOS (só no protótipo — o clone não tem) ═══ */
.elf-artigo-relacionados {
  max-width: 688px;
  margin: 32px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--elf-border-light);
}
.elf-relacionados-titulo { margin: 0 0 16px; font-size: 1.125rem; font-weight: 700; color: var(--elf-text); }
.elf-relacionados-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767.98px) {
  /* o protótipo pula o passo de 2 colunas aqui, ao contrário da grade do arquivo */
  .elf-relacionados-grade { grid-template-columns: 1fr; }
}

/* ═══ ARQUIVO /blog/ ═══ */
/* a intro traz o <h1> congelado + os 3 parágrafos; a largura é a do clone (texto corrido na
   coluna inteira), porque estreitar seria desenho novo numa tela que ninguém reformou */
.elf-blog-intro { padding: 12px 0 24px; font-size: 1rem; line-height: 1.8; color: var(--elf-text-secondary); }
.elf-blog-intro h1 { margin: 0 0 12px; font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--elf-text); }
.elf-blog-intro p { margin: 0 0 12px; }
.elf-blog-intro p:last-child { margin-bottom: 0; }
.elf-blog-intro a { color: var(--elf-roxo); }

.elf-blog-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1023.98px) { .elf-blog-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .elf-blog-grade { grid-template-columns: 1fr; } }

/* ═══ paginação nativa do WordPress ═══
   o the_posts_pagination() emite <a class="page-numbers"> SOLTOS (sem <ul>/<li>). Desenho do gabarito (clone
   /blog/, nav.wd-pagination; fiscal-visual do B73): só o número, sem caixa; a atual num quase-círculo no roxo
   de ação da D27; 3 px entre eles e 30 da grade. Até o B73 esta pele nunca valeu (a classe saía colada). */
.elf-paginacao { margin: 30px 0 0; }
/* o WordPress cola um <h2 class="screen-reader-text"> visível dentro da nav */
.elf-paginacao .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.elf-paginacao .nav-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px;
}
.elf-paginacao .page-numbers {
  min-width: 44px; height: 44px; padding: 0 5px;       /* CONTROLE: os 34px do clone → ≥44px */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600; line-height: 1; color: #242424; text-decoration: none;
  border-radius: 22px;   /* o clone põe 16,67 numa caixa de 34 (quase um círculo): aqui a metade dos 44 */
  transition: background-color .15s;
}
.elf-paginacao a.page-numbers:hover { background: #F1F1F1; }
.elf-paginacao .page-numbers.current { background: var(--elf-roxo); color: #fff; }

/* ═══ 404 ═══ fala a mesma língua dos vazios do B5 (busca) e do B6 (carrinho) */
.elf-404 { padding: 24px 0 40px; text-align: center; }
.elf-404-icone { color: rgba(0, 0, 0, .07); }
.elf-404 h1 { margin: 20px 0; font-size: 1.5rem; font-weight: 600; color: #242424; text-wrap: balance; }
.elf-404-texto { max-width: 420px; margin: 0 auto 20px; font-size: 0.875rem; line-height: 1.6; color: var(--elf-text); }
.elf-404-busca { max-width: 420px; margin: 0 auto 28px; }
/* o campo da casa é 14px; abaixo de 16px o iOS dá auto-zoom ao tocar (mesmo remendo do drawer) */
.elf-404-busca form.elf-search input[type="search"] { font-size: 1rem; }
/* o .elf-btn-pri (carrinho.css, folha global) é bloco de 48px: aqui vira a pílula de 44 */
.elf-404 .elf-btn-pri {
  display: inline-flex;
  height: var(--elf-toque);
  padding: 0 20px;
  border-radius: var(--elf-radius-pill);
  font-size: 0.8125rem;
  text-transform: uppercase;
}