/*
 * Long-form content rendered from Markdown (learning modules, lab tasks).
 * Apply with <article class="prose">. Only styles plain HTML elements produced by Markdig.
 */

.prose {
    max-width: var(--prose-max);
    font-size: var(--text-base);
    line-height: 1.7;
}

.prose h1 {
    margin-bottom: var(--space-5);
    font-size: var(--text-3xl);
}

.prose h2 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
}

.prose h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

.prose > :first-child {
    margin-top: 0;
}

.prose ul,
.prose ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
}

.prose li {
    margin-bottom: var(--space-1);
}

.prose li::marker {
    color: var(--course-color);
}

.prose ol > li::marker {
    color: var(--color-text-muted);
    font-weight: 600;
}

.prose strong {
    font-weight: 600;
}

/* Inline code: looks like a Zabbix key you could copy */
.prose :not(pre) > code {
    padding: 0.05em 0.35em;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-muted);
    color: var(--color-text);
    font-size: 0.875em;
    overflow-wrap: anywhere;
}

/* In tables, code must not shrink a column below its words (e.g. a parameter name); long values still wrap */
.prose td > code {
    overflow-wrap: break-word;
}

.prose pre {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    overflow-x: auto;
    border-radius: var(--radius-md);
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.prose pre code {
    font-size: inherit;
}

/* Tables scroll horizontally on small screens */
.prose table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 0 var(--space-5);
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    border-spacing: 0;
    background-color: var(--color-surface-raised);
    font-size: var(--text-sm);
}

.prose th,
.prose td {
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    text-align: left;
    vertical-align: top;
}

.prose th {
    background-color: var(--color-surface);
    font-weight: 600;
    white-space: nowrap;
}

.prose tr:last-child td {
    border-bottom: 0;
}

/* Blockquotes in modules are used as "Merke" hints: a yellow signal plate */
.prose blockquote {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-left: var(--rule-width) solid var(--color-warning);
    border-radius: var(--radius-md);
    background-color: var(--color-warning-soft);
}

.prose blockquote > :last-child {
    margin-bottom: 0;
}

.prose hr {
    margin: var(--space-6) 0;
    border: 0;
    border-top: var(--border-width) solid var(--color-border-subtle);
}