/* Peptide Works -- Blog article template.
 *
 * Companion to pw-blog/pw-blog-template.php. Unlike pw-hub.css, this file
 * carries the WHOLE design as classes rather than only the three things an
 * inline style cannot express.
 *
 * That is a deliberate difference, not an inconsistency. The hub kept its
 * inline styles because its blocks were stored as HTML in post meta and had to
 * stay byte-identical to the approved static page. The blog template stores
 * FIELDS and generates its own markup (see the template's header comment), so
 * there is no stored HTML to stay identical to -- which removes the reason for
 * inline styles and takes the kses hazard with it.
 *
 * That hazard, from HUB-PORT.md: Elementor kses-filters the whole document on
 * save when the saving user lacks `unfiltered_html`, and wp_kses_post() runs
 * inline styles through safecss_filter_attr(), which silently drops
 * scroll-margin-top, text-wrap and font-variant-numeric. The hub is safe only
 * because all three editors happen to be administrators today. Classes cannot
 * be stripped, so this template is safe regardless of who saves it -- which is
 * the "permanent fix" HUB-PORT.md names but did not apply.
 *
 * Everything is scoped to .pw-blog so nothing here can reach the PDP, the hub,
 * or the rest of the theme. The theme supplies the header and footer via
 * get_header()/get_footer(); this file must not style either.
 */

/* ---- faces ------------------------------------------------------------- */
/* Same two families as the hub -- Newsreader for headings, IBM Plex for body
   and mono. Shipped into pw-blog/fonts/ by deploy-assets.sh. A MISSING woff2
   renders in a system fallback that looks "nearly right", so the deploy script
   asserts each one by name rather than trusting the folder copy. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/newsreader-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}

/* ---- tokens ------------------------------------------------------------ */
.pw-blog{
  --pw-green:#1D5C2C;
  --pw-green-dk:#123D1D;
  --pw-green-br:#7BC142;
  --pw-ink:#16191B;
  --pw-body:#2A322C;
  --pw-muted:#4A544D;
  --pw-muted-2:#5C6660;
  --pw-faint:#7A837C;
  --pw-line:rgba(22,25,27,0.12);
  --pw-line-sm:rgba(22,25,27,0.09);
  --pw-band:#F2F7EF;
  --pw-answer:#F4F8F1;
  --pw-soft:#FAFBF9;
  --pw-summary:#F7FAF5;
  --pw-slot:#EDF2E9;
  --pw-serif:'Newsreader',Georgia,serif;
  --pw-sans:'IBM Plex Sans',system-ui,sans-serif;
  --pw-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---- shell ------------------------------------------------------------- */
.pw-blog{font-family:var(--pw-sans);font-size:15.5px;line-height:1.55;color:var(--pw-ink);background:#FFFFFF;}
.pw-blog *{box-sizing:border-box;}
.pw-blog a{color:var(--pw-green);text-decoration:none;}
.pw-blog a:hover{color:var(--pw-green-dk);}
.pw-blog ::selection{background:rgba(29,92,44,0.16);}
/* The theme's own [hidden] rule is not guaranteed, and a flex/grid display
   declared here would beat the UA one anyway -- this bit the static port, where
   the collapsed mobile nav rendered expanded on desktop. */
.pw-blog [hidden]{display:none !important;}
.pw-blog-wrap{max-width:1280px;margin:0 auto;padding-left:clamp(14px,3vw,32px);padding-right:clamp(14px,3vw,32px);}

/* ---- masthead ---------------------------------------------------------- */
.pw-blog-head{background:var(--pw-band);border-bottom:1px solid rgba(22,25,27,0.07);}
.pw-blog-head-inner{padding-top:clamp(22px,3vw,40px);padding-bottom:clamp(26px,3.4vw,44px);}
.pw-blog-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:var(--pw-muted-2);}
.pw-blog-crumbs a{color:var(--pw-muted-2);}
.pw-blog-crumbs a:hover{color:var(--pw-green);}
.pw-blog-crumbs .sep{opacity:0.5;}
.pw-blog-meta-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;}
.pw-blog-cat{background:#FFFFFF;border:1px solid rgba(29,92,44,0.24);color:var(--pw-green);font-family:var(--pw-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;border-radius:999px;padding:5px 11px;}
.pw-blog-read{font-family:var(--pw-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--pw-muted-2);}
.pw-blog h1{font-family:var(--pw-serif);font-weight:500;font-size:clamp(34px,4.3vw,54px);line-height:1.05;letter-spacing:-0.02em;margin:16px 0 0;max-width:24ch;text-wrap:pretty;color:var(--pw-ink);}
.pw-blog-standfirst{max-width:62ch;margin:16px 0 0;font-size:17.5px;line-height:1.6;color:var(--pw-muted);text-wrap:pretty;}
.pw-blog-byline{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(22,25,27,0.1);font-size:13.5px;color:var(--pw-muted-2);}
.pw-blog-byline strong{color:var(--pw-ink);font-weight:600;}
.pw-blog-byline .dot{opacity:0.4;}

/* ---- body grid --------------------------------------------------------- */
.pw-blog-shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start;padding-top:clamp(28px,4vw,56px);}
.pw-blog-toc{position:sticky;top:96px;}
.pw-blog-toc strong{display:block;font-family:var(--pw-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--pw-green);}
.pw-blog-toc nav{display:flex;flex-direction:column;gap:2px;margin-top:14px;border-left:1px solid var(--pw-line);}
.pw-blog-toc a{padding:7px 0 7px 14px;margin-left:-1px;border-left:1px solid transparent;font-size:13.5px;line-height:1.4;color:var(--pw-muted);}
.pw-blog-toc a:hover{color:var(--pw-green);border-left-color:var(--pw-green-br);}
.pw-blog-article{min-width:0;max-width:74ch;font-size:17.5px;line-height:1.72;color:var(--pw-body);}
.pw-blog-article p{margin:22px 0 0;}
.pw-blog-article > :first-child{margin-top:0;}

/* ---- lead image -------------------------------------------------------- */
.pw-blog-hero-img{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--pw-slot);border:1px solid rgba(22,25,27,0.08);}
.pw-blog-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pw-blog-slot{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--pw-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:#66706B;text-align:center;padding:6px;}
.pw-blog-caption{display:block;margin-top:10px;font-size:12.5px;color:var(--pw-faint);}

/* ---- sections ---------------------------------------------------------- */
.pw-blog-section{margin-top:clamp(34px,4vw,52px);scroll-margin-top:96px;}
.pw-blog h2{font-family:var(--pw-serif);font-weight:500;font-size:clamp(26px,2.6vw,34px);line-height:1.14;letter-spacing:-0.015em;margin:0;color:var(--pw-ink);text-wrap:pretty;}
.pw-blog h3{font-family:var(--pw-sans);font-weight:600;font-size:18px;line-height:1.35;margin:26px 0 0;color:var(--pw-ink);}

/* answer-first callout */
.pw-blog-answer{display:flex;gap:14px;margin-top:18px;padding:18px 20px;background:var(--pw-answer);border-left:3px solid var(--pw-green-br);border-radius:0 12px 12px 0;}
.pw-blog-answer .lbl{flex:none;font-family:var(--pw-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pw-green);padding-top:5px;}
.pw-blog-answer p{margin:0;font-size:17px;font-weight:500;color:var(--pw-ink);}

/* bullet list */
.pw-blog-list{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.pw-blog-list li{display:flex;gap:12px;align-items:flex-start;}
.pw-blog-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--pw-green-br);margin-top:11px;}

/* process flow */
.pw-blog-flow{margin:20px 0 0;padding:18px;background:var(--pw-soft);border:1px solid rgba(22,25,27,0.1);border-radius:12px;}
.pw-blog-flow strong{display:block;font-family:var(--pw-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pw-green);margin-bottom:12px;}
.pw-blog-flow-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.pw-blog-chip{font-family:var(--pw-mono);font-size:12.5px;letter-spacing:0.02em;color:var(--pw-green-dk);background:#FFFFFF;border:1px solid rgba(29,92,44,0.28);border-radius:8px;padding:8px 12px;}
.pw-blog-arrow{font-family:var(--pw-mono);font-size:13px;color:var(--pw-green-br);}

/* ---- comparison table -------------------------------------------------- */
.pw-blog-tablewrap{margin-top:20px;border:1px solid var(--pw-line);border-radius:14px;overflow:hidden;}
.pw-blog-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;}
.pw-blog-table thead tr{background:var(--pw-green-dk);color:#EAF3E7;}
.pw-blog-table th{text-align:left;padding:14px 16px;}
.pw-blog-table thead th{font-family:var(--pw-mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;}
.pw-blog-table tbody tr{border-top:1px solid var(--pw-line-sm);background:#FFFFFF;}
.pw-blog-table tbody tr:nth-child(even){background:var(--pw-soft);}
.pw-blog-table tbody th{font-weight:600;color:var(--pw-ink);vertical-align:top;width:26%;}
.pw-blog-table td{padding:14px 16px;vertical-align:top;color:var(--pw-body);}

/* ---- CTA --------------------------------------------------------------- */
.pw-blog-cta{display:flex;align-items:center;gap:18px;margin-top:24px;padding:18px 20px;background:var(--pw-green-dk);border-radius:14px;color:#EAF3E7;}
.pw-blog-cta strong{display:block;font-size:16px;color:#FFFFFF;}
.pw-blog-cta span.body{display:block;margin-top:4px;font-size:14.5px;color:rgba(234,243,231,0.8);}
.pw-blog-cta a{flex:none;margin-left:auto;background:var(--pw-green-br);color:var(--pw-green-dk);border-radius:999px;padding:12px 20px;font-size:14.5px;font-weight:600;}
.pw-blog-cta a:hover{background:#8FD253;color:var(--pw-green-dk);}

/* ---- summary ----------------------------------------------------------- */
.pw-blog-summary{padding:clamp(22px,2.6vw,30px);background:var(--pw-summary);border:1px solid var(--pw-line-sm);border-radius:16px;}
.pw-blog-summary h2{font-size:clamp(24px,2.4vw,30px);}
.pw-blog-summary p{margin:16px 0 0;}

/* ---- FAQs -------------------------------------------------------------- */
.pw-blog-faqs-list{margin-top:20px;border-top:1px solid var(--pw-line);}
.pw-blog-faq{border-bottom:1px solid var(--pw-line);}
/* SCOPED UNDER .pw-blog DELIBERATELY, and every one of these rules needs it.
 *
 * The Elementor kit styles bare buttons as `.elementor-kit-94 button` --
 * specificity (0,1,1), which beats a lone `.pw-blog-faq-btn` (0,1,0). Measured
 * on the live page, it was painting the FAQ questions solid green
 * (rgb(79,121,66)) with white text and its own padding. `.pw-blog .pw-blog-faq-btn`
 * is (0,2,0) and wins cleanly, without !important.
 *
 * This is the third time this kit has done it: it inverted the PDP pill styling,
 * greened the hub's FAQ rows, and set white-space:nowrap so the hub's questions
 * scrolled sideways at 430px (HUB-PORT.md). Reset the lot explicitly -- including
 * white-space -- and give the label flex:1;min-width:0 so it can shrink at all.
 */
.pw-blog .pw-blog-faq-btn{width:100%;display:flex;align-items:flex-start;gap:16px;background:none;background-color:transparent;border:none;border-radius:0;padding:17px 2px;margin:0;text-align:left;font-family:inherit;font-size:16.5px;font-weight:600;color:var(--pw-ink);cursor:pointer;white-space:normal;line-height:1.4;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;}
.pw-blog .pw-blog-faq-btn:hover,.pw-blog .pw-blog-faq-btn:focus{background:none;background-color:transparent;color:var(--pw-green);box-shadow:none;}
.pw-blog .pw-blog-faq-btn .q{flex:1;min-width:0;}
.pw-blog .pw-blog-faq-btn .sign{flex:none;font-family:var(--pw-mono);font-size:19px;line-height:1;color:var(--pw-green);}
.pw-blog-faq-a{margin:0;padding:0 40px 20px 2px;font-size:16.5px;color:var(--pw-muted);}

/* ---- references -------------------------------------------------------- */
.pw-blog-refs{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;}
.pw-blog-refs li{display:flex;gap:14px;font-size:14.5px;line-height:1.6;color:var(--pw-muted);}
.pw-blog-refs .n{flex:none;width:26px;height:26px;border-radius:999px;background:var(--pw-answer);border:1px solid rgba(29,92,44,0.2);color:var(--pw-green);font-family:var(--pw-mono);font-size:12px;display:flex;align-items:center;justify-content:center;}
.pw-blog-refs .txt{min-width:0;}
.pw-blog-refs .txt a{display:block;margin-top:4px;font-family:var(--pw-mono);font-size:12.5px;word-break:break-all;}
.pw-blog-disclaimer{margin:24px 0 0;padding:16px 18px;background:var(--pw-soft);border:1px dashed rgba(22,25,27,0.22);border-radius:12px;font-size:14.5px;color:var(--pw-muted);}
.pw-blog-disclaimer strong{color:var(--pw-ink);font-weight:600;}

/* ---- related ----------------------------------------------------------- */
.pw-blog-related{margin:clamp(38px,4.5vw,60px) 0 0;padding-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--pw-line);}
.pw-blog-related h2{font-size:clamp(24px,2.4vw,30px);}
.pw-blog-rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px;}
.pw-blog-rel-card{display:block;border:1px solid var(--pw-line);border-radius:14px;overflow:hidden;background:#FFFFFF;}
.pw-blog-rel-card:hover{border-color:rgba(29,92,44,0.45);}
.pw-blog-rel-img{position:relative;aspect-ratio:16/9;background:var(--pw-slot);}
.pw-blog-rel-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pw-blog-rel-body{padding:16px 18px 18px;}
.pw-blog-rel-cat{display:block;font-family:var(--pw-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pw-green);}
.pw-blog-rel-title{display:block;margin-top:8px;font-family:var(--pw-serif);font-weight:500;font-size:20px;line-height:1.24;color:var(--pw-ink);}

.pw-blog-tail{height:clamp(40px,5vw,72px);}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:1040px){
  .pw-blog-shell{grid-template-columns:1fr;}
  .pw-blog-toc{position:static;}
}
@media (max-width:900px){
  .pw-blog h1{font-size:34px;}
  .pw-blog-rel-grid{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .pw-blog-tablewrap{overflow-x:auto;}
  .pw-blog-table{min-width:620px;}
  .pw-blog-cta{flex-direction:column;align-items:flex-start;}
  .pw-blog-cta a{margin-left:0;}
}