/* Extra Info content styling (prefix: mw-ei-*).

   Reproduces the look of the legacy hand-authored VolunteerInfo HTML, but driven by a wrapper class
   + semantic elements instead of inline styles. Authors write clean HTML (headings, lists, paragraphs)
   plus the `.mw-strong` utility for primary-colored emphasis; the wrapper supplies the typography.

   Applied to BOTH the account-page render (MwExtraInfoPanels) and the config preview
   (MwLocalizedMarkupEditor), so what an admin sees while authoring matches what volunteers see.

   This is also the styling contract a future TipTap WYSIWYG editor targets: its toolbar maps to the
   same elements/classes (e.g. a "highlight" button emits `<strong class="mw-strong">`), so the editor
   can be layered on top without changing how content is stored or rendered. */

.mw-ei-content {
    font-size: 1.125rem;
    line-height: 1.75;
}

/* Themed headings — the legacy content colored every <h3> with the primary color. */
.mw-ei-content h1,
.mw-ei-content h2,
.mw-ei-content h3,
.mw-ei-content h4 {
    color: var(--mud-palette-primary);
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.mw-ei-content h3 {
    font-size: 1.25rem;
}

.mw-ei-content p {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.mw-ei-content ul,
.mw-ei-content ol {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

.mw-ei-content li {
    margin-top: 0.25rem;
}

.mw-ei-content a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* Indentation block — HTML equivalent of the legacy `<div style="margin-left:1rem">` section wrappers.
   Use `<div class="mw-ei-indent">…</div>`. */
.mw-ei-content .mw-ei-indent {
    margin-left: 1rem;
}

/* Colored bold — the HTML/CSS equivalent of the <MWStrong> component (MudText Color="Primary" + <strong>).
   Use `<strong class="mw-strong">…</strong>` (or on any inline element) for primary-colored emphasis.
   Defined unscoped so it also works in plain previews and anywhere rich content is rendered. */
.mw-strong {
    color: var(--mud-palette-primary);
    font-weight: 700;
}