/* ==============================================================================
   MARKDOWN BLOCK

   Free prose (the legal pages): no box around it, only the reading
   column, as doc/07 asks of every text on the site.
   ============================================================================== */

.block-markdown > h2 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-xl);
}

/* .prose holds MarkdownData.HTML: goldmark's own headings, paragraphs,
   lists and links, none of which the template writes markup for itself.
   --measure caps a line at about 65 characters of the face in use, the
   reading width of doc/07, instead of the full content column. */
.prose {
  max-width: var(--measure);
  color: var(--text-secondary);
  line-height: 1.6;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p + p {
  margin-top: var(--spacing-md);
}

/* internal/markdown clamps every heading to h2..h4 (see headingRenderer),
   so this is the full set a block's body can ever produce; the block's
   own title, one level up, is a plain <h2> outside .prose entirely. */
.prose h2,
.prose h3,
.prose h4 {
  color: var(--text-primary);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  line-height: 1.1;
}

.prose h2 {
  font-size: var(--font-size-xl);
}

.prose h3,
.prose h4 {
  font-size: var(--font-size-lg);
}

.prose ul,
.prose ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

.prose li + li {
  margin-top: var(--spacing-xs);
}

.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}

.prose a {
  color: var(--accent-blue);
  text-underline-offset: 0.2em;
}

/* A pasted image inside a markdown body is still content, not layout: it
   must never overflow the reading column the way a fixed-width <img>
   naturally could. */
.prose img {
  max-width: 100%;
  height: auto;
}

/* A block of commands keeps its lines as written, since wrapping a shell
   command misleads whoever copies it, so it scrolls sideways on its own
   instead of pushing the whole page wider than the screen. */
.prose pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Inline code inside a sentence (a URL, a long flag) has no spaces to
   break at; on a narrow phone it may break anywhere rather than stick
   out of the column. */
.prose :not(pre) > code {
  overflow-wrap: anywhere;
}