/* Bargaon content components (Template pre-build 1).
 *
 * Use inside any wrapper with class "content-body" (pages, posts, insights, tools, resources).
 * Figures live in guide.css, components here; the two files do not overlap. Both work in .guide-body and .content-body.
 * Brand: white / black / greys, orange #F97316 for accents only, accent ink #C2410C for text on white.
 * Mobile-first. No JavaScript needed except the prompt "Copy" button (assets/js/site.js).
 * Class reference + HTML snippets: Runbook > "Content components".
 */

/* Figure classes (study-figure, figure-eyebrow, figure-note, study-flow, study-step, table-scroll, research bars)
   live in guide.css, which now applies to .content-body too. */

/* ── Part B: new components (work in .content-body and .guide-body) ── */
:is(.content-body,.guide-body){--c-ink:#111111;--c-muted:#4B4B4B;--c-line:#D4D4D4;--c-soft:#F7F7F5;--c-pale:#FFF4EC;--c-accent:#F97316;--c-accent-ink:#C2410C;--c-dark:#141414}

/* WordPress auto-paragraphs can leave empty <p> tags inside pasted HTML: hide them. */
:is(.content-body,.guide-body) p:empty{display:none}

/* Data table: <div class="table-scroll" role="region" tabindex="0" aria-label="…"><table class="data-table">…</table></div> */
:is(.content-body,.guide-body) .data-table{border-collapse:collapse;width:100%;min-width:560px;font-size:.875rem;line-height:1.5}
:is(.content-body,.guide-body) .data-table caption{caption-side:top;text-align:left;font-weight:600;padding:12px;color:var(--c-ink)}
:is(.content-body,.guide-body) .data-table th{background:var(--c-dark);color:#fff;text-align:left;padding:12px;font-weight:700;vertical-align:top}
:is(.content-body,.guide-body) .data-table td{padding:12px;border-bottom:1px solid var(--c-line);vertical-align:top;color:#333}
:is(.content-body,.guide-body) .data-table tbody tr:nth-child(even) td{background:#F8F8F8}
:is(.content-body,.guide-body) .data-table td.num,:is(.content-body,.guide-body) .data-table th.num{text-align:right;font-variant-numeric:tabular-nums}

/* Bar chart: rows set their length with style="--v:53%" */
:is(.content-body,.guide-body) .bar-chart{margin:28px 0 36px;border:1px solid var(--c-line);background:var(--c-soft);padding:20px}
:is(.content-body,.guide-body) .bar-chart h3{margin:0 0 16px;font-size:1.25rem;line-height:1.3}
:is(.content-body,.guide-body) .bar-chart__row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:end;margin:14px 0}
:is(.content-body,.guide-body) .bar-chart__label{font-size:.8125rem;color:#383838;line-height:1.35}
:is(.content-body,.guide-body) .bar-chart__value{font-size:1.25rem;font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums;line-height:1}
:is(.content-body,.guide-body) .bar-chart__track{grid-column:1/-1;height:14px;background:#E2E2E2;overflow:hidden}
:is(.content-body,.guide-body) .bar-chart__fill{display:block;height:100%;width:var(--v,0%);background:var(--c-accent-ink)}
:is(.content-body,.guide-body) .bar-chart__row--muted .bar-chart__fill{background:#3A3A3A}
:is(.content-body,.guide-body) .bar-chart figcaption{font-size:.75rem;color:#666;margin-top:14px;line-height:1.5}

/* Stat grid: real, sourced numbers only. Each .stat needs a .stat__source. */
:is(.content-body,.guide-body) .stat-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:24px 0 32px}
:is(.content-body,.guide-body) .stat{border:1px solid var(--c-line);background:#fff;padding:16px;border-top:3px solid var(--c-accent)}
:is(.content-body,.guide-body) .stat__value{display:block;font-size:2rem;line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--c-ink);font-variant-numeric:tabular-nums}
:is(.content-body,.guide-body) .stat__label{display:block;font-size:.875rem;color:#383838;margin-top:6px;line-height:1.45}
:is(.content-body,.guide-body) .stat__source{display:block;font-size:.6875rem;color:#6B6B6B;margin-top:10px;line-height:1.4}
@media(min-width:640px){:is(.content-body,.guide-body) .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){:is(.content-body,.guide-body) .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Callout: .callout (note), .callout--tip, .callout--warn */
:is(.content-body,.guide-body) .callout{border-left:3px solid #3A3A3A;background:var(--c-soft);padding:14px 16px;margin:24px 0;font-size:.9375rem;line-height:1.6;color:#2E2E2E}
:is(.content-body,.guide-body) .callout > :first-child{margin-top:0}
:is(.content-body,.guide-body) .callout > :last-child{margin-bottom:0}
:is(.content-body,.guide-body) .callout__title{display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin-bottom:6px;color:#3A3A3A}
:is(.content-body,.guide-body) .callout--tip{border-left-color:var(--c-accent);background:var(--c-pale)}
:is(.content-body,.guide-body) .callout--tip .callout__title{color:var(--c-accent-ink)}
:is(.content-body,.guide-body) .callout--warn{border-left-color:#111;background:#FFF;border:1px solid var(--c-line);border-left:3px solid #111}
:is(.content-body,.guide-body) .callout--warn .callout__title{color:#111}

/* Key takeaways box */
:is(.content-body,.guide-body) .key-takeaways{border:1px solid var(--c-line);background:#fff;padding:18px 18px 8px;margin:24px 0 32px;box-shadow:0 8px 24px #00000008}
:is(.content-body,.guide-body) .key-takeaways h2,:is(.content-body,.guide-body) .key-takeaways h3{margin:0 0 10px;font-size:1.125rem;line-height:1.3}
:is(.content-body,.guide-body) .key-takeaways ul{margin:0}

/* Answer box: the 40–60 word direct answer at the top of a page */
:is(.content-body,.guide-body) .answer-box{border:1px solid var(--c-accent);background:var(--c-pale);padding:16px 18px;margin:0 0 28px;font-size:1.0625rem;line-height:1.7;color:var(--c-ink)}
:is(.content-body,.guide-body) .answer-box__label{display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--c-accent-ink);margin-bottom:6px}
:is(.content-body,.guide-body) .answer-box p{margin:0}

/* Blog CTA: .blog-cta--assessment / --whitepaper / --tool. Link must go to a live page. */
:is(.content-body,.guide-body) .blog-cta{display:grid;gap:12px;background:var(--c-dark);color:#fff;padding:22px;margin:36px 0}
:is(.content-body,.guide-body) .blog-cta__eyebrow{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--c-accent)}
:is(.content-body,.guide-body) .blog-cta__title{margin:0;font-size:1.375rem;line-height:1.25;color:#fff}
:is(.content-body,.guide-body) .blog-cta p{margin:0;color:#D6D6D6;font-size:.9375rem;line-height:1.6}
:is(.content-body,.guide-body) .blog-cta__button{justify-self:start;display:inline-block;background:var(--c-accent);color:#111 !important;text-decoration:none !important;font-weight:700;padding:11px 18px;margin-top:4px}
:is(.content-body,.guide-body) .blog-cta__button:hover,:is(.content-body,.guide-body) .blog-cta__button:focus-visible{background:#fff;outline:2px solid var(--c-accent);outline-offset:2px}
:is(.content-body,.guide-body) .blog-cta--whitepaper{background:var(--c-pale);color:var(--c-ink);border:1px solid var(--c-line)}
:is(.content-body,.guide-body) .blog-cta--whitepaper .blog-cta__title{color:var(--c-ink)}
:is(.content-body,.guide-body) .blog-cta--whitepaper p{color:#3A3A3A}
:is(.content-body,.guide-body) .blog-cta--whitepaper .blog-cta__eyebrow{color:var(--c-accent-ink)}
:is(.content-body,.guide-body) .blog-cta--whitepaper .blog-cta__button{background:var(--c-dark);color:#fff !important}
:is(.content-body,.guide-body) .blog-cta--tool{background:#fff;color:var(--c-ink);border:1px solid var(--c-ink);border-top:4px solid var(--c-accent)}
:is(.content-body,.guide-body) .blog-cta--tool .blog-cta__title{color:var(--c-ink)}
:is(.content-body,.guide-body) .blog-cta--tool p{color:#3A3A3A}
:is(.content-body,.guide-body) .blog-cta--tool .blog-cta__eyebrow{color:var(--c-accent-ink)}
/* WordPress may wrap the button in a <p>; style both shapes the same. */
:is(.content-body,.guide-body) .blog-cta > p:has(> .blog-cta__button){justify-self:start;margin:4px 0 0}
:is(.content-body,.guide-body) .blog-cta > p:has(> .blog-cta__button) .blog-cta__button{margin:0}
@media(min-width:760px){:is(.content-body,.guide-body) .blog-cta{grid-template-columns:1fr auto;align-items:center;padding:28px}:is(.content-body,.guide-body) .blog-cta > .blog-cta__button,:is(.content-body,.guide-body) .blog-cta > p:has(> .blog-cta__button){justify-self:end;grid-column:2;grid-row:1/span 3;margin:0}}
:is(.content-body,.guide-body) .prompt-card__head > p{margin:0}

/* Prompt card + copy button */
:is(.content-body,.guide-body) .prompt-card{border:1px solid var(--c-line);background:#fff;margin:24px 0}
:is(.content-body,.guide-body) .prompt-card__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--c-line);background:var(--c-soft)}
:is(.content-body,.guide-body) .prompt-card__title{margin:0;font-size:.9375rem;font-weight:700;line-height:1.3}
:is(.content-body,.guide-body) .prompt-card pre{margin:0;padding:14px;white-space:pre-wrap;word-break:break-word;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8125rem;line-height:1.6;color:#222;background:#fff}
:is(.content-body,.guide-body) .prompt-card__note{margin:0;padding:10px 14px;border-top:1px dashed var(--c-line);font-size:.75rem;color:#5A5A5A}
:is(.content-body,.guide-body) .prompt-copy{flex:none;font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--c-ink);background:#fff;color:var(--c-ink);padding:6px 10px;cursor:pointer;min-height:32px}
:is(.content-body,.guide-body) .prompt-copy:hover{background:var(--c-ink);color:#fff}
:is(.content-body,.guide-body) .prompt-copy:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
:is(.content-body,.guide-body) .prompt-copy.is-copied{background:var(--c-accent);border-color:var(--c-accent);color:#111}

/* FAQ list: native <details>, no JS */
:is(.content-body,.guide-body) .faq-list{border-top:1px solid var(--c-line);margin:24px 0 32px}
:is(.content-body,.guide-body) .faq-list details{border-bottom:1px solid var(--c-line)}
:is(.content-body,.guide-body) .faq-list summary{cursor:pointer;list-style:none;padding:16px 32px 16px 0;position:relative;font-weight:600;line-height:1.4;color:var(--c-ink)}
:is(.content-body,.guide-body) .faq-list summary::-webkit-details-marker{display:none}
:is(.content-body,.guide-body) .faq-list summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.25rem;color:var(--c-accent-ink)}
:is(.content-body,.guide-body) .faq-list details[open] summary::after{content:"–"}
:is(.content-body,.guide-body) .faq-list summary:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
:is(.content-body,.guide-body) .faq-list details > :not(summary){margin:0 0 16px;color:#383838;line-height:1.7}

/* Related assets: list of links to live guides/tools/resources */
:is(.content-body,.guide-body) .related-assets{display:grid;grid-template-columns:1fr;gap:10px;margin:24px 0 32px;padding:0;list-style:none}
:is(.content-body,.guide-body) .related-assets li{padding:0 !important}
:is(.content-body,.guide-body) .related-assets li::before{display:none !important}
:is(.content-body,.guide-body) .related-assets a{display:block;border:1px solid var(--c-line);padding:14px 16px;text-decoration:none !important;color:var(--c-ink) !important;background:#fff;height:100%}
:is(.content-body,.guide-body) .related-assets a:hover,:is(.content-body,.guide-body) .related-assets a:focus-visible{border-color:var(--c-ink);box-shadow:inset 0 -3px 0 var(--c-accent)}
:is(.content-body,.guide-body) .related-assets__type{display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--c-accent-ink);margin-bottom:4px}
:is(.content-body,.guide-body) .related-assets__title{display:block;font-weight:600;line-height:1.35}
@media(min-width:640px){:is(.content-body,.guide-body) .related-assets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){:is(.content-body,.guide-body) .related-assets{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media print{:is(.content-body,.guide-body) .prompt-copy{display:none}:is(.content-body,.guide-body) .blog-cta{border:1px solid #000;background:#fff;color:#000}}