/* ClipHunter blog — reading-layout styles.
   Pulls brand tokens from app.css (--bg, --teal, --mono, etc.); this file
   only defines the article-page chrome and prose typography. */

/* app.css sets body { height:100vh; overflow:hidden } for the main app shell
   (which has its own internal scroll regions). Blog pages are normal documents
   so we override back to natural document flow + scroll. */
body.blog-page{background:var(--bg);color:var(--text);font-family:var(--sans);
  min-height:100vh;height:auto;overflow:auto;display:flex;flex-direction:column;margin:0}

.blog-nav{display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;border-bottom:1px solid var(--border);
  background:rgba(8,15,13,0.6);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10}
.blog-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;
  font-weight:600;color:var(--text);text-decoration:none}
.blog-logo-img{width:28px;height:28px}
.blog-logo span{color:var(--teal)}
.blog-back{font-family:var(--mono);font-size:12px;color:var(--muted);
  text-decoration:none;transition:color .15s}
.blog-back:hover{color:var(--teal)}

.blog-article{max-width:720px;margin:0 auto;padding:48px 24px 24px;flex:1;width:100%;box-sizing:border-box}
.blog-article h1{font-size:36px;line-height:1.2;letter-spacing:-.01em;margin-bottom:14px}
.blog-article .blog-meta{font-family:var(--mono);font-size:11px;color:var(--muted);
  margin-bottom:24px;display:flex;gap:10px;flex-wrap:wrap}
.blog-article .blog-meta span+span::before{content:'·';margin-right:10px;color:var(--border2)}
.blog-article .blog-lead{font-size:18px;line-height:1.55;color:var(--text);
  margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}

.blog-article h2{font-size:24px;line-height:1.3;margin-top:42px;margin-bottom:14px;letter-spacing:-.01em}
.blog-article h3{font-size:18px;line-height:1.35;margin-top:28px;margin-bottom:10px}
.blog-article p{font-size:15.5px;line-height:1.7;color:var(--text);margin-bottom:16px}
.blog-article p em{color:var(--teal);font-style:normal;font-weight:500}
.blog-article ul,.blog-article ol{font-size:15.5px;line-height:1.7;color:var(--text);
  margin-bottom:18px;padding-left:24px}
.blog-article li{margin-bottom:6px}
.blog-article li::marker{color:var(--teal)}
.blog-article strong{color:var(--text)}
.blog-article a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(4,192,255,0.3);
  transition:border-color .15s}
.blog-article a:hover{border-bottom-color:var(--teal)}
.blog-article code{font-family:var(--mono);font-size:13px;color:var(--amber);
  background:var(--bg2);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.blog-article blockquote{border-left:3px solid var(--teal);padding:6px 16px;
  color:var(--muted);font-style:italic;margin:18px 0;background:rgba(4,192,255,0.04)}

/* Soft conversion CTA at the bottom of each post. */
.blog-cta{margin-top:56px;padding:28px;background:linear-gradient(180deg,rgba(4,192,255,0.08),rgba(155,93,229,0.04));
  border:1px solid var(--border2);border-radius:12px;text-align:center}
.blog-cta h2{margin:0 0 8px;font-size:20px;letter-spacing:-.01em}
.blog-cta p{font-size:14px;color:var(--muted);margin-bottom:18px}
.blog-cta .btn{display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;font-size:14px;text-decoration:none;border-radius:8px;
  background:var(--teal);color:#000;font-weight:600;transition:transform .12s}
.blog-cta .btn:hover{transform:translateY(-1px);border-bottom:none}

.blog-related{margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
.blog-related h3{font-family:var(--mono);font-size:12px;color:var(--muted);
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px}
.blog-related ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.blog-related li{margin:0}
.blog-related a{display:block;padding:10px 14px;background:var(--bg2);
  border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-size:14px;border-bottom:none}
.blog-related a:hover{border-color:var(--border2);color:var(--teal)}

.blog-footer{padding:32px 24px 20px;border-top:1px solid var(--border);
  font-size:11px;color:var(--muted);font-family:var(--mono);text-align:center}
.blog-footer a{color:var(--muted);text-decoration:none;border-bottom:none}
.blog-footer a:hover{color:var(--teal)}

/* Blog index (list of posts). */
.blog-index{max-width:880px;margin:0 auto;padding:48px 24px 24px;flex:1;width:100%;box-sizing:border-box}
.blog-index h1{font-size:36px;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.blog-index>p{font-size:15px;color:var(--muted);margin-bottom:36px}
.blog-index-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.blog-index-list li{margin:0}
.blog-index-card{display:block;padding:20px 22px;background:var(--bg2);
  border:1px solid var(--border);border-radius:10px;text-decoration:none;
  transition:border-color .15s,transform .12s}
.blog-index-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.blog-index-card h2{font-size:18px;margin:0 0 6px;color:var(--text);letter-spacing:-.005em}
.blog-index-card p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
.blog-index-card .blog-tag{display:inline-block;font-family:var(--mono);font-size:10px;
  color:var(--teal);background:rgba(4,192,255,0.08);border:1px solid rgba(4,192,255,0.2);
  padding:2px 7px;border-radius:5px;margin-top:10px;letter-spacing:.4px}

@media (max-width:780px){
  .blog-nav{padding:14px 16px}
  .blog-article{padding:32px 18px 18px}
  .blog-article h1{font-size:28px}
  .blog-article h2{font-size:20px}
  .blog-article .blog-lead{font-size:16px}
  .blog-article p,.blog-article ul,.blog-article ol{font-size:15px}
  .blog-index{padding:32px 18px}
}