/* ==========================================================================
   CN Content — everything WordPress renders inside post content (2026-09-20)
   Article typography · Key Takeaways box · data tables · card groups
   --------------------------------------------------------------------------
   THE one place that styles the headings, copy, lists, links, images, buttons,
   every <table> and every .cn-cards group that WordPress renders inside a
   Bricks "Post Content" element, on every template
   and page, present and future. Bricks has no native control over the
   WP-rendered children of post-content, so this is a labelled custom-CSS
   exception (project rule: native controls first).

   TO CHANGE THE LOOK: edit the variables, not the rules.
     Bricks › Variables › category "Tables"  (--cn-table-*)
   inc/cn-content.php prints those values on :root on every page. The values
   after the comma in each var() below are only the fallback defaults.

   SCOPE
     .brxe-post-content  — Bricks puts this on every Post Content element
     #brx-content.wordpress — Bricks' wrapper for a page with no Bricks template
                           (legacy pages not rebuilt yet)
     .cn-content         — opt-in class for a Rich Text / Code element
     .editor-styles-wrapper — the block editor canvas
   Order matters: the article typography comes first, tables and card groups
   after it, so at equal specificity the table/card rules win inside a cell or
   card.

   !important appears only where legacy inline styles / old-theme block
   classes (hard-coded borders and backgrounds on cells) have to be beaten.
   ========================================================================== */

/* --- Article typography ----------------------------------------------------
   Figma 2:53450 (Blog Article). Headings, body copy, lists, links, images,
   blockquotes, Gutenberg groups/buttons and in-content CTAs rendered by
   WordPress inside a Post Content element. Moved here 2026-09-20 from the
   per-template / per-page Custom CSS boxes (18110, 18140, 18693 and the 13
   undesigned loan pages each carried a copy). Do not re-add copies there.
   Scope: Post Content elements + the opt-in .cn-content class only — NOT the
   block editor and NOT template-less legacy pages. */

:is(.brxe-post-content,.cn-content){min-width:0;max-width:100%;overflow-wrap:anywhere;}
:is(.brxe-post-content,.cn-content) h2{font-size:var(--cn-text-h2-inner,2.25rem);font-weight:600;line-height:1.1;color:var(--cn-deep-twilight);margin:48px 0 0;}
:is(.brxe-post-content,.cn-content) h3{font-size:1.75rem;font-weight:600;line-height:1.2;color:var(--cn-dark-blue);margin:36px 0 0;}
:is(.brxe-post-content,.cn-content) h4{font-size:1.25rem;font-weight:600;line-height:1.3;color:var(--cn-dark-blue);margin:28px 0 0;}
:is(.brxe-post-content,.cn-content) :is(p,li){font-size:1rem;font-weight:400;line-height:1.875;color:var(--cn-gray-700);}
:is(.brxe-post-content,.cn-content) p{margin:20px 0 0;}
:is(.brxe-post-content,.cn-content) :is(ul,ol){margin:20px 0 0;padding-left:24px;}
:is(.brxe-post-content,.cn-content) li{margin:8px 0 0;}
:is(.brxe-post-content,.cn-content) a{color:var(--cn-royal);text-decoration:none;}
:is(.brxe-post-content,.cn-content) a:hover{text-decoration:underline;}
:is(.brxe-post-content,.cn-content) img{display:block;max-width:100%;height:auto;border-radius:20px;margin:40px 0 0;}
/* Editorial photos (Gutenberg "Large" size, not manually resized) fill the column; icons, badges, banners and
   resized images keep their intrinsic/attribute size so 100px icons don't blow up to 1280px.
   No width:auto on the base rule: it would override the width attribute, and WP core's
   contain-intrinsic-size (3000px) on lazy sizes="auto" images would then stretch them to 100%. */
/* Only landscape "Large" images (WP's large size = 1024 wide; two legacy posts use 1200) — portrait infographics
   in size-large (514/647 wide) stay at their own width instead of stretching to ~2,500px tall. */
:is(.brxe-post-content,.cn-content) figure.size-large:not(.is-resized) img:is([width="1024"],[width="1200"]){width:100%;}
/* Gutenberg resized images often carry only an inline height; drop the width attribute so the aspect ratio holds. */
:is(.brxe-post-content,.cn-content) figure.is-resized img{width:auto;}
:is(.brxe-post-content,.cn-content) .aligncenter img{margin-inline:auto;}
/* Gutenberg avatar block (static author-bio boxes): keep it avatar-sized. */
:is(.brxe-post-content,.cn-content) :is(img.avatar,.wp-block-avatar__image){width:auto;max-width:100%;height:auto;border-radius:50%;margin:0;}
:is(.brxe-post-content,.cn-content) > *:first-child{margin-top:0;}
:is(.brxe-post-content,.cn-content) blockquote{margin:32px 0 0;padding:24px 28px;background:var(--cn-light-blue);border-radius:16px;}
:is(.brxe-post-content,.cn-content) blockquote p{margin:0;}

/* Gutenberg groups, columns and buttons carried over in ported content. */
:is(.brxe-post-content,.cn-content) :is(.wp-block-group,.wp-block-buttons,.wp-block-columns){margin:32px 0 0;}
:is(.brxe-post-content,.cn-content) .wp-block-group.has-background{padding:24px 28px;border-radius:16px;}
:is(.brxe-post-content,.cn-content) :is(.wp-block-button__link,a.cn-content-cta){display:inline-block;background:var(--cn-royal);color:#fff;border:2px solid var(--cn-royal);border-radius:9999px;padding:14px 28px;font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;transition:background-color .2s ease,color .2s ease;}
:is(.brxe-post-content,.cn-content) :is(.wp-block-button__link,a.cn-content-cta):hover{background:#0046CE;border-color:#0046CE;color:#fff;text-decoration:none;}
:is(.brxe-post-content,.cn-content) .is-style-outline .wp-block-button__link{background:transparent;color:var(--cn-royal);}
:is(.brxe-post-content,.cn-content) .is-style-outline .wp-block-button__link:hover{background:var(--cn-royal);color:#fff;}

@media (max-width:767px){
	:is(.brxe-post-content,.cn-content) h2{font-size:1.75rem;margin-top:36px;}
	:is(.brxe-post-content,.cn-content) h3{font-size:1.375rem;}
	:is(.brxe-post-content,.cn-content) :is(p,li){line-height:1.6875;}
}

/* --- Key Takeaways box -------------------------------------------------------
   Old-design markup carried over from the legacy site: a coloured heading
   paragraph immediately followed by a coloured bullet list, both with hard-coded
   inline background-color (old teal). The selector targets that structural
   pattern rather than the legacy hex. !important is required because these are
   inline style attributes. (Was #brxe-bapc-only in style.css until 2026-09-20.) */
:is(.brxe-post-content,.cn-content) p.wp-block-paragraph.has-background{
	background:var(--cn-royal) !important;
	color:#fff !important;
	margin:0 !important;
	padding:20px 32px !important;
	border-radius:16px 16px 0 0 !important;
	border:none !important;
}
:is(.brxe-post-content,.cn-content) p.wp-block-paragraph.has-background + ul.wp-block-list.has-background{
	background:var(--cn-light-blue) !important;
	color:var(--cn-deep-twilight) !important;
	margin:0 !important;
	padding:24px 32px 24px 44px !important;
	border-radius:0 0 16px 16px !important;
	border:1px solid var(--cn-gray-200);
	border-top:none;
	list-style:disc;
}
:is(.brxe-post-content,.cn-content) p.wp-block-paragraph.has-background + ul.wp-block-list.has-background li{margin-top:10px;padding-left:4px;}
:is(.brxe-post-content,.cn-content) p.wp-block-paragraph.has-background + ul.wp-block-list.has-background li:first-child{margin-top:0;}
:is(.brxe-post-content,.cn-content) p.wp-block-paragraph.has-background + ul.wp-block-list.has-background li::marker{color:var(--cn-royal);}
@media (max-width:478px){
	:is(.brxe-post-content,.cn-content) p.wp-block-paragraph.has-background{padding:16px 20px !important;}
	:is(.brxe-post-content,.cn-content) p.wp-block-paragraph.has-background + ul.wp-block-list.has-background{padding:20px 20px 20px 32px !important;}
}

/* --- Data tables ---------------------------------------------------------- */

/* Scroll wrapper: Gutenberg's own <figure class="wp-block-table">, or the
   <figure class="cn-table-wrap"> that inc/cn-content.php puts round a bare
   <table> at render time. */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) :is(figure.wp-block-table,.cn-table-wrap){
	display:block;
	margin:32px 0;
	padding:0;
	border:0;
	border-radius:0;
	max-width:100%;
	overflow-x:auto;
	overflow-y:visible;
	-webkit-overflow-scrolling:touch;
}

:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table{
	display:table;
	width:100%;
	min-width:0;
	margin:32px 0;
	table-layout:auto;
	border-collapse:separate;
	border-spacing:0;
	border:1px solid var(--cn-table-border,var(--cn-gray-100,#F5F5F5));
	border-radius:var(--cn-table-radius,16px);
	overflow:hidden;
	background:var(--cn-table-cell-bg,#fff);
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) :is(figure.wp-block-table,.cn-table-wrap) table{
	margin:0;
}

:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table :is(td,th){
	display:table-cell;
	width:auto;
	margin:0;
	padding:var(--cn-table-cell-pad,14px 20px);
	background:var(--cn-table-cell-bg,#fff) !important;
	border:0 !important;
	border-bottom:1px solid var(--cn-table-border,var(--cn-gray-100,#F5F5F5)) !important;
	border-radius:0;
	vertical-align:middle;
	text-align:left;
	font-size:var(--cn-table-font-size,var(--cn-text-card-body,.875rem));
	font-weight:400;
	line-height:1.5;
	color:var(--cn-table-text,var(--cn-gray-700,#4B5563)) !important;
	overflow-wrap:normal;
	word-break:normal;
}

/* Optional zebra rows — same colour as the cell by default, i.e. off. */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table tbody tr:nth-child(even) > :is(td,th){
	background:var(--cn-table-stripe-bg,var(--cn-table-cell-bg,#fff)) !important;
}

/* Header: a real <thead>/<th>, or — most legacy tables have neither — row one. */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table thead :is(td,th),
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table th,
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table:not(:has(thead)) tr:first-child > :is(td,th){
	background:var(--cn-table-header-bg,var(--cn-gray-50,#F8FAFC)) !important;
	color:var(--cn-table-header-text,var(--cn-deep-twilight,#1B004D)) !important;
	font-weight:600;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table thead :is(td,th){
	vertical-align:bottom;
}

/* Opt-in label column: first column takes the header-row look. Editors pick
   Table block › Styles › "Label column" (registered in inc/cn-content.php, adds
   is-style-cn-label-col to the figure). Client request 2026-10-12. */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .is-style-cn-label-col table tr > :is(td,th):first-child{
	background:var(--cn-table-header-bg,var(--cn-gray-50,#F8FAFC)) !important;
	color:var(--cn-table-header-text,var(--cn-deep-twilight,#1B004D)) !important;
	font-weight:600;
}

/* No rule under the last row (the table border closes it). */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table :is(tbody,tfoot):last-child > tr:last-child > :is(td,th){
	border-bottom:0 !important;
}

/* Text inside cells inherits the cell, not the article paragraph style. */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table :is(td,th) :is(p,li,span,strong,em){
	margin:0;
	font-size:inherit;
	line-height:inherit;
	color:inherit;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table :is(td,th) strong{
	font-weight:600;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table :is(td,th) :is(ul,ol){
	margin:0;
	padding-left:20px;
}

:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) :is(figure.wp-block-table,.cn-table-wrap) figcaption{
	margin-top:12px;
	font-size:var(--cn-text-xs,13px);
	line-height:1.5;
	color:var(--cn-table-text,var(--cn-gray-700,#4B5563));
	text-align:left;
}

/* Block editor only (2026-10-01, client feedback): a freshly inserted table has empty
   cells and no vertical rules, so every column after the first was invisible while
   editing ("only 1 column appears"). Draw a faint rule between cells in the editor
   canvas. The front end is unchanged. The trailing :not(#_) only lifts the
   specificity above the shared cell rule, whose :is(#brx-content.wordpress, …)
   counts as an id selector. */
.editor-styles-wrapper table :is(td,th):not(:last-child):not(#_){
	border-right:1px solid var(--cn-gray-200,#E2E8F0) !important;
}
.editor-styles-wrapper table :is(td,th){
	min-height:1.5em;
}

/* Small screens: tables never stack. Columns keep a readable minimum and the
   wrapper scrolls, so values stay under their column headings. */
@media (max-width:767px){
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table :is(td,th){
		min-width:var(--cn-table-min-col,140px);
	}
	/* a bare table that somehow has no wrapper (e.g. in a Rich Text element) */
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content) > table{
		display:block;
		overflow-x:auto;
	}
}
@media (max-width:478px){
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) table :is(td,th){
		padding:var(--cn-table-cell-pad-mobile,12px 16px);
	}
}

/* --- Card groups (converted layout tables) ---------------------------------
   Mirrors CN Benefit Card "Grey" (cnbcrd, no icon) and CN Testimonial (cntsmc).
   A Bricks component cannot be instanced inside post_content, so this is a
   mirror, not an instance: if those components change, update here. */

:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:24px;
	margin:32px 0;
	padding:0;
}
/* classic themes wrap a group block's children in .wp-block-group__inner-container —
   flatten it so the cards are the grid items either way */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) :is(.cn-cards,.cn-card) > .wp-block-group__inner-container{
	display:contents;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards .cn-card,
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card :is(p,h2,h3,h4,h5,h6){
	margin:0;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card{
	display:flex;
	flex-direction:column;
	gap:16px;
	margin:0;
	padding:32px;
	background:var(--cn-gray-50);
	border:1px solid var(--cn-gray-100);
	border-radius:16px;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card .cn-card__title,
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card .cn-card__title strong{
	font-size:var(--cn-text-card-title);
	font-weight:600;
	line-height:var(--cn-lh-heading);
	color:var(--cn-deep-twilight);
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card p:not(.cn-card__title){
	font-size:var(--cn-text-card-body);
	font-weight:400;
	line-height:1.6;
	color:var(--cn-gray-700);
}
/* Editor only: the margin:32px 0 above beats the block editor's auto side margins, so a top-level card grid or table sat flush left of the writing column. Re-centre it in the editor canvas (2026-10-01). */
.editor-styles-wrapper .is-root-container > :is(.cn-cards,figure.wp-block-table,.cn-table-wrap):not(#_){margin-left:auto;margin-right:auto;} /* :not(#_) — the shared rule's :is() carries #brx-content id specificity */
/* Two-up card group (pairs such as Pay Online / Pay Over the Phone). Single-class selector on purpose: same specificity as .cn-cards, so the tablet/mobile tiers further down still win. */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
/* An icon/image leading a card sits on the card padding, not on the article image margin (2026-09-21, hub pages 5628/5631). */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card > :is(img,figure):first-child{margin-top:0;}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card--quote{
	gap:24px;
	background:var(--cn-white);
	border:0;
	border-radius:24px;
	box-shadow:0 1px 5px rgba(0,0,0,.1);
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card--quote p.cn-quote__text{
	font-size:var(--cn-text-m);
	font-style:italic;
	line-height:var(--cn-lh-body-tight);
	color:var(--cn-gray-700);
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card--quote p.cn-quote__name{
	margin-top:auto;
	padding-top:20px;
	border-top:1px solid var(--cn-gray-100);
	font-size:var(--cn-text-s);
	font-weight:var(--cn-weight-bold);
	line-height:24px;
	color:var(--cn-dark-blue);
}
/* Link grid (kind L): 15 related-page links per post on the 55 loans-like-*
   competitor posts. Same card, tighter — one line of text, no body copy. */
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards--links .cn-card{
	padding:16px 20px;
	gap:8px;
	justify-content:center;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card--link p.cn-card__link{
	font-size:var(--cn-text-card-body);
	font-weight:600;
	line-height:1.4;
}
:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card--link p.cn-card__link a{
	color:var(--cn-royal);
}

@media (max-width:991px){
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
}
@media (max-width:767px){
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards{grid-template-columns:minmax(0,1fr);}
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card{padding:24px;}
}
@media (max-width:478px){
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-card{padding:16px;}
}

@media (max-width:767px){
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards--links{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:478px){
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards--links{grid-template-columns:minmax(0,1fr);}
	:is(.brxe-post-content,#brx-content.wordpress,.cn-content,.editor-styles-wrapper) .cn-cards--links .cn-card{padding:14px 16px;}
}