/* ============================================================
   POWR2 — Article shell (single posts / pages / resource center).
   Dark mode is opt-in per page via body.powr2-theme-toggle + html.powr2-dark.
   ============================================================ */

/* theme-aware tokens (light defaults already in style.css :root) */
html.powr2-dark{
  --bg:#0b181f; --bg-2:#0f222c; --fg:#e8eef0; --fg-soft:#9fb1ba;
  --heading:#ffffff; --hairline:rgba(144,171,181,.2); --card:#132935; --card-line:rgba(144,171,181,.18);
}
:root{
  --bg:var(--paper); --bg-2:#fff; --fg:var(--ink); --fg-soft:var(--muted);
  --heading:var(--steel-900); --hairline:var(--line); --card:#fff; --card-line:var(--line);
}
body.powr2-toggleable{background:var(--bg);color:var(--fg);transition:background .3s,color .3s;}
body.powr2-toggleable .footer{background:var(--steel-900);} /* footer stays dark */

/* theme toggle button (header) */
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--hairline);background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s;flex:0 0 auto;}
.theme-toggle:hover{border-color:var(--electric);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .icon-moon{display:none;}
html.powr2-dark .theme-toggle .icon-sun{display:none;}
html.powr2-dark .theme-toggle .icon-moon{display:block;}
.nav.on-dark .theme-toggle{color:#fff;}
/* dark mode: header turns dark so the toggle + links stay visible */
html.powr2-dark .nav.scrolled{background:rgba(11,24,31,.92);box-shadow:0 1px 0 rgba(144,171,181,.18);}
html.powr2-dark .nav.scrolled .nav-links a{color:rgba(255,255,255,.82) !important;}
html.powr2-dark .nav.scrolled .nav-links a:hover{color:#fff !important;}
html.powr2-dark .nav.scrolled .theme-toggle{color:#fff;border-color:rgba(144,171,181,.3);}
html.powr2-dark .nav.scrolled .nav-burger span{background:#fff;}
html.powr2-dark .nav .nav-logo .logo-pos{display:none;}
html.powr2-dark .nav .nav-logo .logo-neg{display:block;}

/* ---------- single post layout: TOC + content ---------- */
.post-single{padding-top:120px;overflow-x:clip;}
.post-head{max-width:932px;margin:0 auto;padding:0 28px;}
/* When a page opens with a POWR2 Product Hero, the hero already carries the
   product name and branding — the plain page-title bar above it is
   redundant and just creates a white gap under the nav. Hidden only in
   that specific case; other pages keep their normal title. */
.post-head:has(+ .post-wrap .post-body > .pp-hero:first-child){display:none;}
.post-wrap:has(> .post-body > .pp-hero:first-child){margin-top:0;}
.post-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--electric);}
.post-eyebrow a{color:inherit;text-decoration:none;}
.post-title{margin-top:18px;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.06;letter-spacing:-.025em;color:var(--heading);}
.post-dek{margin-top:18px;font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--fg-soft);font-weight:500;max-width:680px;text-wrap:pretty;}
.post-meta{margin-top:20px;display:flex;gap:14px;align-items:center;font-size:13px;color:var(--fg-soft);font-weight:600;flex-wrap:wrap;}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;}
.post-share{margin-left:auto;display:flex;align-items:center;gap:8px;}
.post-share .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);}
.share-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline);background:transparent;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.2s;text-decoration:none;}
.share-btn:hover{border-color:var(--electric);color:var(--electric);transform:translateY(-2px);}
.share-btn svg{width:15px;height:15px;display:block;}
.post-meta-divider{width:100%;height:1px;background:var(--hairline);margin-top:8px;}

.post-hero-img{max-width:var(--container);margin:38px auto 0;padding:0 28px;}
.post-hero-img figure{border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 30px 60px -20px rgba(18,39,50,.25);margin:0;}
.post-hero-img img{width:100%;height:100%;object-fit:cover;}

/* -------- content column widths --------
   DEFAULT (no ToC): single centred column at ~932px — the width formerly used
   when the ToC was hidden. ToC is opt-in per page/post (Layout options panel);
   the template adds .wants-toc to the wrap when the box is checked. */
.post-wrap{max-width:var(--container);margin:40px auto 0;padding:0 28px;display:grid;grid-template-columns:1fr;}
.post-wrap > .post-toc{display:none;}
.post-wrap .post-body{width:100%;max-width:932px;margin:0 auto;justify-self:stretch;}

/* ToC enabled → two-column with sticky ToC. ToC + gap + body = 932 combined,
   centred in the same wrap as the default body so edges line up exactly. */
.post-wrap.wants-toc{grid-template-columns:200px 1fr;gap:40px;}
.post-wrap.wants-toc .post-body{max-width:692px;margin:0;}
.post-wrap.wants-toc > .post-toc{display:block;}
.post-toc{position:sticky;top:110px;align-self:start;}
.post-toc-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:14px;}
.post-toc-hide{border:0;background:none;cursor:pointer;font:inherit;font-size:10px;letter-spacing:.1em;color:var(--fg-soft);opacity:.7;text-transform:uppercase;padding:2px 4px;transition:opacity .2s,color .2s;}
.post-toc-hide:hover{opacity:1;color:var(--lemon-600);}
.post-toc-show{display:none;border:1px solid var(--hairline);background:var(--bg);cursor:pointer;font:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);padding:9px 14px;border-radius:999px;transition:border-color .2s,color .2s;align-items:center;justify-content:center;gap:7px;}
.post-toc-show:hover{border-color:var(--electric);color:var(--fg);}
/* collapse ToC via the Hide button → single centred column at the default width */
.post-wrap.wants-toc.toc-hidden{grid-template-columns:1fr;}
.post-wrap.wants-toc.toc-hidden .post-body{max-width:932px;margin:0 auto;}
.post-wrap.wants-toc.toc-hidden > .post-toc{display:none;}
.post-wrap.wants-toc.toc-hidden .post-toc-show{display:inline-flex;position:fixed;z-index:70;width:auto;min-width:120px;top:122px;left:max(28px,calc((100vw - 1240px)/2 + 28px));}
@media(max-width:1240px){
  .post-wrap.wants-toc.toc-hidden .post-toc-show{position:static !important;top:auto !important;margin-bottom:18px;}
}
.post-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--hairline);display:flex;flex-direction:column;}
.post-toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;font-weight:500;color:var(--fg-soft);text-decoration:none;line-height:1.4;transition:.2s;}
.post-toc a:hover{color:var(--fg);}
.post-toc a.active{color:var(--heading);border-left-color:var(--lemon);font-weight:700;}
/* too few H2s → article.js adds .is-single → single centred column */
.post-wrap.is-single{grid-template-columns:1fr;}
.post-wrap.is-single .post-body{max-width:932px;margin:0 auto;}
.post-wrap.is-single > .post-toc{display:none;}
.post-toc:empty{visibility:hidden;}

/* ---------- article body: native blocks, POWR2-styled ---------- */
.post-body{min-width:0;}
.post-body > *{margin-bottom:22px;}
.post-body p{font-size:17px;line-height:1.75;color:var(--fg);opacity:.94;}
.post-body h2{font-size:clamp(24px,2.4vw,32px);font-weight:700;color:var(--heading);margin:46px 0 16px;letter-spacing:-.02em;line-height:1.2;scroll-margin-top:110px;}
.post-body h3{font-size:20px;font-weight:700;color:var(--heading);margin:32px 0 10px;}
.post-body h4{font-size:16px;font-weight:700;color:var(--heading);margin:26px 0 8px;letter-spacing:.02em;}
.post-body a{color:var(--steel);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--electric);}
html.powr2-dark .post-body a{color:var(--electric);}
.post-body strong{color:var(--heading);font-weight:700;}
.post-body ul,.post-body ol{padding-left:24px;}
.post-body li{font-size:17px;line-height:1.7;color:var(--fg);opacity:.94;margin-bottom:8px;}
.post-body img,.post-body .wp-block-image img{border-radius:12px;}
.post-body figure{margin:0;}
/* embedded media (podcast players, video, oEmbeds) — never exceed the column width */
.post-body iframe,.post-body embed,.post-body object,.post-body video{max-width:100%;}
.post-body audio{width:100%;max-width:100%;}
.post-body .wp-block-embed,.post-body .wp-block-embed__wrapper,.post-body .wp-block-audio{max-width:100%;}
.post-body .wp-block-embed__wrapper iframe{width:100%;}
.post-body figcaption{font-size:13px;color:var(--fg-soft);text-align:center;margin-top:10px;}

/* native quote + pullquote */
.post-body blockquote,.post-body .wp-block-quote{margin:32px 0;padding:6px 0 6px 26px;border-left:3px solid var(--lemon);font-size:clamp(20px,2.2vw,26px);line-height:1.4;font-weight:300;font-style:italic;color:var(--heading);}
.post-body .wp-block-quote cite,.post-body blockquote cite{display:block;margin-top:12px;font-size:13px;font-weight:700;font-style:normal;letter-spacing:.04em;color:var(--fg-soft);}
.post-body .wp-block-pullquote{border:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:28px 0;text-align:left;}
.post-body .wp-block-pullquote blockquote{border:0;padding:0;}

/* table */
.post-body table,.post-body .wp-block-table table{width:100%;border-collapse:collapse;font-size:14.5px;}
.post-body th{background:var(--bg-2);border:1px solid var(--hairline);padding:11px 14px;text-align:left;font-weight:700;color:var(--heading);}
.post-body td{border:1px solid var(--hairline);padding:11px 14px;color:var(--fg);}

/* Branded data table — apply via "Additional CSS Class(es)" on a core
   Table block for a polished, on-brand look (dark header, alternating
   rows) instead of the plain default table styling above. Radius matches
   the CTA Band (16px); overflow:hidden on the wrapper clips the header
   cells' background to the rounded corners. */
.post-body .pp-data-table{border-radius:16px;overflow:hidden;}
.post-body .pp-data-table table{border:none;}
.post-body .pp-data-table th{background:var(--steel-900);color:#fff;border:none;padding:14px 15px;font-size:13px;letter-spacing:.02em;text-transform:uppercase;}
.post-body .pp-data-table td{border:none;border-bottom:1px solid var(--line);padding:14px 15px;color:var(--muted);font-weight:500;}
.post-body .pp-data-table tbody tr:last-child td{border-bottom:none;}
.post-body .pp-data-table tbody tr:nth-child(even){background:var(--paper-2);}

/* code */
.post-body code{background:var(--bg-2);border:1px solid var(--hairline);border-radius:5px;padding:2px 6px;font-size:14px;}
.post-body pre{background:var(--steel-900);color:#e8eef0;padding:18px 20px;border-radius:12px;overflow:auto;}
.post-body pre code{background:none;border:0;padding:0;color:inherit;}

/* details / accordion */
.post-body details{border:1px solid var(--hairline);border-radius:10px;padding:14px 18px;background:var(--card);}
.post-body summary{font-weight:700;color:var(--heading);cursor:pointer;}

/* buttons */
.post-body .wp-block-button__link{background:var(--lemon);color:#fff;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:13px 24px;}

/* image alignment: default = text width; wide = container; full = edge-to-edge */
.post-body .alignwide{width:min(var(--vw100,100vw),1100px);margin-left:calc(50% - min(var(--vw100,100vw),1100px)/2);max-width:none;}
.post-body .alignfull{width:var(--vw100,100vw);margin-left:calc(50% - var(--vw100,100vw)/2);max-width:none;border-radius:0;}
.post-body .alignfull img{border-radius:0;width:100%;}

/* CTA band (also a custom block in 4b) */
.post-cta{margin-top:36px;background:linear-gradient(135deg,var(--steel-900),var(--steel-700));color:#fff;}
.post-cta-inner{max-width:var(--container);margin:0 auto;padding:56px 28px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.post-cta h2{color:#fff;font-weight:300;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;max-width:560px;}
.post-cta h2 b{font-weight:700;}

@media(max-width:1080px){.post-wrap.wants-toc{grid-template-columns:1fr;}.post-wrap.wants-toc .post-body{max-width:932px;margin:0 auto;}.post-wrap.wants-toc > .post-toc{display:none;}}
@media(max-width:840px){.post-wrap{grid-template-columns:1fr;}.post-share{margin-left:0;width:100%;}}

/* Light/dark toggle inside the mobile nav drawer (article pages) */
.nav-mobile-toggle{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;width:auto;height:auto;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;padding:12px 18px;margin-top:22px;font-size:14px;font-weight:600;cursor:pointer;}
.nav-mobile-toggle:hover{border-color:rgba(255,255,255,.55);}
.nav-mobile-toggle svg{width:18px;height:18px;}
.nav-mobile-toggle .icon-moon{display:none;}
html.powr2-dark .nav-mobile-toggle .icon-sun{display:none;}
html.powr2-dark .nav-mobile-toggle .icon-moon{display:block;}