/* =====================================================================
   Blog — table of contents + post typography polish
   ---------------------------------------------------------------------
   The TOC is generated by generate_custom_toc_h2() in functions.php from
   the post's own h2/h3 headings. Styled as a drafting sheet: paper card,
   clay title-block rule, tracked "CONTENTS" label, numbered h2 entries,
   indented h3 entries. Scrollspy (.is-here) is set by single.php's script.
   ===================================================================== */

.pi-toc{
  position:relative;
  background:var(--pi-bg-paper);
  border:1px solid var(--pi-line);
  padding:22px 24px 18px;
  overflow:hidden;
}
.pi-toc::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--pi-accent),var(--pi-accent-dk));
}
.pi-toc__label{
  display:block;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pi-sepia-txt);
  margin-bottom:12px;
}
.pi-toc__list{
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  counter-reset:pi-toc;
}
.pi-toc__list > li{
  margin:0;
  padding:0;
}
.pi-toc__list > li:not(.pi-toc__sub){ counter-increment:pi-toc; }
.pi-toc__list a{
  position:relative;
  display:block;
  padding:7px 0 7px 34px;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:14px !important;
  line-height:1.45 !important;
  color:var(--pi-text) !important;
  text-decoration:none;
  border-bottom:1px solid var(--pi-line-faint);
  transition:color .15s ease, padding-left .15s ease;
}
.pi-toc__list > li:last-child a{ border-bottom:0; }
.pi-toc__list > li:not(.pi-toc__sub) > a::before{
  content:counter(pi-toc, decimal-leading-zero);
  position:absolute;
  left:0; top:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--pi-sepia-txt-soft);
}
.pi-toc__sub a{
  padding-left:50px;
  font-size:13px !important;
  color:var(--pi-text-soft) !important;
}
.pi-toc__sub a::before{
  content:"";
  position:absolute;
  left:34px; top:50%;
  width:8px; height:1px;
  background:var(--pi-line-strong);
}
.pi-toc__list a:hover,
.pi-toc__list li.is-here > a{
  color:var(--pi-accent) !important;
  padding-left:38px;
}
.pi-toc__sub a:hover,
.pi-toc__sub.is-here > a{ padding-left:54px; }

/* legacy wrapper compatibility: kill the old gray box if it still wraps us */
.custom-toc-box{ border:0 !important; background:transparent !important; padding:0 !important; border-radius:0 !important; }

/* ---- TOC: never taller than the viewport --------------------------------
   The sidebar TOC goes fixed while scrolling (single.php script); long
   posts produced a TOC taller than the screen that just cut off. Cap it
   and let it scroll internally with a quiet scrollbar. */
.TOC-wrapper .pi-toc{
  max-height:calc(100vh - 210px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--pi-line-mid) transparent;
}
.TOC-wrapper .pi-toc::-webkit-scrollbar{ width:5px; }
.TOC-wrapper .pi-toc::-webkit-scrollbar-thumb{ background:var(--pi-line-mid); }

/* ---- blog archive (/blog/) — editorial cards ----------------------------
   The archive uses the baked WPBakery post grid (.custom-post .vc_grid-item).
   Cards: paper sheet, hairline border, image top, hover lift; clay accents. */
body.page-id-400 .custom-post .vc_grid-item .vc_grid-item-mini{
  background:var(--pi-bg-paper) !important;
  border:1px solid var(--pi-line-faint) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
body.page-id-400 .custom-post .vc_grid-item .vc_grid-item-mini:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px -22px var(--pi-shadow-lg);
}
body.page-id-400 .custom-post .vc_gitem-zone-a .vc_gitem-zone-img{
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
body.page-id-400 .custom-post .vc_grid-item:hover .vc_gitem-zone-img{
  transform:scale(1.05);
}
body.page-id-400 .custom-post .vc_gitem-post-data-source-post_title h4,
body.page-id-400 .custom-post .vc_gitem-post-data-source-post_title h4 a{
  font-size:17px !important;
  line-height:1.4 !important;
  font-weight:600 !important;
  color:var(--pi-text) !important;
}
body.page-id-400 .custom-post .vc_gitem-post-data-source-post_title h4 a:hover{ color:var(--pi-accent) !important; }
body.page-id-400 .custom-post .vc_gitem-post-data-source-post_excerpt p{
  font-size:14px !important;
  line-height:1.6 !important;
  color:var(--pi-text-soft) !important;
}
body.page-id-400 .custom-post .vc_btn3-left a{
  background:transparent !important;
  border:1px solid var(--pi-text) !important;
  border-radius:0 !important;
  color:var(--pi-text) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  padding:10px 20px !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease !important;
}
body.page-id-400 .custom-post .vc_btn3-left a:hover{
  background:var(--pi-accent) !important;
  border-color:var(--pi-accent) !important;
  color:var(--pi-on-accent) !important;
}


/* =====================================================================
   §R — Reading experience (single posts)
   ---------------------------------------------------------------------
   The complaint was "content should be more width, less padding, so the
   reader reads the sentence better". Two things were wrong: the article
   column was ~680px inside a 1000px container (cramped, lots of dead page),
   and the line ran to ~82 characters at 16.5px — past the comfortable
   65–75. So: wider column + less padding (single.php), bigger type here,
   and a measure ceiling so long lines never come back.
   ===================================================================== */
.blog-content{
  font-size:19px;
  line-height:1.8;
}
.blog-content p,
.blog-content li{
  font-size:19px !important;
  line-height:1.8 !important;
  /* 64ch, not 74: the `ch` unit measures the "0" glyph, which is wider than
     Poppins' average character — 74ch measured out at ~84 real characters.
     64ch lands at ~72, inside the comfortable 65–75 band, and still gives a
     wider text block (~750px) than the old cramped 679px column. */
  max-width:64ch;
  color:var(--pi-text-soft);
}
.blog-content li{ margin-bottom:.5em; }
.blog-content p{ margin:0 0 1.35em; }
/* media, tables and embeds use the FULL widened column */
.blog-content img,
.blog-content figure,
.blog-content table,
.blog-content iframe,
.blog-content .wp-block-image{ max-width:100%; }
.blog-content h2{ margin-top:1.6em; }
.blog-content h3{ margin-top:1.4em; }
.blog-content h2, .blog-content h3, .blog-content h4{ max-width:44ch; }
/* The FAQ accordion's questions are h4s, but they are interactive rows, not
   running copy — capping them at the 44ch reading measure strands each
   question (and its +/- icon, which anchors to the title box) mid-row while
   the panel's own divider runs the full column. Let the rows own the width. */
.blog-content .vc_tta-panel-title{ max-width:none; }

@media (max-width:1023px){
  .blog-content p,
  .blog-content li{ font-size:17.5px !important; max-width:none; }
  /* 737–1023px kept the sidebar next to a flex column that would not grow —
     a 297px article on a 768px tablet. The TOC is a desktop affordance (the
     theme already drops it under 737), so stack below 1024 and give the
     article the whole width. */
  .single .toc-content-wrapper.container{ display:block !important; }
  .single .toc-sidebar{ display:none !important; }
  /* Phones gave up ~75px to the theme's .content_wrap gutter (37.5px a side)
     plus the .container padding, leaving a 300px article on a 375px screen.
     Hand most of it back; the wrapper's stray negative margin goes too. */
  /* the theme sizes .content_wrap to width:80% on phones (300px of a 375px
     screen, centred by margin:0 auto) — the margins were never the lever */
  .single .content_wrap{
    width:auto !important;
    margin-left:16px !important;
    margin-right:16px !important;
  }
  .single .toc-content-wrapper.container{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* =====================================================================
   Author card (single post) — deliberately small.
   ---------------------------------------------------------------------
   It sits between the article end and the related posts, so it stays a
   quiet strip: 64px avatar, one name line, one role line, and a bio
   clamped to two lines behind a "Read more". js/blog-author.js only
   reveals the button when the bio ACTUALLY overflows, so short bios
   never show a pointless toggle.
   ===================================================================== */
.pi-author{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin:48px 0 8px;
  padding:22px 24px;
  background:var(--pi-bg-paper);
  border:1px solid var(--pi-line-faint);
}
.pi-author__avatar{
  flex:0 0 auto;
  width:64px;
  height:64px;
  display:block;
  border-radius:50%;
  overflow:hidden;
  line-height:0;
}
/* the theme stretches every avatar to width:100% — pin ours */
.pi-author__avatar img,
.page_content_wrap .pi-author__avatar img.avatar{
  width:64px !important;
  height:64px !important;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 !important;
}
.pi-author__body{ min-width:0; flex:1; }
.pi-author__kicker{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:10.5px !important;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pi-sepia-txt) !important;
  margin:0 0 4px !important;
}
.page_content_wrap .pi-author__name,
.pi-author__name{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:17px !important;
  line-height:1.3 !important;
  font-weight:600;
  margin:0 0 2px !important;
}
.pi-author__name a{ color:var(--pi-text) !important; }
.pi-author__name a:hover{ color:var(--pi-accent-dk) !important; }
.pi-author__li{
  display:inline-flex;
  width:16px;
  height:16px;
  color:var(--pi-text-soft) !important;
  transition:color .2s ease;
}
.pi-author__li svg{ width:100%; height:100%; display:block; }
.pi-author__li:hover{ color:#0A66C2 !important; }
.pi-author__role{
  font-size:12.5px !important;
  color:var(--pi-text-soft) !important;
  margin:0 0 8px !important;
}
.pi-author__bio p{
  font-size:14.5px !important;
  line-height:1.6 !important;
  color:var(--pi-text-soft) !important;
  margin:0 !important;
}
/* collapsed: two lines. The clamp is the ONLY height control — no max-height
   guesswork, so it stays correct at any font size or zoom. */
.pi-author__bio{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pi-author__bio.is-open{
  display:block;
  -webkit-line-clamp:unset;
  overflow:visible;
}
.pi-author__more{
  min-height:0 !important;
  margin-top:8px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--pi-accent-dk) !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none !important;
}
.pi-author__more:hover{ color:var(--pi-text) !important; }

@media (max-width:600px){
  .pi-author{ padding:18px; gap:14px; }
  .pi-author__avatar,
  .pi-author__avatar img,
  .page_content_wrap .pi-author__avatar img.avatar{ width:52px !important; height:52px !important; }
}

/* End-of-post CTA (functions.php paras_blog_end_cta → inc/cro.php pi-faq-cta):
   separate it from the article body with air + a hairline. */
.pi-blog-end-cta{
  margin-top:clamp(44px, 5vw, 76px);
  padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid var(--pi-line-faint);
}

/* =====================================================================
   §BLOG HERO — single-post .pa-hero (single.php). Reuses css/area-pages.css
   .pa-hero for the ink band + scrim + Fraunces title; these rules add the
   post byline meta row and guarantee the title size without depending on the
   theme's .page_content_wrap scope. Plus the dark-mode contrast fix for the
   Related-Posts card titles, which fell to the theme's black link default.
   ===================================================================== */
/* Heavier LEFT scrim than the base .pa-hero: the blog featured images are
   pre-branded cover graphics with the post title + logo + URL baked into
   their left third. A steep left-weighted gradient sinks that baked text so
   only the clean photo on the right reads through, and OUR hero title owns
   the fold. */
.pa-hero--post{
  background-image:
    linear-gradient(100deg,
      rgba(17,19,17,1) 0%,
      rgba(17,19,17,1) 40%,
      rgba(17,19,17,.72) 72%,
      rgba(17,19,17,.5) 100%),
    var(--pa-hero-img, none) !important;
  background-position:center right !important;
}
@media (max-width:767px){
  .pa-hero--post{
    background-image:
      linear-gradient(180deg, rgba(17,19,17,.92) 0%, rgba(17,19,17,.9) 100%),
      var(--pa-hero-img, none) !important;
  }
}
.pa-hero--post .pa-hero__title{
  font-size:clamp(30px, 22px + 3.2vw, 58px) !important;
  line-height:1.12 !important;
  max-width:24ch;
}
.pa-hero--post .pa-hero__row{ justify-content:flex-start; }
.pa-hero--post .pa-hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0;
  font-family:'Poppins','Poppins-fallback',sans-serif;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--pi-ondark);
}
.pa-hero--post .pa-hero__meta-dot{ color:var(--pi-accent); }

/* Related-posts cards (single.php) — the title links inherited the theme's
   black <a> default and vanished on the dark canvas ("titles bleeding with
   background"); the card frame was a hard #ddd. Bring both onto the tokens. */
.related-post{ border-color:var(--pi-line) !important; }
.related-post h4.realted-blog-title a{
  color:var(--pi-text);
  transition:color .2s ease;
}
.related-post h4.realted-blog-title a:hover{ color:var(--pi-accent); }