/*
Theme Name: Tibo Portal
Author: iOrbit
Description: Tema dos portais operados por IA. Clássico e sem tema-pai de propósito: o layout
  de um portal é o produto, e depender de um pai significa herdar decisões de outra pessoa e
  brigar com elas em cada ajuste. Um tema para todos os portais: o que muda entre eles é a
  paleta, carregada de paleta.css, e nunca o HTML.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: tibo-portal
*/

/* ─────────────────────────────────────────────────────────────────────────────
   Tokens

   Uma cor de acento forte sobre tinta quase-preta e um off-white morno. Os valores
   abaixo são PADRÃO, não a identidade de nenhum portal: cada um sobrescreve em
   paleta.css, gerado do seu site.json e carregado depois deste arquivo.

   Existir aqui com valor legível é o ponto — um portal cuja paleta falhou ao subir
   renderiza sóbrio em vez de sem contraste nenhum, e o defeito fica visível sem
   deixar o site ilegível para quem chegou nele.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --ground: #ffffff;
  --band: #f7f4f2;          /* faixa de seção, off-white morno */
  --ink: #1b1917;
  --ink-2: #4a4441;
  --muted: #7d7671;
  --rule: #e4dedb;
  --acento: #1b1917;
  --acento-escuro: #000000;
  --acento-fraco: #f2f0ef;

  --largura: 1240px;
  --largura-texto: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Karla", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 40px; }

/* ─── Cabeçalho ─────────────────────────────────────────────────────────────── */
.masthead { border-bottom: 1px solid var(--rule); }
/* padding-block, e não o atalho `padding`.
   Este elemento carrega as duas classes ao mesmo tempo (`class="wrap masthead__topo"`), e o
   atalho aqui zerava o padding lateral que o .wrap tinha acabado de definir — o logo
   encostava na borda da janela em qualquer viewport menor que a largura máxima. */
.masthead__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 26px 22px;
}
/* h1 na capa, <a> nas demais — ver header.php. Os dois entram aqui, e as declarações de
   margem e cor existem porque h1 traz margem própria do navegador que o <a> não tinha. */
.logo {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0;
}
h1.logo a { color: inherit; text-decoration: none; }
.logo em { font-style: italic; color: var(--acento); }
.masthead__data {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

.menu { border-top: 1px solid var(--rule); background: var(--ground); }
.menu ul {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.menu ul::-webkit-scrollbar { display: none; }
.menu a {
  display: block; padding: 13px 18px 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 3px solid transparent; white-space: nowrap;
}
.menu a:hover { color: var(--acento); border-bottom-color: var(--acento); }
.menu li:first-child a { padding-left: 0; }
.menu .current-menu-item a { color: var(--acento); border-bottom-color: var(--acento); }

/* ─── Rótulo de seção ───────────────────────────────────────────────────────── */
.rotulo {
  display: flex; align-items: baseline; gap: 18px; margin: 0 0 28px;
}
.rotulo h2 {
  font-family: "Karla", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento); margin: 0; white-space: nowrap;
}
.rotulo::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.rotulo .todas {
  font-size: 12px; letter-spacing: .06em; color: var(--muted); white-space: nowrap;
}
.rotulo .todas:hover { color: var(--acento); }

/* ─── Cartão de artigo ──────────────────────────────────────────────────────── */
.cartao { display: flex; flex-direction: column; gap: 10px; }
.cartao__foto {
  position: relative; overflow: hidden; background: var(--band);
  aspect-ratio: 3 / 2;
}
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cartao:hover .cartao__foto img { transform: scale(1.04); }
.cartao__foto--vazia {
  display: grid; place-items: center;
  font-family: "Newsreader", Georgia, serif; font-style: italic;
  color: var(--muted); font-size: 15px;
  background: repeating-linear-gradient(135deg, var(--band) 0 12px, #f1ece9 12px 24px);
}
.cartao__cat {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento);
}
.cartao__titulo {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500; font-size: 19px; line-height: 1.25; margin: 0;
  letter-spacing: -0.01em; text-wrap: balance;
}
.cartao:hover .cartao__titulo { color: var(--acento-escuro); }
.cartao__resumo { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 0; }
.cartao__meta { font-size: 12px; color: var(--muted); letter-spacing: .03em; }

/* ─── Manchete da home ──────────────────────────────────────────────────────── */
.manchete { padding: 46px 0 54px; }
.manchete__grade { display: grid; grid-template-columns: 1.62fr 1fr; gap: 44px; align-items: start; }
.manchete .principal .cartao__foto { aspect-ratio: 16 / 10; }
.manchete .principal .cartao__titulo {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 400; line-height: 1.1;
}
.manchete .principal .cartao__resumo { font-size: 17px; max-width: 56ch; }
.manchete__lado { display: flex; flex-direction: column; gap: 24px; }
/* Grid e não `flex-direction: row`: com flex, TODOS os filhos do cartão viram colunas —
   foto, categoria, título e data lado a lado. O grid deixa a foto ocupar a coluna da
   esquerda inteira e o texto empilhar na direita, que era a intenção. */
.manchete__lado .cartao {
  display: grid; grid-template-columns: 118px 1fr;
  column-gap: 18px; row-gap: 5px; align-items: start;
}
.manchete__lado .cartao__foto { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1 / 1; }
.manchete__lado .cartao__cat,
.manchete__lado .cartao__titulo,
.manchete__lado .cartao__meta { grid-column: 2; }
.manchete__lado .cartao__titulo { font-size: 17.5px; }

/* ─── Blocos de categoria ───────────────────────────────────────────────────── */
.bloco { padding: 54px 0; border-top: 1px solid var(--rule); }
.bloco--faixa { background: var(--band); border-top: 0; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; }
.grade--3 { grid-template-columns: repeat(3, 1fr); }

/* ─── Artigo ────────────────────────────────────────────────────────────────── */
.artigo { padding: 48px 0 64px; }
.artigo__cabeca { max-width: var(--largura-texto); margin: 0 auto 26px; }
.artigo__cat {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento);
}
.artigo h1 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 12px 0 16px; text-wrap: balance;
}
.artigo__linhafina {
  font-family: "Newsreader", Georgia, serif; font-size: 20px; line-height: 1.5;
  color: var(--ink-2); margin: 0 0 20px;
}
.artigo__assinatura {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: 13px; color: var(--muted);
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.artigo__assinatura strong { color: var(--ink); font-weight: 600; }

.capa { margin: 0 auto 34px; max-width: 1000px; }
.capa img { width: 100%; }
/* O crédito é obrigação da licença, não legenda decorativa: fica sempre visível, colado
   na imagem, e leva ao arquivo de origem. */
.capa figcaption {
  font-size: 12.5px; color: var(--muted); padding: 8px 2px 0; line-height: 1.45;
}
.capa figcaption a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.capa figcaption a:hover { color: var(--acento); }

.conteudo { max-width: var(--largura-texto); margin: 0 auto; font-size: 18.5px; line-height: 1.72; }
.conteudo p { margin: 0 0 1.15em; }
.conteudo h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em;
  margin: 1.9em 0 .55em; text-wrap: balance;
}
.conteudo h3 { font-size: 21px; margin: 1.6em 0 .5em; }
.conteudo a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
.conteudo ul, .conteudo ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.conteudo li { margin-bottom: .45em; }
.conteudo blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--acento);
  font-family: "Newsreader", Georgia, serif; font-size: 21px; font-style: italic; color: var(--ink-2);
}

.tags { max-width: var(--largura-texto); margin: 38px auto 0; padding-top: 22px; border-top: 1px solid var(--rule); }
.tags a {
  display: inline-block; margin: 0 7px 7px 0; padding: 5px 12px;
  background: var(--acento-fraco); color: var(--acento-escuro);
  font-size: 12.5px; letter-spacing: .02em; border-radius: 999px;
}
.tags a:hover { background: var(--acento); color: #fff; }

/* ─── Arquivo ───────────────────────────────────────────────────────────────── */
.arquivo__cabeca { padding: 40px 0 30px; border-bottom: 1px solid var(--rule); margin-bottom: 34px; }
.arquivo__cabeca h1 {
  font-family: "Newsreader", Georgia, serif; font-weight: 400;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 0; letter-spacing: -0.02em;
}
.arquivo__cabeca p { color: var(--ink-2); margin: 10px 0 0; max-width: 60ch; }

.paginacao { display: flex; gap: 10px; justify-content: center; padding: 46px 0 10px; }
.paginacao a, .paginacao span {
  padding: 9px 15px; border: 1px solid var(--rule); font-size: 14px; color: var(--ink-2);
}
.paginacao .current { background: var(--acento); border-color: var(--acento); color: #fff; }
.paginacao a:hover { border-color: var(--acento); color: var(--acento); }

/* ─── Rodapé ────────────────────────────────────────────────────────────────── */
.rodape { margin-top: 60px; background: var(--ink); color: #e9e4e1; padding: 46px 0 34px; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.rodape .logo { color: #fff; font-size: 32px; }
.rodape p { color: #b3aba6; font-size: 14.5px; max-width: 42ch; margin: 12px 0 0; }
.rodape h3 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  margin: 0 0 14px; font-weight: 700;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 9px; }
.rodape a { color: #b3aba6; font-size: 14.5px; }
.rodape a:hover { color: #fff; }
.rodape__base {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid #33302d;
  font-size: 13px; color: #8d8580; display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between;
}

/* A transparência sobre IA é ativo de confiança — fica no rodapé de toda página, não
   escondida numa página que ninguém abre. */
.rodape__ia { color: #8d8580; font-size: 13px; }
.rodape__ia a { color: #cfc8c4; text-decoration: underline; text-underline-offset: 2px; }

/* ─── Responsivo ────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .manchete__grade { grid-template-columns: 1fr; gap: 30px; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grade, .grade--3 { grid-template-columns: 1fr; gap: 26px; }
  .manchete__lado .cartao { flex-direction: column; }
  .manchete__lado .cartao__foto { flex: none; width: 100%; aspect-ratio: 3 / 2; }
  .masthead__topo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rodape__grade { grid-template-columns: 1fr; }
  .conteudo { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}