/* ==========================================
   Blog — listing page + article typography
   Loaded after css/nav.css, which defines the
   shared colour variables and the navbar.
   ========================================== */

:root {
    --color-accent: #3b82f6;
    --blog-measure: 680px;   /* comfortable reading width */
    --blog-wide:    900px;   /* matches .nav-container */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Heebo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.7;
    padding-top: var(--nav-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[lang="en"] body { font-family: 'Inter', sans-serif; }

img { max-width: 100%; display: block; }

.blog-container {
    max-width: var(--blog-wide);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================
   Listing page
   ========================================== */

.blog-header {
    padding: 64px 0 40px;
}

.blog-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    display: inline-block;
    position: relative;
    letter-spacing: -0.01em;
}

.blog-header h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    inset-inline-start: 0;
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
}

.blog-header p {
    margin-top: 24px;
    color: var(--color-text-light);
    max-width: var(--blog-measure);
}

.post-list {
    list-style: none;
    padding-bottom: 80px;
    display: grid;
    gap: 20px;
}

.post-card {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 26px 28px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.post-card:hover {
    box-shadow: 0 6px 24px rgba(26, 42, 74, 0.10);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.post-meta {
    font-size: 0.75rem;
    color: var(--color-text-light);
    letter-spacing: 0.03em;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.post-meta .sep { opacity: 0.4; }

.post-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.45;
    margin: 8px 0 6px;
}

.post-card p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.7;
}

.post-lang-badge {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
}

.blog-empty {
    color: var(--color-text-light);
    font-style: italic;
}

/* ==========================================
   Article page
   ========================================== */

.post {
    max-width: var(--blog-measure);
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.post-header {
    padding-bottom: 28px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--color-border);
}

.post-header h1 {
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.post-lede {
    font-size: 1.08rem;
    color: var(--color-text-light);
    line-height: 1.75;
    margin-bottom: 18px;
}

/* ── Body copy ───────────────────────────── */

.post-body > * + * { margin-top: 22px; }

.post-body p {
    font-size: 1.06rem;
    line-height: 1.85;
    color: #374151;
}

.post-body h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    margin-top: 44px;
}

.post-body h3 {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 32px;
}

.post-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: #94a3b8;
    transition: text-decoration-color var(--transition);
}

.post-body a:hover { text-decoration-color: var(--color-accent); }

.post-body strong { font-weight: 600; color: var(--color-text); }

.post-body ul,
.post-body ol {
    padding-inline-start: 1.4em;
    display: grid;
    gap: 10px;
}

.post-body li {
    font-size: 1.04rem;
    line-height: 1.8;
    color: #374151;
}

.post-body li::marker { color: var(--color-text-light); }

.post-body blockquote {
    border-inline-start: 3px solid var(--color-accent);
    padding-inline-start: 18px;
    color: var(--color-text-light);
    font-size: 1.04rem;
}

.post-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.86em;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

.post-body pre {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}

.post-body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.86rem;
    line-height: 1.65;
    display: block;
}

/* ── Tables ──────────────────────────────
   A data table is the one piece of article content that legitimately
   wants more width than the reading measure. It scrolls inside its own
   container so the page body never scrolls sideways on a phone. */

.post-body .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.post-body table {
    border-collapse: collapse;
    width: 100%;
    min-width: 540px;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.post-body th,
.post-body td {
    padding: 11px 14px;
    text-align: start;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.post-body thead th {
    background: var(--color-bg-alt);
    font-weight: 600;
    color: var(--color-primary);
}

.post-body tbody tr:last-child td { border-bottom: none; }
.post-body tbody tr:hover { background: var(--color-bg-alt); }

/* The row the article tells you to stop on. This has to be visible at a
   glance while scrolling past — a 2% tint off white reads as nothing, so
   the fill is a real amber and the leading edge carries a solid bar. */
.post-body tbody tr.row-highlight {
    background: #fef3c7;
    font-weight: 600;
    color: #713f12;
}

.post-body tbody tr.row-highlight:hover { background: #fde68a; }

.post-body tbody tr.row-highlight td:first-child {
    box-shadow: inset 3px 0 0 0 #f59e0b;
}

html[dir="rtl"] .post-body tbody tr.row-highlight td:first-child {
    box-shadow: inset -3px 0 0 0 #f59e0b;
}

/* ── Inline highlight (==text== in the Markdown) ── */
.post-body mark {
    background: #eff6ff;
    color: var(--color-text);
    padding: 2px 7px;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ── Sign-off after the closing rule ── */
.post-body .post-signoff {
    font-size: 0.98rem;
    color: var(--color-text-light);
}

.post-body .post-signoff em { font-style: italic; }

.post-body figure { margin-top: 32px; }

.post-body figure img {
    border-radius: 10px;
    border: 1px solid var(--color-border);
    width: 100%;
}

.post-body figcaption {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--color-text-light);
    text-align: center;
}

.post-body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-top: 40px;
}

/* ── Footer of an article ────────────────── */

.post-footer {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.back-link {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition);
}

.back-link:hover { color: var(--color-primary); }

.back-link .arrow { display: inline-block; }
html[dir="rtl"] .back-link .arrow { transform: scaleX(-1); }

.post-share {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.post-share a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================
   Site footer (reused from the home page)
   ========================================== */

.footer {
    padding: 40px 0;
    border-top: 1px solid var(--color-border);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-links { display: flex; gap: 16px; }

.footer-links a {
    color: var(--color-text-light);
    transition: color var(--transition);
    display: flex;
}

.footer-links a:hover { color: var(--color-primary); }

.footer-copy {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
    .blog-header { padding: 44px 0 32px; }
    .post { padding: 40px 22px 64px; }
    .post-card { padding: 22px 20px; }
    .blog-container { padding: 0 20px; }
    .post-body p,
    .post-body li { font-size: 1rem; }
}