/*
Theme Name:   ri-rmp-ncmr
Theme URI:    https://jimkleiber.com
Description:  Child theme of Hello Elementor for the ri-rmp-ncmr brochure site. Matches the Figma / brand guide; custom CSS lives here.
Author:       Jim Kleiber
Template:     hello-elementor
Version:      0.1.0
Text Domain:  ri-rmp-ncmr
*/

/* ================================================================
   GLOBAL VARIABLES (single source of truth)
   ----------------------------------------------------------------
   COLORS are eyeballed from the mockups — CONFIRM the exact hex
   against the brand guide's color page before launch.
   ================================================================ */
:root {
	/* Brand colors */
	--rmp-green:       #6CC24A;   /* WattSmart green (exact, from Figma) — buttons */
	--rmp-green-dark:  #58B23C;   /* button hover */
	--rmp-blue:        #1F3D7A;   /* Rocky Mountain Power navy — CONFIRM */
	--rmp-red:         #E0301E;   /* RMP chevron red — CONFIRM */

	/* Neutrals */
	--rmp-heading:     #222222;
	--rmp-text:        #333333;
	--rmp-muted:       #777777;
	--rmp-divider:     #DDDDDD;
	--rmp-footer-bg:   #EFEFEF;

	/* Type families.
	   Per Figma, ALL headings are Lato EXCEPT the script accents ("Built for
	   dreamers", "Requirements", events "Feature One/Two"), which use the
	   licensed Ernest and Emily — applied only via .rmp-script. */
	--font-body:    "Lato", "Gill Sans Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-script:  "Ernest and Emily", "Caveat", cursive;
}

/* ================================================================
   FONTS
   ----------------------------------------------------------------
   Lato is loaded from Google Fonts via functions.php (free, OFL).

   "Ernest and Emily" is a COMMERCIAL font. You must license it and
   drop the web-font files into child-theme/ri-rmp-ncmr/fonts/.
   Until then, headings fall back to Lato automatically.
   Uncomment and adjust filenames once you have the files.
   ================================================================ */
@font-face {
	font-family: "Ernest and Emily";
	src: url("fonts/ernest-and-emily.woff2") format("woff2"),
	     url("fonts/ernest-and-emily.otf")   format("opentype");
	font-weight: 400 700;   /* single master; covers the script-heading weights */
	font-style: normal;
	font-display: swap;
}

/* ================================================================
   SCRIPT ACCENT HEADINGS
   ----------------------------------------------------------------
   TEMPORARY stand-in (Caveat) for the licensed brand script
   "Ernest and Emily". Once licensed, add it to the font stack here
   and to the @font-face above; it takes priority automatically.
   ================================================================ */
.rmp-script .elementor-heading-title {
	font-family: var(--font-script) !important;
	font-weight: 400;   /* Figma uses Ernest and Emily at w400 */
	letter-spacing: 0.5px;
	line-height: 1.1;
}

/* ================================================================
   BASE TYPOGRAPHY
   ================================================================ */
body {
	font-family: var(--font-body);
	color: var(--rmp-text);
	font-size: 18px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--font-heading);
	color: var(--rmp-heading);
	font-weight: 400;
	/* Brand guide: headlines & subheads are sentence case. */
	text-transform: none;
}

h1, .elementor-heading-title.elementor-size-xxl { font-size: 34px; }
h3 { font-size: 22px; }

/* ================================================================
   BUTTONS — green, squared, uppercase, letter-spaced
   ================================================================ */
.elementor-button,
.elementor-button-wrapper .elementor-button {
	background-color: var(--rmp-green);
	color: #FFFFFF;
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 12px 28px;
	transition: background-color 0.15s ease-in-out;
}

.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--rmp-green-dark);
	color: #FFFFFF;
}

/* Fixed-size content buttons to match Figma (LEARN MORE / MORE / MORE INFO = 143×36).
   !important to beat Elementor's per-element button CSS (text_padding/radius). */
.rmp-btn .elementor-button {
	width: 143px !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 10px !important;
	border-radius: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Landing stage cards: flexbox row so 3 equal tiles sit with an exact 21px gap
   (Figma 444×551, gap 21) — the classic equal-column model can't hit both. */
.rmp-cards-3 > .elementor-container {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 21px;
	max-width: 1440px !important;
	padding-left: 0 !important; padding-right: 0 !important;
}
.rmp-cards-3 .rmp-card { width: auto !important; flex: 1 1 0 !important; }
.rmp-cards-3 .rmp-card > .elementor-element-populated { margin: 0 !important; }
/* Stack the 3 cards below ~880px (cramped 3-across before that). */
@media (max-width: 880px) {
	.rmp-cards-3 > .elementor-container { flex-wrap: wrap; }
	.rmp-cards-3 .rmp-card { flex: 1 1 100% !important; }
	/* tile image area scales with width (proportional) rather than a tall fixed 391px */
	.rmp-cards-3 .rmp-card > .elementor-element-populated { padding-top: 55% !important; }
	/* hero reduces to a landscape proportion on mobile instead of a tall 500/372 block */
	.rmp-banner > .elementor-container { min-height: 0 !important; aspect-ratio: 16 / 9; }
	body.banner-372 .rmp-banner,
	body.banner-372 .rmp-banner > .elementor-container { min-height: 0 !important; aspect-ratio: 16 / 9 !important; }
}

/* Header "CONTACT US" — green button (brand green). */
.elementor-location-header .open-contact-popup .elementor-button,
.rmp-contact-link .elementor-button {
	background-color: var(--rmp-green) !important;
	color: #FFFFFF !important;
	border-radius: 2px !important;
	padding: 10px 26px !important;
}
.elementor-location-header .open-contact-popup .elementor-button:hover,
.rmp-contact-link .elementor-button:hover {
	background-color: var(--rmp-green-dark) !important;
	color: #FFFFFF !important;
}

/* ================================================================
   MISC
   ================================================================ */
a { color: var(--rmp-green-dark); }
hr, .elementor-divider-separator { border-color: var(--rmp-divider); }

/* Header/footer logo heights to Figma (51 / 60px) so the bands match height.
   NOTE: our parent-branding-logos.png is ~4.5:1 but Figma's lockup is ~9:1, so
   constraining height makes it narrower than Figma's 468/546 width — needs the
   correct wide logo asset to match width too. */
/* Logo lockup at the Figma widths (header 468, footer 546), natural height, tight
   padding. (The supplied lockup is ~4.5:1 with whitespace + a gap between the two
   marks; trimmed it's tighter, but a true ~9:1 crop is needed to hit 51/60 height.) */
.elementor-location-header img { width: 468px !important; height: auto !important; max-width: 100% !important; }
.elementor-location-footer img { width: 546px !important; height: auto !important; max-width: 100% !important; }

/* Header: align to the SAME 1380/30px content box as the page + footer (it was
   sitting ~10px wider/outside), tight vertical padding, two 50/50 columns. */
.elementor-location-header .elementor-top-section {
	width: calc(100% - 60px) !important;
	max-width: 1380px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important; padding-right: 0 !important;
	padding-top: 8px !important; padding-bottom: 8px !important;
}
@media (min-width: 711px) {
	.elementor-location-header .elementor-top-section > .elementor-container { flex-direction: row !important; flex-wrap: nowrap !important; }
	.elementor-location-header .elementor-top-section > .elementor-container > .elementor-column { width: 50% !important; }
}
/* Mobile (<=710): stack — logo centered on top, Contact Us button centered below. */
@media (max-width: 710px) {
	.elementor-location-header .elementor-top-section > .elementor-container { flex-direction: column !important; }
	.elementor-location-header .elementor-top-section > .elementor-container > .elementor-column { width: 100% !important; }
	.elementor-location-header .elementor-widget-image { text-align: center !important; }
	.elementor-location-header .elementor-widget-image img { margin-left: auto !important; margin-right: auto !important; }
	.elementor-location-header .elementor-widget-button .elementor-button-wrapper { text-align: center !important; }
	.elementor-location-header .open-contact-popup { justify-content: center !important; }
}

/* Footer: same 1380/30px content box as the page, plus bottom breathing room. */
.elementor-location-footer > .elementor-top-section {
	width: calc(100% - 60px) !important;
	max-width: 1380px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.elementor-location-footer { padding-bottom: 40px; }
@media (max-width: 880px) {
	.elementor-location-footer > .elementor-top-section { width: calc(100% - 32px) !important; }
}

.rmp-h-upcoming-events-and-announcements {
	margin-bottom: 41px !important;
}

/* ================================================================
   FIGMA CONTENT BOX — 1380px wide with 30px side gutters, centred once the
   window exceeds 1440. Applied uniformly to the hero AND every page section so
   the whole layout lines up (Figma: 1440 frame − 30px each side = 1380).
   ================================================================ */
/* 1) Full-bleed the Single template's post-content wrapper so the page sections
      inside size to the content box against the viewport (not an inset parent). */
.rmp-content,
.rmp-content > .elementor-container,
.rmp-content > .elementor-container > .elementor-column,
.rmp-content > .elementor-container > .elementor-column > .elementor-element-populated {
	max-width: none !important; padding-left: 0 !important; padding-right: 0 !important;
}
.rmp-content .elementor-widget-theme-post-content > .elementor-widget-container { padding: 0 !important; }
.rmp-content .elementor-widget-theme-post-content .elementor { max-width: none !important; width: 100% !important; }

/* 2) The box: hero + every top-level page section. */
.rmp-banner,
.rmp-content .elementor-widget-theme-post-content .elementor > .elementor-top-section {
	width: calc(100% - 60px) !important;
	max-width: 1380px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.rmp-banner {
	background-repeat: no-repeat !important;   /* cover + centered, never tiled */
	background-size: cover !important;
	background-position: center center !important;
}

/* 3) Content sections sit flush at the 30px gutter (drop their extra inner
      section + column padding) so headings/text line up with the hero edge.
      EXCEPTIONS that keep their own padding: colored bands (.rmp-inset) and the
      padded cards (.rmp-card tiles, .rmp-req-card requirement cards). */
.rmp-content .elementor-widget-theme-post-content .elementor > .elementor-top-section:not(.rmp-inset) {
	padding-left: 0 !important; padding-right: 0 !important;
}
.rmp-content .elementor-widget-theme-post-content .elementor > .elementor-top-section:not(.rmp-inset) > .elementor-container > .elementor-column:not(.rmp-card):not(.rmp-req-card):not(.elementor-col-80) > .elementor-element-populated {
	padding-left: 0 !important; padding-right: 0 !important;
}

/* Mobile: narrower gutters + tighter band padding so copy isn't cramped. */
@media (max-width: 880px) {
	.rmp-banner,
	.rmp-content .elementor-widget-theme-post-content .elementor > .elementor-top-section {
		width: calc(100% - 32px) !important;
	}
	.rmp-inset { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ================================================================
   INLINE CONTACT FORM — reveals in the hero's spot on Contact Us click,
   pushes the page (no overlay/modal). Hidden by default.
   ================================================================ */
.rmp-contact-section { display: none; position: relative; }
/* No animation — the form simply replaces the hero image in the exact same spot. */
body.contact-open .rmp-contact-section { display: block; }
body.contact-open .rmp-banner { display: none; }   /* form takes the hero's place */

/* No dismissable close button — re-clicking CONTACT US (or pressing Esc) hides it. */
.rmp-contact-close { display: none !important; }

/* Desktop: the form occupies the hero's EXACT box — same width, 500px tall — and
   lays out in two columns (fields left, message + submit right, like the Figma)
   so all fields fit inside the 500px without overflowing. */
/* Desktop: reproduce the Figma CONTACT frame — a centered 948px block, two
   columns (429 fields | 479 message), City/State split, 51px fields with
   CENTERED placeholder text (no top labels), 294×45 green Submit, footnote.
   All inside the hero's 500px box. (Stacks below the mobile breakpoint.) */
@media (min-width: 881px) {
	body.contact-open .rmp-contact-section { min-height: 500px; padding-top: 14px !important; padding-bottom: 14px !important; }
	.rmp-contact-section > .elementor-container > .elementor-column > .elementor-element-populated { padding-top: 0 !important; padding-bottom: 0 !important; }
	/* inset to the Figma form block width (948), centered in the hero box */
	.rmp-contact-section > .elementor-container { max-width: 948px !important; margin-left: auto !important; margin-right: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; }

	.rmp-contact-section .elementor-widget-html { display: none; }   /* removed close button */

	/* Heading "Contact Us" — Lato 35 / w500 / #363333 (!important to beat Elementor's per-element CSS) */
	.rmp-contact-section .elementor-widget-heading .elementor-heading-title {
		font-family: var(--font-body) !important; font-size: 35px !important; font-weight: 500 !important; color: #363333 !important; line-height: 1.2 !important;
	}
	.rmp-contact-section .elementor-widget-heading { margin-bottom: 14px !important; }   /* Figma heading -> subtitle */
	/* Subtitle — Lato 20 / #666666 */
	.rmp-contact-section .elementor-widget-text-editor { margin-bottom: 28px !important; }   /* Figma subtitle -> form */
	.rmp-contact-section .elementor-widget-text-editor,
	.rmp-contact-section .elementor-widget-text-editor p {
		margin-bottom: 0; font-size: 20px !important; line-height: 1.2 !important; color: #666666 !important;
	}

	/* Two-column grid with exact Figma tracks/gaps: 295 [12] 122 [39] 479 */
	.rmp-contact-section .elementor-form-fields-wrapper {
		display: grid !important;
		grid-template-columns: 295px 12px 122px 39px 479px;
		column-gap: 0;
		row-gap: 19px;            /* 51px field + 19 = Figma's 70px row pitch */
		align-content: start;
	}
	/* fields fill their grid track (override Elementor's col-50/100 widths) */
	.rmp-contact-section .elementor-form-fields-wrapper > .elementor-field-group {
		margin-bottom: 0; width: 100% !important; max-width: 100% !important;
	}
	/* hide stacked labels — Figma uses centered placeholder text inside each box */
	.rmp-contact-section .elementor-field-label { display: none; }
	.rmp-contact-section .elementor-field-textual {
		height: 51px; min-height: 51px; padding: 8px 14px;
		border: 1px solid #D9D9D9; background: #FFFFFF; color: #333333; font-size: 14px;
	}
	.rmp-contact-section input.elementor-field-textual::placeholder { text-align: center; color: #787878; opacity: 1; }
	.rmp-contact-section textarea.elementor-field-textual::placeholder { text-align: left; color: #787878; opacity: 1; }
	/* State dropdown — centered text (leaving room for Elementor's caret), #787878 */
	.rmp-contact-section select.elementor-field-textual {
		text-align: center; text-align-last: center; color: #787878;
		padding-right: 26px; cursor: pointer;
	}
	.rmp-contact-section .elementor-select-wrapper .select-caret-down-wrapper { color: #787878; }

	/* placement (children in order: 1 First 2 Last 3 Phone 4 Email 5 City 6 State 7 Msg 8 Optin 9 Submit) */
	.rmp-contact-section .elementor-field-group:nth-child(1),
	.rmp-contact-section .elementor-field-group:nth-child(2),
	.rmp-contact-section .elementor-field-group:nth-child(3),
	.rmp-contact-section .elementor-field-group:nth-child(4) { grid-column: 1 / 4; }      /* full 429 */
	.rmp-contact-section .elementor-field-group:nth-child(5) { grid-column: 1 / 2; grid-row: 5; }  /* City 295  */
	.rmp-contact-section .elementor-field-group:nth-child(6) { grid-column: 3 / 4; grid-row: 5; }  /* State 122 */
	.rmp-contact-section .elementor-field-group:nth-child(7) { grid-column: 5 / 6; grid-row: 1 / 4; } /* message 479 */
	.rmp-contact-section .elementor-field-group:nth-child(8) { grid-column: 5 / 6; grid-row: 4; align-self: center; } /* opt-in */
	.rmp-contact-section .elementor-field-group:nth-child(9) { grid-column: 5 / 6; grid-row: 5; align-self: end; }    /* submit */
	.rmp-contact-section .elementor-field-group:nth-child(7) textarea { height: 100%; min-height: 0; resize: none; }
	.rmp-contact-section .elementor-field-type-acceptance { font-size: 14px; color: #787878; }

	/* Submit — Figma 294×45, radius 4, green, centered label (Lato 14 / w700) */
	.rmp-contact-section .elementor-field-type-submit .elementor-button {
		width: 294px !important; height: 45px !important; min-height: 45px !important;
		border-radius: 4px !important; padding: 0 !important;
		font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
		justify-content: center;
	}

	/* footnote under the left column (Figma: "*Indicates …" Lato 14 #787878) */
	.rmp-contact-section .elementor-form-fields-wrapper::after {
		content: "* indicates a required field";
		grid-column: 1 / 4; grid-row: 6;
		font-size: 14px; color: #787878; margin-top: 2px;
	}
}

/* (legacy) Contact popup — no longer triggered; kept as fallback. */
#elementor-popup-modal-69 { align-items: flex-start !important; }
#elementor-popup-modal-69 .dialog-overlay { background-color: rgba(255,255,255,0) !important; }
#elementor-popup-modal-69 .dialog-widget-content {
	width: 1380px !important;
	max-width: 1380px !important;
	margin: 104px auto 0 !important;   /* clear the header */
	box-shadow: none !important;
}
/* Keep the form itself ~content of the panel (not stretched across full width). */
#elementor-popup-modal-69 .dialog-message > .elementor { max-width: 1000px; }

/* Pages flagged no-banner hide the global Single banner. */
body.no-banner .rmp-banner { display: none !important; }
/* Secondary pages use a shorter banner (Figma: 372px vs 500px default).
   Elementor sets the height on the section's inner container, so override both. */
body.banner-372 .rmp-banner,
body.banner-372 .rmp-banner > .elementor-container { min-height: 372px !important; }

/* ================================================================
   INCENTIVE RATE TABLES (HTML widget on the rate pages)
   ================================================================ */
.rmp-rate-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 14px;
	margin: 0;
	background: #FFFFFF;
	box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.rmp-rate-table th,
.rmp-rate-table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #ECECEC;
}
.rmp-rate-table thead th {
	background-color: var(--rmp-green);
	color: #FFFFFF;
	font-weight: 700;
	vertical-align: bottom;
	border-bottom: none;
	line-height: 1.2;
}
.rmp-rate-table .rt-sub {
	display: block;
	font-weight: 400;
	font-size: 11px;
	opacity: 0.9;
	margin-top: 3px;
}
.rmp-rate-table tbody tr:last-child td { border-bottom: 2px solid #D9D9D9; }
.rmp-rate-table td:first-child { font-weight: 600; color: var(--rmp-heading); }
.rmp-rate-table td:nth-child(2) { color: var(--rmp-muted); }

/* Let wide rate tables scroll horizontally instead of overflowing on mobile. */
.rmp-table-wrap { width: 100%; max-width: 1162px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rmp-table-wrap .rmp-rate-table { min-width: 640px; }

/* ================================================================
   LANDING IMAGE-TILE CARDS — dark bottom gradient for text legibility
   ================================================================ */
.elementor-column.rmp-card { position: relative; }
.elementor-column.rmp-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.88) 100%);
	pointer-events: none;
	z-index: 0;
}
.elementor-column.rmp-card > .elementor-widget-wrap,
.elementor-column.rmp-card > .elementor-element-populated { position: relative; z-index: 1; }
.elementor-column.rmp-card .elementor-heading-title { text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* ================================================================
   REQUIREMENT CARDS (rate pages) — white cards with shadow + numbered lists
   ================================================================ */
.elementor-column.rmp-req-card { margin-bottom: 28px; }
.elementor-column.rmp-req-card > .elementor-element-populated,
.elementor-column.rmp-req-card > .elementor-widget-wrap {
	background-color: #FFFFFF;
	box-shadow: 0 8px 26px rgba(0,0,0,0.18);
	border-radius: 4px;
	padding: 28px 32px;
	height: 100%;
	min-height: 380px;   /* equalize all cards so both rows match in height (tallest content ~377) */
	margin: 0 14px;      /* 28px gap between the two cards in a row (bg sits here) */
}
/* keep the pair flush with the content edges */
.rmp-req-card:first-child > .elementor-element-populated { margin-left: 0; }
.rmp-req-card:last-child > .elementor-element-populated { margin-right: 0; }

/* Requirement-card rows are narrower than full content width so each card is
   ~605px (Figma), not stretched across the whole 1380. Tune the max-width here. */
.rmp-content .elementor-widget-theme-post-content .elementor > .elementor-top-section:has(.rmp-req-card) {
	max-width: 1240px !important;
}

/* First row of requirement cards overlaps up into the green banner. */
.rmp-req-pull { margin-top: -64px !important; position: relative; z-index: 2; }
.rmp-req-card ol { margin: 10px 0 0; padding-left: 18px; }
.rmp-req-card ol li { margin-bottom: 9px; }

/* Heading + body sizes bumped for readability (client request). Figma spec is
   DIN 22 for the heading; DIN isn't licensed so these use Lato (heading 24/bold,
   body up from 14 -> 16). */
.rmp-req-card .elementor-heading-title { font-size: 24px !important; line-height: 1.25 !important; }
.rmp-req-card ol,
.rmp-req-card ol li,
.rmp-req-card p { font-size: 16px !important; line-height: 1.5 !important; }

/* ================================================================
   STAGE CARDS (secondary pages) — image-left / text-right rows.
   Force a uniform image box (Figma 250×176, ratio ~1.42) with cover, so the
   two cards' photos are the SAME size regardless of each photo's native aspect.
   ================================================================ */
.rmp-stage-img img,
.elementor-col-20 .elementor-widget-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 250 / 176;
	object-fit: cover;
	display: block;
}

/* ================================================================
   CLIENT FINE-TUNE PASS — Figma-aligned type / line-height / spacing.
   Values from the Figma spec. Items flagged "NOTE" are judgment calls.
   ================================================================ */

/* MISC — horizontal rules: 1px solid black */
hr,
.elementor-divider-separator,
.elementor-widget-divider .elementor-divider-separator {
	border-top: 1px solid #000000 !important;
	border-bottom: 0 !important;
}

/* ---------- FOOTER ---------- */
/* Copyright: Lato 14 / #787878 (was 11) */
.rmp-txt-2025-rocky-mountain-power,
.rmp-txt-2025-rocky-mountain-power p {
	font-size: 14px !important; line-height: 1.4 !important; color: var(--rmp-muted) !important;
}
/* vertically centre copyright with the logo */
.elementor-location-footer .elementor-column > .elementor-element-populated {
	display: flex; flex-direction: column; justify-content: center;
}
/* HR above the footer — a real 1px black rule at content width (not a border on
   the gray band), with space before the copyright/logo band. */
.elementor-location-footer { position: relative; }
.elementor-location-footer::before {
	content: ""; display: block; height: 1px; background-color: #000000;
	width: calc(100% - 60px); max-width: 1380px; margin: 0 auto;
}
.elementor-location-footer > .elementor-top-section {
	border-top: 0 !important; margin-top: 32px !important; padding-top: 24px !important;
}

/* ---------- MAIN: "Built for dreamers" green band ---------- */
.rmp-h-built-for-dreamers .elementor-heading-title { font-size: 66px !important; line-height: 1.24 !important; }   /* E&E 66/81.6 */
.rmp-txt-the-wattsmart-new-construction,
.rmp-txt-the-wattsmart-new-construction p { font-size: 25px !important; line-height: 1.68 !important; }            /* Lato 25/42 */
.rmp-txt-the-wattsmart-new-construction p { margin: 0 0 24px !important; }                                         /* paragraph spacing */
.rmp-txt-the-wattsmart-new-construction p:last-child { margin-bottom: 0 !important; }
.rmp-inset:has(.rmp-h-built-for-dreamers) { padding-top: 50px !important; padding-bottom: 80px !important; }        /* band 1378x491 */

/* ---------- MAIN: image tiles ---------- */
.rmp-card .elementor-heading-title { line-height: 1.2 !important; }   /* Lato 32/38.4 */

/* ---------- SECONDARY "My project is…" pages ---------- */
/* H1 (col-100, 42px): line-height + margin below it (Figma H1 y506 -> body y583) */
.elementor-col-100 .rmp-h-my-project-is-being,
.elementor-col-100 .rmp-h-my-project-is-under,
.elementor-col-100 .rmp-h-my-project-is-already { margin-bottom: 28px !important; }
.elementor-col-100 .rmp-h-my-project-is-being .elementor-heading-title,
.elementor-col-100 .rmp-h-my-project-is-under .elementor-heading-title,
.elementor-col-100 .rmp-h-my-project-is-already .elementor-heading-title { line-height: 1.2 !important; }
/* intro body (col-100): Lato 28/45 */
.elementor-col-100 .rmp-txt-if-your-project-is,
.elementor-col-100 .rmp-txt-if-you-have-a,
.elementor-col-100 .rmp-txt-thank-you-for-already,
.elementor-col-100 .rmp-txt-if-your-project-is p,
.elementor-col-100 .rmp-txt-if-you-have-a p,
.elementor-col-100 .rmp-txt-thank-you-for-already p { font-size: 28px !important; line-height: 1.6 !important; }
/* stage card text block (col-80): Inter ~18 + a 36px gap from the image (Figma) */
.rmp-content .elementor-col-80 > .elementor-element-populated { padding-left: 36px !important; }
.elementor-col-80 .elementor-widget-text-editor,
.elementor-col-80 .elementor-widget-text-editor p { font-size: 18px !important; line-height: 1.55 !important; }
.elementor-col-80 .elementor-widget-heading .elementor-heading-title { line-height: 1.2 !important; }

/* ---------- INCENTIVE (rate) pages ---------- */
.rmp-h-early-engagement-path-incentive .elementor-heading-title,
.rmp-h-construction-path-incentive-rates .elementor-heading-title { line-height: 1.2 !important; }   /* Lato 60/72 */
.rmp-h-early-engagement-path-incentive,
.rmp-h-construction-path-incentive-rates { margin-bottom: 8px !important; }
/* subtitle: Lato 30/45 */
.rmp-txt-the-early-engagement-path,
.rmp-txt-the-construction-path-offers,
.rmp-txt-the-early-engagement-path p,
.rmp-txt-the-construction-path-offers p { font-size: 30px !important; line-height: 1.5 !important; }
/* "Requirements" green banner: taller box (Figma 1378x445) + more space under heading */
.rmp-inset:has(.rmp-h-requirements) { min-height: 445px !important; padding-bottom: 110px !important; }
/* req card type: heading 22 (Figma DIN 22), body 16 */
.rmp-req-card .elementor-heading-title { font-size: 22px !important; line-height: 1.25 !important; }
.rmp-req-card ol, .rmp-req-card ol li, .rmp-req-card p { font-size: 16px !important; line-height: 1.55 !important; }
/* table: NOTE Figma text is Lato ~21.7 — that is large for a data table and would
   force horizontal scroll; using 16px + taller cells as a usable compromise. */
.rmp-rate-table th, .rmp-rate-table td { font-size: 16px !important; padding: 18px 16px !important; }

/* ---------- EVENTS ---------- */
/* gap between Feature One / Two images (Figma 51px) */
.rmp-content .elementor-top-section:has(.rmp-h-feature-one) > .elementor-container { gap: 51px !important; }

/* Header: zero the column inner padding so the logo sits at the 30px gutter
   (was landing at ~40px, 10px off the hero/content edge). */
.elementor-location-header .elementor-top-section > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-left: 0 !important; padding-right: 0 !important;
}

/* Stage-card text block: cap to Figma width (848px) — was spanning the full 80%
   column and reading too wide. Left-aligned, with the 36px gap from the image. */
.rmp-content .elementor-col-80 > .elementor-element-populated { max-width: 884px; }

/* Events: hr between each news/announcement entry (Figma separators). */
.rmp-content .elementor-top-section:has(.rmp-btn-more) {
	border-top: 1px solid #000000;
	padding-top: 24px !important;
}

/* Events: news/announcement body copy -> 18px (Figma Inter 18; was 14). */
.rmp-txt-adipiscing-curabitur-pharetra-mollis,
.rmp-txt-adipiscing-curabitur-pharetra-mollis p { font-size: 18px !important; line-height: 1.55 !important; }

/* Stage-card headings (secondary pages, col-80) -> 30px per client. */
.elementor-col-80 .elementor-widget-heading .elementor-heading-title { font-size: 30px !important; }

/* Rate table: Figma values literally — text Lato 21.7/28.2, cells ~232x94/97. */
.rmp-rate-table th, .rmp-rate-table td { font-size: 21.7px !important; line-height: 1.3 !important; padding: 22px 16px !important; }
.rmp-rate-table thead th { font-size: 21.7px !important; }
.rmp-rate-table .rt-sub { font-size: 16px !important; }

/* "Built for dreamers" paragraph: cap to Figma width (1077px) centered — was
   spanning the full band and reading too wide. */
.rmp-txt-the-wattsmart-new-construction { max-width: 1077px !important; margin-left: auto !important; margin-right: auto !important; }

/* Events: news/announcement headings -> 18px (Figma Inter 18), bold for headline;
   tighten heading->body, give body->MORE button room; more space under section title. */
.rmp-h-news-or-announcement-three .elementor-heading-title,
.rmp-h-news-or-announcement-four .elementor-heading-title,
.rmp-h-past-news-or-announcement .elementor-heading-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.rmp-h-news-or-announcement-three,
.rmp-h-news-or-announcement-four,
.rmp-h-past-news-or-announcement { margin-bottom: 6px !important; }
.rmp-txt-adipiscing-curabitur-pharetra-mollis { margin-bottom: 16px !important; }
.rmp-h-featured-news-and-announcements { margin-bottom: 24px !important; }

/* Events news headings: Figma Inter 18 normal weight (was set bold — flagged wrong). */
.rmp-h-news-or-announcement-three .elementor-heading-title,
.rmp-h-news-or-announcement-four .elementor-heading-title,
.rmp-h-past-news-or-announcement .elementor-heading-title { font-size: 18px !important; font-weight: 400 !important; line-height: 1.21 !important; }

/* Contact footnote -> Figma wording ("* Indicates optional fields"; Figma's full
   string was "…copy here", a placeholder note). NOTE: this contradicts the * on
   Phone/Project which mark REQUIRED fields — confirm final copy. */
.rmp-contact-section .elementor-form-fields-wrapper::after { content: "* Indicates optional fields" !important; }

/* Main hero: anchor image to the TOP so the subject's head isn't cropped. */
.home .rmp-banner { background-position: center top !important; }

/* Events news/announcement entries (client-specified sizes): heading 30px / lh 100%,
   body 20px / lh 30px. */
.rmp-h-news-or-announcement-three .elementor-heading-title,
.rmp-h-news-or-announcement-four .elementor-heading-title,
.rmp-h-past-news-or-announcement .elementor-heading-title { font-size: 30px !important; line-height: 1 !important; font-weight: 400 !important; }
.rmp-txt-adipiscing-curabitur-pharetra-mollis,
.rmp-txt-adipiscing-curabitur-pharetra-mollis p { font-size: 20px !important; line-height: 30px !important; }

/* Requirement cards (client-specified): heading 32px/700, body 22px/700. */
.rmp-req-card .elementor-heading-title { font-size: 32px !important; font-weight: 700 !important; line-height: 1.2 !important; }
.rmp-req-card ol, .rmp-req-card ol li, .rmp-req-card p { font-size: 22px !important; font-weight: 700 !important; line-height: 1.4 !important; }

/* Rate table (client-specified): header 25.3px/700, body cells 21.69px/400, lh 130%. */
.rmp-rate-table thead th { font-size: 25.3px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.rmp-rate-table tbody td { font-size: 21.69px !important; font-weight: 400 !important; line-height: 1.3 !important; }
.rmp-rate-table .rt-sub { font-size: 18px !important; font-weight: 400 !important; }

/* Correction: requirement-card body text is 400 weight (heading stays 700). */
.rmp-req-card ol, .rmp-req-card ol li, .rmp-req-card p { font-weight: 400 !important; }

/* ---- More client tweaks ---- */
/* Requirement cards pull up into the green "Requirements" box (Figma overlap). */
.rmp-req-pull { margin-top: -270px !important; }

/* Rate table: normal cell text color -> #000000. */
.rmp-rate-table tbody td { color: #000000 !important; }

/* Contact form: input borders #000000, placeholder text #787878. */
.rmp-contact-section .elementor-field-textual { border-color: #000000 !important; }
.rmp-contact-section input.elementor-field-textual::placeholder,
.rmp-contact-section textarea.elementor-field-textual::placeholder { color: #787878 !important; opacity: 1 !important; }
.rmp-contact-section select.elementor-field-textual { color: #787878 !important; }
/* "Sign-up for our Email List" opt-in -> circular (radio-style) check. */
.rmp-contact-section input[type="checkbox"] {
	-webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; min-width: 16px; border: 1px solid #000000; border-radius: 50%;
	vertical-align: -2px; cursor: pointer; position: relative; flex: 0 0 auto;
}
.rmp-contact-section input[type="checkbox"]:checked { background-color: var(--rmp-green); border-color: var(--rmp-green); }

/* Rate table: all 5 columns equal width (~232.4px in the 1162 table). */
.rmp-rate-table { table-layout: fixed; }
.rmp-rate-table th, .rmp-rate-table td { width: 20%; }

/* Rate-page main headings: 20px margin below (both pages). */
.rmp-h-early-engagement-path-incentive,
.rmp-h-construction-path-incentive-rates { margin-bottom: 20px !important; }

/* Fix: the circular opt-in was rendering as a sliver because the checkbox was
   display:inline (ignores width/height). Make it inline-block. */
.rmp-contact-section input[type="checkbox"] { display: inline-block !important; margin-right: 8px; }

/* Contact Submit button -> all caps. */
.rmp-contact-section .elementor-field-type-submit .elementor-button { text-transform: uppercase !important; }

/* Opt-in circle: fill solid green when checked (needs !important to beat Elementor). */
.rmp-contact-section input[type="checkbox"]:checked {
	background-color: var(--rmp-green) !important;
	border-color: var(--rmp-green) !important;
	box-shadow: inset 0 0 0 3px #FFFFFF;   /* small white ring -> reads like a filled radio */
}

/* Contact text fields: no bottom margin (grid row-gap handles spacing). */
.rmp-contact-section .elementor-field-type-text { margin-bottom: 0 !important; }

/* Contact textarea: placeholder/text starts 30px from top + left. */
.rmp-contact-section textarea.elementor-field-textual { padding-top: 30px !important; padding-left: 30px !important; }

/* Contact form: uniform field row heights so vertical gaps are even (was 19/19/29/29);
   State dropdown text to 14px like the other fields. */
@media (min-width: 881px) {
	.rmp-contact-section .elementor-form-fields-wrapper { grid-auto-rows: 51px !important; }
}
.rmp-contact-section select.elementor-field-textual { font-size: 14px !important; }

/* Contact form: zero margin on ALL field groups (not just text) so the grid
   row-gap is the only spacing -> even 19px gaps (was 19/19/29/29). */
.rmp-contact-section .elementor-field-group { margin-bottom: 0 !important; }

/* Main hero: nudge down so the subject's head is slightly cropped (Figma look). */
.home .rmp-banner { background-position: center 22% !important; }

/* Events news entries: more space between heading and body (Figma). */
.rmp-h-news-or-announcement-three,
.rmp-h-news-or-announcement-four,
.rmp-h-past-news-or-announcement { margin-bottom: 16px !important; }

/* Mobile header: center the Contact Us button (its widget has .elementor-align-right;
   the inline-block button is positioned by the widget's text-align). */
@media (max-width: 710px) {
	.elementor-location-header .elementor-widget-button,
	.elementor-location-header .open-contact-popup { text-align: center !important; }
}

/* No-banner pages (events, rate pages): first content section sits ~40px below
   the header (was ~80px) — drop the first section's extra top padding. */
body.no-banner .rmp-content .elementor-widget-theme-post-content .elementor > .elementor-top-section:first-child {
	padding-top: 0 !important;
}