/* ============================================================
   Smart Content Design — scd-style.css  v1.1.1
   Magazine style for posts & pages
   ------------------------------------------------------------
   v1.1.1 — Mobile visibility fix:
     • Paragraph/bold/strong/h4 color = inherit (theme decides)
     • Dark mode scoped to OUR widgets only — never forces
       light text on theme's white background
     • H2 protected with !important + fallback solid bg
     • TOC mobile = block + full width
   ============================================================ */

/* ── Root variables (theme-friendly) ── */
:root {
    --scd-primary: #1a73e8;
    --scd-primary-dark: #0d47a1;
    --scd-bg-soft: #f0f6ff;
    --scd-bg-card: #f8fbff;
    --scd-border: #d0dff8;
}

/* ═══════════════════════════════════════
   1. META BAR (reading time + word count)
   ═══════════════════════════════════════ */
#scd-meta-bar {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 18px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#scd-meta-bar .scd-meta__item strong { color: #1a3a6e; font-weight: 700; }
#scd-meta-bar .scd-meta__sep { color: #cbd5e1; }

/* ═══════════════════════════════════════
   2. SCOPED CONTENT WRAPPER
   IMPORTANT: do NOT hardcode paragraph text color.
   Use inherit so the theme's color wins → text always
   readable on whatever background the theme provides.
   ═══════════════════════════════════════ */
.scd-content {
    font-size: 16px;
    line-height: 1.8;
    color: inherit;            /* ← was #2d2d2d — caused invisible text on dark themes */
    font-family: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── Intro paragraph (first <p>) — has its OWN bg, so safe ── */
.scd-content .scd-intro {
    font-size: 17px;
    line-height: 1.9;
    color: #1a1a2e;
    border-left: 4px solid var(--scd-primary);
    padding: 14px 20px;
    background: var(--scd-bg-soft);
    border-radius: 0 6px 6px 0;
    margin-bottom: 24px;
    font-weight: 500;
}

/* ── H2 — PROTECTED: !important + fallback solid color ──
   Mobile themes often strip gradient backgrounds with
   `background: #fff !important`. We fight back with our
   own !important + a solid fallback color, so the white
   heading text never sits on a white background.        */
.scd-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff !important;
    background: var(--scd-primary-dark) !important;          /* fallback solid */
    background: linear-gradient(90deg, var(--scd-primary) 0%, var(--scd-primary-dark) 100%) !important;
    padding: 10px 18px;
    border-radius: 6px;
    margin-top: 36px;
    margin-bottom: 16px;
    position: relative;
    scroll-margin-top: 90px;
}
.scd-content h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #fff;
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
    opacity: 0.7;
}

/* ── H3 — own bg, safe ── */
.scd-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--scd-primary-dark) !important;
    border-left: 4px solid var(--scd-primary);
    padding: 4px 12px;
    margin-top: 24px;
    margin-bottom: 12px;
    background: var(--scd-bg-card);
    border-radius: 0 4px 4px 0;
    scroll-margin-top: 90px;
}

/* ── H4 — inherit color (was #333 → invisible on dark themes) ── */
.scd-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: inherit;
    margin-top: 18px;
    margin-bottom: 8px;
    text-decoration: underline;
    text-decoration-color: var(--scd-primary);
    text-underline-offset: 3px;
}

/* ── Paragraphs — DO NOT set color, inherit from theme ── */
.scd-content p {
    margin-bottom: 16px;
    color: inherit;            /* ← was var(--scd-text) → invisible on dark themes */
}

/* ── Links ── */
.scd-content a {
    color: var(--scd-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.scd-content a:hover { color: var(--scd-primary-dark); }

/* ── Bold — inherit (was #1a1a2e → invisible on dark) ── */
.scd-content strong,
.scd-content b {
    color: inherit;
    font-weight: 700;
}

/* ── Lists ── */
.scd-content ul,
.scd-content ol {
    padding-left: 24px;
    margin-bottom: 18px;
}
.scd-content ul li,
.scd-content ol li {
    margin-bottom: 8px;
    line-height: 1.8;
}
.scd-content ul li::marker { color: var(--scd-primary); font-size: 18px; }
.scd-content ol li::marker { color: var(--scd-primary); font-weight: 700; }

/* ── Tip / Note / Warning boxes — own bg, safe ── */
.scd-content .scd-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    margin: 20px 0;
    font-size: 15px;
    line-height: 1.7;
    color: #1a1a2e;
}
.scd-content .scd-box__icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.scd-content .scd-box__body { flex: 1; }
.scd-content .scd-box--tip     { background: #fffde7; border-left: 4px solid #f9a825; }
.scd-content .scd-box--note    { background: #e8f5e9; border-left: 4px solid #43a047; }
.scd-content .scd-box--warning { background: #fff3e0; border-left: 4px solid #e65100; }

/* ── Code / Pre — own bg, safe ── */
.scd-content code,
.scd-content pre {
    background: #f0f4ff;
    border: 1px solid var(--scd-border);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 14px;
    color: #1a3a6e;
    font-family: 'Courier New', monospace;
}
.scd-content pre {
    padding: 14px 18px;
    overflow-x: auto;
    display: block;
    margin: 16px 0;
}

/* ── Blockquote — inherit text color, own bg-light ── */
.scd-content blockquote {
    margin: 20px 0;
    padding: 14px 22px;
    border-left: 4px solid var(--scd-primary);
    background: var(--scd-bg-card);
    color: inherit;
    font-style: italic;
    border-radius: 0 6px 6px 0;
}
.scd-content blockquote p:last-child { margin-bottom: 0; }
.scd-content blockquote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: #888;
    margin-top: 8px;
}

/* ── Images ── */
.scd-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.scd-content figure { margin: 20px 0; }
.scd-content figcaption {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-top: 6px;
}

/* ── Tables ── */
.scd-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow-x: auto;
    display: block;
}
.scd-content table th {
    background: var(--scd-primary);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
}
.scd-content table td {
    padding: 9px 14px;
    border-bottom: 1px solid #e0e8f5;
}
.scd-content table tr:nth-child(even) td { background: #f4f8ff; }

/* ── HR ── */
.scd-content hr {
    border: none;
    border-top: 2px solid #e0e8f5;
    margin: 30px 0;
}

/* ═══════════════════════════════════════
   3. TABLE OF CONTENTS  (multi-level)
   ═══════════════════════════════════════ */
#scd-toc-wrap {
    margin: 0 0 30px;
    scroll-margin-top: 90px;
}
#scd-toc {
    background: var(--scd-bg-card);
    border: 1px solid var(--scd-border);
    border-top: 4px solid var(--scd-primary);
    border-radius: 0 0 8px 8px;
    padding: 16px 20px;
    display: inline-block;
    min-width: 280px;
    max-width: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
#scd-toc .scd-toc__title {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--scd-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
#scd-toc .scd-toc__icon { font-size: 16px; }
#scd-toc .scd-toc__toggle {
    font-size: 12px;
    color: #888;
    margin-left: auto;
    font-weight: normal;
}
#scd-toc ol {
    padding-left: 22px;
    margin: 0;
    list-style: decimal;
}
#scd-toc ol li {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.6;
}
#scd-toc ol.scd-toc__sublist {
    list-style: lower-alpha;
    margin-top: 6px;
    padding-left: 20px;
}
#scd-toc ol.scd-toc__sublist li { font-size: 13px; }
#scd-toc ol li a {
    color: #1a3a6e;
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
    border-left: 2px solid transparent;
    padding-left: 4px;
}
#scd-toc ol li a:hover {
    color: var(--scd-primary);
    text-decoration: underline;
}
#scd-toc ol li a.scd-toc__active {
    color: var(--scd-primary);
    font-weight: 700;
    border-left-color: var(--scd-primary);
    padding-left: 6px;
}

/* ═══════════════════════════════════════
   4. READING PROGRESS BAR
   ═══════════════════════════════════════ */
#scd-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--scd-primary) 0%, var(--scd-primary-dark) 100%);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s;
}

/* ═══════════════════════════════════════
   5. BACK TO TOP BUTTON
   ═══════════════════════════════════════ */
#scd-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--scd-primary);
    color: #fff !important;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s, background 0.2s;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(26,115,232,0.35);
}
#scd-back-to-top.scd-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#scd-back-to-top:hover { background: var(--scd-primary-dark); }

/* ═══════════════════════════════════════
   6. MOBILE RESPONSIVE  (max-width: 600px)
   ------------------------------------------------------------
   Critical fix: TOC must be block + full width so it does
   not stretch the article horizontally and force a white
   background box over the text. Also reduce paddings so the
   article content stays readable on small screens.
   ═══════════════════════════════════════ */
@media (max-width: 600px) {
    .scd-content {
        font-size: 15px;            /* slightly smaller for narrow screens */
        line-height: 1.75;
    }
    .scd-content h2 {
        font-size: 18px;
        padding: 9px 14px;
        margin-top: 28px;
    }
    .scd-content h3 { font-size: 16px; }
    .scd-content h4 { font-size: 15px; }
    .scd-content .scd-intro {
        font-size: 15px;
        padding: 10px 14px;
        margin-bottom: 18px;
    }
    .scd-content p { margin-bottom: 14px; }

    /* TOC: full-width block, never inline-block (causes overflow) */
    #scd-toc {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        min-width: 0 !important;
        padding: 12px 14px;
    }
    #scd-toc ol { padding-left: 18px; }
    #scd-toc ol.scd-toc__sublist { padding-left: 16px; }

    /* Table: horizontal scroll wrapper, don't break layout */
    .scd-content table {
        font-size: 13px;
        max-width: 100%;
    }
    .scd-content table th,
    .scd-content table td { padding: 7px 9px; }

    /* Back-to-top: smaller, no overlap with mobile sticky bars */
    #scd-back-to-top {
        bottom: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    /* Tip boxes: tighter on mobile */
    .scd-content .scd-box {
        padding: 10px 12px;
        font-size: 14px;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════
   7. DARK MODE  (NARROWED — widget-only)
   ------------------------------------------------------------
   v1.1.0 BUG: We forced light paragraph text on
   `prefers-color-scheme: dark`. But many WordPress themes
   do NOT support dark mode → the theme kept rendering a
   white article background → light text + white bg = invisible.
   
   v1.1.1 FIX: Only restyle OUR OWN widgets (TOC, meta-bar,
   code blocks, tip boxes) in dark mode. NEVER override
   paragraph / heading / bold text color — leave that to the
   theme so text is always readable on whatever background
   the theme provides.
   ═══════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    /* TOC */
    #scd-toc {
        background: #1e293b;
        border-color: #334155;
    }
    #scd-toc ol li a { color: #cbd5e1; }
    #scd-toc ol li a:hover { color: #93c5fd; }
    #scd-toc ol li a.scd-toc__active { color: #93c5fd; border-left-color: #93c5fd; }

    /* Meta bar */
    #scd-meta-bar {
        background: #1e293b;
        border-color: #334155;
        color: #9ca3af;
    }
    #scd-meta-bar .scd-meta__item strong { color: #93c5fd; }
    #scd-meta-bar .scd-meta__sep { color: #475569; }

    /* Code blocks — keep readable */
    .scd-content code,
    .scd-content pre {
        background: #1e293b;
        color: #93c5fd;
        border-color: #334155;
    }

    /* Tip / Note / Warning — darken backgrounds, keep dark text */
    .scd-content .scd-box--tip     { background: #4a4400; color: #fff8c4; }
    .scd-content .scd-box--note    { background: #1b3a1f; color: #c4f0c9; }
    .scd-content .scd-box--warning { background: #3d2200; color: #ffd6a8; }

    /* Table even rows */
    .scd-content table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
    .scd-content table td { border-bottom-color: #334155; }

    /* Blockquote bg */
    .scd-content blockquote {
        background: #1e293b;
    }
    .scd-content blockquote cite { color: #9ca3af; }

    /* Figcaption */
    .scd-content figcaption { color: #9ca3af; }

    /* Back-to-top: keep visible */
    #scd-back-to-top { background: var(--scd-primary); color: #fff !important; }
}

/* ═══════════════════════════════════════
   8. PRINT STYLES
   ═══════════════════════════════════════ */
@media print {
    #scd-progress-bar,
    #scd-back-to-top,
    #scd-meta-bar { display: none !important; }
    #scd-toc ol.scd-toc__sublist { display: block !important; }
    .scd-content h2 {
        background: none !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
    }
    .scd-content a { color: #000; text-decoration: underline; }
    .scd-content img { box-shadow: none; }
}

/* ═══════════════════════════════════════
   9. SAFETY NET — defend against themes that
   force white background on article content
   while phone is in dark mode. If the body
   has a known dark theme class, restore light
   text on paragraphs. (Best-effort heuristic.)
   ═══════════════════════════════════════ */
body.dark,
body.dark-mode,
body[data-color-scheme="dark"],
html.dark .scd-content,
.ast-dark-mode .scd-content,
.e-dark-mode .scd-content,
body.scd-dark-theme .scd-content {
    color: #e5e7eb;
}
body.dark .scd-content p,
body.dark-mode .scd-content p,
body[data-color-scheme="dark"] .scd-content p,
html.dark .scd-content p,
.ast-dark-mode .scd-content p,
.e-dark-mode .scd-content p,
body.scd-dark-theme .scd-content p {
    color: #e5e7eb;
}

/* ═══════════════════════════════════════
   10. CRITICAL — JS-DETECTED LIGHT BG FIX
   ------------------------------------------------------------
   When the phone is in dark mode but the theme still renders
   a LIGHT article background (very common with themes that
   don't support prefers-color-scheme), our dark-mode CSS
   would have made paragraph text invisible.
   
   JS measures the actual computed bg luminance; if LIGHT,
   it adds `.scd-force-light-text` to <body>. We then force
   DARK text on everything inside .scd-content so the
   article is always readable on mobile.
   
   These rules MUST come after the dark-mode block above
   so they win the cascade.
   ═══════════════════════════════════════ */
body.scd-force-light-text .scd-content,
body.scd-force-light-text .scd-content p,
body.scd-force-light-text .scd-content strong,
body.scd-force-light-text .scd-content b,
body.scd-force-light-text .scd-content li,
body.scd-force-light-text .scd-content blockquote,
body.scd-force-light-text .scd-content figcaption,
body.scd-force-light-text .scd-content h4 {
    color: #1a1a2e !important;
}

/* In light-bg mode, our widgets stay in their normal light backgrounds */
body.scd-force-light-text #scd-toc {
    background: var(--scd-bg-card);
    border-color: var(--scd-border);
}
body.scd-force-light-text #scd-toc ol li a { color: #1a3a6e; }
body.scd-force-light-text #scd-meta-bar {
    background: #f8fafc;
    border-color: #e5e7eb;
    color: #6b7280;
}
body.scd-force-light-text #scd-meta-bar .scd-meta__item strong { color: #1a3a6e; }
body.scd-force-light-text .scd-content code,
body.scd-force-light-text .scd-content pre {
    background: #f0f4ff;
    color: #1a3a6e;
    border-color: var(--scd-border);
}
body.scd-force-light-text .scd-content .scd-box--tip     { background: #fffde7; color: #1a1a2e; }
body.scd-force-light-text .scd-content .scd-box--note    { background: #e8f5e9; color: #1a1a2e; }
body.scd-force-light-text .scd-content .scd-box--warning { background: #fff3e0; color: #1a1a2e; }
body.scd-force-light-text .scd-content blockquote { background: var(--scd-bg-card); }