/* Saku-Ero Content Spacing v1.0
   Manage vertical rhythm (margins) for headings, paragraphs, lists, tables, images.
   Works for .prose and .entry-content wrappers (WordPress/Gutenberg).
   Customize scale via CSS variables below.
------------------------------------------------------------------ */
:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --content-max-width: 72ch;
  /* Sticky header offset for in-page heading links */
  --offset-sticky: 80px;
}

/* Base wrapper */
.prose, .entry-content{
  max-width: var(--content-max-width);
  line-height: 1.8;
  font-size: 1rem;
}

/* Reset first/last child margins to avoid weird gaps */
.prose > *:first-child, .entry-content > *:first-child{ margin-top: 0 !important; }
.prose > *:last-child,  .entry-content  > *:last-child { margin-bottom: 0 !important; }

/* Paragraphs & common flow elements */
.prose p, .entry-content p,
.prose ul, .entry-content ul,
.prose ol, .entry-content ol,
.prose pre, .entry-content pre,
.prose table, .entry-content table,
.prose blockquote, .entry-content blockquote,
.prose figure, .entry-content figure{
  margin-top: 0;
  margin-bottom: var(--space-6);
}

/* Headings */
.prose h1, .entry-content h1{ margin: var(--space-12) 0 var(--space-4); line-height: 1.3; }
.prose h2, .entry-content h2{ margin: var(--space-10) 0 var(--space-3); line-height: 1.35; }
.prose h3, .entry-content h3{ margin: var(--space-8)  0 var(--space-2); line-height: 1.4; }
.prose h4, .entry-content h4{ margin: var(--space-6)  0 var(--space-2); line-height: 1.45; }
.prose h5, .entry-content h5,
.prose h6, .entry-content h6{ margin: var(--space-6) 0 var(--space-2); line-height: 1.5; }

/* When headings are consecutive, tighten the gap */
.prose h2 + h3, .entry-content h2 + h3{ margin-top: var(--space-3); }
.prose h3 + h4, .entry-content h3 + h4{ margin-top: var(--space-2); }
.prose h4 + h5, .entry-content h4 + h5{ margin-top: var(--space-2); }

/* Reduce top gap for the first heading in content */
.prose > h1:first-child, .entry-content > h1:first-child{ margin-top: 0; }
.prose > h2:first-child, .entry-content > h2:first-child{ margin-top: 0; }

/* Headings scroll offset (for anchor links) */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{
  scroll-margin-top: var(--offset-sticky);
}

/* Lists */
.prose ul, .entry-content ul,
.prose ol, .entry-content ol{
  padding-left: var(--space-6);
}
.prose li + li, .entry-content li + li{ margin-top: var(--space-1); }
/* Tighten list directly after a heading */
.prose h2 + ul, .prose h2 + ol,
.entry-content h2 + ul, .entry-content h2 + ol{ margin-top: var(--space-3); }

/* Blockquote */
.prose blockquote, .entry-content blockquote{
  border-left: 4px solid #e5e7eb;
  padding-left: var(--space-4);
  color: #374151;
  background: #fafafa;
}

/* Images & figures */
.prose img, .entry-content img{ display:block; height:auto; max-width:100%; }
.prose figure, .entry-content figure{ margin-left:0; margin-right:0; }
.prose figcaption, .entry-content figcaption{ margin-top: var(--space-2); font-size: .9em; color:#6b7280; text-align:center; }

/* Tables */
.prose table, .entry-content table{
  width: 100%;
  border-collapse: collapse;
  font-size: .95em;
  overflow-x: auto;
  display: block;
}
.prose thead th, .entry-content thead th{ border-bottom: 2px solid #e5e7eb; }
.prose th, .prose td, .entry-content th, .entry-content td{
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid #e5e7eb;
}
.prose tr:nth-child(even) td, .entry-content tr:nth-child(even) td{ background:#fafafa; }

/* Code */
.prose pre, .entry-content pre{
  background:#0f172a; color:#e5e7eb;
  border-radius: 6px;
  padding: var(--space-6);
  overflow:auto;
}
.prose code, .entry-content code{ background:#f3f4f6; padding: .1em .35em; border-radius: 4px; }

/* HR / separator */
.prose hr, .entry-content hr{
  margin: var(--space-10) 0;
  border: 0; border-top: 1px solid #e5e7eb;
}

/* Gutenberg common blocks */
.wp-block-image{ margin-bottom: var(--space-6); }
.wp-block-separator{ margin: var(--space-10) 0; }
.wp-block-table{ margin-bottom: var(--space-6); }
.wp-block-quote{ margin-bottom: var(--space-6); }

/* Compact variant: apply to wrapper to reduce all spacing a bit */
.prose--compact{ --space-6: 16px; --space-8: 24px; --space-10: 28px; --space-12: 32px; --offset-sticky: 64px; }

/* Responsive tweaks: slightly reduce top margins on small screens */
@media (max-width: 640px){
  .prose h1, .entry-content h1{ margin-top: calc(var(--space-12) * .7); }
  .prose h2, .entry-content h2{ margin-top: calc(var(--space-10) * .75); }
  .prose h3, .entry-content h3{ margin-top: calc(var(--space-8)  * .8); }
  .prose p, .entry-content p{ margin-bottom: var(--space-5); }
}

/* Optional helpers */
/* Reduce gap above the very first H2 that follows an intro lead paragraph */
.prose .lead + h2, .entry-content .lead + h2{ margin-top: var(--space-6); }
/* Utility to control flow spacing manually: add class .flow and set --flow-space */
.flow > *{ margin-top: 0; margin-bottom: 0; }
.flow > * + *{ margin-top: var(--flow-space, var(--space-6)); }