/* ============================================
   WritingNepal — shared styles for content pages
   (About, FAQs, Blog, Privacy Policy, Terms of Use)
   Extends style.css tokens.
   ============================================ */

.content-hero{ padding:44px 0 8px; text-align:center; }
.content-hero .eyebrow{ justify-content:center; align-items:center; }
.content-hero h1{ font-size:2.1rem; max-width:26ch; margin:0 auto 12px; }
.content-hero p{ color:var(--ink-soft); max-width:56ch; margin:0 auto; font-size:1.02rem; }

.content-body{ max-width:720px; margin:40px auto 40px; }
.content-body h2{ font-size:1.35rem; margin:40px 0 12px; }
.content-body h2:first-child{ margin-top:0; }
.content-body h3{ font-size:1.05rem; margin:24px 0 8px; }
.content-body p{ color:var(--ink); line-height:1.75; margin-bottom:16px; }
.content-body ul, .content-body ol{ color:var(--ink); line-height:1.75; margin:0 0 16px; padding-left:22px; }
.content-body li{ margin-bottom:6px; }
.content-body a{ color:var(--clay-deep); font-weight:700; }
.content-updated{ text-align:center; font-size:.82rem; color:var(--ink-soft); margin-bottom:8px; }

/* ---- FAQ accordion (native <details>, no JS needed) ---- */
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:4px 20px; transition:border-color .15s ease;
}
.faq-item[open]{ border-color:var(--gold-deep); }
.faq-item summary{
  padding:16px 0; cursor:pointer; font-weight:700; font-size:.95rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.3rem; color:var(--gold-deep); flex:none; transition:transform .2s ease; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ padding-bottom:16px; margin:0; color:var(--ink-soft); }

/* ---- about page ---- */
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:32px 0; }
.about-stat{ text-align:center; background:var(--paper-deep); border-radius:12px; padding:20px; }
.about-stat .num{ font-family:'Fraunces',serif; font-weight:900; font-size:1.5rem; color:var(--gold-deep); }
.about-stat .lbl{ font-size:.78rem; color:var(--ink-soft); margin-top:4px; }

/* ---- origin story timeline ---- */
.timeline{ position:relative; margin:32px 0 40px; padding-left:8px; }
.timeline::before{
  content:''; position:absolute; left:23px; top:6px; bottom:6px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--gold-deep) 0 6px, transparent 6px 11px);
}
.tl-item{ position:relative; padding-left:56px; margin-bottom:30px; display:flex; align-items:flex-start; gap:18px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-content{ flex:1; min-width:0; }
.tl-art{ flex:none; width:96px; }
.tl-art svg{ width:100%; height:auto; display:block; }
.tl-art.big{ width:128px; }
.tl-dot{
  position:absolute; left:12px; top:2px; width:24px; height:24px; border-radius:50%;
  border:3px solid var(--paper); box-shadow:0 0 0 2px var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.tl-item:nth-child(6n+1) .tl-dot{ background:var(--sky); }
.tl-item:nth-child(6n+2) .tl-dot{ background:var(--gold); }
.tl-item:nth-child(6n+3) .tl-dot{ background:var(--leaf); }
.tl-item:nth-child(6n+4) .tl-dot{ background:var(--rose); }
.tl-item:nth-child(6n+5) .tl-dot{ background:var(--clay); }
.tl-item:nth-child(6n+6) .tl-dot{ background:var(--sky); }
.tl-year{
  display:inline-block; font-family:'Fraunces',serif; font-weight:800; font-size:.82rem;
  color:var(--gold-deep); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;
}
.tl-item h3{ font-size:1.08rem; margin:0 0 6px; }
.tl-item p{ margin:0; font-size:.92rem; }
.tl-item.disaster{
  background:var(--paper-deep); border-radius:14px; padding:16px 18px 16px 56px;
}
.tl-item.disaster h3{ color:var(--rose-deep); }
.tl-mishear{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-size:.9rem;
  background:var(--white); border:1px dashed var(--line); border-radius:999px; padding:6px 14px;
}
.tl-mishear .say{ color:var(--ink-soft); }
.tl-mishear .arrow{ color:var(--rose-deep); }
.tl-mishear .heard{ font-weight:700; color:var(--rose-deep); }

/* ---- shutdown (muted) and comeback (warm, celebratory) moments ---- */
.tl-item.shutdown{
  background:#EDE9E2; border-radius:14px; padding:16px 18px 16px 56px; filter:grayscale(0.15);
}
.tl-item.shutdown .tl-year{ color:#8A8072; }
.tl-item.shutdown h3{ color:#5B5045; }
.tl-item.comeback{
  background:var(--white); border:2px solid var(--ink); border-radius:16px;
  box-shadow:5px 5px 0 var(--gold); padding:18px 20px 18px 56px;
}
.tl-item.comeback .tl-year{ color:var(--gold-deep); }
.tl-item.comeback h3{ color:var(--clay-deep); }
.tl-item.shutdown .tl-dot{ background:#8A8072 !important; }
.tl-item.comeback .tl-dot{ background:var(--gold) !important; }

/* ---- blog listing ---- */
.blog-post-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:24px;
}
.blog-post-card .meta{ font-size:.78rem; color:var(--ink-soft); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.blog-post-card h2{ font-size:1.3rem; margin:0 0 12px; }
.blog-post-card p{ margin-bottom:10px; }

@media (max-width:640px){
  .about-stats{ grid-template-columns:1fr; }
  .tl-item{ flex-direction:column; }
  .tl-art{ width:84px; align-self:flex-start; }
  .tl-art.big{ width:110px; }
}