/**
 * RTG Calculator Page Design System (shared)
 * --------------------------------------------------------------
 * Canonical layout / spacing / cadence for ALL calculator pages.
 * Reverse-engineered from the finalized references:
 *   - /road-tax-calculator/        (rhythm baseline)
 *   - /ev-road-tax-calculator/     (calculator-band shell)
 *   - /car-loan-calculator/        (premium module variant)
 *
 * GOVERNANCE — WHO OWNS WHAT (calculator routes using this file + `.rtg-calculator-page`)
 * --------------------------------------------------------------
 * SHARED SYSTEM (this file) SHOULD OWN:
 *   - Chapter cadence (section margins / sibling handoff)
 *   - Shell column width (--rtg-cps-shell-max) for Elementor boxed columns
 *   - Editorial prose lane width (--rtg-cps-prose-max) where applied
 *   - Semantic hero (.rtg-calc-hero), calc band (.rtg-calc-band), modules, breaks, disclaimers
 *   - Calculator band surface (border/gradient/shadow/padding); NOT inner field chrome
 *   - FAQ *wrapper* rhythm where `.rtg-calc-faq-band` applies; accordion chrome is faq-system.css
 * SHARED SYSTEM SHOULD NOT OWN:
 *   - Country/calculator field UI, grids, branded hero imagery, bespoke utility cards
 *
 * ELEMENTOR COMPAT (post-*.css, frontend.min.css, Kadence exports) OWNS:
 *   - Frozen export layout primitives (historical widths, gaps, widget chrome)
 * PAGE CSS (assets/css/pages/<page>.css) SHOULD OWN:
 *   - Token overrides / branding / grid math / bridging legacy wrappers only
 *
 * SAFETY — `.rtg-calculator-page` contract
 * - Malaysia `/road-tax-calculator/` participates via `pages/road-tax-calculator.php` body_class;
 *   Road-specific authoritative values remain `--rtg-rtx-*` (see CPS→RTX bridge in road-tax-calculator.css).
 *
 * SCOPE
 * - Layout shell, chapter cadence, hero collapse, calc-band rhythm,
 *   editorial cadence, module shell defaults, FAQ wrapper rhythm,
 *   typography cadence, wrapper normalization, mobile behavior.
 *
 * NOT IN SCOPE ON PURPOSE (page / components.css owns these)
 * - Page-specific grids / cards / region tiles
 * - Calculator-specific field layouts and intra-form chrome
 * - Per-page icon/illustration treatments
 * - Per-page brand color / hero background imagery
 *
 * INTEGRATION (per page)
 * 1. Page descriptor adds `rtg-calculator-page` to body_class.
 * 2. Layout loads this file BEFORE the page-specific stylesheet.
 * 3. Partial tags chapter wrappers with role classes:
 *      .rtg-calc-hero       hero section
 *      .rtg-calc-intro      first editorial chapter after hero
 *      .rtg-calc-band       calculator band
 *      .rtg-calc-module     editorial chapter
 *      .rtg-calc-disclaimer note / disclaimer band
 *      .rtg-calc-faq-band   FAQ section wrapper (with .faq-section)
 *      .rtg-calc-faq-title  FAQ title strip
 * 4. For legacy partials whose Elementor IDs cannot be re-tagged,
 *    page CSS adds 1-line "wrapper-twin" aliases that point IDs
 *    at the role classes (see comment block in §10).
 */


/* =========================================================
 * 1. TOKENS — single namespace --rtg-cps-*
 * Pages MAY override individual tokens at .rtg-<page-prefix>
 * =======================================================*/
.rtg-calculator-page {
	/* Layout shells */
	--rtg-cps-shell-max:        min(1040px, calc(100% - 2rem));
	--rtg-cps-prose-max:        min(960px, 100%);
	--rtg-cps-calc-max:         min(1040px, calc(100% - 2rem));

	/* Module identity (Road Tax baseline) */
	--rtg-cps-module-radius:        12px;
	--rtg-cps-module-border:        #e5edf5;
	--rtg-cps-module-border-soft:   #e2ecf6;
	--rtg-cps-module-tint:          #fbfcfe;
	--rtg-cps-module-tint-deep:     #eef4fb;
	--rtg-cps-module-pad-x:         1.06rem;
	--rtg-cps-module-pad-y:         1.02rem;
	--rtg-cps-module-gap:           0.48rem;
	--rtg-cps-module-shadow:        0 1px 4px rgba(15, 23, 42, 0.035);
	--rtg-cps-module-shadow-halo:   0 0 0 1px rgba(15, 23, 42, 0.045),
	                                0 1px 2px rgba(15, 23, 42, 0.02);

	/* Calculator band surface */
	--rtg-cps-calc-surface:         linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	--rtg-cps-calc-shadow:          0 1px 3px rgba(15, 23, 42, 0.045),
	                                0 5px 16px rgba(15, 23, 42, 0.055);
	--rtg-cps-calc-pad-x:           calc(var(--rtg-cps-module-pad-x) * 1.1);
	--rtg-cps-calc-pad-y:           calc(var(--rtg-cps-module-pad-y) * 1.28);

	/* Hero rhythm */
	--rtg-cps-hero-spacer-top:      50px;
	--rtg-cps-hero-spacer-top-md:   15px;
	--rtg-cps-hero-spacer-top-sm:   10px;
	--rtg-cps-hero-spacer-bottom:   20px;
	--rtg-cps-hero-h1-pad-y:        30px;
	--rtg-cps-hero-min-height:      220px;
	--rtg-cps-hero-min-height-md:   200px;

	/* Chapter rhythm — Road Tax canonical */
	--rtg-cps-section-mt:           0.48rem;
	--rtg-cps-section-mb:           0.52rem;
	--rtg-cps-section-sibling-pt:   0.28rem;
	--rtg-cps-faq-mt:               0.75rem;
	--rtg-cps-faq-mb:               0.85rem;

	/* Calculator handoff */
	--rtg-cps-calc-mt:              0.35rem;
	--rtg-cps-calc-mb:              0.9rem;
	--rtg-cps-calc-spacer:          18px;
	/* Semantic chapter-reset spacers (behavioral parity with legacy Road flow) */
	--rtg-cps-break-after-hero:     20px;
	--rtg-cps-break-before-calc:    18px;
	--rtg-cps-break-after-calc:     18px;
	--rtg-cps-break-before-faq:     24px;

	/* Heading cadence */
	--rtg-cps-h2-mt:                0.22rem;
	--rtg-cps-h2-mb:                0.58rem;
	--rtg-cps-h2-pt:                0.18rem;
	--rtg-cps-h2-rule:              1px solid #eff4f9;
	--rtg-cps-h3-mt:                0.12rem;
	--rtg-cps-h3-mb:                0.32rem;

	/* Hero typography — Road Tax canonical (post-314.css derived) */
	--rtg-cps-hero-h1-size:         2.5rem;
	--rtg-cps-hero-h1-size-md:      35px;
	--rtg-cps-hero-h1-size-sm:      28px;
	--rtg-cps-hero-h1-weight:       600;
	--rtg-cps-hero-h1-line:         1.4em;
	--rtg-cps-hero-h1-track:        -0.7px;
	--rtg-cps-hero-h1-color:        #262626;
	--rtg-cps-hero-h2-size:         19px;
	--rtg-cps-hero-h2-size-md:      15px;
	--rtg-cps-hero-h2-size-sm:      13px;
	--rtg-cps-hero-h2-weight:       600;
	--rtg-cps-hero-h2-color:        #262626;

	/* Prose cadence */
	--rtg-cps-prose-line:           1.84;
	--rtg-cps-prose-mb:             0.92rem;
	--rtg-cps-text:                 #1f2f3f;
	--rtg-cps-text-soft:            #4a5f75;
	--rtg-cps-link:                 #1969aa;

	/* Mobile cadence */
	--rtg-cps-shell-max-sm:         min(1040px, calc(100% - 1.2rem));
	--rtg-cps-prose-line-sm:        1.76;
	--rtg-cps-prose-mb-sm:          0.82rem;
	--rtg-cps-module-pad-x-mul-sm:  0.82;
	--rtg-cps-module-pad-y-mul-sm:  0.86;
	--rtg-cps-calc-spacer-sm:       14px;
}


/* =========================================================
 * 2. SHELL — one column, one prose lane
 * Owns: width. Outer margins (rhythm) live in §3.
 * =======================================================*/
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed > .e-con-inner {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
}

/* Legacy boxed sections (snapshots that still use .elementor-section-boxed) */
.rtg-calculator-page .elementor > section.elementor-top-section.elementor-section-boxed > .elementor-container {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
}

/* Editorial prose lane — applies to most heading + text widgets.
 * Excludes FAQ band (it controls its own width inside .faq-section)
 * and any container that hosts a full-width grid (page CSS opts out
 * by setting `max-width: 100%` on its widget container). */
.rtg-calculator-page .e-con-boxed:not(.faq-section):not(.rtg-calc-faq-band) .elementor-widget-heading .elementor-widget-container,
.rtg-calculator-page .e-con-boxed:not(.faq-section):not(.rtg-calc-faq-band) .elementor-widget-text-editor .elementor-widget-container {
	max-width: var(--rtg-cps-prose-max);
	margin-left: 0;
	margin-right: 0;
}


/* =========================================================
 * 3. CHAPTER RHYTHM — outer margins on the .e-parent layer
 * Owns: top/bottom margin between chapters + sibling handoff.
 * =======================================================*/
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent {
	margin-top: var(--rtg-cps-section-mt);
	margin-bottom: var(--rtg-cps-section-mb);
}

.rtg-calculator-page
	.elementor
	> .elementor-element.e-con-boxed.e-parent
	+ .elementor-element.e-con-boxed.e-parent
	> .e-con-inner {
	padding-top: var(--rtg-cps-section-sibling-pt);
}

/* Legacy section equivalents */
.rtg-calculator-page .elementor > section.elementor-top-section.elementor-section-boxed {
	margin-top: var(--rtg-cps-section-mt);
	margin-bottom: var(--rtg-cps-section-mb);
}

/* FAQ chapter — slightly more separation than editorial chapters */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.faq-section,
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-faq-band {
	margin-top: var(--rtg-cps-faq-mt);
	margin-bottom: var(--rtg-cps-faq-mb);
}


/* =========================================================
 * 4. HERO SYSTEM
 * Owns: hero band rhythm, single-column collapse, H1/H2 cadence.
 * Trigger: .rtg-calc-hero on the hero section/container.
 * =======================================================*/

/* Hero band: never carry a bottom margin — chapter rhythm picks it up. */
.rtg-calculator-page .elementor-section:first-of-type,
.rtg-calculator-page .rtg-calc-hero {
	margin-bottom: 0;
}

/* Hero band: shell-width container, vertical breathing room. */
.rtg-calculator-page .rtg-calc-hero {
	min-height: var(--rtg-cps-hero-min-height);
	padding-top: var(--rtg-cps-hero-spacer-top);
	padding-bottom: var(--rtg-cps-hero-spacer-bottom);
}

.rtg-calculator-page .rtg-calc-hero > .elementor-container,
.rtg-calculator-page .rtg-calc-hero > .e-con-inner {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
}

/* CRITICAL — neutralize Elementor's column flex behavior so the
 * hero ALWAYS reads as one centered editorial stack. This is the
 * fix that prevents the H1+H2 from rendering as a 2-column row. */
.rtg-calculator-page .rtg-calc-hero .elementor-column,
.rtg-calculator-page .rtg-calc-hero .elementor-widget-wrap,
.rtg-calculator-page .rtg-calc-hero .elementor-widget {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

.rtg-calculator-page .rtg-calc-hero .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0;
}

.rtg-calculator-page .rtg-calc-hero .elementor-widget {
	margin: 0;
}

/* Hero H1 */
.rtg-calculator-page .rtg-calc-hero .elementor-widget-heading:first-child .elementor-widget-container,
.rtg-calculator-page .rtg-calc-hero .elementor-widget-heading.rtg-calc-hero__title .elementor-widget-container {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: var(--rtg-cps-hero-h1-pad-y) 0 calc(var(--rtg-cps-hero-h1-pad-y) * 0.27);
	max-width: var(--rtg-cps-shell-max);
}

.rtg-calculator-page .rtg-calc-hero 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);
	max-width: none;
	text-wrap: balance;
}

/* Hero subtitle (H2 inside hero) */
.rtg-calculator-page .rtg-calc-hero .elementor-widget-heading + .elementor-widget-heading .elementor-widget-container,
.rtg-calculator-page .rtg-calc-hero .elementor-widget-heading.rtg-calc-hero__subtitle .elementor-widget-container {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 0 0 calc(var(--rtg-cps-hero-h1-pad-y) * 0.6);
	max-width: var(--rtg-cps-shell-max);
}

.rtg-calculator-page .rtg-calc-hero h2.elementor-heading-title {
	text-align: center;
	margin: 0 auto;
	font-family: "ABeeZee", sans-serif;
	font-size: var(--rtg-cps-hero-h2-size);
	font-weight: var(--rtg-cps-hero-h2-weight);
	line-height: 1.28;
	color: var(--rtg-cps-hero-h2-color);
	max-width: var(--rtg-cps-shell-max);
	white-space: normal;
	text-wrap: balance;
	/* Hero subtitle resets the editorial H2 chrome from §6 */
	border-top: none;
	padding-top: 0;
}

/*
 * Editorial hero (canonical Malaysia export + aligned calculator routes):
 * no vertical band padding / min-height; column reads left; H1 + subtitle stay centered.
 * Pair with .rtg-calc-hero on the same section. Optional .rtg-calc-hero__title / __subtitle on widgets.
 */
.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial {
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial .elementor-widget-wrap {
	justify-content: flex-start;
	align-items: stretch;
	text-align: left;
}

.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial .elementor-widget-heading.rtg-calc-hero__title .elementor-widget-container,
.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial .elementor-widget-heading:first-child .elementor-widget-container {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: calc(var(--rtg-cps-hero-h1-pad-y) * 0.65) 0 calc(var(--rtg-cps-hero-h1-pad-y) * 0.18);
	max-width: var(--rtg-cps-shell-max);
}

.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial .elementor-widget-heading.rtg-calc-hero__subtitle .elementor-widget-container,
.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial .elementor-widget-heading + .elementor-widget-heading .elementor-widget-container {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 0 0 calc(var(--rtg-cps-hero-h1-pad-y) * 0.45);
	max-width: var(--rtg-cps-shell-max);
}


/* =========================================================
 * 5. CALCULATOR BAND
 * Owns: the boxed band that wraps the calculator shell.
 * Trigger: .rtg-calc-band on the calculator's e-con-boxed wrapper.
 * Inner shell chrome (fields/buttons) lives in components.css and
 * page CSS — this section only handles the BAND itself.
 * =======================================================*/
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-band {
	margin-top: var(--rtg-cps-calc-mt);
	margin-bottom: calc(var(--rtg-cps-calc-mb) + var(--rtg-cps-calc-spacer));
	max-width: var(--rtg-cps-calc-max);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--rtg-cps-module-border);
	border-radius: var(--rtg-cps-module-radius);
	background: var(--rtg-cps-calc-surface);
	box-shadow: var(--rtg-cps-calc-shadow);
	padding: var(--rtg-cps-calc-pad-y) var(--rtg-cps-calc-pad-x);
}

/* Inner column inside the band: zero out so the band itself paints
 * the surface — prevents nested "double card" look. */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-band > .e-con-inner {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}

/* HTML widget calculators (EV/Car Loan style): strip widget chrome
 * so the band's surface is the calculator surface. */
.rtg-calculator-page .rtg-calc-band .elementor-widget-html,
.rtg-calculator-page .rtg-calc-band .elementor-widget-html .elementor-widget-container {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: none;
}

/* components.css default for `.rtg-calculator` is max-width 1400px,
 * which would burst out of the editorial column. Re-bind it to the
 * calculator shell width whenever the shared shell is used here. */
.rtg-calculator-page .rtg-calc-band .rtg-calculator,
.rtg-calculator-page .rtg-calc-band .rtg-sg-rtc-calculator,
.rtg-calculator-page .rtg-calculator {
	max-width: var(--rtg-cps-calc-max);
	margin-left: auto;
	margin-right: auto;
}


/* =========================================================
 * 6. EDITORIAL MODULE SYSTEM
 * Owns: optional bordered/tinted "chapter card" surface.
 * Trigger: .rtg-calc-module on the chapter wrapper. Pages that
 * want a chapter to remain plain editorial simply omit the class.
 * =======================================================*/
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-module {
	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);
	padding: var(--rtg-cps-module-pad-y) var(--rtg-cps-module-pad-x);
}

/* Inner column zeroed — padding lives on the outer wrapper.
 * This is the rule that prevents the "stacked SaaS card" look. */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-module > .e-con-inner {
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}

/* Nested flex chapter (e-child) — same shell contract as e-parent modules */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-child.rtg-calc-module {
	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);
	padding: var(--rtg-cps-module-pad-y) var(--rtg-cps-module-pad-x);
}

.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-child.rtg-calc-module > .e-con-inner {
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}

.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-child.rtg-calc-module--tint {
	background: var(--rtg-cps-module-tint);
}

.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-child.rtg-calc-module--halo {
	box-shadow: var(--rtg-cps-module-shadow-halo);
}

/* Legacy boxed top-sections promoted to semantic modules */
.rtg-calculator-page .elementor > section.elementor-top-section.elementor-section-boxed.rtg-calc-module {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
}

.rtg-calculator-page .elementor > section.elementor-top-section.elementor-section-boxed.rtg-calc-module > .elementor-container {
	border: 1px solid var(--rtg-cps-module-border);
	border-radius: var(--rtg-cps-module-radius);
	background: #ffffff;
	padding: var(--rtg-cps-module-pad-y) var(--rtg-cps-module-pad-x);
	box-shadow: var(--rtg-cps-module-shadow);
}

.rtg-calculator-page .elementor > section.elementor-top-section.elementor-section-boxed.rtg-calc-module--tint > .elementor-container {
	background: var(--rtg-cps-module-tint);
}

.rtg-calculator-page .elementor > section.elementor-top-section.elementor-section-boxed.rtg-calc-module--halo > .elementor-container {
	box-shadow: var(--rtg-cps-module-shadow-halo);
}

/* Tinted module variant */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-module--tint {
	background: var(--rtg-cps-module-tint);
}

.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-module--tint-deep {
	background: var(--rtg-cps-module-tint-deep);
}

/* Halo variant for white-heavy modules — replaces the soft shadow
 * with a hairline to reduce outline noise. */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-module--halo {
	box-shadow: var(--rtg-cps-module-shadow-halo);
}

/* First chapter after hero — keeps the calmer hand-off rhythm.
 * Outer strip participates in the same centered shell as calc band / FAQ / modules
 * (Elementor flex parents can otherwise stretch children edge-to-edge). */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-intro {
	margin-top: var(--rtg-cps-section-mt);
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
	align-self: center;
}

/* Intro strip — bind the flex inner to the prose lane so widgets stack in a
 * single centered column (Malaysia Road Tax parity). Full-bleed washes on
 * the parent `.e-con` / section still span the viewport; composition lives here. */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-intro > .e-con-inner {
	max-width: var(--rtg-cps-prose-max);
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

/* Disclaimer band — tinted, no shadow; outer shell matches calc/editorial column */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-disclaimer {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
	align-self: center;
	background: var(--rtg-cps-module-tint);
	border: 1px solid var(--rtg-cps-module-border-soft);
	border-radius: var(--rtg-cps-module-radius);
	box-shadow: none;
	padding: var(--rtg-cps-module-pad-y) var(--rtg-cps-module-pad-x);
}


/* =========================================================
 * 7. TYPOGRAPHY CADENCE
 * Owns: H2/H3 rhythm + prose. Page CSS only adjusts page color.
 * =======================================================*/
.rtg-calculator-page .elementor-heading-title {
	font-family: inherit;
}

.rtg-calculator-page .elementor-widget-heading .elementor-heading-title {
	color: #12263a;
	line-height: 1.23;
	margin-bottom: 0.32rem;
	text-align: left;
}

.rtg-calculator-page .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.25rem, 2vw, 1.58rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-top: var(--rtg-cps-h2-mt);
	margin-bottom: var(--rtg-cps-h2-mb);
	padding-top: var(--rtg-cps-h2-pt);
	border-top: var(--rtg-cps-h2-rule);
}

/* H2 inside hero / FAQ-title-band: drop the chapter rule. */
.rtg-calculator-page .rtg-calc-hero .elementor-widget-heading h2.elementor-heading-title,
.rtg-calculator-page .rtg-calc-faq-title .elementor-widget-heading h2.elementor-heading-title,
.rtg-calculator-page .rtg-calc-faq-title .elementor-widget-heading h3.elementor-heading-title {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
	margin-bottom: 0.42rem;
	font-weight: inherit;
}

/* First-child H2 inside a module: card edge IS the chapter divider. */
.rtg-calculator-page .rtg-calc-module > .e-con-inner > .elementor-widget-heading:first-child h2.elementor-heading-title,
.rtg-calculator-page .rtg-calc-module .elementor-widget-wrap > .elementor-widget-heading:first-child h2.elementor-heading-title {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.rtg-calculator-page .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(1.03rem, 1.45vw, 1.22rem);
	margin-top: var(--rtg-cps-h3-mt);
	margin-bottom: var(--rtg-cps-h3-mb);
}

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

.rtg-calculator-page .elementor-widget-text-editor p a {
	color: var(--rtg-cps-link);
	font-weight: 600;
}

/* Lists / nested prose — same cadence as paragraphs (Elementor text widget defaults are minimal without theme entry-content). */
.rtg-calculator-page .elementor-widget-text-editor :where(ul, ol) {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: var(--rtg-cps-prose-line);
	color: var(--rtg-cps-text);
	margin: 0 0 var(--rtg-cps-prose-mb);
	padding-left: 1.35rem;
}

.rtg-calculator-page .elementor-widget-text-editor li {
	margin: 0.28em 0;
}

.rtg-calculator-page .elementor-widget-text-editor :where(ul ul, ol ol, ul ol, ol ul) {
	margin-bottom: 0.35rem;
}


/* =========================================================
 * 8. FAQ WRAPPER NORMALIZATION
 * The accordion itself is owned by `assets/css/faq-system.css`.
 * This block only normalizes the BAND that hosts the accordion
 * + the FAQ title strip pattern.
 * =======================================================*/

/* FAQ band — full-width visual, no editorial prose constraint. */
.rtg-calculator-page .rtg-calc-faq-band > .e-con-inner,
.rtg-calculator-page .rtg-calc-faq-band > .elementor-container {
	max-width: var(--rtg-cps-shell-max);
	margin-left: auto;
	margin-right: auto;
}

.rtg-calculator-page .rtg-calc-faq-band .elementor-widget-heading .elementor-widget-container,
.rtg-calculator-page .rtg-calc-faq-band .elementor-widget-text-editor .elementor-widget-container {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* FAQ title strip — bordered, left-accent rule (Road Tax / Car Loan parity) */
.rtg-calculator-page .rtg-calc-faq-title .elementor-widget-heading .elementor-heading-title {
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid #d9e5f2;
	border-left: 4px solid #2b6cb0;
	border-radius: 10px;
	background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
	line-height: 1.6;
	text-align: center;
	font-weight: 700;
}

.rtg-calculator-page .rtg-calc-faq-title > .e-con-inner {
	padding-bottom: 0.4rem;
}

/* FAQ → footer cadence */
.rtg-calculator-page .rtg-faq-section,
.rtg-calculator-page .rtg-faq-section--unified,
.rtg-calculator-page .rtg-faq-block {
	margin-top: 0.45rem;
	margin-bottom: 1.9rem;
}


/* =========================================================
 * 9. UTILITY PRIMITIVES
 * Single-purpose helpers pages can opt into.
 * =======================================================*/

/* Semantic chapter-reset spacer wrapper.
 * Use between major chapters when a hard editorial reset is needed. */
.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-break {
	--margin-top: 0px;
	--margin-bottom: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	margin: 0;
	margin-block: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	min-height: 0;
}

.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-break > .e-con-inner {
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	max-width: var(--rtg-cps-shell-max);
}

.rtg-calculator-page .rtg-calc-break__spacer {
	display: block;
	width: 100%;
	block-size: var(--rtg-cps-break-after-hero);
}

.rtg-calculator-page .rtg-calc-break--after-hero .rtg-calc-break__spacer {
	block-size: var(--rtg-cps-break-after-hero);
}

.rtg-calculator-page .rtg-calc-break--before-calc .rtg-calc-break__spacer {
	block-size: var(--rtg-cps-break-before-calc);
}

.rtg-calculator-page .rtg-calc-break--after-calc .rtg-calc-break__spacer {
	block-size: var(--rtg-cps-break-after-calc);
}

.rtg-calculator-page .rtg-calc-break--before-faq .rtg-calc-break__spacer {
	block-size: var(--rtg-cps-break-before-faq);
}

/* Prevent sibling handoff padding from stacking on top of chapter breaks. */
.rtg-calculator-page
	.elementor
	> .elementor-element.e-con-boxed.e-parent.rtg-calc-break
	+ .elementor-element.e-con-boxed.e-parent
	> .e-con-inner {
	padding-top: 0;
}

/* Hide a spacer entirely — use sparingly; prefer re-tuning height. */
.rtg-calculator-page .rtg-calc-spacer--hide .elementor-spacer-inner {
	height: 0 !important;
}

/* Calc-band post-spacer (drop a small e-spacer right after the band
 * and add this class) — gives the canonical 18px breathing room. */
.rtg-calculator-page .rtg-calc-spacer--postcalc .elementor-spacer-inner {
	height: var(--rtg-cps-calc-spacer);
}

/* Module gap — when a chapter sits unusually close to a sibling. */
.rtg-calculator-page .rtg-calc-module + .rtg-calc-module {
	margin-top: var(--rtg-cps-module-gap);
}


/* =========================================================
 * 10. WRAPPER PARITY STRATEGY (legacy snapshots)
 * --------------------------------------------------------------
 * For pages whose Elementor snapshot CANNOT be re-tagged, the
 * page CSS adds 1-line aliases that COPY the role classes onto
 * specific Elementor IDs, e.g.:
 *
 *   /* page CSS *‍/
 *   .rtg-calculator-page.rtg-usa-cst .elementor-2467 .elementor-element-a628146 {
 *       /* nothing — selector below picks it up via the alias *‍/
 *   }
 *
 *   /* alias rule pattern: page CSS adds a single shared class
 *      to the Elementor wrapper via a tiny inline classlist patch
 *      OR mirrors the system rule under both selectors. *‍/
 *
 * Because CSS has no @extend, the cleanest pattern when the
 * partial cannot be edited is:
 *
 *   1. Add the role class via a small inline `class="… rtg-calc-band"`
 *      patch in main.partial.html (preferred — one edit, forever).
 *   2. OR, page CSS re-declares the rule under the live ID, e.g.
 *
 *      .elementor-2467 .elementor-element-a134e2c {
 *          @apply-equivalent: copy of §5 RULE here
 *      }
 *
 * Pattern (1) is the recommended path. The system file does NOT
 * enumerate any page-specific Elementor IDs — that responsibility
 * lives in the page's own stylesheet to keep this file evergreen.
 * ========================================================= */


/* =========================================================
 * 11. RESPONSIVE
 * =======================================================*/

@media (max-width: 1024px) {
	.rtg-calculator-page .rtg-calc-hero {
		padding-top: var(--rtg-cps-hero-spacer-top-md);
		min-height: var(--rtg-cps-hero-min-height-md);
	}

	.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial {
		min-height: 0;
		padding-top: 0;
	}

	.rtg-calculator-page .rtg-calc-hero h1.elementor-heading-title {
		font-size: var(--rtg-cps-hero-h1-size-md);
	}

	.rtg-calculator-page .rtg-calc-hero h2.elementor-heading-title {
		font-size: var(--rtg-cps-hero-h2-size-md);
	}
}

@media (max-width: 767px) {
	.rtg-calculator-page {
		--rtg-cps-shell-max: var(--rtg-cps-shell-max-sm);
	}

	.rtg-calculator-page .elementor > .elementor-element.e-con-boxed > .e-con-inner {
		max-width: var(--rtg-cps-shell-max);
	}

	.rtg-calculator-page .elementor-widget-text-editor p {
		font-size: 15px;
		line-height: var(--rtg-cps-prose-line-sm);
		margin-bottom: var(--rtg-cps-prose-mb-sm);
	}

	.rtg-calculator-page .elementor-widget-text-editor :where(ul, ol) {
		font-size: 15px;
		line-height: var(--rtg-cps-prose-line-sm);
		margin-bottom: var(--rtg-cps-prose-mb-sm);
	}

	/* Mobile prose lane: collapse prose constraint so text uses full column */
	.rtg-calculator-page .e-con-boxed .elementor-widget-heading .elementor-widget-container,
	.rtg-calculator-page .e-con-boxed .elementor-widget-text-editor .elementor-widget-container {
		max-width: 100%;
	}

	/* Hero */
	.rtg-calculator-page .rtg-calc-hero {
		padding-top: var(--rtg-cps-hero-spacer-top-sm);
		min-height: 0;
	}

	.rtg-calculator-page .rtg-calc-hero.rtg-calc-hero--editorial {
		padding-top: 0;
	}

	.rtg-calculator-page .rtg-calc-hero h1.elementor-heading-title {
		white-space: normal;
		font-size: var(--rtg-cps-hero-h1-size-sm);
		line-height: 1.35em;
		letter-spacing: -0.45px;
	}

	.rtg-calculator-page .rtg-calc-hero h2.elementor-heading-title {
		font-size: var(--rtg-cps-hero-h2-size-sm);
		line-height: 1.3;
	}

	.rtg-calculator-page .rtg-calc-hero > .elementor-container,
	.rtg-calculator-page .rtg-calc-hero > .e-con-inner {
		padding-left: max(0.6rem, env(safe-area-inset-left));
		padding-right: max(0.6rem, env(safe-area-inset-right));
	}

	/* Calculator band — slightly less aggressive vertical fold on mobile */
	.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-band {
		margin-bottom: calc(0.75rem + var(--rtg-cps-calc-spacer-sm) + 6px);
		padding: calc(var(--rtg-cps-calc-pad-y) * 0.92) calc(var(--rtg-cps-calc-pad-x) * 0.9);
	}

	/* Module padding tightens proportionally */
	.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-parent.rtg-calc-module,
	.rtg-calculator-page .elementor > .elementor-element.e-con-boxed.e-child.rtg-calc-module {
		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-calculator-page .elementor > section.elementor-top-section.elementor-section-boxed.rtg-calc-module > .elementor-container {
		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));
	}

	/* Post-calc utility spacer scales down */
	.rtg-calculator-page .rtg-calc-spacer--postcalc .elementor-spacer-inner {
		height: var(--rtg-cps-calc-spacer-sm);
	}
}