/*
 * Styling for rich-text (WYSIWYG) content.
 *
 * Hand-written rather than Tailwind utilities: site.css is compiled output from
 * the React source, so any class not used there does not exist. Arbitrary
 * variants like [&_p]:mb-6 silently do nothing. This file is authored directly
 * and therefore survives a future Tailwind rebuild.
 *
 * Uses the design tokens already defined in site.css (--foreground, --primary…).
 */

.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }

.rte p {
    margin: 0 0 1.5rem;
}

.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
    color: hsl(var(--foreground));
    font-weight: 700;
    line-height: 1.25;
    margin: 2rem 0 1rem;
}

.rte h1 { font-size: 2.25rem; }
.rte h2 { font-size: 1.875rem; }
.rte h3 { font-size: 1.5rem; }
.rte h4 { font-size: 1.25rem; }
.rte h5, .rte h6 { font-size: 1.125rem; }

.rte strong, .rte b { color: hsl(var(--foreground)); font-weight: 600; }
.rte em, .rte i { font-style: italic; }
.rte u { text-decoration: underline; }
.rte s { text-decoration: line-through; }

.rte a {
    color: hsl(var(--primary));
    text-decoration: none;
    transition: opacity 0.2s;
}
.rte a:hover { text-decoration: underline; }

.rte ul, .rte ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte li { margin-bottom: 0.5rem; }
.rte li::marker { color: hsl(var(--primary)); }

.rte blockquote {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid hsl(var(--primary));
    color: hsl(var(--muted-foreground));
    font-style: italic;
}

.rte pre {
    margin: 0 0 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    overflow-x: auto;
    font-size: 0.875rem;
}

.rte code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    color: hsl(var(--primary));
}
.rte pre code { color: inherit; }

.rte hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid hsl(var(--border));
}

.rte img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 0 0 1.5rem;
}

.rte table {
    width: 100%;
    margin: 0 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.95em;
}
.rte th, .rte td {
    padding: 0.6rem 0.75rem;
    border: 1px solid hsl(var(--border));
    text-align: left;
}
.rte th {
    background: hsl(var(--muted) / 0.3);
    color: hsl(var(--foreground));
    font-weight: 600;
}

/* Inverted variant for rich text on the gradient CTA panels. */
.rte-invert, .rte-invert p, .rte-invert li { color: rgb(255 255 255 / 0.9); }
.rte-invert h1, .rte-invert h2, .rte-invert h3,
.rte-invert h4, .rte-invert strong, .rte-invert b { color: #fff; }
.rte-invert a { color: #fff; text-decoration: underline; }
.rte-invert li::marker { color: rgb(255 255 255 / 0.7); }

/* Single-line rich fields (subtitles, short body copy) shouldn't add trailing space. */
.rte-tight p { margin-bottom: 0.75rem; }
.rte-tight > :last-child { margin-bottom: 0; }