/* Markdown rendering styles — applied to .markdown-body wrapper.
   Used in admin preview and customer-facing news detail pages.
   Theme: dark, gold accents, fits QoC V3 design system. */

.markdown-body {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.7;
    word-wrap: break-word;
}
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }

/* ── Headings ─────────────────────────────────────────────── */
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    color: var(--gold);
    font-weight: 600;
    line-height: 1.3;
    margin: 1.5em 0 0.5em;
}
.markdown-body h1 { font-size: 1.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.markdown-body h2 { font-size: 1.35em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border); }
.markdown-body h3 { font-size: 1.15em; }
.markdown-body h4 { font-size: 1em; color: var(--text); }
.markdown-body h5 { font-size: 0.95em; color: var(--text-secondary); }
.markdown-body h6 { font-size: 0.85em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Paragraphs / inline ─────────────────────────────────── */
.markdown-body p { margin: 0 0 1em; }
.markdown-body strong { color: var(--text); font-weight: 700; }
.markdown-body em { font-style: italic; }
.markdown-body del, .markdown-body s { color: var(--muted); text-decoration: line-through; }
.markdown-body u { text-decoration: underline; }

/* Mark (==text==) */
.markdown-body mark {
    background: rgba(212,175,55,0.25);
    color: var(--gold-light);
    padding: 0 0.15em;
    border-radius: 2px;
}

/* Underline wrappers — rentry emits inline style for color/type/thickness.
   We only need to ensure the base <u> defaults to visible underline. */
.markdown-body u { text-decoration: underline; text-underline-offset: 2px; }

/* Links */
.markdown-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.markdown-body a:hover { color: var(--gold-light); }

/* ── Lists ───────────────────────────────────────────────── */
.markdown-body ul, .markdown-body ol { margin: 0 0 1em; padding-left: 2em; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body li > p { margin: 0.25em 0; }
.markdown-body li > ul, .markdown-body li > ol { margin: 0.25em 0; }

/* ── Blockquote / greentext ──────────────────────────────── */
.markdown-body blockquote {
    margin: 0 0 1em;
    padding: 0.5em 1em;
    border-left: 3px solid var(--border);
    color: var(--text-secondary);
    background: var(--bg-soft);
    border-radius: 0 4px 4px 0;
}
.markdown-body blockquote > :first-child { margin-top: 0; }
.markdown-body blockquote > :last-child { margin-bottom: 0; }
.markdown-body blockquote blockquote { margin: 0.5em 0; }
.markdown-body .greentext { color: #789922; font-style: italic; }

/* ── Code ────────────────────────────────────────────────── */
.markdown-body code {
    background: var(--bg-soft);
    color: var(--gold-light);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.9em;
}
.markdown-body pre {
    margin: 0 0 1em;
    padding: 1em;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.5;
}
.markdown-body pre code {
    background: transparent;
    padding: 0;
    color: var(--text);
    font-size: 0.875em;
}

/* ── Tables ──────────────────────────────────────────────── */
.markdown-body table {
    border-collapse: collapse;
    margin: 0 0 1em;
    width: auto;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.markdown-body th, .markdown-body td {
    border: 1px solid var(--border);
    padding: 0.5em 0.75em;
    text-align: left;
}
.markdown-body th { background: var(--bg-soft); color: var(--gold); font-weight: 600; }
.markdown-body tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* ── HR / images / checkboxes ────────────────────────────── */
.markdown-body hr {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 2em 0;
}
.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: inline-block;
}
.markdown-body input[type="checkbox"] {
    margin-right: 0.4em;
    vertical-align: middle;
    accent-color: var(--gold);
    pointer-events: none;
}

/* ── Admonitions ─────────────────────────────────────────── */
.markdown-body .admonition {
    margin: 0 0 1em;
    padding: 0.75em 1em;
    border-left: 4px solid var(--border);
    background: var(--bg-soft);
    border-radius: 0 4px 4px 0;
}
.markdown-body .admonition-title {
    font-weight: 700;
    margin: 0 0 0.4em;
    color: var(--text);
    font-size: 0.95em;
}
.markdown-body .admonition-note    { border-left-color: #3498db; }
.markdown-body .admonition-info    { border-left-color: #17a2b8; }
.markdown-body .admonition-warning { border-left-color: #f39c12; background: rgba(243,156,18,0.07); }
.markdown-body .admonition-danger  { border-left-color: #e74c3c; background: rgba(231,76,60,0.07); }

/* ── Alignment divs (rentry ->center<- / ->right->) ─────── */
.markdown-body .rentry-align-center { text-align: center; }
.markdown-body .rentry-align-right  { text-align: right; }

/* Floats (#left / #right) */
.markdown-body .rentry-float-left  { float: left;  margin: 0 1em 0.5em 0; max-width: 50%; }
.markdown-body .rentry-float-right { float: right; margin: 0 0 0.5em 1em; max-width: 50%; }
.markdown-body .rentry-clearfix::after { content: ""; display: table; clear: both; }

/* ── Spoiler (!>text!) ───────────────────────────────────── */
.markdown-body .rentry-spoiler {
    background: var(--text);
    color: transparent;
    border-radius: 3px;
    padding: 0 0.3em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.markdown-body .rentry-spoiler:hover,
.markdown-body .rentry-spoiler:focus {
    background: var(--bg-soft);
    color: var(--text);
    outline: none;
}

/* ── TOC ([TOC] / [TOC2..6]) ─────────────────────────────── */
.markdown-body .rentry-toc {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1em 1.25em;
    margin: 0 0 1.5em;
}
.markdown-body .rentry-toc-title {
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 0.5em;
    font-size: 0.95em;
}
.markdown-body .rentry-toc ul { margin: 0; padding-left: 1.5em; list-style: none; }
.markdown-body .rentry-toc li { margin: 0.2em 0; }
.markdown-body .rentry-toc a { color: var(--text-secondary); text-decoration: none; }
.markdown-body .rentry-toc a:hover { color: var(--gold); }
.markdown-body .rentry-toc .toc-h2 { padding-left: 0.5em; }
.markdown-body .rentry-toc .toc-h3 { padding-left: 1em; }
.markdown-body .rentry-toc .toc-h4 { padding-left: 1.5em; }
.markdown-body .rentry-toc .toc-h5 { padding-left: 2em; }
.markdown-body .rentry-toc .toc-h6 { padding-left: 2.5em; }

/* ── Color classes (rentry fallback for %red% etc.) ──────── */
.markdown-body .rentry-color-red    { color: #e74c3c; }
.markdown-body .rentry-color-green  { color: #3ecf6e; }
.markdown-body .rentry-color-blue   { color: #3498db; }
.markdown-body .rentry-color-yellow { color: #f1c40f; }
.markdown-body .rentry-color-orange { color: #f39c12; }
.markdown-body .rentry-color-purple { color: #9b59b6; }
.markdown-body .rentry-color-pink   { color: #e91e63; }
.markdown-body .rentry-color-gray   { color: var(--muted); }