/* ═══════════════════════════════════════════════
   SYNTROVA AI — BLOG STYLES  (blog.css)
   ═══════════════════════════════════════════════ */

/* ── Blog header ─────────────────────────────────────────────
   The blog pages use their OWN header markup (.nav.container,
   .nav-logo, .logo-img, #main-header) that style.css's standard
   .nav-container / .logo rules don't target. Without these rules the
   logo renders at full natural size and the fixed header overlaps the
   page. This gives the blog header the same layout as the rest of the
   site. Shared by blog.html and every blog/ article page. ── */
#main-header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
#main-header .nav-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
#main-header .logo-img {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}
/* The blog's hamburger is three bare <span>s (not an SVG like the other
   pages), so draw the bars here. style.css shows this button only < 768px. */
#main-header .mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    background: var(--text-white);
    border-radius: 2px;
}

/* ── Blog Index Hero ─────────────────────────────── */
.blog-hero {
    padding: 120px 0 60px;
    text-align: center;
}
.blog-hero-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #f0f8ff;
    line-height: 1.15;
    margin: 16px 0 20px;
}
.blog-hero-sub {
    font-size: 1.1rem;
    color: #94a3c0;
    max-width: 660px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ── Blog Grid ───────────────────────────────────── */
.blog-grid-section {
    padding: 20px 0 80px;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

/* ── Blog Card ───────────────────────────────────── */
.blog-card {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--primary-rgb, 56,189,248), 0.35);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.blog-card-top {
    padding: 20px 22px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.blog-cat-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cat-color, #38bdf8);
    background: color-mix(in srgb, var(--cat-color, #38bdf8) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat-color, #38bdf8) 30%, transparent);
    padding: 4px 10px;
    border-radius: 999px;
}
.blog-read-time {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: auto;
}
.blog-card-body {
    padding: 22px;
    flex: 1;
}
.blog-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #e2eaf8;
    line-height: 1.45;
    margin: 0 0 12px;
}
.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.blog-card-title a:hover {
    color: #38bdf8;
}
.blog-card-excerpt {
    font-size: 0.875rem;
    color: #7a8aaa;
    line-height: 1.7;
    margin: 0;
}
.blog-card-footer {
    padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.blog-day-label {
    font-size: 0.72rem;
    color: #4a5568;
    font-family: 'Space Mono', monospace;
}
.blog-read-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #38bdf8;
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
}
.blog-read-link:hover { color: #7dd3fc; }

/* ── Blog CTA Banner ─────────────────────────────── */
.blog-cta-section { padding: 0 0 100px; }
.blog-cta-box {
    background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(99,102,241,0.12));
    border: 1px solid rgba(56,189,248,0.2);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
}
.blog-cta-box h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #f0f8ff;
    margin: 0 0 14px;
}
.blog-cta-box p {
    color: #94a3c0;
    font-size: 1rem;
    margin: 0 0 30px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ══════════════════════════════════════════════════
   INDIVIDUAL BLOG POST STYLES
   ══════════════════════════════════════════════════ */
.blog-post-main { padding: 100px 0 80px; }

.blog-post-container { max-width: 780px; }

/* Breadcrumb */
.breadcrumb {
    font-size: 0.82rem;
    color: #4a5568;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumb a { color: #38bdf8; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Post Header */
.blog-post-header { margin-bottom: 44px; }
.blog-post-meta-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.blog-post-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #f0f8ff;
    line-height: 1.2;
    margin: 0 0 28px;
}

/* Quick Answer Box */
.blog-quick-answer {
    background: rgba(56,189,248,0.07);
    border-left: 3px solid #38bdf8;
    border-radius: 0 14px 14px 0;
    padding: 22px 26px;
}
.quick-answer-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #38bdf8;
    margin-bottom: 10px;
}
.blog-quick-answer p {
    font-size: 0.97rem;
    color: #c5d8f0;
    line-height: 1.75;
    margin: 0;
}

/* Post Body */
.blog-post-body { color: #b0c4de; line-height: 1.85; font-size: 1rem; }
.blog-post-body h2 {
    font-family: 'Sora', sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: #e2eaf8;
    margin: 44px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.blog-post-body h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #d0e4f8;
    margin: 28px 0 10px;
}
.blog-post-body p { margin: 0 0 18px; }
.blog-post-body ul, .blog-post-body ol {
    padding-left: 22px;
    margin: 0 0 20px;
}
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body strong { color: #e2eaf8; font-weight: 600; }

/* Comparison Table */
.comparison-table { overflow-x: auto; margin: 24px 0 32px; }
.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.comparison-table th {
    background: rgba(56,189,248,0.1);
    color: #38bdf8;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(56,189,248,0.2);
}
.comparison-table td {
    padding: 11px 16px;
    color: #94a3c0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comparison-table tr:hover td { background: rgba(255,255,255,0.03); }

/* FAQ Block */
.faq-block { margin: 24px 0; }
.faq-item {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.025);
}
.faq-item h3 {
    font-size: 0.97rem !important;
    font-weight: 600 !important;
    color: #d0e4f8 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
}
.faq-item p { margin: 0; font-size: 0.9rem; color: #7a8aaa; }

/* Related Posts */
.blog-post-related {
    margin: 48px 0 0;
    padding: 28px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
}
.blog-post-related h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #e2eaf8;
    margin: 0 0 16px;
}
.related-post-link {
    display: block;
    font-size: 0.9rem;
    color: #38bdf8;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.2s, padding-left 0.2s;
}
.related-post-link:last-child { border-bottom: none; }
.related-post-link:hover { color: #7dd3fc; padding-left: 6px; }

/* Post CTA */
.blog-post-cta {
    margin: 44px 0 0;
    padding: 36px;
    background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(99,102,241,0.1));
    border: 1px solid rgba(56,189,248,0.18);
    border-radius: 18px;
    text-align: center;
}
.blog-post-cta h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.3rem;
    color: #f0f8ff;
    margin: 0 0 10px;
}
.blog-post-cta p { color: #94a3c0; font-size: 0.93rem; margin: 0 0 22px; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
    .blog-hero { padding: 90px 0 40px; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-cta-box { padding: 40px 24px; }
    .blog-post-main { padding: 80px 0 60px; }
    .blog-post-container { padding: 0 16px; }
    .blog-post-cta { padding: 28px 20px; }
    .blog-post-related { padding: 22px 18px; }
}