/* ============================================================
   kb-article-content.css
   Styles the HTML output from Quill inside .article-body
   Add this to kb.css or load separately on /learn pages
   ============================================================ */

/* ── Base typography ─────────────────────────────────────── */
.article-body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size:   1rem;
    line-height: 1.8;
    color:       #1e293b;
    max-width:   780px;
}

/* ── Headings ────────────────────────────────────────────── */
.article-body h2 {
    font-size:     1.35rem;
    font-weight:   700;
    color:         #0f172a;
    margin:        2rem 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid #f97316;
    display:       inline-block;
    scroll-margin-top: 80px;  /* for TOC anchor links */
}
.article-body h3 {
    font-size:    1.05rem;
    font-weight:  700;
    color:        #1e3a8a;
    margin:       1.5rem 0 .4rem;
    scroll-margin-top: 80px;
}

/* ── Paragraphs & links ──────────────────────────────────── */
.article-body p  { margin-bottom: .9rem; }
.article-body a  { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: #1d4ed8; }

/* ── Lists ───────────────────────────────────────────────── */
.article-body ul,
.article-body ol { margin: .5rem 0 1rem 0; padding-left: 1.4rem; }
.article-body li { margin-bottom: .35rem; }
.article-body ul li::marker { color: #f97316; }
.article-body ol li::marker { color: #f97316; font-weight: 700; }

/* ── Inline code ─────────────────────────────────────────── */
.article-body code {
    background:    #fff7ed;
    color:         #c2410c;
    padding:       2px 6px;
    border-radius: 4px;
    font-size:     .875em;
    font-family:   'Courier New', monospace;
    border:        1px solid #fed7aa;
}

/* ── Code blocks (Quill outputs as <pre class="ql-syntax">) ─ */
.article-body pre,
.article-body pre.ql-syntax {
    background:    #0f172a;
    color:         #e2e8f0;
    padding:       1.1rem 1.25rem;
    border-radius: 10px;
    font-family:   'Courier New', monospace;
    font-size:     .875rem;
    line-height:   1.65;
    overflow-x:    auto;
    margin:        1rem 0;
    border:        none;
}
/* keyword highlight via CSS only */
.article-body pre .kw { color: #f472b6; }
.article-body pre .fn { color: #60a5fa; }
.article-body pre .nm { color: #34d399; }
.article-body pre .cm { color: #6b7280; font-style: italic; }

/* ── Blockquote → Tip box (orange left border) ───────────── */
.article-body blockquote {
    border-left:  3px solid #f97316;
    background:   #fff7ed;
    color:        #7c2d12;
    margin:       1rem 0;
    padding:      .75rem 1rem .75rem 1.1rem;
    border-radius: 0 8px 8px 0;
    font-size:    .925rem;
}
.article-body blockquote::before {
    content: '⊙  ';
    color:   #f97316;
    font-size: 1.05em;
}

/* ── Tables ──────────────────────────────────────────────── */
.article-body table {
    width:           100%;
    border-collapse: collapse;
    margin:          1rem 0 1.5rem;
    font-size:       .9rem;
}
.article-body thead th {
    background:  #f8fafc;
    color:       #475569;
    font-size:   .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding:     .6rem .9rem;
    border-bottom: 2px solid #e2e8f0;
    text-align:  left;
}
.article-body tbody td {
    padding:     .65rem .9rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody tr:hover td     { background: #f8fafc; }

/* ── Horizontal rule ─────────────────────────────────────── */
.article-body hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.5rem 0;
}

/* ── Custom HTML classes (type manually in Quill HTML mode) ─ */

/* Tip box */
.article-body .tip {
    display:      flex;
    gap:          .7rem;
    background:   #eff6ff;
    border:       1px solid #bfdbfe;
    border-left:  3px solid #2563eb;
    border-radius: 0 8px 8px 0;
    padding:      .75rem 1rem;
    margin:       1rem 0;
    font-size:    .9rem;
    color:        #1e3a8a;
}
.article-body .tip::before { content: '💡'; flex-shrink: 0; }

/* Warning box */
.article-body .warning {
    background:  #fff7ed;
    border:      1px solid #fed7aa;
    border-left: 3px solid #f97316;
    border-radius: 0 8px 8px 0;
    padding:     .75rem 1rem;
    margin:      1rem 0;
    font-size:   .9rem;
    color:       #7c2d12;
}
.article-body .warning::before { content: '⚠️  '; }

/* Key point / callout */
.article-body .callout {
    background:  #f0fdf4;
    border:      1px solid #bbf7d0;
    border-left: 3px solid #22c55e;
    border-radius: 0 8px 8px 0;
    padding:     .75rem 1rem;
    margin:      1rem 0;
    font-size:   .9rem;
    color:       #14532d;
}
.article-body .callout::before { content: '✓  '; font-weight: 700; }

/* Formula block */
.article-body .formula {
    background:    #0f172a;
    color:         #e2e8f0;
    padding:       1.25rem 1.5rem;
    border-radius: 10px;
    font-family:   'Courier New', monospace;
    font-size:     .925rem;
    line-height:   1.7;
    margin:        1rem 0;
    overflow-x:    auto;
}
.article-body .formula .label {
    display:      block;
    font-size:    .7rem;
    color:        #64748b;
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.article-body .formula .highlight { color: #f472b6; font-weight: 700; }

/* ── Images ──────────────────────────────────────────────── */
.article-body img {
    max-width:    100%;
    border-radius: 8px;
    margin:       .75rem 0;
    border:       1px solid #e2e8f0;
}

/* ── Strong / em ─────────────────────────────────────────── */
.article-body strong { color: #0f172a; font-weight: 700; }
.article-body em     { color: #475569; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .article-body h2   { font-size: 1.15rem; }
    .article-body h3   { font-size: 1rem; }
    .article-body pre  { font-size: .8rem; padding: .9rem 1rem; }
    .article-body table { font-size: .8rem; }
    .article-body thead th,
    .article-body tbody td { padding: .5rem .6rem; }
}