/*
Theme Name: Ani Sullivan Jornal
Theme URI: https://anisullivan.com.br/
Author: Ani Sullivan
Description: Tema estilo jornal antigo / bullet journal, com cadernos laterais e destaques.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anisullivan-jornal
*/

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --paper:#f5d3b8;
  --ink:#2f2f2f;
  --muted:#555;
  --rule:#555;
  --card:rgba(255,255,255,0.22);
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Playfair Display', serif;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.site-header{
  text-align:center;
  padding:40px 20px 30px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.site-icon{ width:44px; height:auto; }

.site-header .site-title{
  font-family:'Patrick Hand', cursive;
  font-size:42px;
  line-height:1;
}

.subtitle{
  margin-top:12px;
  font-size:18px;
  line-height:1.6;
}

.layout{
  display:grid;
  grid-template-columns:200px 1fr 180px;
  max-width:1200px;
  margin:30px auto;
  border:2px dashed var(--rule);
}

.menu-left, .menu-right{ padding:30px 20px; }
.menu-left{ border-right:2px dashed var(--rule); }
.menu-right{ border-left:2px dashed var(--rule); }

.menu-left ul, .menu-right ul{ list-style:none; }

.menu-left li, .menu-right li{ margin-bottom:14px; font-size:16px; }
.menu-left .menu li, .menu-right .menu li{ margin-bottom:14px; }

.content{ padding:30px 40px; }

.highlights{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:40px;
  flex-wrap:wrap;
}

.highlight{
  border:2px dotted var(--rule);
  padding:15px 20px;
  font-family:'Patrick Hand', cursive;
  font-size:18px;
  background:rgba(255,255,255,0.3);
  box-shadow:2px 2px 0 rgba(0,0,0,0.15);
}

.post-card{ margin-bottom:40px; }
.post-card h2{ font-size:30px; margin-bottom:6px; }
.meta{ font-size:14px; color:var(--muted); display:block; }
.post-card p{ margin-top:10px; font-size:18px; line-height:1.7; }

/* Single post (newspaper) */
.article-head{
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,0.35);
}
.kicker{
  font-family:'Patrick Hand', cursive;
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-size:14px;
  opacity:0.85;
  margin-bottom:6px;
}
.headline{ font-size:42px; line-height:1.08; margin-bottom:10px; }
.deck{ font-size:18px; line-height:1.6; opacity:0.95; margin-bottom:10px; }
.dateline{
  font-size:14px;
  color:var(--muted);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.dateline .badge{
  border:1px dotted var(--rule);
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,0.25);
}

.featured-media{
  margin:22px 0 26px;
  border:2px dotted var(--rule);
  padding:10px;
  background:var(--card);
}
.featured-media img{ width:100%; height:auto; display:block; }
.caption{ margin-top:8px; font-size:13px; color:var(--muted); font-style:italic; }

.article-body{
  column-count:2;
  column-gap:46px;
  column-rule:1px dotted rgba(0,0,0,0.25);
  font-size:18px;
  line-height:1.75;
}
.article-body p{ margin:0 0 14px 0; }
.article-body h2, .article-body h3{
  break-inside:avoid;
  margin:16px 0 10px;
  font-size:20px;
}
.no-break{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; }

.pullquote{
  border-left:4px solid rgba(0,0,0,0.45);
  padding:12px 14px;
  margin:18px 0;
  background:rgba(255,255,255,0.25);
  font-family:'Patrick Hand', cursive;
  font-size:22px;
  line-height:1.35;
}

.note-box{
  border:2px dashed var(--rule);
  padding:12px 14px;
  background:var(--card);
  margin:18px 0;
  font-size:15px;
  line-height:1.6;
}
.note-box strong{
  font-family:'Patrick Hand', cursive;
  font-size:18px;
  display:inline-block;
  margin-bottom:6px;
}

.endmark{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,0.35);
  text-align:center;
  font-family:'Patrick Hand', cursive;
  font-size:22px;
  opacity:0.9;
}

.comments-area{ margin-top:28px; }
.comment-reply-title, .comments-title{ font-size:18px; margin-bottom:10px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.25);
  background:rgba(255,255,255,0.35);
  font-family:inherit;
}
.comment-form textarea{ min-height:140px; }
.comment-form input[type="submit"]{
  margin-top:10px;
  padding:10px 14px;
  border:1px dotted var(--rule);
  background:rgba(255,255,255,0.25);
  cursor:pointer;
}

@media (max-width: 980px){
  .layout{ grid-template-columns:180px 1fr; }
  .menu-right{ display:none; }
  .headline{ font-size:34px; }
  .article-body{ column-count:1; }
}
@media (max-width: 720px){
  .layout{ grid-template-columns:1fr; }
  .menu-left{ border-right:none; border-bottom:2px dashed var(--rule); }
  .content{ padding:22px 18px; }
  .site-header .site-title{ font-size:38px; }
}
/* =========================================================
   FIX: Título de página/post (.headline) menor que o título do blog
   ========================================================= */

/* Título do blog (logo/nome) - garante que fique maior */
.brand,
.brand a {
  font-size: 3rem !important;
  line-height: 1.05 !important;
}

/* Título das páginas/posts (seu layout usa h2.headline) */
.article-head .headline {
  font-size: 2.15rem !important;
  line-height: 1.10 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0.2rem !important;
}

/* “Página” (kicker) pequeno e elegante */
.article-head .kicker {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.75 !important;
}

/* Mobile: reduz tudo proporcionalmente */
@media (max-width: 768px) {
  .brand,
  .brand a {
    font-size: 2.2rem !important;
  }

  .article-head .headline {
    font-size: 1.7rem !important;
  }
}
/* === Jornal: colunas no corpo do post/página === */
.article-body {
  column-count: 2;
  column-gap: 56px;
  column-rule: 1px solid rgba(0,0,0,0.18);
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body h2,
.article-body h3 {
  break-inside: avoid;
}

.article-body h2,
.article-body h3 {
  column-span: all; /* título atravessa as colunas (se o navegador suportar) */
}

/* Mobile: 1 coluna */
@media (max-width: 900px) {
  .article-body {
    column-count: 1;
    column-rule: none;
    column-gap: 0;
  }
}
/* === Jornal (força colunas no conteúdo do post/página) === */
.single .entry-content,
.single .wp-block-post-content,
.page .entry-content,
.page .wp-block-post-content {
  column-count: 2;
  column-gap: 56px;
  column-rule: 1px solid rgba(0,0,0,0.18);
}

/* evita que títulos e listas “quebrem” feio */
.single .entry-content > *,
.page .entry-content > *,
.single .wp-block-post-content > *,
.page .wp-block-post-content > * {
  break-inside: avoid;
}

/* Mobile */
@media (max-width: 900px) {
  .single .entry-content,
  .single .wp-block-post-content,
  .page .entry-content,
  .page .wp-block-post-content {
    column-count: 1;
    column-rule: none;
    column-gap: 0;
  }
}
/* Ajuste fino de respiro editorial */
.article-head {
  margin-bottom: 1.4rem;
}

/* Chips mais colados ao título */
.chips {
  margin-bottom: 0.6rem;
}

/* Pequeno respiro antes da imagem */
.article-body img:first-child,
.article-body figure:first-child {
  margin-top: 0.8rem;
}