/* ==============================================
   BLOG — Design System
   Brand: Focus AI
   Accent: #b9ff2e
   Shared by blog/index.php and blog/post.php
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

:root {
    --color-dark:        #0a0a0a;
    --color-dark-2:      #0f0f0f;
    --color-dark-3:      #141414;
    --color-light:       #f4f3ef;
    --color-white:       #ffffff;
    --color-accent:      #b9ff2e;
    --color-accent-dark: #9de022;
    --color-accent-glow: rgba(185, 255, 46, 0.15);
    --color-accent-text: #0a0a0a;
    --color-text-dark:   #1a1a1a;
    --color-text-muted:  rgba(255, 255, 255, 0.50);
    --color-border:      #e8e7e3;
    --color-border-dark: rgba(255, 255, 255, 0.08);

    --font-heading: 'Montserrat', sans-serif;
    --font-brand:   'Michroma', sans-serif;
    --font-body:    'Inter', sans-serif;

    --radius:      8px;
    --radius-lg:   14px;
    --transition:  0.22s ease;
    --max-width:   1080px;
}

/* ==============================================
   RESET
   ============================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-body);
    background: var(--color-dark);
    color: var(--color-white);
    line-height: 1.65;
    overflow-x: hidden;
}

p { line-height: 1.78; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ==============================================
   LAYOUT CONTAINER
   ============================================== */
.blog-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px;
}

.blog-wrap--narrow { max-width: 760px; }

/* ==============================================
   BUTTONS
   ============================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 100px;
    cursor: pointer;
    border: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
}
.btn--primary:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(185, 255, 46, 0.25);
}

/* ==============================================
   TOP NAV BAR
   ============================================== */
.blog-topbar {
    background: var(--color-dark-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0 28px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    gap: 16px;
}

.blog-topbar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--color-white);
    flex-shrink: 0;
}

.blog-topbar__label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    transition: color var(--transition);
}
.blog-topbar__brand:hover .blog-topbar__label { color: var(--color-white); }

.blog-topbar__divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.blog-topbar__site {
    font-family: var(--font-brand);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: lowercase;
    color: var(--color-white);
    white-space: nowrap;
}

.blog-topbar__actions { flex-shrink: 0; }

/* ==============================================
   BLOG HERO (listing page)
   ============================================== */
.blog-hero {
    background: var(--color-dark-3);
    border-bottom: 1px solid var(--color-border-dark);
    padding: 80px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 60%, rgba(185, 255, 46, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 30%, rgba(185, 255, 46, 0.03) 0%, transparent 45%);
    pointer-events: none;
}

.blog-hero__eyebrow {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
    position: relative;
}

.blog-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.06;
    margin-bottom: 1.25rem;
    position: relative;
}

.blog-hero__sub {
    font-size: 1.02rem;
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.75;
    position: relative;
}

/* ==============================================
   BLOG LISTING
   ============================================== */
.blog-listing {
    padding: 72px 0;
    background: var(--color-dark);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-dark-2);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), transform var(--transition);
    cursor: pointer;
}
.post-card:hover {
    border-color: rgba(185, 255, 46, 0.25);
    transform: translateY(-5px);
}

.post-card__date {
    font-size: 0.72rem;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.85rem;
}

.post-card__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--color-white);
    margin-bottom: 0.85rem;
}

.post-card__excerpt {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.72;
    flex: 1;
    margin-bottom: 1.4rem;
}

.post-card__cta {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    transition: letter-spacing var(--transition);
}
.post-card:hover .post-card__cta { letter-spacing: 0.12em; }

/* Empty state */
.blog-empty {
    text-align: center;
    padding: 80px 24px;
    color: rgba(255, 255, 255, 0.4);
}
.blog-empty p {
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

/* ==============================================
   ARTICLE PAGE — HEADER
   ============================================== */
.article-hero {
    background: var(--color-dark-3);
    border-bottom: 1px solid var(--color-border-dark);
    padding: 72px 28px 64px;
    position: relative;
    overflow: hidden;
}

.article-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(185, 255, 46, 0.04) 0%, transparent 55%);
    pointer-events: none;
}

.article-hero__inner {
    max-width: 760px;
    position: relative;
}

.article-hero__date {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-hero__date a {
    color: rgba(255, 255, 255, 0.35);
    transition: color var(--transition);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}
.article-hero__date a:hover { color: var(--color-white); }
.article-hero__date span { color: rgba(255, 255, 255, 0.2); }

.article-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.article-hero__excerpt {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.78;
    max-width: 640px;
}

/* ==============================================
   ARTICLE BODY (light section)
   ============================================== */
.article-body {
    background: var(--color-light);
    padding: 72px 0;
}

.article-content {
    max-width: 720px;
    color: var(--color-text-dark);
}

.article-intro {
    font-size: 1.12rem;
    line-height: 1.85;
    color: #2a2a2a;
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 400;
}

.article-prose {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #333;
}
.article-prose p { margin-bottom: 1.4rem; }

.article-prose h2 {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--color-text-dark);
    letter-spacing: -0.02em;
    margin: 2.8rem 0 1rem;
    line-height: 1.2;
}

.article-prose h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 2rem 0 0.75rem;
    line-height: 1.3;
}

.article-prose ul,
.article-prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1.4rem;
}
.article-prose li {
    margin-bottom: 0.5rem;
    line-height: 1.72;
}

.article-prose strong { font-weight: 700; color: var(--color-text-dark); }

.article-prose a {
    color: #6a8f1b;
    text-decoration: underline;
    text-decoration-color: rgba(106, 143, 27, 0.35);
    text-underline-offset: 3px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
.article-prose a:hover {
    color: #4a6e0a;
    text-decoration-color: #4a6e0a;
}

.article-prose blockquote {
    border-left: 3px solid var(--color-accent);
    padding: 16px 24px;
    margin: 2rem 0;
    background: rgba(185, 255, 46, 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #444;
}

.article-conclusion {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 1.02rem;
    line-height: 1.85;
    color: #2a2a2a;
    font-style: italic;
}

/* ==============================================
   CTA STRIP (shared, bottom of both pages)
   ============================================== */
.blog-cta-strip {
    background: var(--color-dark-2);
    border-top: 1px solid var(--color-border-dark);
    padding: 64px 28px;
    text-align: center;
}

.blog-cta-strip__label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.blog-cta-strip__headline {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-white);
    margin-bottom: 0.85rem;
}

.blog-cta-strip__copy {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    max-width: 480px;
    margin: 0 auto 2rem;
    line-height: 1.75;
}

.blog-cta-strip .btn {
    font-size: 0.88rem;
    padding: 16px 40px;
}

/* ==============================================
   BLOG FOOTER
   ============================================== */
.blog-footer {
    background: #060606;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 28px;
    text-align: center;
}

.blog-footer p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.2);
}

.blog-footer a {
    color: rgba(255, 255, 255, 0.35);
    transition: color var(--transition);
}
.blog-footer a:hover { color: var(--color-accent); }

/* ==============================================
   BREADCRUMB
   ============================================== */
.blog-breadcrumb {
    background: var(--color-dark-2);
    border-bottom: 1px solid var(--color-border-dark);
    padding: 12px 28px;
}

.blog-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.blog-breadcrumb li {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.blog-breadcrumb li a {
    color: rgba(255, 255, 255, 0.45);
    transition: color var(--transition);
}
.blog-breadcrumb li a:hover { color: var(--color-accent); }

.blog-breadcrumb li + li::before {
    content: '/';
    margin-right: 6px;
    color: rgba(255, 255, 255, 0.15);
}

/* ==============================================
   "BACK TO BLOG" LINK
   ============================================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a8f1b;
    transition: color var(--transition);
    padding: 20px 28px 0;
    max-width: var(--max-width);
    margin: 0 auto;
    display: block;
}
.back-link:hover { color: var(--color-accent-dark); }

/* ==============================================
   SIDEBAR LAYOUT
   ============================================== */
.blog-wrap--with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px;
}

.blog-main { min-width: 0; }

/* Override narrow wrap for post body when sidebar present */
.article-body .blog-wrap--with-sidebar .article-content {
    max-width: 680px;
}

/* Sidebar inside light article body needs dark background preserved */
.article-body .blog-sidebar .sidebar-widget {
    background: var(--color-dark-2);
    border-color: rgba(255, 255, 255, 0.07);
}

/* ── Sidebar Widgets ── */
.blog-sidebar { position: sticky; top: 28px; }

.sidebar-widget {
    background: var(--color-dark-2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 22px 20px;
    margin-bottom: 20px;
}

.sidebar-widget__title {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Recent Posts */
.sidebar-recent {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-recent li a {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color var(--transition);
}
.sidebar-recent li:last-child a { border-bottom: none; }
.sidebar-recent li a:hover { color: var(--color-accent); }

/* Category / Filter List */
.sidebar-filter-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-filter-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    padding: 7px 10px;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
}
.sidebar-filter-list li a:hover,
.sidebar-filter-list li a.active {
    background: rgba(185, 255, 46, 0.08);
    color: var(--color-accent);
}
.sidebar-count {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.4);
    padding: 1px 7px;
    border-radius: 20px;
}

/* Tags */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sidebar-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    transition: background var(--transition), color var(--transition);
}
.sidebar-tag:hover,
.sidebar-tag.active {
    background: rgba(185, 255, 46, 0.12);
    color: var(--color-accent);
}

/* CTA Widget */
.sidebar-widget--cta {
    background: rgba(185, 255, 46, 0.04);
    border-color: rgba(185, 255, 46, 0.15);
}
.sidebar-cta__eyebrow {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 8px;
}
.sidebar-cta__title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 8px;
}
.sidebar-cta__desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 16px;
}

/* Filter bar */
.blog-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(185, 255, 46, 0.06);
    border: 1px solid rgba(185, 255, 46, 0.15);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 24px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}
.blog-filter-bar strong { color: var(--color-white); }
.blog-filter-clear {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    transition: color var(--transition);
}
.blog-filter-clear:hover { color: var(--color-accent); }

/* ==============================================
   CATEGORIES & TAGS
   ============================================== */
.post-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.post-card__tag {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 20px;
    background: #e8e6e1;
    color: #555;
}
.post-card__tag--cat {
    background: #e8e4f5;
    color: #6b52a8;
}
.article-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 1024px) {
    .blog-wrap--with-sidebar {
        grid-template-columns: 1fr 260px;
        gap: 32px;
    }
}

@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-wrap--with-sidebar {
        grid-template-columns: 1fr;
    }
    .blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .sidebar-widget { margin-bottom: 0; }
}

@media (max-width: 600px) {
    .blog-topbar { padding: 0 18px; height: 58px; }
    .blog-topbar__divider,
    .blog-topbar__site { display: none; }

    .blog-hero    { padding: 60px 18px; }
    .blog-listing { padding: 52px 0; }
    .blog-wrap    { padding: 0 28px; }
    .blog-wrap--with-sidebar { padding: 0 18px; }
    .blog-grid    { grid-template-columns: 1fr; }

    .blog-sidebar { grid-template-columns: 1fr; }

    .article-hero    { padding: 52px 18px 44px; }
    .article-body    { padding: 52px 0; }
    .article-content { padding: 0; }

    .blog-cta-strip { padding: 52px 18px; }
}