/**
 * cl-blog.css — the reading layer for native `post` content (owner ask,
 * 2026-08-14: "style the blog posts ... remove the breadcrumbs at the top and
 * then style them better").
 *
 * WHY: the blog single and the blog index were shipped with a handful of
 * inline rules in cl-templates/single-post.php and archive-blog.php — enough
 * to not look broken, not enough to look designed. On a real dealer post the
 * gaps showed:
 *   - the page opened flush against the header, so the overhanging logo
 *     (.mgc-header--logo-overhang, 57px of overhang on desktop) sat on top of
 *     the first line of the page,
 *   - `p` computed 16px/24px from the legacy base sheet, NOT the 17px/1.7 the
 *     inline block asked for, because the inline block only set the container,
 *   - h3 carried `margin: 0`, so every sub-heading was glued to the paragraph
 *     under it and the post read as one undifferentiated wall,
 *   - h2 was 36px/900 against that 16px body — a 2.25x jump that shouts,
 *   - block tables came out with 12px cell text inside 17px header cells and
 *     half-opaque black rules, and had no way to survive a phone,
 *   - lists, captions, quotes and content links had no styling at all.
 *
 * WHAT: one stylesheet for both blog surfaces, enqueued from cl-engine's
 * content/blog.php on blog requests only (nothing else on the site loads it).
 * Everything is scoped under .cl-blog / .cl-post so no other template can be
 * caught by it. The typographic scale is set here in one place: change
 * --cl-blog-measure or --cl-blog-ink and the whole reading column follows.
 *
 * The content rules are deliberately specific enough (`.cl-post__content h3`)
 * to beat both the legacy base sheet and wp-block-library, which IS loaded on
 * posts that contain blocks — cl_frontend_drop_block_css() keeps it for
 * exactly that case.
 *
 * Safari budget (house rule): no :has(), no color-mix(), no overflow:clip.
 */

/* ── Shell ────────────────────────────────────────────────────────────────
   The clearance under the header is the whole reason for the top padding.
   The logo overhang is desktop-only (phones keep the flat in-bar logo), so
   the phone value is set purely by what reads well, not by collision. */
.cl-blog {
	--cl-blog-measure: 760px;
	--cl-blog-ink: #222b36;
	--cl-blog-body: #33404d;
	--cl-blog-muted: #6b7785;
	--cl-blog-line: #e6ecf3;
	--cl-blog-shade: #f6f8fb;
	--cl-blog-accent: var(--cl-red, #dd0000);
	padding-top: 64px;
	padding-bottom: 72px;
}
/* Below 600px style.css zeroes .page-content padding with !important (a legacy
   rule that exists so full-bleed Elementor sections reach the screen edge on a
   phone). .cl-blog IS a .page-content, so the clearance has to be reclaimed at
   the same weight. Legacy is never edited — it is overridden here. */
@media (max-width: 600px) {
	body .page-content.cl-blog {
		padding-top: 28px !important;
		padding-bottom: 48px !important;
	}
}

/* ── Post header ─────────────────────────────────────────────────────── */
.cl-blog--single .cl-post {
	max-width: var(--cl-blog-measure);
	margin: 0 auto;
}
.cl-post__header {
	margin: 0 0 30px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--cl-blog-line);
}
.cl-post__title {
	margin: 0 0 14px;
	font-size: 42px;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--cl-blog-ink);
}
/* style.css sets `h1..h6 { font-weight: 900 !important }` site-wide, which is
   right for a dealer homepage and wrong for an article: at one weight for
   every level the only thing separating an H2 from an H3 is size, and a long
   post reads as a stack of shouts. The weights are stepped back to 800/700
   inside the article only — nothing else on the site is touched. */
.cl-blog .cl-post__title {
	font-weight: 800 !important;
}
.cl-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--cl-blog-muted);
}
/* Thin dot separators, drawn rather than typed, so an absent category never
   leaves a dangling middot the way the old string concatenation did. */
.cl-post__meta > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 10px 3px 0;
	border-radius: 50%;
	background: #c3ccd6;
	vertical-align: middle;
}
.cl-post__cats a {
	color: var(--cl-blog-muted);
	text-decoration: none;
	border-bottom: 1px solid rgba(107, 119, 133, 0.35);
}
.cl-post__cats a:hover {
	color: var(--cl-blog-accent);
	border-bottom-color: var(--cl-blog-accent);
}

/* ── Hero image ──────────────────────────────────────────────────────── */
.cl-post__hero {
	margin: 0 0 32px;
}
.cl-post__hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/* ── Body copy ───────────────────────────────────────────────────────── */
.cl-post__content {
	color: var(--cl-blog-body);
	font-size: 18px;
	line-height: 1.75;
}
.cl-post__content p {
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 1.75;
}
/* The lede. One size up and one shade darker on the opening paragraph is the
   cheapest way to make a page read as edited rather than pasted. */
.cl-post__content > p:first-child {
	font-size: 20px;
	line-height: 1.65;
	color: var(--cl-blog-ink);
	margin-bottom: 26px;
}
.cl-post__content strong,
.cl-post__content b {
	font-weight: 700;
	color: var(--cl-blog-ink);
}
.cl-post__content a {
	color: var(--cl-blog-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.cl-post__content a:hover {
	text-decoration-thickness: 2px;
}

/* ── Headings ────────────────────────────────────────────────────────────
   Space above a heading belongs to the heading, not to the paragraph before
   it: a big top margin and a small bottom margin is what groups a heading
   with the text it introduces. The old sheet had h3 at margin:0, which did
   the opposite of grouping. */
.cl-post__content h2,
.cl-post__content h3,
.cl-post__content h4 {
	color: var(--cl-blog-ink);
	letter-spacing: -0.01em;
}
.cl-post__content h2 {
	margin: 52px 0 16px;
	font-size: 30px;
	line-height: 1.24;
}
.cl-post__content h3 {
	margin: 38px 0 12px;
	font-size: 22px;
	line-height: 1.3;
}
.cl-post__content h4 {
	margin: 30px 0 10px;
	font-size: 19px;
	line-height: 1.35;
}
/* See the note on .cl-post__title — same site-wide 900 !important, same
   scoped step-back so the ladder has three distinguishable rungs. */
.cl-blog .cl-post__content h2 {
	font-weight: 800 !important;
}
.cl-blog .cl-post__content h3,
.cl-blog .cl-post__content h4 {
	font-weight: 700 !important;
}
.cl-post__content > h2:first-child,
.cl-post__content > h3:first-child {
	margin-top: 0;
}

/* ── Lists ───────────────────────────────────────────────────────────── */
.cl-post__content ul,
.cl-post__content ol {
	margin: 0 0 24px;
	padding-left: 24px;
}
.cl-post__content li {
	margin: 0 0 10px;
	padding-left: 4px;
	font-size: 18px;
	line-height: 1.7;
}
.cl-post__content li:last-child {
	margin-bottom: 0;
}
.cl-post__content ul li::marker {
	color: var(--cl-blog-accent);
}
.cl-post__content ol li::marker {
	color: var(--cl-blog-muted);
	font-weight: 700;
}
.cl-post__content li > ul,
.cl-post__content li > ol {
	margin: 10px 0 0;
}

/* ── Tables ──────────────────────────────────────────────────────────────
   Cell text matched to the body size (it was 12px against a 17px header),
   a tinted header row, hairline rules, and a scroll container so a
   three-column comparison table survives a phone instead of crushing its
   columns to two words wide. */
.cl-post__tablewrap {
	position: relative;
	margin: 0 0 28px;
}
.cl-post__content figure.wp-block-table {
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.cl-post__tablewrap > table {
	margin: 0;
}
.cl-post__content table {
	width: 100%;
	margin: 0 0 28px;
	border-collapse: collapse;
	border: 1px solid var(--cl-blog-line);
	font-size: 16px;
	line-height: 1.55;
	background: #ffffff;
}
.cl-post__content figure.wp-block-table table {
	margin: 0;
	table-layout: auto;
}
/* The header cell is matched through tbody > tr because the legacy base sheet
   paints EVERY table cell transparent from
   `table > tbody > tr:nth-child(2n+1) > th` — a plainer `.cl-post__content th`
   loses to it on element count and the header row comes out unshaded. */
.cl-post__content th,
.cl-post__content table > tbody > tr > th,
.cl-post__content table > thead > tr > th {
	padding: 12px 14px;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cl-blog-ink);
	background-color: var(--cl-blog-shade);
	border: 0;
	border-bottom: 1px solid #dbe3ec;
}
.cl-post__content td {
	padding: 12px 14px;
	font-size: 16px;
	color: var(--cl-blog-body);
	border: 0;
	border-top: 1px solid var(--cl-blog-line);
	vertical-align: top;
}
.cl-post__content tbody tr:nth-child(even) td {
	background: #fbfcfe;
}
.cl-post__content tbody tr:first-child td {
	border-top: 0;
}

/* ── Quotes ──────────────────────────────────────────────────────────── */
.cl-post__content blockquote {
	margin: 30px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--cl-blog-accent);
	font-style: normal;
	color: var(--cl-blog-ink);
}
.cl-post__content blockquote p {
	font-size: 19px;
	line-height: 1.65;
	margin-bottom: 12px;
}
.cl-post__content blockquote p:last-child {
	margin-bottom: 0;
}
.cl-post__content blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-style: normal;
	color: var(--cl-blog-muted);
}

/* ── Figures and images ──────────────────────────────────────────────── */
.cl-post__content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.cl-post__content figure {
	margin: 30px 0;
}
.cl-post__content figcaption,
.cl-post__content .wp-caption-text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cl-blog-muted);
	text-align: center;
}
.cl-post__content hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--cl-blog-line);
}
.cl-post__content > *:last-child {
	margin-bottom: 0;
}

/* ── Post footer ─────────────────────────────────────────────────────── */
.cl-post__footer {
	margin: 44px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--cl-blog-line);
}
.cl-post__back {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid #d6dde6;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--cl-blog-ink);
	text-decoration: none;
	background: #ffffff;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.cl-post__back:hover {
	border-color: var(--cl-blog-accent);
	color: var(--cl-blog-accent);
}

/* ── More from the blog ──────────────────────────────────────────────────
   A post that dead-ends is a post that ends the visit. Three recent siblings
   under the article keep the reader on the site and give the blog some
   internal linking it did not have. */
.cl-post-more {
	max-width: var(--cl-blog-measure);
	margin: 56px auto 0;
	padding-top: 34px;
	border-top: 1px solid var(--cl-blog-line);
}
.cl-post-more__title {
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cl-blog-muted);
}
.cl-post-more__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px;
}
.cl-post-more__card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.cl-post-more__thumb {
	display: block;
	margin: 0 0 12px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cl-blog-shade);
}
.cl-post-more__thumb img {
	display: block;
	width: 100%;
	height: 132px;
	object-fit: cover;
}
.cl-post-more__name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cl-blog-ink);
}
.cl-post-more__card:hover .cl-post-more__name {
	color: var(--cl-blog-accent);
}
.cl-post-more__date {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	color: var(--cl-blog-muted);
}

/* ── Blog index ──────────────────────────────────────────────────────────
   archive-blog.php still prints its own inline card rules (it renders after
   this sheet, so it wins where the two overlap). Only the shell spacing and
   the heading are set here, which is what the index was missing. */
.cl-blog--archive .cl-blog__title {
	margin: 0 0 28px;
	font-size: 38px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cl-blog-ink);
}

/* ── Phone ───────────────────────────────────────────────────────────────
   No logo overhang here, so the top padding is set by reading comfort. The
   type scale steps down roughly one notch across the board; the h2/body
   ratio stays where it is on desktop so the hierarchy reads the same. */
@media (max-width: 767px) {
	.cl-blog {
		padding-top: 28px;
		padding-bottom: 48px;
	}
	.cl-post__title {
		font-size: 30px;
		line-height: 1.2;
	}
	.cl-post__header {
		margin-bottom: 24px;
		padding-bottom: 20px;
	}
	.cl-post__content,
	.cl-post__content p,
	.cl-post__content li {
		font-size: 17px;
	}
	.cl-post__content > p:first-child {
		font-size: 18px;
	}
	.cl-post__content h2 {
		margin: 40px 0 14px;
		font-size: 24px;
	}
	.cl-post__content h3 {
		margin: 30px 0 10px;
		font-size: 20px;
	}
	.cl-post__content h4 {
		font-size: 18px;
	}
	.cl-post__content blockquote {
		margin: 24px 0;
		padding-left: 18px;
	}
	.cl-post__content blockquote p {
		font-size: 17px;
	}
	/* Inside the scroll container the table keeps readable column widths and
	   the reader swipes it. A bare table (no block wrapper) becomes its own
	   scroller — the classic display:block fallback, phone only. */
	.cl-post__content figure.wp-block-table table,
	.cl-post__tablewrap > table {
		min-width: 520px;
	}
	.cl-post__tablewrap > table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* The scroll cue. Painted by the wrapper, which does not move, so it stays
	   pinned to the right edge while the table slides under it. A reader who
	   sees a column disappearing under a fade knows to push it. */
	.cl-post__tablewrap::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 34px;
		pointer-events: none;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
	}
	/* Matched through tbody for the same reason as the desktop rule — the
	   plain selector loses to the legacy per-cell rule on element count. */
	.cl-post__content th,
	.cl-post__content td,
	.cl-post__content table > tbody > tr > th,
	.cl-post__content table > thead > tr > th {
		padding: 10px 12px;
	}
	.cl-post-more {
		margin-top: 40px;
		padding-top: 28px;
	}
	.cl-post-more__grid {
		gap: 18px;
	}
	.cl-blog--archive .cl-blog__title {
		font-size: 28px;
	}
}