/*
================================================================================
BLOG DARK THEME RESTORATION
================================================================================
Restores the black Paper Trail blog theme and overrides older inline light styles.
Keep this stylesheet loaded after blog-v4.css and any critical inline CSS.
================================================================================
*/

:root,
html,
body {
    --color-bg: #050505;
    --color-bg-secondary: #0b0b0b;
    --color-bg-tertiary: #141414;
    --color-text: #f7f7f7;
    --color-text-secondary: #b7b7b7;
    --color-text-tertiary: #7d7d7d;
    --color-border: #242424;
    --color-border-light: #1a1a1a;
    --color-accent: #dc2626;
    --color-accent-hover: #ef4444;
}

html,
body,
.blog-page {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.site-header {
    background: rgba(5, 5, 5, 0.94) !important;
    border-bottom-color: var(--color-border) !important;
}

.category-nav,
.newsletter-strip,
.site-footer,
.references-section,
.article-footer,
.related-posts,
.author-bio,
.post-card,
.search-input-wrapper {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

.icon-btn,
.category-link,
.post-date,
.reading-time,
.reading-time-small,
.author-title,
.post-card-excerpt,
.featured-excerpt,
.newsletter-text,
.article-date,
.article-reading-time,
.article-hero-caption,
.image-caption,
.video-caption,
figcaption,
.article-content blockquote,
.article-body blockquote {
    color: var(--color-text-secondary) !important;
}

.icon-btn:hover,
.category-link:hover,
.category-link.active,
.btn-load-more:hover {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text) !important;
}

.brand,
.nav-blog-title,
.featured-title,
.featured-title a,
.post-card-title,
.section-header h2,
.article-title,
.article-content h1,
.article-content h2,
.article-content h3,
.article-body h1,
.article-body h2,
.article-body h3,
.article-content strong,
.article-body strong,
.author-name,
.author-name-large,
.references-section h3,
.related-posts h3 {
    color: var(--color-text) !important;
}

.post-card-footer,
.references-list li,
.article-content hr,
.article-body hr {
    border-color: var(--color-border-light) !important;
}

.newsletter-input,
input,
textarea,
select {
    background: #101010 !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.newsletter-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-text-tertiary) !important;
}

/* Individual article layout, used by generated post pages. */
.article-header {
    padding: 72px 24px 48px;
    text-align: center;
    background: radial-gradient(circle at top, rgba(220, 38, 38, 0.12), transparent 42%);
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    font-size: 14px;
}

.article-category,
.post-category {
    color: var(--color-accent) !important;
    font-weight: 700;
}

.article-title {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(2.25rem, 6vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    max-width: 980px;
    margin: 0 auto;
}

.article-hero {
    max-width: 1120px;
    margin: 0 auto 56px;
    padding: 0 24px;
}

.article-hero-image,
.featured-image,
.post-card-image,
.image-figure,
.video-embed {
    background: linear-gradient(135deg, #111 0%, #1f1f1f 55%, #3b0b0b 100%) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.article-hero-image {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
}

.article-hero-image img,
.featured-image img,
.post-card-image img,
.image-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-hero-caption {
    text-align: center;
    margin-top: 14px;
    font-size: 14px;
}

.article-content,
.article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.article-content p,
.article-content li,
.article-body p,
.article-body li {
    color: #dedede !important;
    font-size: 17px;
    line-height: 1.85;
}

.article-content p,
.article-body p {
    margin-bottom: 24px;
}

.article-content h2,
.article-body h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.12;
    margin: 56px 0 20px;
}

.article-content h3,
.article-body h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.45rem;
    margin: 36px 0 16px;
}

.article-content ul,
.article-body ul {
    list-style: disc;
    padding-left: 24px;
    margin: 0 0 28px;
}

.article-content blockquote,
.article-body blockquote {
    border-left: 4px solid var(--color-accent) !important;
    background: var(--color-bg-secondary) !important;
    padding: 22px 26px;
    margin: 34px 0;
    border-radius: 0 14px 14px 0;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.55;
}

.article-content a,
.article-body a,
.references-list a {
    color: #f87171 !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.image-figure {
    border-radius: 16px;
    overflow: hidden;
    margin: 40px 0;
}

.image-figure img {
    aspect-ratio: 16 / 9;
}

.image-caption,
.video-caption {
    padding: 12px 16px 16px;
    font-size: 14px !important;
    text-align: center;
}

.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    margin: 40px 0 10px;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cta-box {
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%) !important;
    color: #fff !important;
    border-radius: 18px;
    padding: 32px;
    margin: 48px 0;
    box-shadow: 0 24px 80px rgba(220, 38, 38, 0.18);
}

.cta-box p,
.cta-box h3 {
    color: #fff !important;
}

.btn-primary,
.btn-white {
    background: var(--color-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-white:hover {
    background: var(--color-accent-hover) !important;
}

.btn-load-more {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

@media (max-width: 700px) {
    .article-header { padding-top: 48px; }
    .article-content, .article-body { padding-left: 18px; padding-right: 18px; }
    .article-hero { padding-left: 18px; padding-right: 18px; }
}