/* Central rich-content stylesheet (prefix: mw-content / mw-color / mw-strong).

   THE one place that decides how rich content (wiki pages, info sections, and — later — any shared
   WYSIWYG output) looks. A `.mw-content` wrapper supplies the typography; authors only reach for blocks
   (headings, lists, bold, "bold colored") and never pixel values.

   Variable-driven: every typographic value is a `var(--mw-content-*, <default>)`. The defaults below
   make it work with zero configuration; the tenant "Content styling" settings (Phase 3) inject a
   `:root { --mw-content-*: … }` block at runtime to override them, so tuning is global and instant.

   Colors are NOT typography settings — they come from the MudBlazor theme palette (`--mud-palette-*`)
   and so are automatically theme- and dark-mode-correct. Semantic theme coloring of inline text is
   expressed with the `.mw-color-*` utilities and the `.mw-strong` ("bold colored") class.

   Consumers:
   - the wiki renderer (`MWWikiBlockRenderer` wraps its output in `.mw-content`);
   - ExtraInfo (account render + config preview, now on `.mw-content`);
   - any future shared editor, whose toolbar maps onto these same elements/classes. */

.mw-content {
    font-size: var(--mw-content-body-size, 1.125rem);
    line-height: var(--mw-content-line-height, 1.7);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Headings — themed (the legacy VolunteerInfo colored its headings with the primary color) and scaled
   off the body size so a single body-size slider moves the whole hierarchy proportionally. */
.mw-content h1,
.mw-content h2,
.mw-content h3,
.mw-content h4,
.mw-content h5,
.mw-content h6 {
    color: var(--mw-content-heading-color, var(--mud-palette-primary));
    font-weight: var(--mw-content-heading-weight, 600);
    margin-top: var(--mw-content-heading-spacing, 1rem);
    margin-bottom: 0.25rem;
}

.mw-content h1 {
    font-size: calc(var(--mw-content-body-size, 1.125rem) * var(--mw-content-h1-scale, 2));
}

.mw-content h2 {
    font-size: calc(var(--mw-content-body-size, 1.125rem) * var(--mw-content-h2-scale, 1.5));
}

.mw-content h3 {
    font-size: calc(var(--mw-content-body-size, 1.125rem) * var(--mw-content-h3-scale, 1.25));
}

.mw-content p {
    margin-top: 0;
    margin-bottom: var(--mw-content-paragraph-spacing, 0.75rem);
}

.mw-content ul,
.mw-content ol {
    margin-top: 0;
    margin-bottom: var(--mw-content-paragraph-spacing, 0.75rem);
    padding-left: var(--mw-content-list-indent, 1.5rem);
}

.mw-content li {
    margin-bottom: var(--mw-content-list-spacing, 0.25rem);
}

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

/* Block types carried over from the wiki renderer so they live in the central sheet too. */
.mw-content blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding: 0.5em 1em;
    margin: 0.75em 0;
    background: var(--mud-palette-background-gray);
    border-radius: 0 4px 4px 0;
}

.mw-content pre {
    background: var(--mud-palette-background-gray);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 0.75em;
}

.mw-content pre code {
    background: none;
    padding: 0;
}

.mw-content code {
    background: var(--mud-palette-background-gray);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

.mw-content hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1.5em 0;
}

.mw-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.mw-content mark {
    background-color: #fff3bf;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

/* Tables — full-width by default with a themed header and bordered cells; the wrapper allows a wide
   table to scroll horizontally instead of overflowing the article. `mw-table--auto` shrinks to content
   (used by centered/right-aligned tables); `--center` / `--right` position an auto-width table. */
.mw-content .mw-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
}

.mw-content table.mw-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95em;
}

.mw-content table.mw-table.mw-table--auto {
    width: auto;
}

.mw-content table.mw-table.mw-table--center {
    margin-left: auto;
    margin-right: auto;
}

.mw-content table.mw-table.mw-table--right {
    margin-left: auto;
    margin-right: 0;
}

.mw-content .mw-table th,
.mw-content .mw-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4em 0.7em;
    text-align: left;
    vertical-align: top;
}

.mw-content .mw-table th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
}

/* Internal wiki links — dashed underline that fills in on hover. */
.mw-content .mw-wiki-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--mud-palette-primary);
    transition: border-bottom-style 0.15s;
}

.mw-content .mw-wiki-link:hover {
    border-bottom-style: solid;
}

/* Red-link — an internal link whose target page doesn't exist yet (Wikipedia's red links). */
.mw-content .mw-wiki-link--missing {
    color: var(--mud-palette-error);
    border-bottom-color: var(--mud-palette-error);
}

/* Editor template placeholder (`{{ Property }}`) shown as a chip while authoring. */
.mw-content .template-placeholder {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Indentation block — HTML equivalent of a `<div style="margin-left:1rem">` section wrapper.
   `.mw-ei-indent` is the legacy ExtraInfo alias, kept so content authored before the unification
   still indents. */
.mw-content .mw-content-indent,
.mw-content .mw-ei-indent {
    margin-left: 1rem;
}

/* Semantic theme-color utilities — colored inline text whose color is the theme's, picked by name in
   the editor (never a hex value), so it tracks the palette and dark mode automatically. */
.mw-color-primary {
    color: var(--mud-palette-primary);
}

.mw-color-secondary {
    color: var(--mud-palette-secondary);
}

.mw-color-tertiary {
    color: var(--mud-palette-tertiary);
}

.mw-color-info {
    color: var(--mud-palette-info);
}

.mw-color-success {
    color: var(--mud-palette-success);
}

.mw-color-warning {
    color: var(--mud-palette-warning);
}

.mw-color-error {
    color: var(--mud-palette-error);
}

/* Colored bold — the HTML/CSS twin of the <MWStrong> component (MudText Color="Primary" + <strong>),
   i.e. the "bold colored" block. Defined unscoped so it works anywhere rich content is rendered,
   including plain previews. This is the central definition; other content sheets must not redefine it. */
.mw-strong {
    color: var(--mud-palette-primary);
    font-weight: 700;
}