/* ============================================================
   Theme 2 — "Monochrome Editorial" (blog/layout overrides)
   Builds on theme1's blog.css, then restyles:
   - Black public site header (no colored accents)
   - Card-grid home layout instead of the magazine columns
   - Neutral category tags, sans-serif titles
   - Black admin sidebar kept, blue accents neutralized
   ============================================================ */
@import url("/static/themes/theme1/blog.css");

body {
    background: #ffffff;
    min-height: 100vh;
}

/* ===== Public site header: solid black top bar ===== */
.site-topbar { background: #000000; color: #e5e5e5; }
.site-logo-mark { color: #ffffff; }
.site-logo-text { color: #ffffff; letter-spacing: -0.01em; font-weight: 700; }
.site-logo-text strong { font-weight: 800; }
.site-topnav-link { color: #d4d4d4; }
.site-topnav-link:hover { color: #ffffff; }
.site-topnav-strong { color: #ffffff; }
.site-subscribe {
    background: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
    border-radius: 9999px;
}
.site-subscribe:hover { background: #e5e5e5; border-color: #e5e5e5; color: #000000; }

/* Category row: white, neutral hovers */
.site-catbar { background: #ffffff; border-bottom: 1px solid #ececec; box-shadow: none; }
.site-cat { color: #333333; }
.site-cat:hover { color: #000000; }
.site-search-btn { color: #333333; }
.site-search-btn:hover { color: #000000; }
.site-search-box input:focus { border-color: #000000; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

/* ===== Home: light hero band + article card grid ===== */
.home-layout {
    display: block;
    max-width: 1120px;
    margin: 0 auto 64px;
    padding: 0 20px;
}

/* Turn the three columns into a responsive card grid stacked in one flow. */
.home-col { min-width: 0; }
.home-featured { margin-bottom: 8px; }

/* Section heading tabs -> plain uppercase labels */
.col-heading { border-top: none; height: auto; margin: 28px 0 16px; }
.col-heading span {
    position: static;
    background: none;
    color: #6b6b6b;
    padding: 0;
    clip-path: none;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}
.col-heading-popular span { clip-path: none; }

/* Featured card: flat, rounded image, sans-serif title */
.feat-image { border-radius: 12px; aspect-ratio: 16 / 9; }
.feat-cat {
    background: #f2f2f2;
    color: #111111;
    clip-path: none;
    border-radius: 6px;
    font-weight: 700;
}
.feat-body { border-bottom: 1px solid #ececec; }
.feat-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #111111;
}
.feat-body a:hover .feat-title { color: #000000; }
.feat-sec-thumb { border-radius: 10px; }
.feat-sec-title { font-family: 'Inter', sans-serif; font-weight: 700; color: #111111; }
.feat-sec-item:hover .feat-sec-title { color: #000000; }

/* Latest / Popular side items: card-like rows */
.side-thumb { border-radius: 8px; width: 84px; height: 60px; flex-basis: 84px; }
.side-title { font-family: 'Inter', sans-serif; color: #111111; }
.side-item:hover .side-title { color: #000000; }
.kicker-cat:hover { color: #000000; }

/* ===== Category tags & links: neutral, no blue ===== */
.kicker-cat { color: #6b6b6b; }
.post-cat-tag {
    background: #f2f2f2;
    color: #111111;
    clip-path: none;
    border-radius: 6px;
    font-weight: 700;
}
.post-cat-tag:hover { background: #e5e5e5; }

/* ===== Category listing page: sans-serif, roomier ===== */
.category-title { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.cat-thumb { border-radius: 10px; }
.cat-item-title { font-family: 'Inter', sans-serif; font-weight: 700; color: #111111; }
.cat-item:hover .cat-item-title { color: #000000; }

/* ============================================================
   Single post — Monochrome Editorial article layout
   Single centered column, centered header (date + big title),
   full-width hero, "Share this article" row, bottom category.
   ============================================================ */

/* Collapse the two-column layout into one narrow centered column. */
.post-layout {
    display: block;
    max-width: 860px;
    margin: 0 auto 64px;
    padding: 0 20px;
}
.post-aside { display: none; }
.post-main { min-width: 0; }

/* Hide breadcrumbs (editorial post has none at the top). */
.post-article .breadcrumbs { display: none; }

/* Centered header: date first, then big bold title. Hide top cat tag + byline avatar. */
.post-header {
    text-align: center;
    max-width: 820px;
    margin: 24px auto 28px;
}
.post-header .post-cat-tag { display: none; }
.post-byline { justify-content: center; }
.post-byline .byline-avatar { display: none; }
.post-byline .byline-meta { align-items: center; text-align: center; }
.post-byline .byline-by { display: none; }
.byline-published { color: #6b6b6b; font-size: 0.9rem; }
.post-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #111111;
    font-size: 2.6rem;
    line-height: 1.15;
    margin-top: 10px;
}

/* Full-width hero, flat (wider than the text column). */
.post-hero {
    max-width: 860px;
    margin: 0 auto 8px;
    border-radius: 0;
    box-shadow: none;
}
.post-hero img { border-radius: 0; }

/* Centered reading column for the article body + footer. Wider editorial
   width (~820px) so text and tables use more of the page. */
.post-content,
.post-footer {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.post-content { font-size: 1.05rem; color: #1a1a1a; }
.post-content h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 1.7rem;
    margin: 36px 0 12px;
}
.post-content h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 28px 0 10px;
}
.post-content a { color: #000000; text-decoration: underline; }
.post-content blockquote { border-left-color: #000000; background: #f6f6f6; }

/* Data tables: flat editorial style with light header row. */
.data-table { border: 1px solid #ececec; }
.data-table th { background: #f6f6f6; color: #111111; border-color: #ececec; }
.data-table td { border-color: #ececec; }
.data-table tr:nth-child(even) td { background: #ffffff; }

/* ===== "Share this article" row (theme2-only markup) ===== */
.theme2-share {
    text-align: center;
    max-width: 820px;
    margin: 20px auto 36px;
}
.theme2-share-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b6b6b;
    margin-bottom: 12px;
}
.theme2-share-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.theme2-share-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.theme2-share-links a:hover { background: #e2e2e2; }
.theme2-share-links svg { width: 18px; height: 18px; }

/* ===== Bottom category block (theme2-only markup) ===== */
.theme2-category {
    max-width: 820px;
    margin: 40px auto 0;
}
.theme2-category h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #111111;
    margin-bottom: 14px;
}
.theme2-category .post-cat-tag {
    display: inline-block;
    background: #eef2ff;
    color: #1d4ed8;
    border-radius: 6px;
}

/* ===== Related Articles grid (theme2-only markup) ===== */
.theme2-related {
    max-width: 820px;
    margin: 48px auto 0;
}
.theme2-related-head {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #111111;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.theme2-related-head span {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b6b6b;
}
.theme2-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.theme2-rel-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #111111;
    text-decoration: none;
    color: #ffffff;
}
.theme2-rel-media { position: absolute; inset: 0; }
.theme2-rel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}
.theme2-rel-noimg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2b2b2b, #111111);
}
.theme2-rel-card:hover .theme2-rel-media img { transform: scale(1.04); }
/* Dark gradient scrim so overlaid text stays readable on any image. */
.theme2-rel-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);
}
.theme2-rel-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.theme2-rel-tag {
    background: #ffffff;
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: capitalize;
}
.theme2-rel-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}
.theme2-rel-date { font-size: 0.8rem; color: #d4d4d4; }

@media (max-width: 780px) {
    .theme2-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .theme2-related-grid { grid-template-columns: 1fr; }
}

/* Newsletter block: flatter, neutral. */
.newsletter-box { border-radius: 12px; }

/* Prev/Next cards: hairline border, neutral. */
.nav-card { border-color: #ececec; }
.breadcrumbs a { color: #000000; }

/* Newsletter + aside CTAs -> black */
.newsletter-box { background: #f6f6f6; border-color: #ececec; }
.aside-signup-btn,
.newsletter-form button,
.subscribe-modal-btn,
.contributor-btn {
    background: #000000;
    border-radius: 9999px;
}
.aside-signup-btn:hover,
.subscribe-modal-btn:hover:not(:disabled),
.contributor-btn:hover:not(:disabled) {
    background: #333333;
    transform: none;
    box-shadow: none;
}
.subscribe-modal-input:focus,
.aside-signup input:focus { border-color: #000000; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }

/* ===== Admin: keep dark sidebar, neutralize blue accents ===== */
.admin-nav-link.active { border-left-color: #ffffff; }
.btn-add,
.btn-manage,
.upload-progress-fill { background: #000000; }
.btn-add:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.data-table th { color: #111111; }

/* ===== Responsive card grid for the home lists ===== */
@media (min-width: 981px) {
    /* Present Latest & Popular as a single 3-up card grid under the feature. */
    #latest-list, #popular-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .side-item {
        flex-direction: column;
        border-bottom: none;
        padding: 0;
    }
    .side-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        flex-basis: auto;
    }
    .side-meta { margin-top: 10px; }
}