/* =========================================================
   Rich Text Block
   - sb-* = runtime
   - pb-* = builder/canvas (optional alias)
   Token-driven theme defaults + your existing variable system.
   ========================================================= */

/* Theme defaults (token-driven) */
.sb-richtext--dark,
.pb-richtext--dark {
    background: var(--sb-surface);
    color: var(--sb-text);
    --sb-richtext-muted-color: var(--sb-text-muted);
    --sb-richtext-link-color: var(--sb-link);
}

.sb-richtext--light,
.pb-richtext--light {
    background: var(--sb-surface-2);
    color: var(--sb-text);
    --sb-richtext-muted-color: var(--sb-text-muted);
    --sb-richtext-link-color: var(--sb-link);
}

/* Base wrapper */
.sb-richtext,
.pb-richtext {
    color: var(--sb-richtext-color, inherit);
    box-sizing: border-box;
}

.sb-richtext a,
.pb-richtext a {
    color: var(--sb-richtext-link-color, var(--bs-link-color, inherit));
}

.sb-richtext .text-muted,
.sb-richtext [data-subheading],
.pb-richtext .text-muted,
.pb-richtext [data-subheading] {
    color: var(--sb-richtext-muted-color, var(--bs-secondary-color, #6c757d));
}

/* ---------------------------------------------------------
   Prose sizing
   --------------------------------------------------------- */

.sb-richtext--prose-sm .sb-richtext-prose,
.pb-richtext--prose-sm .pb-richtext-prose,
.pb-richtext--prose-sm .sb-richtext-prose,
.sb-richtext--prose-sm .pb-richtext-prose {
    font-size: 0.95rem;
    line-height: 1.55;
}

.sb-richtext--prose-md .sb-richtext-prose,
.pb-richtext--prose-md .pb-richtext-prose,
.pb-richtext--prose-md .sb-richtext-prose,
.sb-richtext--prose-md .pb-richtext-prose {
    font-size: 1rem;
    line-height: 1.6;
}

.sb-richtext--prose-lg .sb-richtext-prose,
.pb-richtext--prose-lg .pb-richtext-prose,
.pb-richtext--prose-lg .sb-richtext-prose,
.sb-richtext--prose-lg .pb-richtext-prose {
    font-size: 1.125rem;
    line-height: 1.65;
}

.sb-richtext--prose-sm .sb-richtext-prose :where(h1,h2,h3),
.pb-richtext--prose-sm .pb-richtext-prose :where(h1,h2,h3),
.pb-richtext--prose-sm .sb-richtext-prose :where(h1,h2,h3),
.sb-richtext--prose-sm .pb-richtext-prose :where(h1,h2,h3) {
    font-size: 1.05em;
}

.sb-richtext--prose-md .sb-richtext-prose :where(h1,h2,h3),
.pb-richtext--prose-md .pb-richtext-prose :where(h1,h2,h3),
.pb-richtext--prose-md .sb-richtext-prose :where(h1,h2,h3),
.sb-richtext--prose-md .pb-richtext-prose :where(h1,h2,h3) {
    font-size: 1.1em;
}

.sb-richtext--prose-lg .sb-richtext-prose :where(h1,h2,h3),
.pb-richtext--prose-lg .pb-richtext-prose :where(h1,h2,h3),
.pb-richtext--prose-lg .sb-richtext-prose :where(h1,h2,h3),
.sb-richtext--prose-lg .pb-richtext-prose :where(h1,h2,h3) {
    font-size: 1.15em;
}

/* ---------------------------------------------------------
   Prose spacing presets via CSS variables
   --------------------------------------------------------- */

.sb-richtext--space-tight,
.pb-richtext--space-tight {
    --sb-prose-p: .45rem;
    --sb-prose-h: .5rem;
    --sb-prose-li: .2rem;
}

.sb-richtext--space-normal,
.pb-richtext--space-normal {
    --sb-prose-p: .6rem;
    --sb-prose-h: .6rem;
    --sb-prose-li: .25rem;
}

.sb-richtext--space-airy,
.pb-richtext--space-airy {
    --sb-prose-p: .85rem;
    --sb-prose-h: .75rem;
    --sb-prose-li: .35rem;
}

/* Apply spacing to common elements inside the rich HTML */
.sb-richtext .sb-richtext-prose :where(h1,h2,h3),
.pb-richtext .pb-richtext-prose :where(h1,h2,h3),
.pb-richtext .sb-richtext-prose :where(h1,h2,h3),
.sb-richtext .pb-richtext-prose :where(h1,h2,h3) {
    margin-top: var(--sb-prose-h, .6rem);
    margin-bottom: var(--sb-prose-h, .6rem);
}

.sb-richtext .sb-richtext-prose p,
.pb-richtext .pb-richtext-prose p,
.pb-richtext .sb-richtext-prose p,
.sb-richtext .pb-richtext-prose p {
    margin: var(--sb-prose-p, .6rem) 0;
}

.sb-richtext .sb-richtext-prose :where(ul,ol),
.pb-richtext .pb-richtext-prose :where(ul,ol),
.pb-richtext .sb-richtext-prose :where(ul,ol),
.sb-richtext .pb-richtext-prose :where(ul,ol) {
    margin: var(--sb-prose-p, .6rem) 0;
    padding-left: 1.25rem;
}

.sb-richtext .sb-richtext-prose :where(li),
.pb-richtext .pb-richtext-prose :where(li),
.pb-richtext .sb-richtext-prose :where(li),
.sb-richtext .pb-richtext-prose :where(li) {
    margin: var(--sb-prose-li, .25rem) 0;
}

/* ---------------------------------------------------------
   Lists style
   --------------------------------------------------------- */

.sb-richtext--lists-bullets .sb-richtext-prose ul,
.pb-richtext--lists-bullets .pb-richtext-prose ul,
.pb-richtext--lists-bullets .sb-richtext-prose ul,
.sb-richtext--lists-bullets .pb-richtext-prose ul {
    list-style: disc;
}

.sb-richtext--lists-bullets .sb-richtext-prose ol,
.pb-richtext--lists-bullets .pb-richtext-prose ol,
.pb-richtext--lists-bullets .sb-richtext-prose ol,
.sb-richtext--lists-bullets .pb-richtext-prose ol {
    list-style: decimal;
}

.sb-richtext--lists-numbers .sb-richtext-prose ul,
.pb-richtext--lists-numbers .pb-richtext-prose ul,
.pb-richtext--lists-numbers .sb-richtext-prose ul,
.sb-richtext--lists-numbers .pb-richtext-prose ul {
    list-style: none;
    padding-left: 0;
}

.sb-richtext--lists-numbers .sb-richtext-prose ol,
.pb-richtext--lists-numbers .pb-richtext-prose ol,
.pb-richtext--lists-numbers .sb-richtext-prose ol,
.sb-richtext--lists-numbers .pb-richtext-prose ol {
    list-style: decimal;
}

.sb-richtext--lists-none .sb-richtext-prose ul,
.sb-richtext--lists-none .sb-richtext-prose ol,
.pb-richtext--lists-none .pb-richtext-prose ul,
.pb-richtext--lists-none .pb-richtext-prose ol,
.pb-richtext--lists-none .sb-richtext-prose ul,
.pb-richtext--lists-none .sb-richtext-prose ol,
.sb-richtext--lists-none .pb-richtext-prose ul,
.sb-richtext--lists-none .pb-richtext-prose ol {
    list-style: none;
    padding-left: 0;
}