/*
  OneRouter — Blog Post Detail Styles
  Depends on global.css (reset, buttons, animations).
*/

/* ===== LAYOUT ===== */
.blog-post-page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 7rem 2rem 4rem;
}

/* ===== BREADCRUMB ===== */
.blog-post-breadcrumb {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8125rem;
    margin-bottom: 2rem;
    color: #8b8b8b;
}
.blog-post-breadcrumb a {
    color: #5c5c5c;
    text-decoration: none;
    transition: color .15s;
}
.blog-post-breadcrumb a:hover { color: #0a0a0a; }
.blog-post-breadcrumb span { color: #b0b0aa; }

/* ===== ARTICLE HEADER ===== */
.blog-post-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eaeae6;
}
.blog-post-header__tags {
    display: flex; flex-wrap: wrap; gap: .375rem;
    margin-bottom: 1rem;
}
.blog-post-header__tag {
    font-size: .65rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: #4a6fa5;
    background: #e8edf5;
    padding: .2rem .6rem; border-radius: .375rem;
}
.blog-post-header h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 500; letter-spacing: -.025em;
    line-height: 1.15;
}
.blog-post-header__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    font-size: .8125rem; color: #8b8b8b;
}
.blog-post-header__meta-dot {
    width: .25rem; height: .25rem;
    border-radius: 50%;
    background: #d5d5cf;
}

/* ===== CONTENT WITH SIDEBAR ===== */
.blog-post-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

/* ===== PROSE ===== */
.blog-post-prose {
    min-width: 0;
    font-size: .9375rem;
    line-height: 1.8;
    color: #3a3a3a;
}
.blog-post-prose h2 {
    font-size: 1.375rem; font-weight: 500;
    letter-spacing: -.0125em;
    margin: 2.5rem 0 .75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eaeae6;
    color: #0a0a0a;
}
.blog-post-prose h2:first-child { border-top: none; padding-top: 0; }
.blog-post-prose h3 {
    font-size: 1.125rem; font-weight: 500;
    letter-spacing: -.0125em;
    margin: 1.75rem 0 .5rem;
    color: #1a1a1a;
}
.blog-post-prose p { margin: 0 0 1.25rem; }
.blog-post-prose a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.blog-post-prose a:hover { color: #1d4ed8; }
.blog-post-prose strong { color: #0a0a0a; font-weight: 500; }
.blog-post-prose blockquote {
    margin: 1.5rem 0; padding: 1rem 1.5rem;
    border-left: 3px solid #d5d5cf;
    background: #fafaf9;
    border-radius: 0 .5rem .5rem 0;
    color: #5c5c5c;
}
.blog-post-prose pre {
    border-radius: .75rem;
    background: #1a1a1a;
    color: #e5e5e0;
    padding: 1.25rem;
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.65;
}
.blog-post-prose pre code { background: none; padding: 0; color: inherit; }
.blog-post-prose :not(pre) > code {
    background: #f0f0ee;
    border-radius: .375rem;
    padding: .125rem .375rem;
    font-size: .85em;
    color: #b45309;
}
.blog-post-prose ul, .blog-post-prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.blog-post-prose li { margin-bottom: .375rem; }
.blog-post-prose img { border-radius: .75rem; margin: 1.5rem 0; }
.blog-post-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .875rem; }
.blog-post-prose th, .blog-post-prose td { border: 1px solid #e5e5e0; padding: .5rem .75rem; text-align: left; }
.blog-post-prose th { background: #f5f4f1; font-weight: 500; }

/* ===== TOC SIDEBAR ===== */
.blog-post-toc {
    display: none;
}
.blog-post-toc__title {
    font-size: .7rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: #8b8b8b;
    margin: 0 0 .75rem;
}
.blog-post-toc__list {
    list-style: none; padding: 0; margin: 0;
    border-left: 1px solid #e5e5e0;
}
.blog-post-toc__item {
    display: block;
    padding: .25rem 0 .25rem 1rem;
    font-size: .8125rem;
    color: #8b8b8b;
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: all .15s;
}
.blog-post-toc__item:hover { color: #0a0a0a; }
.blog-post-toc__item.is-active { color: #2563eb; border-left-color: #2563eb; font-weight: 500; }
.blog-post-toc__item--h3 { padding-left: 1.75rem; font-size: .75rem; }

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
    .blog-post-page { padding-top: 8rem; }
}

@media (min-width: 1024px) {
    .blog-post-body {
        grid-template-columns: 1fr 220px;
    }
    .blog-post-toc {
        display: block;
        position: sticky;
        top: 6rem;
    }
}

/* ===== DARK MODE ===== */
.dark .blog-post-breadcrumb a { color: #9b9b94; }
.dark .blog-post-breadcrumb a:hover { color: #f3f3f3; }
.dark .blog-post-breadcrumb span { color: #7a7a72; }
.dark .blog-post-header { border-color: rgba(255,255,255,.08); }
.dark .blog-post-header h1 { color: #f3f3f3; }
.dark .blog-post-header__meta { color: #7a7a72; }
.dark .blog-post-header__meta-dot { background: rgba(255,255,255,.1); }
.dark .blog-post-header__tag { background: rgba(59,130,246,.15); }
.dark .blog-post-prose { color: #9b9b94; }
.dark .blog-post-prose h2 { color: #f3f3f3; border-color: rgba(255,255,255,.08); }
.dark .blog-post-prose h3 { color: #e5e5e0; }
.dark .blog-post-prose strong { color: #e5e5e0; }
.dark .blog-post-prose blockquote { background: #1a1a1a; border-color: rgba(255,255,255,.1); color: #7a7a72; }
.dark .blog-post-prose pre { background: #111; }
.dark .blog-post-prose :not(pre) > code { background: rgba(255,255,255,.06); color: #fcd34d; }
.dark .blog-post-prose a { color: #60a5fa; }
.dark .blog-post-prose th { background: #1a1a1a; }
.dark .blog-post-prose th, .dark .blog-post-prose td { border-color: rgba(255,255,255,.06); }
.dark .blog-post-toc__list { border-color: rgba(255,255,255,.08); }
.dark .blog-post-toc__item { color: #7a7a72; }
.dark .blog-post-toc__item:hover { color: #f3f3f3; }
.dark .blog-post-toc__item.is-active { color: #60a5fa; border-left-color: #60a5fa; }