/**
 * Custom Rich Text Editor — Display Styles
 * Moodle automatically includes this file on every page.
 * These styles ensure code blocks, snippets, and copy buttons
 * render correctly when students/users VIEW the content.
 *
 * @package editor_customeditor
 */

/* ═══════════════════════════════════════════
   CODE BLOCK — dark theme with copy button
   ═══════════════════════════════════════════ */
pre[data-lang] {
    position: relative;
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 10px;
    padding: 0;
    margin: 1.2em 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #313244;
    font-family: 'IBM Plex Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
}

pre[data-lang] .code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #181825;
    border-bottom: 1px solid #313244;
    font-size: 12px;
}

pre[data-lang] .code-lang {
    color: #a6adc8;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

pre[data-lang] .copy-code-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(205,214,244,0.08);
    border: 1px solid rgba(205,214,244,0.15);
    color: #a6adc8;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 0.15s;
}

pre[data-lang] .copy-code-btn:hover {
    background: rgba(205,214,244,0.15);
    color: #cdd6f4;
}

pre[data-lang] .copy-code-btn.copied {
    color: #16a34a;
    border-color: #16a34a;
}

pre[data-lang] .copy-code-btn svg {
    width: 13px;
    height: 13px;
}

pre[data-lang] code {
    display: block;
    padding: 16px 20px;
    font-family: 'IBM Plex Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

/* Syntax highlighting colors */
.syntax-keyword { color: #cba6f7; }
.syntax-string { color: #a6e3a1; }
.syntax-comment { color: #6c7086; font-style: italic; }
.syntax-function { color: #89b4fa; }
.syntax-number { color: #fab387; }
.syntax-tag { color: #f38ba8; }
.syntax-attr { color: #f9e2af; }


/* ═══════════════════════════════════════════
   INLINE CODE SNIPPET — small badge style
   ═══════════════════════════════════════════ */
.code-snippet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f6f8fa 0%, #edf2f7 100%);
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 3px 6px 3px 10px;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-size: 14px;
    color: #24292f;
    line-height: 1.5;
    white-space: nowrap;
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.code-snippet:hover {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

.code-snippet .snippet-text {
    pointer-events: none;
    user-select: all;
}

.code-snippet .snippet-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(9,105,218,0.08);
    border-radius: 4px;
    cursor: pointer;
    color: #0969da;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.15s;
}

.code-snippet .snippet-copy-btn:hover {
    background: rgba(9,105,218,0.18);
    color: #0550ae;
}

.code-snippet .snippet-copy-btn.copied {
    background: rgba(22,163,74,0.12);
    color: #16a34a;
}

.code-snippet .snippet-copy-btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ═══════════════════════════════════════════
   BLOCK CODE SNIPPET — documentation style
   ═══════════════════════════════════════════ */
.code-snippet-block {
    display: flex;
    align-items: flex-start;
    background: linear-gradient(135deg, #f6f8fa 0%, #edf2f7 100%);
    border: 1px solid #d0d7de;
    border-radius: 8px;
    margin: 0.8em 0;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.code-snippet-block:hover {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.06);
}

.code-snippet-block .snippet-block-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    background: rgba(9,105,218,0.06);
    border-right: 1px solid #d0d7de;
    color: #0969da;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-size: 13px;
    font-weight: 600;
    min-width: 36px;
    align-self: stretch;
    user-select: none;
}

.code-snippet-block .snippet-block-code {
    flex: 1;
    padding: 12px 16px;
    font-family: 'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.65;
    color: #24292f;
    white-space: pre;
    overflow-x: auto;
    user-select: all;
}

.code-snippet-block .snippet-block-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-left: 1px solid #d0d7de;
    cursor: pointer;
    color: #0969da;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    transition: all 0.15s;
    align-self: stretch;
    min-width: 72px;
    white-space: nowrap;
}

.code-snippet-block .snippet-block-copy:hover {
    background: rgba(9,105,218,0.08);
}

.code-snippet-block .snippet-block-copy.copied {
    color: #16a34a;
    background: rgba(22,163,74,0.06);
}

.code-snippet-block .snippet-block-copy svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ═══════════════════════════════════════════
   INLINE CODE (simple backtick style)
   ═══════════════════════════════════════════ */
code:not(pre code):not(.snippet-text) {
    background: rgba(37,99,235,0.08);
    color: #2563eb;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-size: 0.9em;
}


/* ═══════════════════════════════════════════
   BLOCKQUOTE styling
   ═══════════════════════════════════════════ */
blockquote {
    border-left: 4px solid #2563eb;
    margin: 1em 0;
    padding: 12px 20px;
    background: rgba(37,99,235,0.04);
    border-radius: 0 6px 6px 0;
    color: #6b7280;
    font-style: italic;
}


/* ═══════════════════════════════════════════
   TABLE styling
   ═══════════════════════════════════════════ */
.text_to_html table,
.no-overflow table,
[data-region="view-overview"] table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.text_to_html table td,
.text_to_html table th,
.no-overflow table td,
.no-overflow table th {
    border: 1px solid #d1d5db;
    padding: 8px 12px;
}

.text_to_html table th,
.no-overflow table th {
    background: #f4f5f7;
    font-weight: 600;
}


/* ═══════════════════════════════════════════
   CONTENT TYPOGRAPHY — match editor appearance
   These override the Moodle theme's gray/light
   text colors so output looks like the editor
   ═══════════════════════════════════════════ */

/* Main content areas where editor HTML is displayed */
.text_to_html,
.no-overflow,
.content .text_to_html,
#region-main .text_to_html,
[role="main"] .text_to_html,
.generalbox .text_to_html,
.course-content .text_to_html,
.activity-description,
.label .contentwithoutlink,
.modtype_page .contentafterlink,
.box.generalbox,
#page-content .text_to_html,
.editor_customeditor_content {
    color: #1a1a2e;
    font-size: 15px;
    line-height: 1.75;
}

/* Headings — ensure dark, bold, proper sizes */
.text_to_html h1, .no-overflow h1,
#region-main .text_to_html h1,
.generalbox h1 {
    color: #1a1a2e;
    font-size: 2em;
    font-weight: 700;
    margin: 0.67em 0;
    line-height: 1.2;
}

.text_to_html h2, .no-overflow h2,
#region-main .text_to_html h2,
.generalbox h2 {
    color: #1a1a2e;
    font-size: 1.5em;
    font-weight: 700;
    margin: 0.75em 0;
    line-height: 1.3;
}

.text_to_html h3, .no-overflow h3,
#region-main .text_to_html h3,
.generalbox h3 {
    color: #1a1a2e;
    font-size: 1.25em;
    font-weight: 600;
    margin: 0.75em 0;
}

.text_to_html h4, .no-overflow h4,
#region-main .text_to_html h4,
.generalbox h4 {
    color: #1a1a2e;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0.75em 0;
}

.text_to_html h5, .no-overflow h5,
.text_to_html h6, .no-overflow h6 {
    color: #1a1a2e;
    font-weight: 600;
    margin: 0.75em 0;
}

/* Paragraphs and body text — force dark color */
.text_to_html p, .no-overflow p,
#region-main .text_to_html p,
.generalbox p {
    color: #1a1a2e;
    margin: 0.5em 0;
}

/* Lists */
.text_to_html ul, .text_to_html ol,
.no-overflow ul, .no-overflow ol,
#region-main .text_to_html ul,
#region-main .text_to_html ol {
    color: #1a1a2e;
}

.text_to_html li, .no-overflow li {
    color: #1a1a2e;
    margin: 0.25em 0;
}

/* Bold text */
.text_to_html strong, .text_to_html b,
.no-overflow strong, .no-overflow b {
    color: #1a1a2e;
    font-weight: 700;
}

/* Links */
.text_to_html a, .no-overflow a {
    color: #2563eb;
    text-decoration: underline;
}

.text_to_html a:hover, .no-overflow a:hover {
    color: #1d4ed8;
}

/* Horizontal rule */
.text_to_html hr, .no-overflow hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #d1d5db, transparent);
    margin: 1.5em 0;
}

/* Images */
.text_to_html img, .no-overflow img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}



/* ═══════════════════════════════════════════
   HEADING TEMPLATES — display side
   ═══════════════════════════════════════════ */
.heading-tpl-1 { font-size: 2em; font-weight: 800; color: #1a1a2e; border-bottom: 3px solid #2563eb; padding-bottom: 8px; margin: 1em 0 0.5em; }
.heading-tpl-2 { font-size: 1.8em; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); padding: 12px 20px; border-radius: 8px; margin: 1em 0 0.5em; }
.heading-tpl-3 { font-size: 1.8em; font-weight: 700; color: #1a1a2e; border-left: 5px solid #2563eb; padding-left: 16px; margin: 1em 0 0.5em; }
.heading-tpl-4 { font-size: 1.8em; font-weight: 700; color: #1a1a2e; text-align: center; text-transform: uppercase; letter-spacing: 2px; border-top: 2px solid #e5e7eb; border-bottom: 2px solid #e5e7eb; padding: 10px 0; margin: 1em 0 0.5em; }
.heading-tpl-5 { font-size: 1.8em; font-weight: 700; color: #2563eb; background: rgba(37,99,235,0.06); padding: 10px 18px; border-radius: 8px; border: 1px solid rgba(37,99,235,0.15); margin: 1em 0 0.5em; }

.subheading-tpl-1 { font-size: 1.2em; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb; padding-bottom: 6px; margin: 0.8em 0 0.4em; }
.subheading-tpl-2 { font-size: 1.15em; font-weight: 600; color: #fff; background: linear-gradient(135deg, #10b981, #059669); padding: 8px 16px; border-radius: 6px; margin: 0.8em 0 0.4em; }
.subheading-tpl-3 { font-size: 1.15em; font-weight: 600; color: #374151; border-left: 4px solid #f59e0b; padding-left: 12px; margin: 0.8em 0 0.4em; }
.subheading-tpl-4 { font-size: 1.15em; font-weight: 600; color: #6366f1; text-transform: uppercase; letter-spacing: 1.5px; margin: 0.8em 0 0.4em; }
.subheading-tpl-5 { font-size: 1.15em; font-weight: 600; color: #374151; background: #f9fafb; padding: 8px 14px; border-radius: 6px; border: 1px solid #e5e7eb; margin: 0.8em 0 0.4em; }

/* ── Styled Horizontal Rules (display side) ── */
.hr-gradient { border: none; height: 2px; background: linear-gradient(90deg, transparent, #6b7280, transparent); margin: 1em 0; }
.hr-gradient-color { border: none; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); border-radius: 2px; margin: 1em 0; }
.hr-shadow { border: none; height: 1px; background: #d1d5db; box-shadow: 0 2px 4px rgba(0,0,0,0.15); margin: 1em 0; }
.hr-thick { border: none; height: 4px; background: #374151; border-radius: 2px; margin: 1em 0; }

/* ── Default Bundled Fonts ── */
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('fonts/WorkSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

/* ── Malayalam Fonts (bundled) ── */
@font-face { font-family: 'Baloo Chettan 2'; src: url('fonts/BalooChettan2-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Malayalam'; src: url('fonts/NotoSansMalayalam-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Sans Malayalam'; src: url('fonts/NotoSansMalayalam-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Dyuthi'; src: url('fonts/Dyuthi-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mandaram'; src: url('fonts/MANDARAM.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Raghu Malayalam Sans'; src: url('fonts/RaghuMalayalamSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Suruma'; src: url('fonts/Suruma.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thumba'; src: url('fonts/THUMBA.ttf') format('truetype'); font-weight: 400; font-display: swap; }
