/* Shared styles for static HTML pages (blog, about, FAQ, etc.) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8fafc;color:#1f2937;line-height:1.7}
a{color:#6366f1;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* Site Header */
.site-header{background:#fff;border-bottom:1px solid #e5e7eb;padding:0.75rem 1.5rem;position:sticky;top:0;z-index:100}
.site-header-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem}
.site-brand{display:flex;align-items:center;gap:0.6rem;font-weight:800;font-size:1.15rem;color:#1f2937}
.site-brand:hover{text-decoration:none}
.site-brand .logo-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#6366f1 0%,#06b6d4 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
.site-nav{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.site-nav a{font-size:0.9rem;font-weight:600;color:#4b5563}
.site-nav a:hover{color:#6366f1;text-decoration:none}
.site-nav a.active{color:#6366f1}

/* Article Layout */
.article-container{max-width:900px;margin:0 auto;padding:2rem 1.5rem 4rem}
.article-container h1{font-size:2.2rem;font-weight:800;margin-bottom:0.75rem;line-height:1.2;color:#111827}
.article-container h2{font-size:1.6rem;font-weight:700;margin:2.25rem 0 0.75rem;border-bottom:1px solid #e5e7eb;padding-bottom:0.4rem;color:#111827}
.article-container h3{font-size:1.25rem;font-weight:600;margin:1.5rem 0 0.5rem;color:#1f2937}
.article-container p{margin-bottom:1rem}
.article-container ul,.article-container ol{margin:1rem 0 1rem 1.5rem}
.article-container li{margin-bottom:0.4rem}
.article-container table{width:100%;border-collapse:collapse;margin:1.25rem 0}
.article-container th,.article-container td{border:1px solid #e5e7eb;padding:0.6rem 0.8rem;text-align:left}
.article-container th{background:#f1f5f9}
.article-container pre{background:#1f2937;color:#e5e7eb;padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}
.article-container code{background:#e5e7eb;padding:0.15rem 0.35rem;border-radius:3px;font-size:0.9em}
.article-container pre code{background:none;padding:0}

/* Meta */
.article-meta{color:#6b7280;font-size:0.92rem;margin-bottom:1.5rem}
.article-meta a{color:#6366f1}

/* Breadcrumbs */
.breadcrumbs{font-size:0.88rem;color:#6b7280;margin-bottom:1.5rem}
.breadcrumbs a{color:#6366f1}

/* Callout boxes */
.callout{border-radius:8px;padding:1.25rem 1.5rem;margin:1.5rem 0;border-left:4px solid}
.callout-green{background:#f0fdf4;border-color:#10b981}
.callout-red{background:#fef2f2;border-color:#ef4444}
.callout-yellow{background:#fffbeb;border-color:#f59e0b}
.callout-blue{background:#f0f9ff;border-color:#3b82f6}
.callout strong{display:block;margin-bottom:0.3rem}

/* CTA */
.cta-box{background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:1.5rem;margin:2.5rem 0;text-align:center}
.cta-box a{display:inline-block;background:#6366f1;color:#fff;padding:0.75rem 1.5rem;border-radius:6px;font-weight:600;text-decoration:none}
.cta-box a:hover{background:#4f46e5;text-decoration:none}

/* Footer */
.site-footer{background:#fff;border-top:1px solid #e5e7eb;padding:2rem 1.5rem;margin-top:3rem}
.site-footer-inner{max-width:960px;margin:0 auto}
.site-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:1.5rem}
.site-footer h4{font-size:0.9rem;font-weight:700;margin-bottom:0.75rem;color:#111827}
.site-footer p{font-size:0.88rem;color:#6b7280;line-height:1.6}
.site-footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:0.85rem;color:#6b7280}
.site-footer-links a{color:#6b7280}
.site-footer-links a:hover{color:#6366f1}
.site-footer-copy{font-size:0.82rem;color:#9ca3af;text-align:center;padding-top:1rem;border-top:1px solid #f3f4f6}

/* Blog Grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin:2rem 0}
.blog-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1.5rem;transition:box-shadow 0.2s,border-color 0.2s}
.blog-card:hover{border-color:#c7d2fe;box-shadow:0 4px 12px rgba(99,102,241,0.08)}
.blog-card h3{font-size:1.05rem;font-weight:700;margin-bottom:0.5rem;color:#111827}
.blog-card p{font-size:0.88rem;color:#6b7280;margin:0;line-height:1.6}
.blog-card .blog-card-date{font-size:0.82rem;color:#9ca3af;margin-top:0.75rem}
.blog-card a{color:#6366f1;font-weight:600;font-size:0.9rem}

/* Responsive */
@media(max-width:640px){
  .site-header-inner{flex-direction:column;align-items:flex-start}
  .article-container h1{font-size:1.7rem}
  .blog-grid{grid-template-columns:1fr}
}