/**
 * Typography for anything written in the editor.
 *
 * One stylesheet, loaded by the site and by the editor itself, so what is typed
 * looks like what ships. Every rule is scoped under .rte — nothing here can
 * reach a card, a banner or a comparison table, and nothing out there can reach
 * in, which is the whole point of giving editor content a name of its own.
 *
 * Colours come from --rte-* variables. They resolve against the site theme
 * where it exists and against the literal fallbacks below inside the editor
 * iframe, which has no theme of its own.
 */

.rte {
    font-family: var(--font-body, "Poppins", system-ui, sans-serif);
    --rte-ink: var(--color-forest, #2E4018);
    --rte-body: color-mix(in srgb, var(--color-forest, #2E4018) 78%, transparent);
    --rte-muted: color-mix(in srgb, var(--color-forest, #2E4018) 55%, transparent);
    --rte-link: var(--color-leaf, #709343);
    --rte-gold: var(--color-gold-300, #C3BD83);
    --rte-sage: var(--color-sage, #E0E7D7);
    --rte-line: color-mix(in srgb, var(--color-forest, #2E4018) 14%, transparent);
    --rte-display: var(--font-display, "Playfair Display", Georgia, serif);

    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--rte-body);
}

/* Vertical rhythm: every block gets space from the one before it, and only
   from the one before it, so the first child never pushes the section open. */
.rte > * + * { margin-top: 1.1em; }
.rte > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------- headings */

.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
    font-family: var(--rte-display);
    color: var(--rte-ink);
    line-height: 1.25;
    font-weight: 500;
}

.rte h1 { font-size: 2.1em; margin-top: 0.4em; }
.rte h2 { font-size: 1.65em; margin-top: 1.7em; }
.rte h3 { font-size: 1.35em; margin-top: 1.6em; }
.rte h4 { font-size: 1.15em; margin-top: 1.5em; font-weight: 600; }
.rte h5, .rte h6 { font-size: 1em; margin-top: 1.4em; font-weight: 600; letter-spacing: 0.02em; }

.rte h1 + *, .rte h2 + *, .rte h3 + *, .rte h4 + * { margin-top: 0.55em; }

/* ------------------------------------------------------------ inline marks */

.rte a {
    color: var(--rte-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.rte a:hover { text-decoration-thickness: 2px; }

.rte strong, .rte b { color: var(--rte-ink); font-weight: 600; }
.rte em, .rte i { font-style: italic; }
.rte u { text-underline-offset: 3px; }
.rte s, .rte del { opacity: 0.65; }
.rte ins { text-decoration: none; border-bottom: 1px solid var(--rte-link); }
.rte mark { background: color-mix(in srgb, var(--rte-gold) 45%, transparent); padding: 0 0.15em; }
.rte small { font-size: 0.85em; color: var(--rte-muted); }
.rte sub, .rte sup { font-size: 0.72em; line-height: 0; }
.rte abbr[title] { text-decoration: underline dotted; cursor: help; }
.rte kbd {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em;
    background: var(--rte-sage); border-radius: 4px; padding: 0.1em 0.4em;
    border-bottom: 2px solid var(--rte-line);
}

/* ----------------------------------------------------------------- blocks */

.rte ul, .rte ol { padding-left: 1.3em; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte ul ul, .rte ol ol, .rte ul ol, .rte ol ul { margin-top: 0.4em; }
.rte li + li { margin-top: 0.4em; }
.rte li::marker { color: var(--rte-link); }

.rte blockquote {
    padding-left: 1.1em;
    border-left: 2px solid var(--rte-gold);
    font-family: var(--rte-display);
    font-style: italic;
    font-size: 1.2em;
    color: var(--rte-ink);
}
.rte blockquote cite { display: block; margin-top: 0.5em; font-size: 0.7em; font-style: normal; color: var(--rte-muted); }

.rte hr { border: 0; height: 1px; background: var(--rte-line); margin: 2.2em 0; }

.rte dl { display: grid; gap: 0.35em 1em; }
.rte dt { font-weight: 600; color: var(--rte-ink); }
.rte dd { margin: 0 0 0.5em 1.1em; }

/* ------------------------------------------------------------ media, code */

.rte img {
    max-width: 100%; height: auto; display: block;
    border-radius: 10px; margin-top: 1.4em;
}
.rte figure { margin: 1.6em 0 0; }
.rte figure img { margin-top: 0; }
.rte figcaption {
    margin-top: 0.5em; font-size: 0.85em; text-align: center; color: var(--rte-muted);
}

.rte iframe, .rte video {
    max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto;
    border: 0; border-radius: 10px; margin-top: 1.4em; display: block;
}

.rte code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em; background: var(--rte-sage);
    padding: 0.12em 0.35em; border-radius: 4px;
}
.rte pre {
    background: var(--rte-ink); color: #F9F8F4;
    padding: 1em 1.1em; border-radius: 10px;
    overflow-x: auto; font-size: 0.85em; line-height: 1.7;
}
.rte pre code { background: none; padding: 0; color: inherit; font-size: 1em; }

/* ----------------------------------------------------------------- tables */

/* Scrolls rather than breaking the page on a narrow screen. */
.rte table {
    width: 100%; border-collapse: collapse; margin-top: 1.4em;
    font-size: 0.95em; display: block; overflow-x: auto;
}
.rte table th, .rte table td {
    border: 1px solid var(--rte-line);
    padding: 0.55em 0.75em; text-align: left; vertical-align: top;
}
.rte table th { background: var(--rte-sage); color: var(--rte-ink); font-weight: 600; }
.rte table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--rte-sage) 35%, transparent);
}
.rte table caption {
    caption-side: bottom; padding-top: 0.6em;
    font-size: 0.85em; color: var(--rte-muted);
}

/* ------------------------------------------------------------- variations */

.rte--sm { font-size: 0.875rem; line-height: 1.8; }
.rte--center { text-align: center; }
.rte--center table, .rte--center img { margin-inline: auto; }