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

.block-markdown {
  background: var(--paper-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

/* .prose holds MarkdownData.HTML (or a text block's Rendered paragraphs):
   goldmark's own headings, paragraphs, lists and links, none of which the
   template writes markup for itself. content-max-width caps a long line
   at the same reading width the rest of the page already uses, rather
   than letting body text stretch as wide as the block's own card. */
.prose {
  max-width: var(--content-max-width);
  color: var(--text-secondary);
  line-height: 1.7;
}

.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-lg);
  margin-bottom: var(--spacing-sm);
}

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

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

/* Bullets are the little stars of the «Enyesque» poster (ADR-034). A
   string list-style-type, unlike content on ::marker, works in Safari
   too; the trailing spaces are the gap before the text. The star takes
   the main text colour so it reads as a mark, not as a link. Numbered
   lists keep their numbers. */
.prose ul {
  list-style-type: "✶  ";
}

.prose ul > li::marker {
  color: var(--text-primary);
}

/* Links inside a text are underlined: the underline is what tells a link
   apart from the words around it without relying on colour alone, and the
   offset keeps it off the descenders. Since the site links what it names
   (Juan, 14 October 2026), the same rule covers every text that takes
   inline Markdown outside .prose: a text block's paragraphs, a card's
   text, the cta's sentence and the contact intro.

   The slight wave of the poster's workshop lines (ADR-034) stays, but only
   under the pointer: at rest it is a straight line. With one link per
   paragraph the wave read well; with four group names in a row (the 12
   October event) or a link wrapping inside a narrow card it turned into
   noise, measured on screenshots of both versions. */
.prose a,
.block-text p a,
.card__text a,
.block-cta > p a,
.block-contact > p a {
  color: var(--accent-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.prose a:hover,
.block-text p a:hover,
.card__text a:hover,
.block-cta > p a:hover,
.block-contact > p a:hover {
  text-decoration-style: wavy;
}

/* 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;
}

/* An email address or a bare URL used as the link text is one long word
   too: on a 320 px phone the Assembly's address stuck out of the contact
   page's column until it was allowed to break. */
.prose a {
  overflow-wrap: anywhere;
}