/* Shared blog styling, matches the quiz site's brand exactly:
   teal/white palette, Karla typeface, centered headers, but
   left-aligned article body text for actual readability. */

:root{
  color-scheme: light only;
  --teal-dark:#0B4F4A;
  --teal:#12897E;
  --teal-pale:#E3F3F1;
  --teal-mid:#0F6E64;
  --ink:#16241F;
  --ink-soft:#52625F;
  --border:#DCEBE8;
  --bg:#FFFFFF;
  --white:#FFFFFF;
  --radius:14px;
}
*{box-sizing:border-box;}
html{background:#FFFFFF !important;}
body{
  margin:0; background:#FFFFFF !important; color:var(--ink);
  font-family:'Karla', Arial, sans-serif; line-height:1.65;
}
h1,h2,h3{ margin:0 0 0.5em 0; color:var(--teal-dark); font-weight:800; letter-spacing:-0.01em; }
p{margin:0 0 1.1em 0;}
a{color:var(--teal); text-decoration:underline;}
a:hover{color:var(--teal-dark);}
img{max-width:100%; height:auto; border-radius:10px;}

/* ---------- NAVBAR (shared with quiz) ---------- */
header{background:var(--white); border-bottom:1px solid var(--border); padding:14px 0; position:sticky; top:0; z-index:20;}
.navwrap{max-width:900px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.brand-name{color:var(--teal-dark); font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; text-decoration:none;}
.brand-logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-right:20px;}
.brand-logo svg{flex:none;}
.nav-blog-link{color:var(--teal) !important; font-weight:800 !important;}
.nav-links{display:flex; gap:20px; align-items:center;}
.nav-links a{color:var(--ink-soft); font-weight:700; font-size:0.92rem; text-decoration:none;}
.nav-cta{
  background:var(--teal); color:var(--white); border:none; padding:9px 16px;
  border-radius:100px; font-weight:700; font-size:0.85rem; cursor:pointer; text-decoration:none;
  display:inline-block;
}

/* ---------- SHARED WRAPS ---------- */
.wrap{max-width:900px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:680px; margin:0 auto; padding:0 24px;}
.center{text-align:center;}
.eyebrow{ text-transform:uppercase; font-size:0.78rem; font-weight:800; letter-spacing:0.08em; color:var(--teal); }

/* ---------- BLOG HERO (index page) ---------- */
.blog-hero{padding:56px 0 40px 0; text-align:center;}
.blog-hero h1{font-size:clamp(1.9rem, 5vw, 2.6rem); max-width:16ch; margin:0.3em auto 0.3em auto;}
.blog-hero p{color:var(--ink-soft); max-width:44ch; margin:0 auto; font-size:1.05rem;}

/* ---------- POST CARD LIST ---------- */
.post-list{display:grid; gap:20px; max-width:720px; margin:36px auto 0 auto; padding:0 24px 56px 24px;}
.post-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--border); border-radius:var(--radius); padding:26px;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.post-card:hover{border-color:var(--teal); transform:translateY(-1px);}
.post-card .post-date{font-size:0.8rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:0.04em;}
.post-card h2{font-size:1.25rem; margin:0.4em 0 0.4em 0;}
.post-card p{color:var(--ink-soft); font-size:0.95rem; margin:0;}

/* ---------- ARTICLE PAGE ---------- */
.article-header{padding:44px 0 28px 0; text-align:center; border-bottom:1px solid var(--border);}
.article-header .post-date{font-size:0.82rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:0.04em;}
.article-header h1{font-size:clamp(1.8rem, 4.5vw, 2.4rem); max-width:20ch; margin:0.4em auto 0 auto;}

.article-body{
  max-width:680px; margin:0 auto; padding:40px 24px 0 24px;
  text-align:left; font-size:1.05rem; color:var(--ink);
}
.article-body h2{font-size:1.4rem; margin-top:1.6em;}
.article-body h3{font-size:1.15rem; margin-top:1.4em;}
.article-body ul, .article-body ol{padding-left:1.4em; margin:0 0 1.1em 0;}
.article-body li{margin-bottom:0.5em;}
.article-body .lede{font-size:1.15rem; color:var(--ink-soft); font-weight:600;}

.info-box{
  background:var(--teal-pale); border-left:4px solid var(--teal); border-radius:0 10px 10px 0;
  padding:18px 20px; margin:28px 0;
}
.info-box p{margin:0; color:var(--ink);}

/* ---------- IN-ARTICLE CTA ---------- */
.article-cta{
  max-width:680px; margin:48px auto 0 auto; padding:32px 24px;
  background:var(--teal-dark); border-radius:var(--radius); text-align:center;
}
.article-cta h3{color:var(--white); font-size:1.3rem;}
.article-cta p{color:#CFE6E2; max-width:40ch; margin:0.6em auto 20px auto;}
.article-cta .cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); color:var(--teal-dark); border:none;
  padding:14px 26px; border-radius:8px; font-weight:700; font-size:0.98rem;
  cursor:pointer; text-decoration:none;
}

footer{background:var(--white); border-top:1px solid var(--border); padding:32px 0; margin-top:56px;}
footer p{font-size:0.82rem; color:var(--ink-soft); max-width:70ch; margin:0 auto; text-align:center; padding:0 24px;}

@media (max-width:640px){
  .blog-hero{padding:40px 0 32px 0;}
  .article-header{padding:32px 0 24px 0;}
}