/**
 * Ask360 Blog Styles
 *
 * Warm cream background for a personal feel, but uses the site's
 * sans-serif font and indigo/slate colors for consistency.
 * Serif is reserved for article titles only.
 */

/* ── Shared ── */

.blog-index-wrap,
.blog-wrap { background: #fffdf7; min-height: 100vh; }

/* ── Index page ── */

.blog-index-title { font-family: Georgia, 'Times New Roman', serif; font-size: 2.25rem; font-weight: 500; color: #1e293b; }
.blog-index-subtitle { font-size: 1.125rem; color: #64748b; }

.blog-card { background: #fff; border: 1px solid #e8dcc8; border-radius: 8px; transition: box-shadow 0.2s ease, transform 0.2s ease; overflow: hidden; }
.blog-card:hover { box-shadow: 0 4px 16px rgba(30, 41, 59, 0.08); transform: translateY(-2px); }
.blog-card img { object-fit: contain; background: #faf6ef; }
.blog-card a { text-decoration: none; }

.blog-card-body { padding: 1.25rem; }
.blog-card-title { font-size: 1.25rem; font-weight: 600; color: #1e293b; line-height: 1.35; margin-bottom: 0.5rem; }
.blog-card-desc { font-size: 0.9375rem; color: #64748b; line-height: 1.6; margin-bottom: 0; }
.blog-card-meta { font-size: 0.8125rem; color: #94a3b8; margin-bottom: 0.5rem; }
.blog-card-tag { display: inline-block; background: #f1f5f9; color: #64748b; font-size: 0.6875rem; padding: 3px 10px; border-radius: 20px; text-transform: lowercase; margin-right: 2px; }

/* ── Article page ── */

.blog-article { max-width: 780px; margin: 0 auto; font-size: 1.0625rem; color: #334155; }
.blog-article a { color: #334155; text-decoration: underline; text-underline-offset: 2px; }
.blog-article a:hover { color: #1e293b; }

.blog-back { font-size: 0.8125rem; color: #64748b; text-decoration: none; }
.blog-back:hover { color: #334155; }
.blog-title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.75rem; font-weight: 500; color: #1e293b; line-height: 1.25; }
.blog-meta { font-size: 0.8125rem; color: #94a3b8; }
.blog-tag { display: inline-block; background: #f1f5f9; color: #64748b; font-size: 0.6875rem; padding: 3px 12px; border-radius: 20px; text-transform: lowercase; }
.blog-lead { font-size: 1rem; color: #64748b; line-height: 1.7; }
.blog-divider { border: none; border-top: 1px solid #e8dcc8; margin: 2rem 0; }

/* Headings — sans-serif to match site, except h1 (blog-title) */
.blog-article h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 600; font-size: 1.375rem; color: #1e293b; }
.blog-article h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-weight: 600; font-size: 1.1875rem; color: #1e293b; }

/* Body text */
.blog-article p { margin-bottom: 1rem; line-height: 1.75; }
.blog-article ul, .blog-article ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.blog-article li { margin-bottom: 0.5rem; line-height: 1.7; }
.blog-article strong { font-weight: 600; color: #1e293b; }

/* Code — site's dark slate instead of brown */
.blog-article pre { background: #1e293b; color: #e2e8f0; padding: 1.25rem; border-radius: 6px; overflow-x: auto; margin-bottom: 1.5rem; font-size: 0.9rem; }
.blog-article code { font-size: 0.9em; }
.blog-article p code, .blog-article li code { background: #f1f0eb; padding: 2px 6px; border-radius: 4px; color: #334155; }
.blog-article pre code { background: none; padding: 0; color: inherit; }

/* Tables — warm headers, site text colors */
.blog-article table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; font-size: 0.9375rem; }
.blog-article th, .blog-article td { padding: 0.6rem 0.8rem; border: 1px solid #e8dcc8; }
.blog-article th { background: #faf6ef; font-weight: 600; text-align: left; color: #1e293b; }

/* Blockquotes — warm accent preserved */
.blog-article blockquote { border-left: 2px solid #fac775; padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: #faf6ef; font-style: italic; color: #475569; font-size: 1rem; }

/* Misc */
.blog-article hr { border: none; border-top: 1px solid #e8dcc8; margin: 2.5rem 0; }
.blog-article img { max-width: 100%; height: auto; border-radius: 6px; }

/* Footer strip — warm but with site CTA color */
.blog-footer { background: #faf6ef; border-top: 1px solid #e8dcc8; }
.blog-footer a { color: #64748b; text-decoration: none; }
.blog-footer a:hover { color: #334155; }