/* ════════════════════════════════════════════════════════════
   editorjs-content.css
   Shared typography for rendered Editor.js output.
   Used inside .editorjs-content wrapper on all Blog Single
   and Project Single templates (all 5 style variants).
   Include this ONE file once in header.php, or link it from
   each single-page template — see integration note at bottom.
════════════════════════════════════════════════════════════ */

.editorjs-content {
    color: var(--text2);
    font-size: inherit;
    line-height: inherit;
    word-wrap: break-word;
}

/* ── Paragraphs ── */
.editorjs-content p {
    margin: 0 0 1.3em;
    line-height: 1.85;
}
.editorjs-content p:last-child { margin-bottom: 0; }

/* ── Headings ── */
.editorjs-content h1,
.editorjs-content h2,
.editorjs-content h3,
.editorjs-content h4,
.editorjs-content h5,
.editorjs-content h6 {
    color: var(--text);
    font-weight: 800;
    line-height: 1.3;
    margin: 1.8em 0 0.7em;
    scroll-margin-top: 100px; /* so #anchor jumps don't hide under sticky header */
}
.editorjs-content h1:first-child,
.editorjs-content h2:first-child,
.editorjs-content h3:first-child { margin-top: 0; }

.editorjs-content h1 { font-size: 1.7em; letter-spacing: -.02em; }
.editorjs-content h2 {
    font-size: 1.4em;
    letter-spacing: -.015em;
    padding-bottom: .35em;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.editorjs-content h2::before {
    content: '';
    width: 4px;
    height: 1em;
    background: var(--primary);
    border-radius: 2px;
    flex-shrink: 0;
}
.editorjs-content h3 { font-size: 1.18em; color: var(--primary); }
.editorjs-content h4 { font-size: 1.05em; }
.editorjs-content h5,
.editorjs-content h6 { font-size: .95em; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); }

/* ── Links ── */
.editorjs-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
    text-underline-offset: 3px;
    font-weight: 600;
    transition: text-decoration-color .15s, color .15s;
}
.editorjs-content a:hover {
    text-decoration-color: var(--primary);
}

/* ── Bold / Italic / Inline code / Marker ── */
.editorjs-content strong,
.editorjs-content b { color: var(--text); font-weight: 800; }
.editorjs-content em,
.editorjs-content i { color: var(--text2); }
.editorjs-content code {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: #7dd3fc;
    padding: .15em .45em;
    border-radius: 5px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: .87em;
}
.editorjs-content mark,
.editorjs-content .cdx-marker {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--text);
    padding: .05em .2em;
    border-radius: 3px;
}

/* ── Lists ── */
.editorjs-content ul,
.editorjs-content ol {
    margin: 0 0 1.3em;
    padding-left: 1.5em;
    line-height: 1.85;
}
.editorjs-content ul { list-style: none; }
.editorjs-content ul > li { position: relative; padding-left: 4px; margin-bottom: .5em; }
.editorjs-content ul > li::before {
    content: '';
    position: absolute;
    left: -1.1em;
    top: .65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}
.editorjs-content ol { list-style: none; counter-reset: ej-ol; }
.editorjs-content ol > li {
    counter-increment: ej-ol;
    position: relative;
    padding-left: 4px;
    margin-bottom: .5em;
}
.editorjs-content ol > li::before {
    content: counter(ej-ol) '.';
    position: absolute;
    left: -1.6em;
    color: var(--primary);
    font-weight: 700;
    min-width: 1.4em;
}
.editorjs-content li ul,
.editorjs-content li ol { margin: .5em 0 0; }

/* ── Blockquote ── */
.editorjs-content blockquote {
    margin: 1.6em 0;
    padding: 1em 1.3em;
    border-left: 4px solid var(--primary);
    background: var(--bg3);
    border-radius: 0 10px 10px 0;
    font-size: 1.05em;
    color: var(--text);
}
.editorjs-content blockquote p { margin-bottom: .5em; font-style: italic; }
.editorjs-content blockquote p:last-of-type { margin-bottom: 0; }
.editorjs-content blockquote cite {
    display: block;
    margin-top: .6em;
    font-size: .78em;
    font-style: normal;
    font-weight: 700;
    color: var(--text3);
}
.editorjs-content blockquote cite::before { content: '— '; }

/* ── Code block (multi-line) ── */
.editorjs-content pre {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1em 1.3em;
    margin: 1.6em 0;
    overflow-x: auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.editorjs-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: #7dd3fc;
    font-size: .86em;
    line-height: 1.65;
    white-space: pre;
}

/* ── Table ── */
.editorjs-content .ej-table-wrap {
    overflow-x: auto;
    margin: 1.6em 0;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.editorjs-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88em;
}
.editorjs-content table th,
.editorjs-content table td {
    padding: .65em .9em;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: left;
    color: var(--text2);
}
.editorjs-content table th:last-child,
.editorjs-content table td:last-child { border-right: none; }
.editorjs-content table thead th {
    background: var(--bg3);
    color: var(--primary);
    font-weight: 700;
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.editorjs-content table tbody tr:last-child td { border-bottom: none; }
.editorjs-content table tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }

/* ── Images / Figures ── */
.editorjs-content figure.ej-image {
    margin: 1.8em 0;
    text-align: center;
}
.editorjs-content figure.ej-image img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    display: inline-block;
}
.editorjs-content figure.ej-image--border img {
    border: 1px solid var(--border);
}
.editorjs-content figure.ej-image--background {
    background: var(--bg3);
    padding: 1.5em;
    border-radius: 16px;
}
.editorjs-content figure.ej-image--stretched img {
    width: 100%;
}
.editorjs-content figure.ej-image figcaption {
    margin-top: .7em;
    font-size: .8em;
    color: var(--text3);
    font-style: italic;
}

/* ── Delimiter ── */
.editorjs-content hr.ej-delimiter {
    border: none;
    text-align: center;
    margin: 2.2em 0;
    height: 1em;
}
.editorjs-content hr.ej-delimiter::before {
    content: '• • •';
    color: var(--text3);
    letter-spacing: .5em;
    font-size: .9em;
}

/* ── Checklist ── */
.editorjs-content ul.ej-checklist {
    list-style: none;
    padding-left: 0;
    margin: 1.3em 0;
}
.editorjs-content .ej-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: .6em;
    padding-left: 0;
}
.editorjs-content .ej-checklist__item::before { display: none; }
.editorjs-content .ej-checklist__item-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .7em;
    color: #0f172a;
    margin-top: .15em;
}
.editorjs-content .ej-checklist__item--checked .ej-checklist__item-checkbox {
    background: var(--primary);
    border-color: var(--primary);
}
.editorjs-content .ej-checklist__item--checked .ej-checklist__item-text {
    color: var(--text3);
    text-decoration: line-through;
}

/* ── Warning box ── */
.editorjs-content .ej-warning {
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
    border-radius: 12px;
    padding: 1em 1.3em;
    margin: 1.6em 0;
}
.editorjs-content .ej-warning__title {
    font-weight: 800;
    color: #f59e0b;
    margin-bottom: .4em;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92em;
}
.editorjs-content .ej-warning p { margin: 0; color: var(--text2); }

/* ── Embed (YouTube/Vimeo) ── */
.editorjs-content .ej-embed {
    margin: 1.8em 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.editorjs-content .ej-embed iframe {
    width: 100%;
    display: block;
    border: none;
}
.editorjs-content .ej-embed__caption {
    font-size: .8em;
    color: var(--text3);
    text-align: center;
    padding: .6em 0 0;
    font-style: italic;
}

/* ── Legacy raw-HTML paragraphs (old posts) ── */
.editorjs-content .ej-legacy-html { margin-bottom: 1.3em; }
.editorjs-content .ej-legacy-html h1,
.editorjs-content .ej-legacy-html h2,
.editorjs-content .ej-legacy-html h3 { margin-top: 0; }

/* ── Empty-state placeholder ── */
.editorjs-content .ej-no-content {
    text-align: center;
    padding: 3em 1em;
    color: var(--text3);
    font-style: italic;
    background: var(--bg3);
    border-radius: 12px;
    border: 1px dashed var(--border);
}

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
    .editorjs-content h1 { font-size: 1.5em; }
    .editorjs-content h2 { font-size: 1.28em; }
    .editorjs-content h3 { font-size: 1.1em; }
    .editorjs-content pre { padding: .9em 1em; font-size: .82em; }
    .editorjs-content blockquote { padding: .85em 1em; }
}