/*!
 * AMGB Insights article body branded styling
 * File: chrome-articles.css
 * Loaded on: body.single-post (Insights category_id=7) only
 * Depends on: amgb-chrome-a11y (must win the cascade after a11y patches)
 * Owner: Agent ARTICLES (2026-05-29)
 *
 * Why this exists: Insights articles render with default Hello Elementor
 * theme styles via .page-content (NOT .entry-content — Hello Elementor uses
 * .page-content for the_content() output). Default styling leaves body text
 * tight, no max-width, no brand colour cues, generic typography. This file
 * lifts the article reading experience to match the home page brand palette
 * (gold #d69a2b, calm body grey #2a2a2a, generous line-height for
 * readability — same axis as Agent R's mobile UX work in chrome-a11y.css).
 *
 * Scoped to body.single-post .page-content so it cannot leak to:
 *   - /preview/ chrome pages (those use page-builder layouts)
 *   - Phase 2 suburb pages (own brand layouts)
 *   - calculator / contact / FAQ (page templates, not posts)
 */

/* === Article container === */
body.single-post .page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 24px 56px;
	color: #2a2a2a;
	font-size: 17px;
	line-height: 1.65;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

/* === Title block (above .page-content in markup) === */
body.single-post .entry-header {
	max-width: 760px;
	margin: 32px auto 0;
	padding: 0 24px;
}

body.single-post .entry-title {
	font-size: 38px;
	line-height: 1.15;
	color: #1a1a1a;
	margin: 0 0 12px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body.single-post .entry-meta {
	font-size: 14px;
	color: #6b6b6b;
	letter-spacing: 0.02em;
	margin-bottom: 24px;
}

/* === Hero / featured image inside .page-content === */
body.single-post .page-content > img:first-child,
body.single-post .page-content img.wp-post-image {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0 0 32px;
	display: block;
}

/* === Body paragraphs === */
body.single-post .page-content p,
body.single-post .page-content .wp-block-paragraph {
	margin: 0 0 20px;
}

body.single-post .page-content p strong,
body.single-post .page-content .wp-block-paragraph strong {
	color: #1a1a1a;
	font-weight: 600;
}

/* === Headings === */
body.single-post .page-content h2,
body.single-post .page-content .wp-block-heading {
	font-size: 26px;
	line-height: 1.3;
	color: #1a1a1a;
	margin: 56px 0 16px;
	font-weight: 700;
	border-top: 2px solid #d69a2b;
	padding-top: 24px;
	letter-spacing: -0.005em;
}

body.single-post .page-content h3,
body.single-post .page-content h3.wp-block-heading {
	font-size: 21px;
	line-height: 1.35;
	color: #1a1a1a;
	margin: 40px 0 12px;
	font-weight: 600;
	border-top: none;
	padding-top: 0;
}

body.single-post .page-content h4 {
	font-size: 18px;
	line-height: 1.4;
	color: #1a1a1a;
	margin: 32px 0 10px;
	font-weight: 600;
}

/* === Links === */
body.single-post .page-content a {
	color: #b67e1f;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.single-post .page-content a:hover,
body.single-post .page-content a:focus {
	color: #8a5e16;
	text-decoration-thickness: 2px;
}

/* === Lists === */
body.single-post .page-content ul,
body.single-post .page-content ol,
body.single-post .page-content .wp-block-list {
	margin: 0 0 24px 8px;
	padding: 0 0 0 24px;
}

body.single-post .page-content li {
	margin: 0 0 10px;
}

/* === Blockquote === */
body.single-post .page-content blockquote {
	border-left: 4px solid #d69a2b;
	padding: 8px 24px;
	margin: 32px 0;
	background: #faf6ec;
	font-style: italic;
	color: #404040;
	border-radius: 0 4px 4px 0;
}

/* === Images inline in content === */
body.single-post .page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 24px auto;
	display: block;
}

/* === Tables === */
body.single-post .page-content table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	font-size: 16px;
}

body.single-post .page-content th {
	background: #f0e6cc;
	text-align: left;
	padding: 12px 16px;
	font-weight: 600;
	color: #1a1a1a;
}

body.single-post .page-content td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e5e5;
}

/* === Code === */
body.single-post .page-content code {
	background: #f5f5f5;
	border-radius: 4px;
	padding: 2px 6px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
	font-size: 15px;
	color: #1a1a1a;
}

/* === Collapse Gutenberg <br><br><br><br> stacks
 * Article post_content has long <br> chains between blocks. Force the
 * stacked breaks to render as a single visual gap so the article doesn't
 * have 40-60px of vacant whitespace between every paragraph.
 * (Cannot edit post_content per hard rule — fix presentationally.) */
body.single-post .page-content br + br {
	display: none;
}

/* === Closing CTA banner (presentational only — content-free)
 * Appears at the end of every Insights article. Brand gold-on-cream callout
 * with Chris's phone number, mirroring the home page CTA strip. */
body.single-post .page-content::after {
	content: "Ready to sell? Book a home visit with Chris on 0411 108 170.";
	display: block;
	background: #fffbf0;
	border: 1px solid #d69a2b;
	border-radius: 8px;
	padding: 24px 28px;
	margin-top: 56px;
	text-align: center;
	font-size: 18px;
	line-height: 1.5;
	color: #1a1a1a;
	font-weight: 600;
}

/* === Comments section: tone down the visual weight === */
body.single-post .comments-area {
	max-width: 760px;
	margin: 56px auto 0;
	padding: 32px 24px;
	border-top: 1px solid #e5e5e5;
}

body.single-post .comment-reply-title {
	font-size: 22px;
	color: #1a1a1a;
	margin-bottom: 16px;
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
	body.single-post .page-content {
		padding: 24px 16px 40px;
		font-size: 17px;
		line-height: 1.6;
	}

	body.single-post .entry-header {
		margin-top: 16px;
		padding: 0 16px;
	}

	body.single-post .entry-title {
		font-size: 28px;
		line-height: 1.2;
	}

	body.single-post .page-content h2,
	body.single-post .page-content .wp-block-heading {
		font-size: 22px;
		line-height: 1.3;
		margin: 40px 0 12px;
		padding-top: 20px;
	}

	body.single-post .page-content h3 {
		font-size: 19px;
		margin: 32px 0 10px;
	}

	body.single-post .page-content::after {
		font-size: 17px;
		padding: 20px;
		margin-top: 40px;
	}

	body.single-post .comments-area {
		padding: 24px 16px;
		margin-top: 40px;
	}
}

/* === Very small (≤375px iPhone SE) === */
@media (max-width: 375px) {
	body.single-post .entry-title {
		font-size: 26px;
	}

	body.single-post .page-content h2,
	body.single-post .page-content .wp-block-heading {
		font-size: 20px;
	}
}