/* ============================================
   Blog Public Styles
   Clean, readable, standalone from app UI
   ============================================ */

:root {
    --blog-text: #1a1a2e;
    --blog-text-muted: #5a5e6e;
    --blog-bg: #f8f9fa;
    --blog-surface: #ffffff;
    --blog-border: #e0e0e0;
    --blog-accent: #e94560;
    --blog-accent-hover: #d63851;
    --blog-link: #0f3460;
}

[data-bs-theme="dark"] {
    --blog-text: #e0e0e0;
    --blog-text-muted: #9a9eae;
    --blog-bg: #0f0f17;
    --blog-surface: #1a1a2e;
    --blog-border: #2a2a3e;
    --blog-accent: #e94560;
    --blog-accent-hover: #ff6b81;
    --blog-link: #6ea8fe;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--blog-text);
    background-color: var(--blog-bg);
    line-height: 1.7;
}

/* -- Navbar -- */
.blog-nav {
    background: var(--blog-surface);
    border-bottom: 1px solid var(--blog-border);
    padding: 1rem 0;
}
.blog-nav .brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--blog-text);
    text-decoration: none;
}
.blog-nav .brand span {
    color: var(--blog-accent);
}

/* -- Post Cards (Index) -- */
.post-card {
    background: var(--blog-surface);
    border: 1px solid var(--blog-border);
    border-radius: 8px;
    transition: box-shadow 0.2s;
}
.post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.post-card a {
    text-decoration: none;
    color: inherit;
}
.post-card .post-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--blog-text);
    margin-bottom: 0.5rem;
}
.post-card .post-excerpt {
    color: var(--blog-text-muted);
    font-size: 0.95rem;
}
.post-card .post-meta {
    font-size: 0.85rem;
    color: var(--blog-text-muted);
}
.post-card .featured-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* -- Single Post -- */
.post-header {
    margin-bottom: 2rem;
}
.post-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.post-header .post-meta {
    color: var(--blog-text-muted);
    font-size: 0.9rem;
}

.post-body {
    font-size: 1.05rem;
    max-width: 720px;
}
.post-body h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2rem; }
.post-body h3 { font-size: 1.3rem; font-weight: 600; margin-top: 1.5rem; }
.post-body p { margin-bottom: 1.25rem; }
.post-body a { color: var(--blog-link); }
.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1rem 0;
}
.post-body blockquote {
    border-left: 4px solid var(--blog-accent);
    padding: 0.5rem 1rem;
    margin: 1.5rem 0;
    color: var(--blog-text-muted);
    background: var(--blog-surface);
    border-radius: 0 6px 6px 0;
}
.post-body pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
}
.post-body code {
    font-size: 0.9em;
}
.post-body p code {
    background: var(--blog-border);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.88em;
}

/* -- Footer -- */
.blog-footer {
    border-top: 1px solid var(--blog-border);
    padding: 2rem 0;
    margin-top: 3rem;
    color: var(--blog-text-muted);
    font-size: 0.85rem;
}
.blog-footer a {
    color: var(--blog-text-muted);
    text-decoration: none;
}