/*
 * blog-content.css — Default styling for markdown-rendered blog content.
 *
 * Include in your blog post template:
 *   <link rel="stylesheet" href="/lib-static/css/blog-content.css">
 *
 * Apply the `.blog-content` class to the container that holds {{ post.html | safe }}.
 * All rules are scoped to `.blog-content` so they won't leak into the rest of the site.
 */

/* ── TABLES ─────────────────────────────────────────────────── */
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.92rem;
}
.blog-content thead th {
    text-align: left;
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(120, 200, 255, 0.2);
}
.blog-content tbody td {
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid rgba(120, 200, 255, 0.08);
    line-height: 1.65;
}
.blog-content tbody tr:hover td {
    background: rgba(0, 212, 255, 0.03);
}

/* ── CODE BLOCKS (fenced) ───────────────────────────────────── */
.blog-content pre {
    margin: 1.5rem 0;
    padding: 1.5rem 2rem;
    overflow-x: auto;
    border-left: 3px solid rgba(0, 212, 255, 0.5);
    border-radius: 0;
    font-size: 0.88rem;
    line-height: 1.65;
}
.blog-content pre code {
    padding: 0;
    background: none;
    font-size: inherit;
    color: inherit;
}

/* ── INLINE CODE ────────────────────────────────────────────── */
.blog-content code {
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.88em;
    padding: 0.15em 0.45em;
    border-radius: 3px;
}

/* ── IMAGES ─────────────────────────────────────────────────── */
.blog-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem 0;
}

/* ── BLOCKQUOTES ────────────────────────────────────────────── */
.blog-content blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
}

/* ── HORIZONTAL RULES ───────────────────────────────────────── */
.blog-content hr {
    border: none;
    margin: 2.5rem 0;
}

/* ── TASK LISTS ─────────────────────────────────────────────── */
.blog-content ul.contains-task-list,
.blog-content li.task-list-item {
    list-style: none;
}
.blog-content input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* ── STRIKETHROUGH ──────────────────────────────────────────── */
.blog-content del {
    opacity: 0.5;
}