/* ============================================================
   Blog LeWash — estilo público
   Construído sobre o Design System LeWash (lewash-tokens.css).
   "Um cuidado silencioso."
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  background: var(--bg);
  color: var(--fg);
}

a { color: var(--link); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Header (mesmo padrão visual do lewash.com.br: navy + dourado) ── */
.site-header {
  --hdr-navy: #0C1C2E;
  --hdr-gold: #C9A96E;
  --hdr-gold-soft: #D9C29A;
  --hdr-ivory: #F5F0E6;
  background: var(--hdr-navy);
  padding: 16px var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid rgba(201,169,110,.18);
}
.site-header .brand-area { display: flex; align-items: center; gap: var(--space-4); }
.site-header .logo-link { display: inline-flex; align-items: center; }
.site-header .logo-link img { height: 38px; width: auto; display: block; }
.site-header .sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hdr-gold); display: inline-block; padding: 5px 11px;
  border: 1px solid rgba(201,169,110,.4); border-radius: 999px;
}
.site-header nav.hdr-links { display: flex; align-items: center; gap: 22px; }
.site-header nav.hdr-links a {
  color: rgba(245,240,230,.82); font-weight: 500; text-transform: uppercase;
  font-size: 11px; letter-spacing: .12em; white-space: nowrap;
}
.site-header nav.hdr-links a:hover { color: var(--hdr-gold); }
.voltar-site {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--hdr-gold); border: 1px solid rgba(201,169,110,.5); border-radius: 3px;
  padding: 9px 16px; white-space: nowrap;
}
.voltar-site:hover { background: var(--hdr-gold); color: var(--hdr-navy); }

/* ── Hero da listagem ── */
.hero { max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-6); }
.hero .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); font-weight: var(--h1-wght); color: var(--verde-mata); margin: var(--space-2) 0 var(--space-3); }
.hero p { font-family: var(--font-body); font-weight: var(--lead-wght); font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--fg-muted); max-width: 640px; }

/* ── Categorias / filtro ── */
.categorias { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5) var(--space-5); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cat-pill { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; padding: 7px 16px; border-radius: var(--radius-pill); background: var(--off-white); color: var(--fg-muted); border: 1px solid var(--border); }
.cat-pill.ativa, .cat-pill:hover { background: var(--verde-mata); color: var(--off-white); border-color: var(--verde-mata); }

/* ── Grid de posts ── */
.grid-posts { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5) var(--space-9); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.post-card { background: var(--surface); border-radius: var(--radius-tile); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-card .capa { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: linear-gradient(135deg, var(--verde-mata), var(--azul-marinho)); }
.post-card .capa.placeholder { display: flex; align-items: center; justify-content: center; color: var(--off-white); font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-align: center; padding: var(--space-4); }
.post-card .corpo { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.post-card .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.post-card h3 { font-family: var(--font-display); font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: var(--h3-wght); color: var(--verde-mata); }
.post-card h3 a { color: inherit; }
.post-card .resumo { color: var(--fg-muted); font-size: 14px; line-height: 1.55; flex: 1; }
.post-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: .04em; margin-top: var(--space-2); display: flex; gap: var(--space-3); }
.vazio { text-align: center; color: var(--fg-muted); padding: var(--space-9) var(--space-5); font-style: italic; }

/* ── Artigo (post.php) ── */
.breadcrumb { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-5) 0; font-size: 12px; color: var(--fg-muted); }
.breadcrumb a { color: var(--fg-muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--verde-mata); }
article.post { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-9); }
article.post .cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
article.post h1 { font-family: var(--font-display); font-size: 42px; line-height: 1.08; letter-spacing: -2.5%; font-weight: 800; color: var(--verde-mata); margin: var(--space-3) 0 var(--space-4); }
article.post .meta-post { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: .04em; display: flex; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
article.post .capa { width: 100%; border-radius: var(--radius-tile); margin-bottom: var(--space-6); aspect-ratio: 16/9; object-fit: cover; }
article.post .capa.placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--verde-mata), var(--azul-marinho)); color: var(--off-white); font-family: var(--font-display); font-size: 28px; font-weight: 800; text-align: center; padding: var(--space-6); }

.conteudo { font-size: 16px; line-height: 1.75; color: var(--fg); }
.conteudo h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--verde-mata); letter-spacing: -1.5%; margin: var(--space-7) 0 var(--space-3); }
.conteudo h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--azul-marinho); margin: var(--space-6) 0 var(--space-2); }
.conteudo p { margin-bottom: var(--space-4); }
.conteudo ul, .conteudo ol { margin: 0 0 var(--space-4) var(--space-5); }
.conteudo li { margin-bottom: var(--space-2); }
.conteudo strong { color: var(--verde-mata); }
.conteudo blockquote { border-left: 3px solid var(--accent); padding: var(--space-3) var(--space-5); background: var(--off-white); border-radius: var(--radius-sm); font-style: italic; color: var(--fg-muted); margin: var(--space-5) 0; }
.conteudo a { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); }

/* ── FAQ (GEO: respostas diretas, fáceis de citar por IA) ── */
.faq { margin-top: var(--space-8); }
.faq h2 { font-family: var(--font-display); font-size: 26px; color: var(--verde-mata); margin-bottom: var(--space-4); }
.faq-item { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
.faq-item dt { font-weight: 700; color: var(--azul-marinho); font-family: var(--font-display); font-size: 16px; margin-bottom: var(--space-2); }
.faq-item dd { color: var(--fg); font-size: 15px; line-height: 1.6; }

/* ── CTA final ── */
.cta-box { margin-top: var(--space-8); background: var(--bg-deep); color: var(--fg-on-dark); border-radius: var(--radius-tile); padding: var(--space-7) var(--space-6); text-align: center; box-shadow: var(--shadow-tile); }
.cta-box h3 { font-family: var(--font-display); font-size: 26px; margin-bottom: var(--space-2); color: var(--fg-on-dark); }
.cta-box p { color: var(--fg-on-dark-muted); margin-bottom: var(--space-5); }
.cta-box .btn { display: inline-block; background: var(--accent); color: var(--linho-800); font-weight: 700; padding: 13px 30px; border-radius: var(--radius-pill); font-size: 15px; }
.cta-box .btn:hover { background: #d8b46e; }

/* ── Relacionados ── */
.relacionados { max-width: 760px; margin: var(--space-8) auto 0; padding: 0 var(--space-5); }
.relacionados h3 { font-family: var(--font-display); font-size: 20px; color: var(--verde-mata); margin-bottom: var(--space-4); }
.relacionados-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.relacionados-grid a { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); font-weight: 700; color: var(--verde-mata); font-size: 14px; }
.relacionados-grid a:hover { box-shadow: var(--shadow-md); }

/* ── Footer (NAP local SEO) ── */
.site-footer { background: var(--bg-deep); color: var(--fg-on-dark-muted); padding: var(--space-7) var(--space-6); text-align: center; font-size: 13px; }
.site-footer .logo { color: var(--fg-on-dark); }
.site-footer .logo .wash { color: var(--ouro-discreto); }
.site-footer p { margin-top: var(--space-3); }
.site-footer a { color: var(--fg-on-dark); font-weight: 600; }

@media (max-width: 900px) {
  .grid-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .site-header { padding: 14px var(--space-4); }
  .hero { padding: var(--space-6) var(--space-4); }
  .hero h1 { font-size: 32px; line-height: 1.1; }
  .grid-posts { grid-template-columns: 1fr; padding: 0 var(--space-4) var(--space-8); }
  article.post { padding: var(--space-4); }
  article.post h1 { font-size: 28px; }
  .relacionados-grid { grid-template-columns: 1fr; }
}