/* ============================================
   ZOROBABEL — manifesto.css
   Tipografia de leitura lenta, respirada, poética
   ============================================ */

/* Hero do manifesto */
.manifesto-hero {
  min-height: 40svh;
  justify-content: flex-end;
  padding-bottom: clamp(var(--sp-12), 8vw, var(--sp-20));
}
.manifesto-hero-sub {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--color-sidebar-muted);
  margin-top: var(--sp-3);
  letter-spacing: 0.01em;
}
[data-theme='light'] .manifesto-hero-sub { color: var(--color-text-muted); }

/* Artigo principal */
.manifesto-article {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(var(--sp-16), 10vw, var(--sp-32)) clamp(var(--sp-8), 5vw, var(--sp-16));
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-10), 5vw, var(--sp-16));
}

.manifesto-audio {
  margin-bottom: var(--sp-2);
}

.manifesto-audio audio {
  width: 100%;
  display: block;
}

/* Blocos */
.m-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Linha simples */
.m-line {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.55;
  max-width: none;
}

/* Linha forte — afirmações diretas */
.m-strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: none;
}

/* Pausa — linha com peso emocional */
.m-pause {
  padding-top: var(--sp-3);
  color: var(--color-text-muted);
}

/* Ênfase — linha que virada */
.m-emphasis {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.15;
  max-width: none;
}

/* Ênfase suave — itálico com peso */
.m-emphasis-soft {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.55;
  max-width: none;
}

/* Pesado — linha definitiva */
.m-heavy {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text);
  line-height: 1.05;
  max-width: none;
}

/* Bloco de comentário — corpo mais leve */
.m-commentary p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--sp-3);
  max-width: none;
}
.m-commentary p:last-child { margin-bottom: 0; }
.m-commentary .m-emphasis-soft { color: var(--color-text); font-weight: 400; }

/* Bloco de virada — peso médio */
.m-turn p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: var(--sp-2);
  max-width: none;
}
.m-turn .m-strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
}
.m-turn .m-emphasis {
  font-family: var(--font-display);
}
.m-turn .m-emphasis-soft {
  font-style: italic;
  color: var(--color-text-muted);
}
.m-turn .m-pause { padding-top: var(--sp-2); }

/* Diagnóstico — abertura forte */
.m-diagnose p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.15;
  max-width: none;
  margin-bottom: var(--sp-1);
}
.m-diagnose .m-pause {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 300;
  color: var(--color-text-muted);
  letter-spacing: 0;
  padding-top: var(--sp-4);
}

/* Afirmação — declaração central */
.m-statement p {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: none;
}
.m-statement .m-heavy {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--color-text);
  margin-top: var(--sp-3);
}

/* Citações bíblicas */
.m-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 500;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  border-left: 3px solid var(--color-text);
  padding-left: var(--sp-6);
  margin: 0 0 var(--sp-5) 0;
  max-width: none;
}
.m-quote-note {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.65;
  padding-left: calc(var(--sp-6) + 3px);
  max-width: none;
  margin-bottom: var(--sp-2);
}

/* Bloco final */
.m-final p {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
  max-width: none;
}
.m-closing {
  font-family: var(--font-display) !important;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.02em;
  padding-top: var(--sp-6);
  line-height: 1.2 !important;
}
.m-last {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-top: var(--sp-2);
}

/* Separador visual entre blocos maiores */
.m-turn::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-border);
  margin-bottom: var(--sp-6);
}

/* Fade-in animado por CSS ao carregar — sem dependência de JS */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.manifesto-article .m-block {
  animation: fadeUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Stagger: cada bloco entra um pouco depois do anterior */
.manifesto-article .m-block:nth-child(1)  { animation-delay: 0.05s; }
.manifesto-article .m-block:nth-child(2)  { animation-delay: 0.10s; }
.manifesto-article .m-block:nth-child(3)  { animation-delay: 0.15s; }
.manifesto-article .m-block:nth-child(4)  { animation-delay: 0.20s; }
.manifesto-article .m-block:nth-child(5)  { animation-delay: 0.25s; }
.manifesto-article .m-block:nth-child(6)  { animation-delay: 0.30s; }
.manifesto-article .m-block:nth-child(n+7) { animation-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .manifesto-article .m-block { animation: none; }
}

/* Responsive */
@media (max-width: 768px) {
  .manifesto-article {
    padding-top: clamp(var(--sp-10), 6vw, var(--sp-16));
  }
  .m-quote blockquote {
    padding-left: var(--sp-4);
    border-left-width: 2px;
  }
  .m-quote-note { padding-left: calc(var(--sp-4) + 2px); }
}

/* ---- MOBILE GLOBAL ---- */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0 !important; padding-top: 58px !important; }
  .mobile-topbar { display: flex !important; }
  .theme-toggle-float { display: none; }
}

/* ---- LEGAL PAGES READABILITY ---- */
.manifesto-page .manifesto-header {
  margin-bottom: var(--sp-10) !important;
}

.manifesto-page .manifesto-header h1 {
  margin-bottom: var(--sp-5) !important;
}

.manifesto-page .manifesto-header p {
  margin-bottom: 0 !important;
  line-height: 1.75 !important;
}

.manifesto-page .manifesto-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.manifesto-page .manifesto-content h2 {
  margin: var(--sp-8) 0 0 0 !important;
}

.manifesto-page .manifesto-content h2:first-child {
  margin-top: 0 !important;
}

.manifesto-page .manifesto-content p {
  margin: 0 !important;
  line-height: 1.8 !important;
}

/* Força espaçamento explícito entre pares título/parágrafo nas páginas legais */
.manifesto-page .manifesto-content h2 + p {
  margin-top: var(--sp-4) !important;
}

.manifesto-page .manifesto-content p + h2 {
  margin-top: var(--sp-10) !important;
}
