/* Rendered user markdown content: the readme/changelog/FAQ-answer/forum-post typography,
   YouTube embeds, and the copy/code-block action buttons — split out of style.css. Not
   scoped to one page; Markdown::renderSafe() output is shared by mod readmes, changelogs,
   FAQ answers and forum posts alike. */

.mod-readme { margin: 1rem 0; padding: 1.25rem; overflow-x: auto; }
.mod-readme h1:first-child { margin-top: 0; }
.mod-readme h1, .mod-readme h2, .mod-readme h3,
.mod-readme h4, .mod-readme h5, .mod-readme h6 { margin: 1.2em 0 0.5em; }
.mod-readme h1 { font-size: 1.4rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.3em; }
.mod-readme h2 { font-size: 1.15rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.2em; }
.mod-readme p  { margin: 0.7em 0; }
.mod-readme ul, .mod-readme ol { padding-left: 1.5rem; margin: 0.5em 0; }
.mod-readme pre { background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.75rem 1rem; overflow-x: auto; margin: 0.75em 0; }
.mod-readme pre code { background: none; border: none; padding: 0; font-size: 0.875rem; }
.mod-readme img { max-width: 100%; height: auto; }
/* Not scoped to .mod-readme — Markdown::renderSafe() is shared by FAQ, changelogs and
   forum posts too, so a YouTube-link paragraph can turn into this embed anywhere. */
.md-youtube-embed { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 0.7em 0; }
.md-youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 6px; }
.md-youtube-caption { margin-top: 0.3em; font-size: 0.85em; opacity: 0.75; }
.mod-readme table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
.mod-readme table th,
.mod-readme table td { border: 1px solid var(--clr-border); padding: 0.35rem 0.6rem; }
.mod-readme blockquote { border-left: 3px solid var(--clr-border); padding-left: 0.75rem; margin-left: 0; color: var(--clr-text-muted); }
.post-body p { margin: 0.5em 0; }
.post-body ul, .post-body ol { padding-left: 1.5em; margin: 0.4em 0; }
.post-body code { font-family: monospace; font-size: 0.9em; background: color-mix(in srgb, var(--clr-border) 50%, transparent); padding: 0.1em 0.3em; border-radius: 3px; }
.post-body pre { background: color-mix(in srgb, var(--clr-border) 50%, transparent); padding: 0.75em 1em; border-radius: var(--radius-small); overflow-x: auto; margin: 0.5em 0; }
.post-body pre code { background: none; padding: 0; }
.post-body blockquote { border-left: 3px solid var(--clr-border); margin: 0.5em 0; padding: 0.1em 0.75em; color: var(--clr-text-muted); }
.post-body a { color: var(--clr-link); }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { margin: 0.75em 0 0.25em; font-size: 1em; font-weight: 600; }
.code-block-wrap { position: relative; margin: 0.75em 0; }
.mod-readme pre, .post-body pre { margin: 0; }
.code-actions { position: absolute; top: 0.35rem; right: 0.35rem; display: flex; gap: 0.2rem; opacity: 0; transition: opacity 0.15s; z-index: 1; }
.code-block-wrap:hover .code-actions { opacity: 1; }
.code-action-btn { display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); color: var(--clr-text-muted); cursor: pointer; transition: color 0.1s, background 0.1s; }
.code-action-btn:hover { color: var(--clr-text); background: color-mix(in srgb, var(--clr-border) 40%, var(--clr-surface)); }
.code-action-btn svg { width: 0.85rem; height: 0.85rem; pointer-events: none; }