/* Custom styles for prose/markdown content rendered from blog posts and wiki articles */

.prose-kebos {
    color: #c0d8c0;
    line-height: 1.75;
    font-size: 1rem;
}

.prose-kebos h1,
.prose-kebos h2,
.prose-kebos h3,
.prose-kebos h4 {
    color: #ffffff;
    font-weight: 700;
    margin-top: 1.75em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}

.prose-kebos h1 { font-size: 1.875rem; }
.prose-kebos h2 { font-size: 1.5rem; border-bottom: 1px solid #1c2c1c; padding-bottom: 0.4em; }
.prose-kebos h3 { font-size: 1.25rem; }

.prose-kebos p {
    margin-bottom: 1em;
}

.prose-kebos a {
    color: #58bb00;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose-kebos a:hover {
    color: #7dd620;
}

.prose-kebos ul,
.prose-kebos ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.prose-kebos ul { list-style-type: disc; }
.prose-kebos ol { list-style-type: decimal; }

.prose-kebos li {
    margin-bottom: 0.25em;
}

.prose-kebos code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
    background: #121f12;
    border: 1px solid #1c2c1c;
    border-radius: 4px;
    padding: 0.15em 0.4em;
    color: #7dd620;
}

.prose-kebos pre {
    background: #070c07;
    border: 1px solid #1c2c1c;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.25em;
}

.prose-kebos pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    color: #ddeedd;
}

.prose-kebos blockquote {
    border-left: 3px solid #58bb00;
    margin-left: 0;
    padding-left: 1rem;
    color: #7a9a7a;
    font-style: italic;
    margin-bottom: 1em;
}

.prose-kebos hr {
    border: none;
    border-top: 1px solid #1c2c1c;
    margin: 2em 0;
}

.prose-kebos table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25em;
}

.prose-kebos th,
.prose-kebos td {
    border: 1px solid #1c2c1c;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.prose-kebos th {
    background: #0e1810;
    color: #ffffff;
    font-weight: 600;
}

.prose-kebos img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #1c2c1c;
    margin: 0.5rem 0;
    height: auto;
}

/* Small inline icons (e.g. skill icons ~24px wide from OSRS wiki) render inline */
.prose-kebos p img {
    display: inline;
    vertical-align: middle;
    border: none;
    border-radius: 2px;
    margin: 0 0.25rem;
}

/* Standalone images (paragraph containing only an image) render centred */
.prose-kebos p:has(> img:only-child) {
    text-align: center;
}

.prose-kebos p:has(> img:only-child) img {
    display: inline-block;
    max-height: 320px;
    width: auto;
}

/* Embedded video */
.prose-kebos video {
    width: 100%;
    border-radius: 8px;
    margin: 1.5rem 0;
    background: #000;
}

.prose-kebos iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    margin: 1.5rem 0;
    border: none;
}

/* Heading anchors generated by CommonMark HeadingAnchorExtension */
.prose-kebos h2,
.prose-kebos h3,
.prose-kebos h4 {
    position: relative;
}

.prose-kebos h2 a[id],
.prose-kebos h3 a[id],
.prose-kebos h4 a[id] {
    color: inherit;
    text-decoration: none;
}

.prose-kebos h2:hover > a[id]::before,
.prose-kebos h3:hover > a[id]::before,
.prose-kebos h4:hover > a[id]::before {
    content: "# ";
    color: #58bb00;
    font-weight: 400;
    opacity: 0.6;
    position: absolute;
    left: -1.5rem;
    font-size: 0.85em;
}


::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #070c07; }
::-webkit-scrollbar-thumb { background: #1c3a1c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #58bb00; }

/* Selection colour */
::selection {
    background: rgba(88, 187, 0, 0.3);
    color: #ffffff;
}

/* Hide scrollbar while preserving scroll functionality */
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ── EasyMDE dark theme ───────────────────────────────────────────────────── */
.EasyMDEContainer .CodeMirror {
    background: #070c07;
    color: #ddeedd;
    border: 1px solid #1c2c1c;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.7;
}

.EasyMDEContainer .CodeMirror-scroll {
    min-height: 320px;
}

.EasyMDEContainer .CodeMirror-cursor {
    border-left-color: #58bb00;
}

.EasyMDEContainer .CodeMirror-selected {
    background: rgba(88, 187, 0, 0.2);
}

.editor-toolbar {
    background: #0e1810;
    border: 1px solid #1c2c1c;
    border-bottom: 1px solid #1c2c1c;
    border-radius: 8px 8px 0 0;
    opacity: 1;
}

.editor-toolbar button,
.editor-toolbar i.separator {
    color: #7a9a7a !important;
    border: none;
}

.editor-toolbar button:hover,
.editor-toolbar button.active {
    background: #1c2c1c;
    color: #58bb00 !important;
    border-color: #1c2c1c;
}

.editor-toolbar i.separator {
    border-left-color: #1c2c1c;
    border-right-color: transparent;
}

.editor-preview,
.editor-preview-side {
    background: #070c07;
    color: #c0d8c0;
    border: 1px solid #1c2c1c;
}

.editor-preview h1, .editor-preview h2, .editor-preview h3,
.editor-preview-side h1, .editor-preview-side h2, .editor-preview-side h3 {
    color: #ffffff;
    font-weight: 700;
}

.editor-preview h2, .editor-preview-side h2 {
    border-bottom: 1px solid #1c2c1c;
    padding-bottom: 0.3em;
}

.editor-preview table, .editor-preview-side table {
    border-collapse: collapse;
    width: 100%;
}

.editor-preview th, .editor-preview td,
.editor-preview-side th, .editor-preview-side td {
    border: 1px solid #1c2c1c;
    padding: 0.4rem 0.6rem;
}

.editor-preview th, .editor-preview-side th {
    background: #0e1810;
    color: #ffffff;
}

.editor-preview a, .editor-preview-side a { color: #58bb00; }

.editor-preview code, .editor-preview-side code {
    background: #121f12;
    border: 1px solid #1c2c1c;
    border-radius: 3px;
    padding: 0.1em 0.35em;
    color: #7dd620;
    font-size: 0.875em;
}

.editor-preview pre, .editor-preview-side pre {
    background: #070c07;
    border: 1px solid #1c2c1c;
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.editor-preview blockquote, .editor-preview-side blockquote {
    border-left: 3px solid #58bb00;
    padding-left: 1rem;
    color: #7a9a7a;
    font-style: italic;
}

/* Fullscreen & split-screen - applied without parent scope so they win over CodeMirror defaults */
.CodeMirror-fullscreen {
    background: #070c07 !important;
    color: #ddeedd !important;
    top: 50px !important; /* sit below the fullscreen toolbar */
}

.editor-toolbar.fullscreen {
    background: #0e1810 !important;
    border: none !important;
    border-bottom: 1px solid #1c2c1c !important;
    z-index: 100000 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    opacity: 1 !important;
}

/* Hide the site navbar when editor is in fullscreen so it doesn't overlap */
body:has(.editor-toolbar.fullscreen) header {
    display: none !important;
}

.editor-preview.fullscreen,
.editor-preview-side.fullscreen,
.editor-preview-side {
    background: #070c07 !important;
    color: #c0d8c0 !important;
    border-color: #1c2c1c !important;
}

/* Ensure split-screen side preview headings/tables stay dark */
.editor-preview-side h1, .editor-preview-side h2, .editor-preview-side h3 {
    color: #ffffff !important;
}

.editor-preview-side th {
    background: #0e1810 !important;
    color: #ffffff !important;
}

.editor-preview-side td {
    border-color: #1c2c1c !important;
}

/* CodeMirror internal scroll/gutter in fullscreen */
.CodeMirror-fullscreen .CodeMirror-scroll,
.CodeMirror-fullscreen .CodeMirror-gutters {
    background: #070c07 !important;
}

.CodeMirror-fullscreen .CodeMirror-cursor {
    border-left-color: #58bb00 !important;
}

.CodeMirror-fullscreen .CodeMirror-selected,
.CodeMirror-fullscreen .CodeMirror-line::selection,
.CodeMirror-fullscreen .CodeMirror-line > span::selection {
    background: rgba(88, 187, 0, 0.2) !important;
}

/* CodeMirror syntax colours */
.cm-s-default .cm-header { color: #7dd620; font-weight: bold; }
.cm-s-default .cm-quote { color: #7a9a7a; font-style: italic; }
.cm-s-default .cm-strong { color: #ddeedd; font-weight: bold; }
.cm-s-default .cm-em { color: #c0d8c0; font-style: italic; }
.cm-s-default .cm-link { color: #58bb00; }
.cm-s-default .cm-url { color: #4aa000; }