/* Simplyze blog — page-specific styles, layered on styles.css (same pattern as demo.css). */

.blog-main { padding: 7.5rem 0 4rem; }
.blog-main .container { max-width: 760px; }

/* ---- index ---- */

.blog-index-header { margin-bottom: 3rem; }
.blog-index-header h1 { font-size: 2.6rem; color: var(--text-primary); margin-bottom: 0.6rem; }
.blog-index-sub { color: var(--text-mid); font-size: 1.1rem; }

.blog-list { list-style: none; margin: 0 0 3.5rem; padding: 0; }
.blog-card { border-top: 1px solid var(--border); }
.blog-card:last-child { border-bottom: 1px solid var(--border); }
.blog-card-link { display: block; padding: 1.6rem 0.25rem; text-decoration: none; transition: background 0.15s ease; }
.blog-card-link:hover { background: var(--bg-surface); }
.blog-card h2 { font-size: 1.35rem; color: var(--text-primary); margin: 0 0 0.45rem; }
.blog-card-link:hover h2 { color: var(--purple-light); }
.blog-card-desc { color: var(--text-mid); margin: 0 0 0.55rem; line-height: 1.55; }
.blog-card-meta { color: var(--text-dim); font-size: 0.9rem; margin: 0; }

/* ---- post ---- */

.blog-post-header { margin-bottom: 2.25rem; }
.blog-hero { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border-2); margin-bottom: 2rem; }
.blog-post h1 { font-size: 2.4rem; line-height: 1.2; color: var(--text-primary); margin-bottom: 0.9rem; }
.blog-byline { color: var(--text-mid); font-size: 0.95rem; margin: 0 0 0.7rem; }
.blog-byline a { color: var(--teal); text-decoration: none; }
.blog-byline a:hover { text-decoration: underline; }
.blog-byline-sep { color: var(--text-dim); margin: 0 0.35rem; }
.blog-tags { margin: 0; }
.blog-tag { display: inline-block; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.78rem; border-radius: 999px; padding: 0.15rem 0.7rem; margin-right: 0.4rem; }

.blog-body { color: var(--text-mid); font-size: 1.08rem; line-height: 1.75; }
.blog-body p { margin: 0 0 1.25rem; }
.blog-body h2 { color: var(--text-primary); font-size: 1.5rem; margin: 2.4rem 0 1rem; }
.blog-body h3 { color: var(--text-primary); font-size: 1.2rem; margin: 2rem 0 0.8rem; }
.blog-body a { color: var(--purple-light); }
.blog-body strong { color: var(--text-primary); }
.blog-body ul, .blog-body ol { margin: 0 0 1.25rem 1.4rem; }
.blog-body li { margin-bottom: 0.5rem; }
.blog-body blockquote { border-left: 3px solid var(--gold); margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem; color: var(--text-primary); }
.blog-body code { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.35rem; font-size: 0.92em; }
.blog-body pre { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; overflow-x: auto; margin: 0 0 1.25rem; }
.blog-body pre code { background: none; border: none; padding: 0; }
.blog-body table { border-collapse: collapse; margin: 0 0 1.25rem; width: 100%; }
.blog-body th, .blog-body td { border: 1px solid var(--border-2); padding: 0.5rem 0.75rem; text-align: left; }
.blog-body th { color: var(--text-primary); background: var(--bg-raised); }
.blog-body img { max-width: 100%; height: auto; border-radius: 8px; }
.blog-body hr { border: none; border-top: 1px solid var(--border); margin: 2.2rem 0; }

.blog-post-cta { margin: 3.5rem 0 0; padding: 2.5rem 1.5rem; border-radius: 12px; }

/* ---- subscribe ---- */

.blog-subscribe { margin-top: 2.5rem; padding: 2rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; }
.blog-subscribe h2 { color: var(--text-primary); font-size: 1.25rem; margin: 0 0 0.4rem; }
.blog-subscribe p { color: var(--text-mid); margin: 0 0 1.2rem; }
.blog-subscribe-form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.blog-subscribe-form input[type="email"] { flex: 1 1 260px; background: var(--bg-base); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text-primary); padding: 0.7rem 0.9rem; font-size: 1rem; }
.blog-subscribe-form input[type="email"]:focus { outline: 2px solid var(--purple-light); outline-offset: 1px; }
.blog-gotcha { position: absolute; left: -9999px; opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .blog-main { padding-top: 6rem; }
  .blog-post h1 { font-size: 1.85rem; }
  .blog-index-header h1 { font-size: 2.1rem; }
}