/**
 * RTG Content Page Design System (snapshot routes)
 * --------------------------------------------------------------
 * Brings the Road Tax canonical look (shell, typography, cadence,
 * editorial cards) to ALL snapshot-rendered pages (blogs, guides,
 * static info) without requiring per-snapshot markup refactors.
 *
 * GOVERNANCE
 * ----------
 * Layered ON TOP of `_rtg-calculator-system.css`. The shared
 * calculator system owns shells / cadence / hero typography under
 * `body.rtg-calculator-page`. This file extends those rules to
 * `body.rtg-content-page` snapshot routes by AUTO-CARDIFYING
 * substantive Elementor chapters (without needing `.rtg-calc-module`
 * wrapper class on the partial).
 *
 * EXCLUDES (handled by includes/bootstrap.php path check)
 *   - `/`            home (perfect already)
 *   - `/usa/`        USA parent (perfect already)
 *
 * INCLUDES (opted in automatically)
 *   - /blogs/
 *   - /check-road-tax-online/
 *   - /germany/
 *   - /harga-road-tax-kereta/
 *   - /jpj-check-road-tax-expiry/
 *   - /malaysia-road-tax-guide/
 *   - /mrt-putrajaya-line/
 *   - /road-tax-delivery-status/
 *   - /terms-and-conditions/
 *   - /vehicle-licensing-fee/
 *   - /usa/dmv-fee-calculator/
 *   - /usa/vehicle-lease-tax-calculator/
 *
 * SCOPE
 * - Auto-card chapters that contain editorial content (text, image,
 *   icon-list, list, image-box, etc.) — but NOT pure spacers, dividers
 *   or empty wrappers.
 * - Promote the first `<section>` H1 strip (the legacy "post hero")
 *   to a Road-Tax-styled hero band.
 * - Tighten Kadence content-area margins so the document doesn't
 *   float in 5rem of whitespace.
 * - Override Kadence's 17px body so prose matches calculator pages.
 *
 * NOT IN SCOPE
 * - Per-page brand color / hero imagery / content edits.
 * - Schema, FAQ, or accordion chrome (faq-system.css owns those).
 */


/* =========================================================
 * 1. KADENCE BASE NEUTRALIZATION — content pages only
 * Snapshots ship with Kadence inline CSS that hard-sets:
 *   body { font-size: 17px; }
 *   h1 { font-size: 32px; }  h2 { 28px; }  h3 { 24px; }
 *   .content-area { margin: 5rem 0; }
 * We re-bind those to the calculator-page tokens.
 * =======================================================*/
body.rtg-content-page {
	font-size: 16px;
	color: var(--rtg-cps-text, #1f2f3f);
}

body.rtg-content-page .content-area,
body.rtg-content-page .rtg-main {
	margin-top: 1.2rem;
	margin-bottom: 2.6rem;
}

@media (max-width: 1024px) {
	body.rtg-content-page .content-area,
	body.rtg-content-page .rtg-main {
		margin-top: 0.9rem;
		margin-bottom: 2rem;
	}
}

@media (max-width: 767px) {
	body.rtg-content-page .content-area,
	body.rtg-content-page .rtg-main {
		margin-top: 0.6rem;
		margin-bottom: 1.6rem;
	}
}

/* Kadence's `.entry-content-wrap` is invasive on single posts —
 * collapse its padding so cards control their own breathing room. */
body.rtg-content-page .entry-content-wrap,
body.rtg-content-page .entry.single-entry,
body.rtg-content-page .entry.loop-entry {
	padding: 0;
	box-shadow: none;
	background: transparent;
}


/* =========================================================
 * 2. LEGACY `<section>` H1 STRIP → HERO BAND
 * Snapshot pages render their main H1 inside a regular
 * `section.elementor-top-section.elementor-section-full_width`
 * with no `.rtg-calc-hero` class. Promote the FIRST one to a
 * Road-Tax-styled hero band visually.
 * =======================================================*/
.rtg-content-page .elementor > section.elementor-top-section.elementor-section-full_width:first-of-type {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 1.6rem;
	padding-bottom: 1.4rem;
}

.rtg-content-page
	.elementor
	> section.elementor-top-section.elementor-section-full_width:first-of-type
	> .elementor-container {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
}

.rtg-content-page
	.elementor
	> section.elementor-top-section.elementor-section-full_width:first-of-type
	.elementor-widget-heading
	.elementor-widget-container {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.rtg-content-page
	.elementor
	> section.elementor-top-section.elementor-section-full_width:first-of-type
	h1.elementor-heading-title {
	text-align: center;
	margin: 0;
	font-family: "ABeeZee", sans-serif;
	font-size: var(--rtg-cps-hero-h1-size);
	font-weight: var(--rtg-cps-hero-h1-weight);
	line-height: var(--rtg-cps-hero-h1-line);
	letter-spacing: var(--rtg-cps-hero-h1-track);
	color: var(--rtg-cps-hero-h1-color);
	text-wrap: balance;
	border-top: none;
	padding-top: 0;
}

@media (max-width: 1024px) {
	.rtg-content-page
		.elementor
		> section.elementor-top-section.elementor-section-full_width:first-of-type
		h1.elementor-heading-title {
		font-size: var(--rtg-cps-hero-h1-size-md);
	}
}

@media (max-width: 767px) {
	.rtg-content-page
		.elementor
		> section.elementor-top-section.elementor-section-full_width:first-of-type
		h1.elementor-heading-title {
		font-size: var(--rtg-cps-hero-h1-size-sm);
		line-height: 1.35em;
		letter-spacing: -0.45px;
	}

	.rtg-content-page .elementor > section.elementor-top-section.elementor-section-full_width:first-of-type {
		padding-top: 1.1rem;
		padding-bottom: 1rem;
	}
}


/* =========================================================
 * 3. AUTO-CARD EDITORIAL CHAPTERS
 * Promote substantive `.e-con-boxed.e-parent` chapters to
 * Road-Tax-style modules WITHOUT needing `.rtg-calc-module` on the
 * snapshot HTML. We use :has() to skip spacer-only and div-only
 * wrappers that would otherwise render as empty cards.
 *
 * Cardable widgets: text-editor, heading, image, image-box, icon-list,
 * list, button, video, html, code-highlight, table, accordion (non-FAQ),
 * shortcode (when used for body content).
 * =======================================================*/

.rtg-content-page
	.elementor
	> .elementor-element.e-con-boxed.e-parent:has(
		> .e-con-inner > .elementor-widget-text-editor,
		> .e-con-inner > .elementor-widget-image,
		> .e-con-inner > .elementor-widget-image-box,
		> .e-con-inner > .elementor-widget-icon-list,
		> .e-con-inner > .elementor-widget-icon-box,
		> .e-con-inner > .elementor-widget-list,
		> .e-con-inner > .elementor-widget-button,
		> .e-con-inner > .elementor-widget-video,
		> .e-con-inner > .elementor-widget-html,
		> .e-con-inner > .elementor-widget-code-highlight,
		> .e-con-inner > .elementor-widget-table,
		> .e-con-inner > .elementor-widget-shortcode,
		> .e-con-inner > .elementor-widget-heading
	) {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--rtg-cps-module-border);
	border-radius: var(--rtg-cps-module-radius);
	background: #ffffff;
	box-shadow: var(--rtg-cps-module-shadow-halo);
	padding: var(--rtg-cps-module-pad-y) var(--rtg-cps-module-pad-x);
}

.rtg-content-page
	.elementor
	> .elementor-element.e-con-boxed.e-parent:has(
		> .e-con-inner > .elementor-widget-text-editor,
		> .e-con-inner > .elementor-widget-image,
		> .e-con-inner > .elementor-widget-image-box,
		> .e-con-inner > .elementor-widget-icon-list,
		> .e-con-inner > .elementor-widget-icon-box,
		> .e-con-inner > .elementor-widget-list,
		> .e-con-inner > .elementor-widget-button,
		> .e-con-inner > .elementor-widget-video,
		> .e-con-inner > .elementor-widget-html,
		> .e-con-inner > .elementor-widget-code-highlight,
		> .e-con-inner > .elementor-widget-table,
		> .e-con-inner > .elementor-widget-shortcode,
		> .e-con-inner > .elementor-widget-heading
	)
	> .e-con-inner {
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}

/*
 * Cards use the calm Road Tax baseline (white surface + halo shadow).
 * We don't alternate tint/halo here because `:nth-of-type(odd)` counts
 * across ALL `<div>` siblings (including pass-through spacer-only
 * containers), so it wouldn't reliably alternate between carded ones.
 * Uniform halo gives a steady editorial cadence that scales for any
 * number of chapters without rhythm artifacts.
 */

/* Card-to-card spacing — tight Road Tax cadence */
.rtg-content-page .elementor > .elementor-element.e-con-boxed.e-parent + .elementor-element.e-con-boxed.e-parent {
	margin-top: var(--rtg-cps-module-gap);
}

/* Spacer-only chapters between cards: collapse them so cards
 * follow the canonical `--rtg-cps-module-gap` rhythm rather than
 * carrying legacy Elementor spacer heights. */
.rtg-content-page .elementor > .elementor-element.e-con-boxed.e-parent:not(:has(
	> .e-con-inner > .elementor-widget-text-editor,
	> .e-con-inner > .elementor-widget-image,
	> .e-con-inner > .elementor-widget-image-box,
	> .e-con-inner > .elementor-widget-icon-list,
	> .e-con-inner > .elementor-widget-icon-box,
	> .e-con-inner > .elementor-widget-list,
	> .e-con-inner > .elementor-widget-button,
	> .e-con-inner > .elementor-widget-video,
	> .e-con-inner > .elementor-widget-html,
	> .e-con-inner > .elementor-widget-code-highlight,
	> .e-con-inner > .elementor-widget-table,
	> .e-con-inner > .elementor-widget-shortcode,
	> .e-con-inner > .elementor-widget-heading
)) {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	min-height: 0;
}

.rtg-content-page .elementor > .elementor-element.e-con-boxed.e-parent:not(:has(
	> .e-con-inner > .elementor-widget-text-editor,
	> .e-con-inner > .elementor-widget-image,
	> .e-con-inner > .elementor-widget-image-box,
	> .e-con-inner > .elementor-widget-icon-list,
	> .e-con-inner > .elementor-widget-icon-box,
	> .e-con-inner > .elementor-widget-list,
	> .e-con-inner > .elementor-widget-button,
	> .e-con-inner > .elementor-widget-video,
	> .e-con-inner > .elementor-widget-html,
	> .e-con-inner > .elementor-widget-code-highlight,
	> .e-con-inner > .elementor-widget-table,
	> .e-con-inner > .elementor-widget-shortcode,
	> .e-con-inner > .elementor-widget-heading
)) .elementor-spacer-inner {
	height: 0;
}


/* =========================================================
 * 4. AUTO-CARD LEGACY `<section>` CHAPTERS
 * Older posts mix Elementor `<section class="elementor-section">`
 * (not `.e-con-boxed`) into the body for heading-only strips.
 * Promote those (except the first one, which is the hero) to the
 * same calm chapter card shell.
 * =======================================================*/
.rtg-content-page .elementor > section.elementor-top-section.elementor-section-full_width:not(:first-of-type) > .elementor-container {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--rtg-cps-module-border);
	border-radius: var(--rtg-cps-module-radius);
	background: var(--rtg-cps-module-tint);
	box-shadow: var(--rtg-cps-module-shadow);
	padding: calc(var(--rtg-cps-module-pad-y) * 0.85) var(--rtg-cps-module-pad-x);
}

.rtg-content-page .elementor > section.elementor-top-section.elementor-section-full_width:not(:first-of-type) {
	margin-top: var(--rtg-cps-module-gap);
	margin-bottom: var(--rtg-cps-module-gap);
}


/* =========================================================
 * 5. TYPOGRAPHY INSIDE CONTENT CARDS
 * Road Tax baseline for headings + prose, slightly tightened
 * because static posts run long.
 * =======================================================*/
.rtg-content-page .elementor-widget-heading h1.elementor-heading-title {
	font-family: "ABeeZee", sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 1.85rem);
	font-weight: 700;
	color: #12263a;
	line-height: 1.28;
	margin: 0 0 0.45rem;
	text-align: left;
}

.rtg-content-page .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	font-weight: 700;
	color: #1a3148;
	margin-top: var(--rtg-cps-h3-mt);
	margin-bottom: var(--rtg-cps-h3-mb);
	text-align: left;
}

.rtg-content-page .elementor-widget-text-editor p,
.rtg-content-page .elementor-widget-text-editor li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: var(--rtg-cps-prose-line);
	color: var(--rtg-cps-text);
}

.rtg-content-page .elementor-widget-text-editor p {
	margin: 0 0 var(--rtg-cps-prose-mb);
}

.rtg-content-page .elementor-widget-text-editor ul,
.rtg-content-page .elementor-widget-text-editor ol {
	margin: 0 0 var(--rtg-cps-prose-mb);
	padding-left: 1.35rem;
}

.rtg-content-page .elementor-widget-text-editor li {
	margin-bottom: 0.32rem;
}

.rtg-content-page .elementor-widget-text-editor a,
.rtg-content-page .elementor-widget-text-editor strong a,
.rtg-content-page .elementor-widget-text-editor b a {
	color: var(--rtg-cps-link);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.18s ease;
}

.rtg-content-page .elementor-widget-text-editor a:hover {
	border-bottom-color: currentColor;
}

/* Image-box chapter polish (icon + heading + caption pattern) */
.rtg-content-page .elementor-image-box-wrapper {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.rtg-content-page .elementor-image-box-content .elementor-image-box-title {
	font-size: 1.02rem;
	font-weight: 700;
	margin: 0 0 0.18rem;
	color: #12263a;
}

.rtg-content-page .elementor-image-box-content .elementor-image-box-description {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--rtg-cps-text);
	margin: 0;
}

/* Icon-list (KIT/widgets) - dense Road Tax-style bullet group */
.rtg-content-page .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rtg-content-page .elementor-icon-list-item {
	display: flex;
	gap: 0.55rem;
	align-items: baseline;
	margin: 0 0 0.4rem;
	font-size: 16px;
	line-height: 1.55;
	color: var(--rtg-cps-text);
}


/* =========================================================
 * 6. KADENCE HEADER / FOOTER STRIP (snapshot bleed-through)
 * Snapshots may embed legacy WordPress header/footer markup
 * inside `<main id="main-content">`. The real masthead/footer
 * are siblings before/after `<main>` from templates/*.php — they
 * must NOT match these selectors (body has .rtg-content-page too).
 * =======================================================*/
#main-content #masthead,
#main-content .site-header,
#main-content .site-footer:not(.rtg-footer),
#main-content .rtg-pre-footer-cta + .site-footer {
	display: none;
}


/* =========================================================
 * 7. MOBILE
 * =======================================================*/
@media (max-width: 767px) {
	.rtg-content-page
		.elementor
		> .elementor-element.e-con-boxed.e-parent:has(
			> .e-con-inner > .elementor-widget-text-editor,
			> .e-con-inner > .elementor-widget-image,
			> .e-con-inner > .elementor-widget-image-box,
			> .e-con-inner > .elementor-widget-icon-list,
			> .e-con-inner > .elementor-widget-icon-box,
			> .e-con-inner > .elementor-widget-list,
			> .e-con-inner > .elementor-widget-button,
			> .e-con-inner > .elementor-widget-video,
			> .e-con-inner > .elementor-widget-html,
			> .e-con-inner > .elementor-widget-code-highlight,
			> .e-con-inner > .elementor-widget-table,
			> .e-con-inner > .elementor-widget-shortcode,
			> .e-con-inner > .elementor-widget-heading
		) {
		padding: calc(var(--rtg-cps-module-pad-y) * var(--rtg-cps-module-pad-y-mul-sm))
		         calc(var(--rtg-cps-module-pad-x) * var(--rtg-cps-module-pad-x-mul-sm));
	}

	.rtg-content-page .elementor-widget-text-editor p,
	.rtg-content-page .elementor-widget-text-editor li {
		font-size: 15px;
		line-height: var(--rtg-cps-prose-line-sm);
	}

	.rtg-content-page .elementor-widget-heading h1.elementor-heading-title {
		font-size: 1.32rem;
	}
}