/* ===== Sitewide blog post styling (scoped to post content) ===== */
/* base type kept low-specificity (:where) so block styles always win */
:where(.csbb-content) p{font-size:16px;line-height:24px;color:#262834;margin:0 0 1.25em;}
:where(.csbb-content) li{font-size:16px;line-height:24px;color:#262834;margin:0 0 .5em;}
:where(.csbb-content) ol{margin:0 0 1.25em;padding-left:1.4em;}
.csbb-content ol li::marker{color:#703DC1;font-weight:700;}
/* Bulleted lists: custom pink circular markers (#F04E98) per Figma */
:where(.csbb-content) ul:not([class*="cs-"]){list-style:none;margin:0 0 1.25em;padding-left:4px;}
:where(.csbb-content) ul:not([class*="cs-"]) > li{position:relative;padding-left:28px;}
:where(.csbb-content) ul:not([class*="cs-"]) > li::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:10px;border-radius:50%;background:#F04E98;box-shadow:0 0 0 3px rgba(240,78,152,0.20);}
/* Lists INSIDE cs-* blocks (callout/highlight/profile bodies): normal bullets, not the pink Figma marker.
   Specificity must beat the pink rule above — its :not([class*="cs-"]) scores (0,1,3), so we prefix
   with .csbb-content + :is(...) to reach (0,2,3). */
.csbb-content :is(.cs-callout__body,.cs-highlight__body,.cs-profile__bio) ul{list-style:disc;margin:.5em 0 1em;padding-left:1.4em;}
.csbb-content :is(.cs-callout__body,.cs-highlight__body,.cs-profile__bio) ul > li{position:static;padding-left:0;margin:0 0 .35em;}
.csbb-content :is(.cs-callout__body,.cs-highlight__body,.cs-profile__bio) ul > li::before{content:none;}

/* Headings: beat Oxygen global heading reset, but never touch block headings */
.csbb-content h2:not([class*="cs-"]){font-size:32px;line-height:1.3;margin:1.6em 0 .6em;display:block;}
/* Grey accent bar — matches the live theme (.InsideContent h2::after). A display:block pseudo
   pulled up with a negative margin so it paints BEHIND the bottom of the last line (block-level
   pseudos paint before inline text). It's a FIXED width, NOT text-tracking: production is
   width:60% of a max-width:600px H2 = a fixed 360px = 6em at 60px font, indent 20px = 0.34em,
   height 30px = 0.5em. So it only "hangs off the end" when the last line is short. All values in
   em so the bar scales proportionally with the heading size. */
.csbb-content h2:not([class*="cs-"])::after{content:"";display:block;width:6em;height:0.5em;margin:-0.62em 0 0 0.34em;background:#F0F0F0;}
.csbb-content h3:not([class*="cs-"]){font-size:24px;line-height:1.3;margin:1.4em 0 .5em;color:#703DC1;}
/* Coloured legacy blocks (old CTA = .call-to-action-block, purple box with white text) set their
   own heading colour — keep our content H3/H2 colour from bleeding in (was rendering purple-on-purple
   = unreadable). color:inherit picks up the block's own text colour (white on the CTA). */
.csbb-content .call-to-action-block :is(h1,h2,h3,h4,h5,h6){color:inherit !important;}

/* Table: purple header text, horizontal dividers only, rounded frame, first column bold */
.csbb-content figure.wp-block-table{margin:2em 0;border:1px solid #D6D8E2;border-radius:8px;overflow:hidden;}
.csbb-content table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;}
.csbb-content table th{background:#F3EFFE !important;color:#703DC1;font-weight:700;text-align:left;padding:20px;border:0 !important;}
.csbb-content table td{padding:20px;color:#262834;vertical-align:top;border:0 !important;border-top:1px solid #D6D8E2 !important;}
.csbb-content table td:first-child{font-weight:700;color:#262834;}
.csbb-content table tbody tr:nth-child(even) td{background:#F8F9FB;}
.csbb-content table thead,.csbb-content table thead tr{border:0 !important;}

/* Blockquote: purple left bar, bold quote, muted attribution */
.csbb-content blockquote.wp-block-quote,.csbb-content blockquote{border-left:3px solid #703DC1 !important;margin:2em 0;padding:8px 24px;background:none !important;border-radius:0 !important;}
.csbb-content blockquote p{font-family:Poppins,sans-serif;font-weight:700;font-style:italic;font-size:16px;line-height:24px;color:#262834;margin:0 0 16px;}
.csbb-content blockquote cite,.csbb-content blockquote footer{display:block;font-family:Poppins,sans-serif;font-weight:400;font-style:normal;font-size:14px;line-height:20px;color:#5F6377;}
.csbb-content blockquote cite::before,.csbb-content blockquote footer::before{content:"\2014\00a0";}

/* Image frame */
/* Image frame: image inset 8px; caption in a divider-separated bar inside the frame, centered */
/* Covers Gutenberg figures (.wp-block-image) AND classic-editor image figures
   (.aligncenter / .alignnone / .wp-caption) — old posts use the classic markup, which
   never matched .wp-block-image and so rendered unframed. */
.csbb-content figure.wp-block-image,
.csbb-content figure.aligncenter:has(img),
.csbb-content figure.alignnone:has(img),
.csbb-content figure.wp-caption:has(img){background:#fff !important;border:1px solid #DFD8F5 !important;border-radius:16px !important;padding:0 !important;overflow:hidden;margin:2em 0;}
.csbb-content figure.wp-block-image:has(figcaption),
.csbb-content figure.aligncenter:has(figcaption),
.csbb-content figure.alignnone:has(figcaption),
.csbb-content figure.wp-caption:has(figcaption){border-radius:12px !important;} /* captioned frame = r12 per Figma (no-caption stays 16) */
.csbb-content figure.wp-block-image img,
.csbb-content figure.aligncenter:has(img) img,
.csbb-content figure.alignnone:has(img) img,
.csbb-content figure.wp-caption:has(img) img{display:block;width:calc(100% - 16px);margin:8px;border-radius:12px;}
.csbb-content figure.wp-block-image figcaption,
.csbb-content figure.aligncenter figcaption,
.csbb-content figure.alignnone figcaption,
.csbb-content figure.wp-caption figcaption,
.csbb-content figure.wp-caption .wp-caption-text{margin:0 !important;border-top:1px solid #D6D8E2;padding:8px 16px;text-align:center;font-size:12px;line-height:18px;color:#5F6377;}
/* Classic-editor / standalone images (a bare <img>, not a Gutenberg figure) get the same frame.
   Old posts wrote images as <p>...text... <img></p>, so they never matched .wp-block-image. */
.csbb-content p > img:not(.emoji),
.csbb-content p > a > img:not(.emoji){display:block;max-width:100%;height:auto;margin:2em auto;background:#fff;border:1px solid #DFD8F5;border-radius:12px;padding:8px;box-sizing:border-box;}
.csbb-content p > a:has(> img:not(.emoji)){display:block;}

/* ConvertBox inline embeds (.cb-box) inject right up against the surrounding text — give them
   breathing room so they read as a distinct CTA, not part of the paragraph flow. */
.csbb-content .cb-box__type-embed{margin-top:2.5em !important;margin-bottom:2.5em !important;}

/* The header metadata row, quick summary, sidebar CTA and author card are now NATIVE Oxygen
   elements (styled via each element's `original` in the template), so their old class-based
   CSS was removed. Only the breadcrumb (rank_math markup) + the JS-built TOC stay class-styled. */

/* Header breadcrumb (Figma: Poppins 400 14/20 #F3EFFE, 8px gaps).
   Selectors carry .rank-math-breadcrumb to out-specify rank_math's own link colour. */
.csbb-header__crumbs .rank-math-breadcrumb,
.csbb-header__crumbs .rank-math-breadcrumb p,
.csbb-header__crumbs .rank-math-breadcrumb a,
.csbb-header__crumbs .rank-math-breadcrumb span{color:#F3EFFE;font-family:Poppins,sans-serif;font-size:14px;line-height:20px;font-weight:400;}
.csbb-header__crumbs .rank-math-breadcrumb p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.csbb-header__crumbs .rank-math-breadcrumb a{text-decoration:none;}
.csbb-header__crumbs .rank-math-breadcrumb a:hover{text-decoration:underline;}

/* Hide the "Reviewed by" metadata item + its trailing separator when no reviewer is set.
   The reviewer value renders as an empty .ct-span. Class-based (.csbb-meta-reviewed on the
   item) so it's template-ID-independent; the `+ *` hides the immediately-following separator. */
.csbb-meta-reviewed:has(.ct-span:empty),
.csbb-meta-reviewed:has(.ct-span:empty) + *{display:none !important;}

/* Author card: collapse the job-title (role) line when the author has no job title set.
   Without this the empty bound .ct-span still occupies a line box, leaving a big gap between
   the name and the bio. Same empty-span pattern as the reviewer item above. */
.csbb-author-role:has(.ct-span:empty){display:none !important;}