/* Shared styles for Scangloo blog articles */
:root {
  --primary:#6C5CE7; --primary-hover:#5A4BD1; --primary-dark:#4A3DB8;
  --primary-soft:#EEEAFE; --primary-softer:#F7F5FF;
  --ink:#1A1B3A; --ink-soft:#5A6080; --bg:#F4F5F9; --surface:#fff;
  --border:#E7E4F2; --green:#5DBB80; --pink:#FF6B9D; --gold:#FFB800;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter',-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.7; font-size:1.05rem; -webkit-font-smoothing:antialiased;
}

/* Top bar */
.doc-bar {
  position:sticky; top:0; z-index:10;
  background:rgba(244,245,249,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.doc-bar-inner {
  max-width:760px; margin:0 auto; padding:0.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.doc-bar .logo-img { height:26px; width:auto; display:block; }
.doc-back {
  display:inline-flex; align-items:center; gap:0.4rem;
  color:var(--primary-dark); text-decoration:none; font-weight:600; font-size:0.9rem;
}
.doc-back:hover { color:var(--primary); }

/* Article shell */
.post { position:relative; max-width:760px; margin:0 auto; padding:2.5rem 1.5rem 4rem; }

.breadcrumb { font-size:0.82rem; color:var(--ink-soft); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover { color:var(--primary-dark); }
.breadcrumb span { margin:0 0.35rem; opacity:0.5; }

.post-pill {
  display:inline-block;
  font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:0.3rem 0.75rem; border-radius:100px; margin-bottom:1rem;
}
.p-myths { background:#FFE9F1; color:#B83B6B; }
.p-basics { background:#E3F3EA; color:#2E7D54; }
.p-ingredients { background:var(--primary-soft); color:var(--primary-dark); }
.p-routines { background:#FFF3D6; color:#9A6B00; }

.post h1 {
  font-family:"wayfinder-cf",'Inter',sans-serif; font-weight:700;
  font-size:clamp(2rem,5.5vw,3rem); line-height:1.1; letter-spacing:0.01em;
  margin-bottom:1rem;
}
.post-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem;
  color:var(--ink-soft); font-size:0.9rem; margin-bottom:1.75rem;
}
.post-meta .dot { opacity:0.5; }

.post-cover {
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:20px; margin-bottom:2rem; display:block;
  box-shadow:0 12px 40px rgba(26,27,58,0.10);
}

.post-body > p { margin-bottom:1.25rem; }
.post-body .lead { font-size:1.18rem; color:var(--ink); font-weight:500; line-height:1.6; }
.post-body h2 {
  font-size:clamp(1.4rem,3.5vw,1.7rem); font-weight:800; letter-spacing:-0.01em;
  margin:2.25rem 0 0.75rem; scroll-margin-top:80px;
}
.post-body h3 { font-size:1.15rem; font-weight:700; margin:1.5rem 0 0.5rem; }
.post-body a { color:var(--primary-dark); font-weight:600; }
.post-body a:hover { color:var(--primary); }
.post-body ul, .post-body ol { margin:0 0 1.25rem 1.25rem; }
.post-body li { margin-bottom:0.5rem; }
.post-body strong { color:var(--ink); }
.post-body blockquote {
  border-left:3px solid var(--primary); background:var(--primary-softer);
  padding:1rem 1.25rem; border-radius:0 12px 12px 0; margin:1.5rem 0;
  color:var(--ink); font-size:1.05rem;
}

/* Key takeaways */
.takeaways {
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:1.4rem 1.6rem; margin:2rem 0; box-shadow:0 8px 24px rgba(26,27,58,0.05);
}
.takeaways h2 { font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 0.75rem; color:var(--primary-dark); }
.takeaways ul { margin:0 0 0 1.1rem; }
.takeaways li { margin-bottom:0.4rem; }

/* TL;DR one-liner */
.tldr { color:var(--ink-soft); font-style:italic; margin-bottom:1.5rem; }

/* FAQ */
.post-faq { margin-top:2.5rem; }
.post-faq h2 { font-size:1.5rem; font-weight:800; margin-bottom:1rem; }
.faq-item { border-top:1px solid var(--border); padding:1rem 0; }
.faq-item summary {
  font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:var(--primary); font-weight:700; }
.faq-item[open] summary::after { content:"–"; }
.faq-item p { margin-top:0.6rem; color:var(--ink-soft); }

/* CTA */
.post-cta {
  margin-top:2.5rem; background:var(--primary); color:#fff;
  border-radius:20px; padding:2rem 1.9rem; text-align:center;
}
.post-cta h2 { font-size:1.4rem; font-weight:800; margin-bottom:0.5rem; color:#fff; }
.post-cta p { color:rgba(255,255,255,0.86); margin:0 auto 1.3rem; max-width:440px; }
.post-cta .btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:#fff; color:var(--primary); text-decoration:none;
  padding:0.8rem 1.7rem; border-radius:100px; font-weight:700;
  box-shadow:0 10px 30px rgba(26,27,58,0.22); transition:transform .2s, box-shadow .2s;
}
.post-cta .btn:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(26,27,58,0.3); }

/* Related */
.related { margin-top:3rem; }
.related h2 { font-size:1.2rem; font-weight:800; margin-bottom:1rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem; }
.related-card {
  display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1rem 1.1rem; text-decoration:none; color:var(--ink); transition:transform .2s, box-shadow .2s;
}
.related-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(26,27,58,0.1); }
.related-card.has-thumb { display:flex; gap:0.9rem; align-items:center; padding:0.7rem 0.85rem; }
.related-thumb { width:60px; height:60px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--primary-soft); }
.related-text { min-width:0; }
.related-card span { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--primary-dark); }
.related-card h3 { font-size:0.98rem; font-weight:700; line-height:1.3; margin-top:0.3rem; }

.doc-footer { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border); text-align:center; color:var(--ink-soft); font-size:0.85rem; }
.doc-footer a { color:var(--primary-dark); font-weight:600; text-decoration:none; }
.doc-footer a:hover { color:var(--primary); }

/* ---- Reading progress bar ---- */
.reading-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--primary); z-index:50; transition:width 0.08s linear; }

/* ---- Table of contents ---- */
.post-toc { background:var(--primary-softer); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.3rem; margin:0 0 2rem; }
.post-toc-title { font-size:0.76rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--primary-dark); margin-bottom:0.6rem; }
.post-toc ul { list-style:none; margin:0; padding:0; }
.post-toc li { margin:0.3rem 0; }
.post-toc a { color:var(--ink); text-decoration:none; font-size:0.95rem; font-weight:500; border-bottom:1px solid transparent; }
.post-toc a:hover { color:var(--primary-dark); border-bottom-color:currentColor; }
.post-toc a.active { color:var(--primary-dark); font-weight:700; border-bottom-color:currentColor; }
/* Floating sidebar TOC on wide screens (sits in the left gutter, sticky) */
@media (min-width: 1240px) {
  .post-toc-rail { position:absolute; top:0; bottom:0; left:-232px; width:204px; }
  .post-toc-rail .post-toc {
    position:sticky; top:90px; margin:0; background:transparent; border:none; padding:0;
    border-left:2px solid var(--border); border-radius:0; padding-left:1rem;
    max-height:calc(100vh - 110px); overflow-y:auto;
  }
  .post-toc-rail .post-toc a { font-size:0.88rem; }
}

/* ---- Share row ---- */
.post-share { display:flex; align-items:center; gap:0.5rem; margin:0 0 2rem; }
.post-share > span { font-size:0.82rem; font-weight:700; color:var(--ink-soft); margin-right:0.15rem; }
.share-btn {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  text-decoration:none; transition:background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.share-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); }
.share-btn.copied { background:var(--green); color:#fff; border-color:var(--green); }

/* ---- Author box ---- */
.author-box {
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:1.4rem 1.5rem; margin-top:2.5rem;
}
.author-avatar { width:52px; height:52px; border-radius:50%; flex-shrink:0; object-fit:contain; background:var(--primary-soft); padding:6px; }
.author-name { font-weight:800; margin-bottom:0.2rem; }
.author-desc { color:var(--ink-soft); font-size:0.92rem; line-height:1.5; }

/* ---- References ---- */
.post-refs { margin-top:2.5rem; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.3rem 1.6rem; }
.post-refs h2 { font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.85rem; }
.post-refs ol { margin:0 0 0 1.2rem; }
.post-refs li { margin-bottom:0.65rem; font-size:0.9rem; color:var(--ink-soft); line-height:1.5; }
.post-refs a { color:var(--primary-dark); font-weight:600; }
.post-refs a:hover { color:var(--primary); }

/* ---- Disclaimer ---- */
.post-disclaimer { margin-top:1.75rem; font-size:0.82rem; color:var(--ink-soft); font-style:italic; border-top:1px dashed var(--border); padding-top:1rem; }
.ai-tag {
  display:inline-block; font-style:normal; font-weight:700; font-size:0.7rem;
  letter-spacing:0.03em; color:var(--primary-dark); background:var(--primary-soft);
  border-radius:100px; padding:0.15rem 0.6rem; margin-right:0.5rem; vertical-align:middle;
}

/* ---- Back to top ---- */
.to-top {
  position:fixed; bottom:1.25rem; right:1.25rem; width:44px; height:44px; border-radius:50%;
  border:none; background:var(--primary); color:#fff; font-size:1.2rem; cursor:pointer;
  box-shadow:0 10px 30px rgba(108,92,231,0.4);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity 0.25s, transform 0.25s; z-index:40;
}
.to-top.show { opacity:1; pointer-events:auto; transform:none; }
.to-top:hover { background:var(--primary-hover); }