/**
 * cms-content.css — typography for rich text authored in /admin/pages.
 *
 * WHY IT EXISTS (2026-08-09). `.cms-body` had no rules anywhere. The HTML that
 * comes out of the editor — headings, lists, links, tables, quotes — inherited
 * whatever the surrounding page happened to define, which in a bespoke theme is
 * nothing. The vertical's Impressum rendered as an undifferentiated wall of
 * text with links the same colour as the prose: legally required content, and it
 * read like a paste. This is the piece every serious system ships — Tailwind's
 * `prose`, GitHub's `.markdown-body`, WordPress's editor styles.
 *
 * Everything here goes through the `--cms-*` tokens (site.css documents the set),
 * so a theme that maps those twelve variables gets this whole sheet in its own
 * palette. No colour is written literally.
 *
 * Scoped to `.cms-body` on purpose: it styles CONTENT, never chrome, so it can
 * never fight a theme's own layout rules.
 */

.cms-body {
    /* Vertical rhythm: one measure, everything derives from it. */
    --cms-rhythm: 1.25rem;
}

/* Headings inside the content are subordinate to the section's own <h2>, so the
   scale starts one step below it — a page whose body shouts as loud as its title
   has no hierarchy. */
.cms-body h2,
.cms-body h3,
.cms-body h4 {
    color: var(--cms-heading, #0f172a);
    font-weight: 700;
    line-height: 1.3;
    margin: calc(var(--cms-rhythm) * 1.8) 0 calc(var(--cms-rhythm) * 0.55);
}
.cms-body h2 { font-size: 1.3rem; }
.cms-body h3 { font-size: 1.1rem; }
.cms-body h4 { font-size: 1rem; }
.cms-body > :first-child { margin-top: 0; }
.cms-body > :last-child  { margin-bottom: 0; }

.cms-body p { margin: 0 0 var(--cms-rhythm); }

/* Links have to be recognisable as links without relying on colour alone —
   WCAG 1.4.1. Underlined, offset so descenders stay readable. */
.cms-body a {
    color: var(--cms-link, #2563eb);
    text-decoration: underline;
    text-underline-offset: .17em;
    text-decoration-thickness: from-font;
}
.cms-body a:hover { text-decoration-thickness: 2px; }
.cms-body a:focus-visible {
    outline: 2px solid var(--cms-link, #2563eb);
    outline-offset: 2px;
}

.cms-body ul,
.cms-body ol { margin: 0 0 var(--cms-rhythm); padding-left: 1.35rem; }
.cms-body li { margin-bottom: .35rem; }
.cms-body li:last-child { margin-bottom: 0; }
.cms-body ul ul,
.cms-body ol ol { margin-top: .35rem; margin-bottom: 0; }

.cms-body blockquote {
    margin: var(--cms-rhythm) 0;
    padding: .1rem 0 .1rem 1.1rem;
    border-left: 3px solid var(--cms-border, #e2e8f0);
    color: var(--cms-muted, #64748b);
    font-style: italic;
}

.cms-body hr {
    margin: calc(var(--cms-rhythm) * 1.6) 0;
    border: 0;
    border-top: 1px solid var(--cms-border, #e2e8f0);
}

.cms-body strong { color: var(--cms-heading, #0f172a); font-weight: 650; }

.cms-body code {
    padding: .12em .35em;
    background: var(--cms-surface-alt, #f8fafc);
    border: 1px solid var(--cms-border, #e2e8f0);
    border-radius: .25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
}
.cms-body pre {
    margin: 0 0 var(--cms-rhythm);
    padding: .9rem 1rem;
    overflow-x: auto;                      /* nunca empuja el ancho de la página */
    background: var(--cms-surface-alt, #f8fafc);
    border: 1px solid var(--cms-border, #e2e8f0);
    border-radius: .4rem;
}
.cms-body pre code { padding: 0; background: none; border: 0; }

/* Una tabla larga hace scroll dentro de su envoltorio; sin esto, en el móvil
   desborda la página entera y se lleva por delante el diseño del tema. */
.cms-body table {
    width: 100%;
    margin: 0 0 var(--cms-rhythm);
    border-collapse: collapse;
    font-size: .95em;
}
.cms-body th,
.cms-body td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--cms-border, #e2e8f0);
    text-align: left;
    vertical-align: top;
}
.cms-body th { color: var(--cms-heading, #0f172a); font-weight: 650; }

.cms-body img {
    max-width: 100%;
    height: auto;
    border-radius: .4rem;
}