/* Shared styles for /blog/ pages. Light 2026 system, mirrors the
   freetools page conventions (page-local classes + standard toolfoot). */

.blog-hero { padding: 140px 24px 30px; text-align: center; max-width: 780px; margin: 0 auto; }
.blog-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(168,130,255,.28); border-radius:999px; padding:6px 14px; margin-bottom:22px; }
.blog-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:#b07bff; box-shadow:0 0 10px #b07bff; }
.blog-hero h1 { font-family:var(--font-display); font-size:clamp(32px,4.6vw,50px); font-weight:600; line-height:1.12; margin:0 0 16px; color:var(--text); }
.blog-hero h1 em { font-style:normal; color:var(--accent); }
.blog-hero .lede { font-size:clamp(15px,2vw,18px); line-height:1.6; color:var(--text-dim); margin:0 auto; max-width:600px; }
.blog-hero .postmeta { margin-top:16px; font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); }

.blog-grid { max-width:1000px; margin:18px auto 40px; padding:0 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.blog-card { display:flex; flex-direction:column; gap:10px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; padding:22px; box-shadow:var(--card-shadow); text-decoration:none; transition:transform .13s ease, border-color .13s ease; }
.blog-card:hover { transform:translateY(-2px); border-color:rgba(176,123,255,.5); }
.blog-card h2 { font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.3; color:var(--text); margin:0; }
.blog-card p { font-size:14px; line-height:1.55; color:var(--text-dim); margin:0; }
.blog-card .cardmeta { margin-top:auto; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }

.post-body { max-width:720px; margin:0 auto; padding:10px 24px 8px; }
.post-body h2 { font-family:var(--font-display); font-size:25px; font-weight:600; color:var(--text); margin:34px 0 12px; line-height:1.25; }
.post-body p { font-size:16px; line-height:1.72; color:var(--text-dim); margin:0 0 15px; }
.post-body a { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(168,130,255,.35); }
.post-body a:hover { border-bottom-color:var(--accent); }
.post-body strong { color:var(--text); font-weight:600; }

.post-faq { max-width:720px; margin:0 auto; padding:10px 24px 8px; }
.post-faq h2 { font-family:var(--font-display); font-size:25px; font-weight:600; color:var(--text); margin:30px 0 14px; }
.post-faq details { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:0 18px; margin:0 0 10px; }
.post-faq summary { font:600 15px 'Inter',sans-serif; color:var(--text); padding:15px 0; cursor:pointer; list-style:none; position:relative; padding-right:26px; }
.post-faq summary::after { content:'+'; position:absolute; right:2px; top:13px; font:400 18px 'Space Mono',monospace; color:var(--accent); }
.post-faq details[open] summary::after { content:'\2212'; }
.post-faq summary::-webkit-details-marker { display:none; }
.post-faq details p { font-size:14.5px; line-height:1.6; color:var(--text-dim); margin:0 0 15px; }
.post-faq details a { color:var(--accent); text-decoration:none; }

.post-related { max-width:720px; margin:26px auto 8px; padding:0 24px; }
.post-related .h { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-bottom:12px; }
.post-related .links { display:flex; gap:10px; flex-wrap:wrap; }
.post-related a { font:500 13px 'Inter',sans-serif; color:var(--accent); text-decoration:none; border:1px solid rgba(168,130,255,.3); border-radius:999px; padding:8px 15px; transition:background .13s ease; }
.post-related a:hover { background:rgba(124,70,255,.07); }

.blog-promo { max-width:760px; margin:30px auto 46px; padding:0 20px; }
.blog-promo-inner { background:linear-gradient(135deg, rgba(111,60,255,.16), rgba(124,70,255,.05)); border:1px solid rgba(176,123,255,.28); border-radius:20px; padding:26px 28px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.blog-promo h3 { font-family:var(--font-display); font-size:22px; color:var(--text); margin:0 0 6px; font-weight:600; }
.blog-promo p { font-size:14px; color:var(--text-dim); margin:0; max-width:520px; line-height:1.55; }

@media (max-width:640px){ .blog-hero{padding-top:116px;} }

/* ── toolfoot (standard footer, matches freetools pages) ── */
.toolfoot { background:var(--x-dark); border-top:1px solid rgba(255,255,255,.08); padding:52px 24px 34px; }
.toolfoot-in { max-width:1040px; margin:0 auto; display:flex; flex-wrap:wrap; gap:34px 56px; justify-content:space-between; }
.toolfoot-brand { max-width:330px; }
.toolfoot-brand img { height:96px; margin:-18px 0; display:block; }
.toolfoot-brand p { font:400 13.5px/1.6 'Inter',sans-serif; color:rgba(233,226,250,.55); margin:0 0 16px; }
.toolfoot-dl { display:inline-flex; align-items:center; gap:7px; background:#fff; color:#160a26; font:700 13px 'Inter',sans-serif; text-decoration:none; border-radius:999px; padding:10px 20px; }
.toolfoot-cols { display:flex; gap:56px; flex-wrap:wrap; }
.toolfoot-col { display:flex; flex-direction:column; gap:10px; }
.toolfoot-col .h { font:700 11px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,226,250,.4); margin-bottom:2px; }
.toolfoot-col a { font:500 13.5px 'Inter',sans-serif; color:rgba(233,226,250,.62); text-decoration:none; transition:color .12s ease; }
.toolfoot-col a:hover { color:#fff; }
.toolfoot-bottom { max-width:1040px; margin:30px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font:500 12px 'Inter',sans-serif; color:rgba(233,226,250,.4); }
.toolfoot-bottom a { color:rgba(233,226,250,.5); text-decoration:none; margin-left:18px; }
.toolfoot-bottom a:hover { color:#fff; }
@media (max-width:640px){ .toolfoot-in{gap:26px;} .toolfoot-cols{gap:40px;} .toolfoot-brand img{height:52px;margin:-8px 0;} }