/* ---------- Blog Post (article view) ---------- */

.post {
  color: #1e232b;
  --mint: #45d1ab;
  --ink: #1e232b;
  --ink-2: #2b2f38;
  --ink-3: #5c6472;
  --line: #e8ebf3;
  --bg-soft: #fafbff;
}

/* ---------- HERO (unchanged visuals) ---------- */

.post-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  left: 0;
  right: 0;
  overflow: clip;
}

.post-hero .hero-img { height: clamp(260px, 42vw, 520px); display:block; overflow:hidden; }
.post-hero .hero-img img { width:100%; height:100%; object-fit:cover; display:block; }

.post-hero .container.narrow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100% - 32px)); /* base; overridden at ≤1099px to match container width */
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgb(255 255 255 / 18%);
  backdrop-filter: saturate(100%) blur(8px);
  box-shadow: 0 12px 40px rgba(10, 20, 30, 0.12);
}

.post-hero .kicker{
  display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line);
  color:var(--ink-3); margin-bottom:10px;
}
.post-hero .title{ font-size:clamp(28px, 2.8vw + 8px, 40px); letter-spacing:-.01em; line-height:1.15; margin:6px 0 12px; color:var(--ink); }
.post-hero .meta{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center; color:var(--ink-3); font-size:14px; }
.post-hero .meta .avatar{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); object-fit:cover; }

/* ---------- ARTICLE BODY CARD ---------- */

.prose{
  margin: clamp(22px, 4vw, 48px) auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding: clamp(20px, 3vw, 40px);
  box-shadow: 0 10px 40px rgba(10,20,30,0.04);
}
.prose .lede{ font-size:clamp(18px, 1.2vw + 14px, 20px); line-height:1.7; color:var(--ink-2); margin-bottom:1.4rem; }
.prose h2{
  margin: 2.6rem 0 .8rem; font-size: clamp(22px, 1.6vw + 14px, 28px);
  letter-spacing:-.01em; line-height:1.25; color:var(--ink); position:relative;
}
.prose h2::after{
  content:""; display:block; width:70%; height:3px; margin-top:10px;
  background:linear-gradient(90deg, var(--mint), rgba(69,209,171,0)); border-radius:2px;
}
.prose h3{ margin:1.6rem 0 .6rem; font-size:clamp(18px, 1vw + 12px, 20px); line-height:1.35; color:var(--ink-2); }
.prose p, .prose li{ color:var(--ink-2); line-height:1.75; font-size:16px; }
.prose ul{ list-style:none; padding-left:0; margin:.5rem 0 1rem; }
.prose ul li{ position:relative; padding-left:1.5rem; margin:.45rem 0; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.68em; width:.55rem; height:.55rem; border-radius:50%; background:var(--mint); }
.prose ol{ counter-reset:step; padding-left:0; margin:.5rem 0 1rem; list-style:none; }
.prose ol>li{ counter-increment:step; position:relative; padding-left:2.2rem; margin:.6rem 0; }
.prose ol>li::before{
  content:counter(step); position:absolute; left:0; top:.15rem; width:1.6rem; height:1.6rem; border-radius:999px;
  display:grid; place-items:center; font:700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#fff; background:#111; box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.prose blockquote{ margin:1.25rem 0; padding:1rem 1.25rem; border-left:4px solid var(--mint); background:#f6fffb; border-radius:8px; color:#114136; font-size:17px; }
.prose hr{ height:1px; border:0; margin:2.3rem 0; background:linear-gradient(90deg, rgba(69,209,171,0), rgba(69,209,171,.55), rgba(69,209,171,0)); }
.prose a{ color:#0b6b5a; text-decoration:underline; text-underline-offset:3px; }

/* ---------- SHARE / NEXT-PREV ---------- */

.post-share{ display:flex; align-items:center; gap:10px; margin-top:2.2rem; flex-wrap:wrap; color:var(--ink-3); }
.post-share a{
  display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 14px;
  border-radius:999px; border:1px solid var(--line); background:#fff; text-decoration:none; color:var(--ink-2);
  transition: transform .12s ease, box-shadow .12s ease;
}
.post-share a:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(10,20,30,0.06); }

.next-prev{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:1.2rem; }
.next-prev a{
  display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff;
  color:var(--ink-2); text-decoration:none; transition: background .12s, transform .12s, box-shadow .12s;
}
.next-prev a:hover{ background:var(--bg-soft); transform:translateY(-1px); box-shadow:0 6px 20px rgba(10,20,30,0.06); }
.next-prev .prev{text-align:left;} .next-prev .next{text-align:right;}

/* ---------- Small screens ---------- */
@media (max-width: 680px){
  .post-hero .container.narrow{ padding:14px 16px; border-radius:12px; backdrop-filter:none; }
  .post-share{ gap:8px; }
  .next-prev{ grid-template-columns:1fr; }
}

/* Optional: dark mode tweaks */
@media (prefers-color-scheme: dark){
  .post{ --ink:#e9edf2; --ink-2:#c9d1da; --ink-3:#98a3b2; --line:#253044; --bg-soft:#0f1622; }
  .post-hero .container.narrow{ background:rgba(12,18,28,.55); border-color:rgba(255,255,255,.06); }
  .prose{ background:#0b111a; border-color:var(--line); box-shadow:none; }
  .prose blockquote{ background:#0e1916; color:#bfe9dc; }
  .post-share a{ background:#0b111a; }
  .next-prev a{ background:#0b111a; }
}

/* ---------- Grid + TOC (matches policy.css) ---------- */

.content-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 0rem;
}

/* Desktop TOC (sticky) */
.toc{
  position: sticky;
  top: 6rem;
  align-self: start;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--line);
  border-radius: 16px;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink-3);
  z-index: 10000;
  background: #fff;
}
.toc ul{ list-style:none; padding-left:0; margin:0; }
.toc li{ margin-bottom:.5rem; }
.toc a{
  color: var(--ink-3); display:block; padding:.25rem 0; border-left:2px solid transparent;
  transition: color .15s ease, border-color .15s ease; text-decoration:none;
}
.toc a:hover, .toc a.active{ color: var(--mint); border-color: var(--mint); padding-left: 5px; }

.toc-title{
  font-weight:700; font-size:.9rem; color:var(--ink);
  margin:0 0 .75rem;
}

/* Mobile toggle button base (we restyle when inside .prose) */
.toc-toggle{
  background: var(--mint); color:#fff; border:none;
  padding:.5rem .75rem; font-size:.875rem; font-weight:600;
  border-radius: 6px; cursor:pointer; display:inline-flex; align-items:center; gap:.25rem;
}
.toc-toggle::after{ content:"\25BC"; margin-left:.5rem; font-size:.75rem; transition: transform .2s;}
.toc-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Mobile toggle container visibility */
.toc-toggle-container{ display:none; }

/* Mobile default: hide desktop TOC area */
@media (max-width: 767px){
  .toc{ display:none; padding:1rem 1rem 0; border-right:none; }
  .toc.open{ display:block; }
  .toc-toggle-container{ display:block; padding:0; } /* will sit inside .prose now */
}

/* Make .post-content share the .prose card styling */
.post-content{}
.post-content, .prose{ margin: clamp(22px, 4vw, 48px) auto; margin-top: 0rem; }
.post-content p, .post-content li{ color: var(--ink-2); }

/* Callouts */
.callout{
  border-left: 4px solid var(--mint);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  box-shadow: 0 6px 24px rgba(10,20,30,.04);
}
.callout.summary{ background:#f6fffb; }
.callout.info{ background:#f6fffb; }
.callout strong{ display:block; margin-bottom:.5rem; color: var(--ink); }

/* ---------- Progress bar ---------- */
#readingProgress{
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  background: var(--mint, #45d1ab); z-index: 9999; transition: width .1s linear; pointer-events:none;
}

/* ---------- Background ---------- */
.bg-wrap{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.9; }
svg.bg{ width:100%; height:100%; display:block; }
.post::before, .post::after{ content:none !important; }

/* ---------- Heading anchor offset for fixed nav ---------- */
:root{ --nav-lock-height: 76px; }
html{ scroll-padding-top: var(--nav-lock-height); }
.post-content h2, .post-content h3{ scroll-margin-top: var(--nav-lock-height); }

/* ---------- Keep navbar visible on post pages ---------- */
.post-page .navbar{ position:fixed !important; top:0; left:0; right:0; z-index:1000; height:auto !important; transform:none !important; opacity:1 !important; }
body{ padding-top: var(--nav-lock-height); }
.post-page .navbar, .post-page .navbar *{ transition:none !important; }
.post-page .navbar.is-hidden, .post-page .navbar.is-compact, .post-page .navbar.compact, .post-page .navbar.navbar--hidden, .post-page .navbar.hide{
  transform:none !important; opacity:1 !important; height:auto !important;
}
.post-page .navbar[style]{ transform:none !important; }
body.post-page{ overflow-x:hidden; overflow-x:clip; }

/* ----- TOC internals / scrollbar ----- */
.toc{ overflow:hidden; }
.toc-title{ position:sticky; top:0; background:#fff; z-index:1; padding-bottom:.25rem; margin-bottom:.5rem; }
.toc > ul{
  max-height: calc(100vh - 8rem - 40px);
  overflow: auto; margin: 0; padding-right: 6px;
}
.toc > ul{ scrollbar-width: thin; scrollbar-color: rgba(69,209,171,.7) transparent; }
.toc > ul::-webkit-scrollbar{ width:8px; height:8px; }
.toc > ul::-webkit-scrollbar-track{ background:transparent; }
.toc > ul::-webkit-scrollbar-thumb{ background-color:rgba(69,209,171,.7); border-radius:4px; }

/* Desktop two-column layout */
@media (min-width: 1100px){
  .content-grid{ grid-template-columns: 250px 1fr; }
}

/* ===== Match hero width to content when TOC collapses (≤ 1099px) ===== */
@media (max-width: 1099px){
  .content-grid{ padding-top: 1rem; }
  .toc{ margin-top: 0 !important; }
  .toc{ display:none; padding:1rem 1rem 0; border-right:none; }
  .toc.open{ display:block; }
  .toc-toggle-container{ display:block; padding:1rem 0 0; }

  /* Use the same basis as .container (92vw) minus both side paddings (2 × clamp(12px,3vw,24px)) */
  .post-hero .container.narrow{
    width: min(900px, calc(92vw - clamp(24px, 6vw, 48px)));
  }
}

/* ---------- Ultra-small screens (≤420px) ---------- */
@media (max-width: 420px){
  .content-grid{ gap: 1rem; padding: 0rem 0 1.25rem; }

  .prose{
    /* full-bleed feel without removing the card entirely */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0 0 12px 12px;
    padding: 18px 16px;
    box-shadow: 0 6px 24px rgba(10,20,30,0.04);
  }

  .prose .lede{ font-size: 17px; line-height: 1.6; margin-bottom: 1rem; }
  .prose h2{ margin: 1.8rem 0 .65rem; font-size: 20px; line-height: 1.25; }
  .prose h2::after{ height: 2px; width: 60%; margin-top: 8px; }
  .prose h3{ margin: 1.2rem 0 .5rem; font-size: 17px; }
  .prose p, .prose li{ font-size: 16.5px; line-height: 1.78; }
  .prose p{ margin: 0 0 1em; }
  .prose ul{ margin: .45rem 0 1rem; }
  .prose ul li{ padding-left: 1.25rem; margin: .45rem 0; }
  .prose ul li::before{ width: .45rem; height: .45rem; top: .68em; }
  .prose ol{ margin: .45rem 0 1rem; }
  .prose ol>li{ padding-left: 1.9rem; margin: .55rem 0; }
  .prose ol>li::before{ width: 1.4rem; height: 1.4rem; font-size: 11px; top: .2rem; }

  .post-hero .container.narrow{
    padding: 12px 14px;
    border-radius: 12px;
    backdrop-filter: none;
  }
}

/* ---------- MOBILE: TOC lives inside the prose card ---------- */
@media (max-width: 767px){
  /* When the TOC node is appended into #tocMount (inside .prose),
     these styles make it look like a native block in the article. */
  .prose .toc{
    display: none;               /* closed by default */
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    margin: .5rem 0 1rem;
  }
  .prose .toc.open{ display: block; }

  .prose .toc-toggle-container{
    padding: 0;
    margin: .5rem 0 1rem;
  }
  .prose .toc-toggle{
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    line-height: 1;
    font-weight: 600;
    font-size: .86rem;
    background:#fff;
    color: var(--ink-2);
    border-bottom:1px solid var(--line);
    border-radius:8px;
    padding:6px 10px;
    cursor:pointer;
  }
  .prose .toc-toggle::after{
    content:"▾";
    font-size:.8rem;
    transform: translateY(-1px);
    transition: transform .2s ease;
  }
  .prose .toc-toggle[aria-expanded="true"]::after{
    transform: rotate(180deg) translateY(1px);
  }

  .prose .toc .toc-title{
    position: sticky; top: 0; background:#fff;
    margin: 0 0 .5rem; padding-bottom: .15rem;
    font-weight:700; font-size:.9rem; color:var(--ink);
    display: none;
  }
  .prose .toc a{
    color: var(--ink-3);
    display: block;
    padding: 0rem;
    margin: 1rem 0;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, padding-left .15s ease;
  }
  .prose .toc a:hover, .prose .toc a.active{
    color: var(--mint);
    border-color: var(--mint);
    padding-left: 5px;
  }
}

/* ===================================================== */