/* 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: 3px solid var(--mud-palette-primary);
    padding: 0.5em 1.1em;
    margin: 1em 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
    border-radius: 0 6px 6px 0;
    color: var(--mud-palette-text-secondary);
}

.mw-content blockquote p:last-child {
    margin-bottom: 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;
}

/* Heading affordances — a hover-revealed ¶ permalink and (opt-in) section-edit pencil, emitted by the
   wiki renderer after the heading text. scroll-margin keeps anchor jumps clear of the app bar. */
.mw-content h1,
.mw-content h2,
.mw-content h3,
.mw-content h4,
.mw-content h5,
.mw-content h6 {
    scroll-margin-top: 80px;
}

.mw-content .mw-heading-anchor,
.mw-content .mw-heading-edit {
    opacity: 0;
    margin-left: 0.4em;
    font-size: 0.7em;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    transition: opacity 0.15s, color 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

.mw-content :is(h1, h2, h3, h4, h5, h6):hover .mw-heading-anchor,
.mw-content :is(h1, h2, h3, h4, h5, h6):hover .mw-heading-edit {
    opacity: 0.75;
}

.mw-content .mw-heading-anchor:hover,
.mw-content .mw-heading-edit:hover {
    opacity: 1;
    color: var(--mud-palette-primary);
}

/* Callouts / admonitions — themed boxed blocks (info | note | tip | success | warning | error). Each
   kind sets --mw-callout-color (a palette var, so dark-mode-correct) and an icon glyph. flow-root
   contains floated images inside the box. */
.mw-content .mw-callout {
    display: flow-root;
    position: relative;
    margin: 1rem 0;
    padding: 0.75em 1em 0.75em 2.7em;
    border-left: 4px solid var(--mw-callout-color, var(--mud-palette-info));
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--mw-callout-color, var(--mud-palette-info)) 8%, transparent);
}

.mw-content .mw-callout::before {
    content: var(--mw-callout-icon, 'ℹ️');
    position: absolute;
    left: 0.8em;
    top: 0.75em;
    font-size: 1em;
    line-height: var(--mw-content-line-height, 1.7);
}

.mw-content .mw-callout > p:last-child,
.mw-content .mw-callout > ul:last-child,
.mw-content .mw-callout > ol:last-child {
    margin-bottom: 0;
}

.mw-content .mw-callout--info    { --mw-callout-color: var(--mud-palette-info);      --mw-callout-icon: 'ℹ️'; }
.mw-content .mw-callout--note    { --mw-callout-color: var(--mud-palette-secondary); --mw-callout-icon: '📝'; }
.mw-content .mw-callout--tip     { --mw-callout-color: var(--mud-palette-tertiary);  --mw-callout-icon: '💡'; }
.mw-content .mw-callout--success { --mw-callout-color: var(--mud-palette-success);   --mw-callout-icon: '✅'; }
.mw-content .mw-callout--warning { --mw-callout-color: var(--mud-palette-warning);   --mw-callout-icon: '⚠️'; }
.mw-content .mw-callout--error   { --mw-callout-color: var(--mud-palette-error);     --mw-callout-icon: '⛔'; }

/* Collapsible sections — the renderer emits a native <details class="mw-collapsible"><summary>; the
   editor renders the same classes on an always-open <div> (native details would toggle shut while
   editing), so these rules are element-agnostic. */
.mw-content .mw-collapsible {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    margin: 1rem 0;
    overflow: hidden;
}

.mw-content .mw-collapsible-summary {
    cursor: pointer;
    padding: 0.5em 1em;
    font-weight: 600;
    background: var(--mud-palette-background-gray);
    list-style-position: inside;
}

.mw-content details.mw-collapsible[open] > .mw-collapsible-summary {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-content .mw-collapsible-content {
    padding: 0.75em 1em;
}

.mw-content .mw-collapsible-content > p:last-child {
    margin-bottom: 0;
}

/* Editor variant — the div-based collapsible is always open while editing; mark the summary with a
   chevron so authors recognize it will collapse for readers. */
.mw-content div.mw-collapsible > .mw-collapsible-summary::before {
    content: '▾ ';
    color: var(--mud-palette-text-secondary);
}

.mw-content div.mw-collapsible > .mw-collapsible-summary {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: text;
}

/* Task lists — the first selector block styles the renderer's output (.mw-task-list), the
   [data-type="taskList"] twins style TipTap's editor DOM (li > label > input, div). */
.mw-content ul.mw-task-list,
.mw-content ul[data-type='taskList'] {
    list-style: none;
    padding-left: 0.25rem;
}

.mw-content .mw-task-item,
.mw-content ul[data-type='taskList'] > li {
    display: flex;
    gap: 0.55em;
    align-items: baseline;
}

.mw-content .mw-task-item input[type='checkbox'],
.mw-content ul[data-type='taskList'] input[type='checkbox'] {
    accent-color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.mw-content .mw-task-item-body,
.mw-content ul[data-type='taskList'] > li > div {
    flex: 1;
    min-width: 0;
}

.mw-content .mw-task-item-body > p,
.mw-content ul[data-type='taskList'] > li > div > p {
    margin-bottom: 0.25rem;
}

.mw-content .mw-task-item--checked .mw-task-item-body,
.mw-content ul[data-type='taskList'] > li[data-checked='true'] > div {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

/* Footnotes — [n] superscript references plus the generated references list at the article end. The
   .mw-footnote-chip is the editor's placeholder chip ([*], click to edit). */
.mw-content sub,
.mw-content sup {
    line-height: 1;
}

.mw-content .mw-footnote-ref a {
    text-decoration: none;
    font-weight: 600;
}

.mw-content .mw-footnote-chip {
    color: var(--mud-palette-primary);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.mw-content .mw-footnotes {
    margin-top: 2.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 0.75rem;
    font-size: 0.9em;
}

.mw-content .mw-footnotes-title {
    font-weight: 600;
    color: var(--mw-content-heading-color, var(--mud-palette-primary));
    margin-bottom: 0.4rem;
}

.mw-content .mw-footnotes ol {
    padding-left: 1.75rem;
    margin-bottom: 0;
}

.mw-content .mw-footnotes li {
    scroll-margin-top: 80px;
}

.mw-content .mw-footnote-back {
    text-decoration: none;
    margin-right: 0.3em;
}

/* 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;
}