/*********************************************
   BLOG VISUAL ENHANCEMENTS - v1.0
   Prism.js + Chart.js + Mermaid.js
   Conditionally loaded - zero impact on clean posts
*********************************************/

/* ── PRISM.JS CODE HIGHLIGHTING ──────────── */
/* Dark theme code blocks on white blog background */
.acp-wrap pre[class*="language-"] {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
    border-radius: 10px !important;
    padding: 1.4em !important;
    font-size: 0.88rem !important;
    margin: 2em 0 !important;
    overflow-x: auto;
    border: 1px solid #333 !important;
}
.acp-wrap code[class*="language-"] {
    color: #d4d4d4 !important;
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Consolas, monospace !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}
.acp-wrap pre[class*="language-"]::before {
    display: none !important;
}
/* Inline code */
.acp-wrap :not(pre) > code {
    background: #f0f0f0 !important;
    color: #d63384 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.875em !important;
}

/* ── MERMAID.JS DIAGRAM STYLES ───────────── */
.acp-wrap pre.mermaid,
.acp-wrap pre.mermaid-svg {
    background: #1a1a2e !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    margin: 2em auto !important;
    border: 1px solid rgba(40, 204, 205, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
.acp-wrap pre.mermaid svg,
.acp-wrap pre.mermaid-svg svg {
    max-width: 100% !important;
    height: auto !important;
}

/* ── CHART.JS STATS BOX ──────────────────── */
.acp-stats-chart-wrap {
    width: 100%;
    max-width: 320px;
    margin: 18px auto 0;
    position: relative;
}
.acp-stats-chart-wrap canvas {
    max-height: 120px;
}

/* ── RESPONSIVE ADJUSTMENTS ──────────────── */
@media (max-width: 768px) {
    .acp-wrap pre[class*="language-"] {
        font-size: 0.82rem !important;
        padding: 1em !important;
    }
    .acp-stats-chart-wrap {
        max-width: 260px;
    }
}
@media (max-width: 480px) {
    .acp-wrap pre[class*="language-"] {
        font-size: 0.78rem !important;
        padding: 0.8em !important;
    }
}