/* =============================================================================
   ZenSolar Global Stylesheet
   GeneratePress child theme -- 1:1 visual rebuild of the Elementor site.
   Source tokens: DESIGN-TOKENS.md (extracted 2026-06-23)
   ============================================================================= */

/* -----------------------------------------------------------------------
   1. CSS Custom Properties (design tokens)
   --------------------------------------------------------------------- */

:root {
	/* Brand colours */
	--zs-green-primary: #1DC209;
	--zs-green-bright:  #1DF016;
	--zs-dark:          #282828;
	--zs-black:         #000000;
	--zs-near-black:    #030303;
	--zs-white:         #FFFFFF;
	--zs-white-faint:   rgba(255, 255, 255, 0.79);
	--zs-white-divider: rgba(255, 255, 255, 0.21);
	--zs-shadow:        rgba(0, 0, 0, 0.15);

	/* Typography */
	--zs-font:          'Montserrat', sans-serif;

	/* Spacing */
	--zs-section-pad-v: 80px;
	--zs-container:     1200px;
}

/* -----------------------------------------------------------------------
   2. Base / Reset overrides
   --------------------------------------------------------------------- */

body {
	font-family: var(--zs-font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--zs-dark);
	background-color: var(--zs-white);
}

/* Hide the native GP page title on all pages -- H1 lives inside content blocks */
.page-header,
.entry-header,
.page .entry-header,
.generate-page-header {
	display: none;
}

/* -----------------------------------------------------------------------
   3. Typography
   --------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--zs-font);
	color: var(--zs-dark);
	line-height: 1.25;
}

h1 { font-size: 42px;  font-weight: 700; }
h2 { font-size: 32px;  font-weight: 600; }
h3 { font-size: 24px;  font-weight: 600; }
h4 { font-size: 20px;  font-weight: 500; }
h5 { font-size: 18px;  font-weight: 500; }
h6 { font-size: 16px;  font-weight: 500; }

/* Headings inside dark sections use white */
.zs-dark-section h1,
.zs-dark-section h2,
.zs-dark-section h3,
.zs-dark-section h4,
.zs-dark-section h5,
.zs-dark-section h6 {
	color: var(--zs-white);
}

/* Green accent headings (used in footer col heads and hero sub-labels) */
.zs-heading-green {
	color: var(--zs-green-bright);
}

p {
	margin-bottom: 1.5em;
}

a {
	color: var(--zs-green-primary);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--zs-green-bright);
	text-decoration: underline;
}

/* -----------------------------------------------------------------------
   4. Header
   --------------------------------------------------------------------- */

/* GeneratePress site header container */
#site-header {
	background-color: var(--zs-white);
	box-shadow: 0px 0px 24px 0px var(--zs-shadow);
	position: sticky;
	top: 0;
	z-index: 999;
}

/* GP header inner -- match Elementor 21px all-sides padding */
.site-header-inner,
#site-header .inside-header {
	padding: 21px;
	max-width: var(--zs-container);
	margin: 0 auto;
}

/* Logo */
.site-logo img,
.custom-logo {
	height: 86px;
	width: auto;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* -----------------------------------------------------------------------
   5. Navigation
   --------------------------------------------------------------------- */

/* Top-level nav items */
.main-navigation a,
.main-navigation .nav-primary a,
nav.site-navigation a {
	font-family: var(--zs-font);
	font-size: 19px;
	font-weight: 500;
	color: var(--zs-dark);
	text-decoration: none;
	padding: 48px 11px;
	display: inline-block;
}

/* Active / hover */
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
nav.site-navigation a:hover {
	color: var(--zs-green-primary);
	text-decoration: none;
}

/* Dropdown */
.main-navigation .sub-menu,
.main-navigation ul ul {
	background-color: var(--zs-black);
	border: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.main-navigation .sub-menu a,
.main-navigation ul ul a {
	font-family: var(--zs-font);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--zs-white);
	padding: 12px 20px;
}

.main-navigation .sub-menu a:hover,
.main-navigation ul ul a:hover,
.main-navigation .sub-menu .current-menu-item > a {
	color: var(--zs-green-bright);
	background-color: var(--zs-near-black);
	text-decoration: none;
}

/* Mobile nav toggle */
.menu-toggle,
button.menu-toggle {
	color: var(--zs-dark);
	background: transparent;
	border: 2px solid var(--zs-dark);
	padding: 8px 14px;
	font-family: var(--zs-font);
}

/* -----------------------------------------------------------------------
   6. Buttons
   --------------------------------------------------------------------- */

.wp-block-button__link,
.button,
button,
input[type="submit"],
.gb-button,
a.btn,
.zs-btn {
	font-family: var(--zs-font);
	font-size: 16px;
	font-weight: 600;
	background-color: var(--zs-green-primary);
	color: var(--zs-white) !important;
	border-radius: 4px;
	padding: 14px 28px;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.gb-button:hover,
a.btn:hover,
.zs-btn:hover {
	background-color: var(--zs-green-bright);
	color: var(--zs-white) !important;
	text-decoration: none;
}

/* Outline / secondary button variant */
.wp-block-button.is-style-outline .wp-block-button__link,
.zs-btn-outline {
	background-color: transparent;
	color: var(--zs-green-primary) !important;
	border: 2px solid var(--zs-green-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.zs-btn-outline:hover {
	background-color: var(--zs-green-primary);
	color: var(--zs-white) !important;
}

/* -----------------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------------- */

#site-footer,
.site-footer {
	background-color: var(--zs-black);
	color: var(--zs-white-faint);
	padding-top: 65px;
	padding-bottom: 40px;
	font-size: 14px;
	line-height: 1.7em;
}

.site-footer .inside-footer,
.site-footer .footer-inner {
	max-width: var(--zs-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* Footer 3-column layout */
.site-footer .footer-columns {
	display: grid;
	grid-template-columns: 36% 32% 31%;
	gap: 0 20px;
}

/* Footer headings */
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-col-heading {
	font-size: 18px;
	font-weight: 500;
	color: var(--zs-green-bright);
	margin-bottom: 16px;
}

/* Footer body text */
.site-footer p,
.site-footer li,
.site-footer span {
	color: var(--zs-white-faint);
	font-size: 14px;
	line-height: 1.7em;
}

/* Footer links */
.site-footer a {
	color: var(--zs-white);
	text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus {
	color: var(--zs-green-bright);
	text-decoration: none;
}

/* Footer nav */
.site-footer .footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer .footer-nav li {
	margin-bottom: 6px;
}

/* Footer social icons */
.site-footer .social-icon,
.site-footer .wp-social-link {
	background-color: var(--zs-green-bright);
	color: var(--zs-black);
}

/* Footer horizontal divider */
.site-footer .footer-divider,
.site-footer hr {
	border: none;
	border-top: 1px solid var(--zs-white-divider);
	margin: 15px 0;
}

/* Footer bottom bar */
.site-footer .footer-bar,
.footer-credits {
	border-top: 1px solid var(--zs-white-divider);
	padding-top: 20px;
	margin-top: 40px;
	text-align: center;
	color: var(--zs-white-faint);
	font-size: 13px;
}

/* -----------------------------------------------------------------------
   8. GeneratePress layout helpers
   --------------------------------------------------------------------- */

/* Remove GP's default outer container padding that conflicts with our values */
.grid-container {
	max-width: var(--zs-container);
}

/* -----------------------------------------------------------------------
   9. Page content sections
   --------------------------------------------------------------------- */

.zs-section {
	padding: var(--zs-section-pad-v) 0;
}

.zs-dark-section {
	background-color: var(--zs-black);
	padding: var(--zs-section-pad-v) 0;
}

/* Inner container on sections */
.zs-container {
	max-width: var(--zs-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* -----------------------------------------------------------------------
   10. Blog -- single post (fixes the H1 bug)
   --------------------------------------------------------------------- */

/* On single posts the post title IS the H1 -- make sure it renders as one */
.zensolar-single-post .entry-title {
	display: block;
	font-size: 42px;
	font-weight: 700;
	color: var(--zs-dark);
	margin-bottom: 24px;
	line-height: 1.2;
}

/* Post content area */
.zensolar-single-post .entry-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--zs-dark);
}

.zensolar-single-post .entry-content h2 { font-size: 28px; font-weight: 600; margin-top: 2em; }
.zensolar-single-post .entry-content h3 { font-size: 22px; font-weight: 600; margin-top: 1.75em; }
.zensolar-single-post .entry-content h4 { font-size: 19px; font-weight: 500; margin-top: 1.5em; }

/* Post meta */
.zensolar-single-post .post-meta,
.zensolar-single-post .entry-meta {
	font-size: 14px;
	color: #666;
	margin-bottom: 32px;
}

/* -----------------------------------------------------------------------
   11. Blog archive / listing
   --------------------------------------------------------------------- */

.zensolar-blog-archive .post-title,
.zensolar-blog-archive h2.entry-title {
	font-size: 24px;
	font-weight: 600;
}

.zensolar-blog-archive .post-meta {
	font-size: 13px;
	color: #666;
}

.zensolar-blog-archive .entry-summary {
	font-size: 15px;
	line-height: 1.65;
}

/* -----------------------------------------------------------------------
   12. Forms (GoHighLevel embeds + WP contact forms)
   --------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
	font-family: var(--zs-font);
	font-size: 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 12px 16px;
	width: 100%;
	color: var(--zs-dark);
	background-color: var(--zs-white);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border-color: var(--zs-green-primary);
	outline: none;
	box-shadow: 0 0 0 2px rgba(29, 194, 9, 0.15);
}

/* -----------------------------------------------------------------------
   13. Responsive overrides
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.site-header-inner,
	#site-header .inside-header {
		padding: 20px;
	}

	.main-navigation a,
	nav.site-navigation a {
		font-size: 17px;
		padding: 20px 11px;
	}

	h1 { font-size: 34px; }
	h2 { font-size: 26px; }

	.site-footer .footer-columns {
		grid-template-columns: 1fr 1fr;
		gap: 40px 20px;
	}

	:root {
		--zs-section-pad-v: 60px;
	}
}

@media (max-width: 767px) {
	#site-header .inside-header {
		padding: 10px 20px;
	}

	.site-logo img,
	.custom-logo {
		height: 60px;
	}

	h1 { font-size: 28px; }
	h2 { font-size: 22px; }
	h3 { font-size: 20px; }

	.site-footer .footer-columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	:root {
		--zs-section-pad-v: 40px;
	}
}

/* -----------------------------------------------------------------------

/* -----------------------------------------------------------------------
   QC fix 2026-06-24: Finance page horizontal overflow
   Leonardo hero image widget ac97cf9: inner .elementor-widget-container
   expands to ~678px inside a ~537px column. Clip container + bound img.
   --------------------------------------------------------------------- */

.elementor-element-ac97cf9 {
	max-width: 100%;
	overflow: hidden;
}

.elementor-element-ac97cf9 .elementor-widget-container {
	max-width: 100% !important;
}

.elementor-element-ac97cf9 img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
}

/* -----------------------------------------------------------------------
   Fix 2026-06-25: Social icon SVGs rendering at full viewBox size.
   Bare <p><a><svg viewBox="0 0 512 512"> blocks have no size attribute.
   Constrain to 32px icon size.
   --------------------------------------------------------------------- */

.entry-content p > a > svg {
	width: 32px !important;
	height: 32px !important;
	display: inline-block;
	vertical-align: middle;
}

/* Fix 2026-06-25: Logo selector -- GP uses #masthead not #site-header.
   Rule already updated above (lines 119-120). Keeping this note here. */

/* Fix 2026-06-25: List-item bullet SVGs (checkmarks, arrows) also unsized */
.entry-content li > svg {
	width: 20px !important;
	height: 20px !important;
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Catch-all: any bare SVG direct child of entry-content block elements */
.entry-content li svg:not([width]),
.entry-content p svg:not([width]) {
	max-width: 32px !important;
	max-height: 32px !important;
}
/* =============================================================================
   ZenSolar Homepage Section Styles — GenerateBlocks rebuild 2026-06-26
   ============================================================================= */

/* -----------------------------------------------------------------------
   SHARED section wrapper
   --------------------------------------------------------------------- */
.zs-hero,
.zs-pain,
.zs-services,
.zs-process,
.zs-benefits-icons,
.zs-testimonials,
.zs-features,
.zs-banks,
.zs-eskom,
.zs-fit,
.zs-comparison,
.zs-faq,
.zs-final-cta {
	padding: var(--zs-section-pad-v) 20px;
}

/* Constrained inner width for all sections */
.zs-hero .wp-block-cover__inner-container,
.zs-pain > .wp-block-group__inner-container,
.zs-services > .wp-block-group__inner-container,
.zs-process > .wp-block-group__inner-container,
.zs-benefits-icons > .wp-block-group__inner-container,
.zs-testimonials > .wp-block-group__inner-container,
.zs-features > .wp-block-group__inner-container,
.zs-banks > .wp-block-group__inner-container,
.zs-eskom > .wp-block-group__inner-container,
.zs-fit > .wp-block-group__inner-container,
.zs-comparison > .wp-block-group__inner-container,
.zs-faq > .wp-block-group__inner-container,
.zs-final-cta .wp-block-cover__inner-container {
	max-width: var(--zs-container);
	margin-left: auto;
	margin-right: auto;
}

/* Section headings centred by default */
.zs-pain h2,
.zs-services h2,
.zs-process h2,
.zs-benefits-icons h2,
.zs-testimonials h2,
.zs-features h2,
.zs-banks h2,
.zs-comparison h2,
.zs-faq h2,
.zs-fit h2 {
	text-align: center;
	margin-bottom: 48px;
}

/* -----------------------------------------------------------------------
   HERO — cover block with dark overlay
   --------------------------------------------------------------------- */
.zs-hero {
	background-color: var(--zs-black);
}

.zs-hero h1,
.zs-hero p,
.zs-hero .wp-block-cover__inner-container {
	color: var(--zs-white);
}

.zs-hero__h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--zs-white);
	margin-bottom: 24px;
}

.zs-hero__sub {
	font-size: 18px;
	color: var(--zs-white-faint);
	margin-bottom: 32px;
}

.zs-hero__cols {
	align-items: center;
	gap: 48px;
}

.zs-hero__img img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* -----------------------------------------------------------------------
   PAIN SECTION — white bg, two columns
   --------------------------------------------------------------------- */
.zs-pain {
	background-color: var(--zs-white);
}

.zs-pain__cols {
	align-items: center;
	gap: 48px;
}

.zs-pain__list {
	border-left: 4px solid var(--zs-green-primary);
	padding-left: 20px;
	margin: 16px 0 24px;
}

.zs-pain__belief {
	font-weight: 700;
	font-size: 18px;
	color: var(--zs-green-primary);
}

.zs-pain__img img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* -----------------------------------------------------------------------
   SERVICES — dark background
   --------------------------------------------------------------------- */
.zs-services {
	background-color: var(--zs-dark);
	color: var(--zs-white);
}

.zs-services h2,
.zs-services h3,
.zs-services p {
	color: var(--zs-white);
}

.zs-services__layout {
	align-items: flex-start;
	gap: 48px;
}

.zs-services__layout > .wp-block-column:first-child {
	flex: 1.6;
}

.zs-services__side-img img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.zs-services__grid,
.zs-benefits__grid {
	margin-bottom: 40px;
}

.zs-service__icon img {
	width: 64px !important;
	height: 64px !important;
	object-fit: contain;
	margin-bottom: 12px;
}

.zs-service__title {
	color: var(--zs-green-bright) !important;
	margin-bottom: 8px;
}

.zs-benefit__title {
	color: var(--zs-green-primary) !important;
}

/* -----------------------------------------------------------------------
   PROCESS — light section
   --------------------------------------------------------------------- */
.zs-process {
	background-color: #f7f7f7;
}

.zs-process__cols {
	align-items: flex-start;
	gap: 32px;
}

.zs-step__img img {
	border-radius: 12px;
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	margin-bottom: 20px;
}

.zs-step__number {
	width: 48px;
	height: 48px;
	background: var(--zs-green-primary);
	color: var(--zs-white) !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 16px;
}

.zs-step__title {
	margin-bottom: 12px;
}

/* -----------------------------------------------------------------------
   BENEFITS ICONS — dark
   --------------------------------------------------------------------- */
.zs-benefits-icons {
	background-color: var(--zs-black);
	color: var(--zs-white);
}

.zs-benefits-icons h2,
.zs-benefits-icons h3,
.zs-benefits-icons p {
	color: var(--zs-white);
}

.zs-benefits-icons__cols {
	gap: 32px;
}

.zs-benefits-icons .wp-block-column {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 32px 24px;
	text-align: center;
}

/* -----------------------------------------------------------------------
   TESTIMONIALS — light grey
   --------------------------------------------------------------------- */
.zs-testimonials {
	background-color: #f7f7f7;
}

.zs-testimonials__cols {
	gap: 32px;
}

.zs-testimonials .wp-block-column {
	background: var(--zs-white);
	border-radius: 12px;
	padding: 32px 24px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	text-align: center;
}

.zs-testimonial__photo img {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 16px;
	display: block;
	border: 3px solid var(--zs-green-primary);
}

.zs-testimonial__quote {
	font-style: italic;
	color: var(--zs-dark);
	margin-bottom: 20px;
}

.zs-testimonial__name {
	font-weight: 700;
	color: var(--zs-dark);
	margin-bottom: 4px;
}

.zs-testimonial__role {
	font-size: 13px;
	color: #666;
}

/* -----------------------------------------------------------------------
   FEATURES — white
   --------------------------------------------------------------------- */
.zs-features {
	background-color: var(--zs-white);
}

.zs-features__row {
	gap: 24px;
	margin-bottom: 24px;
}

.zs-features .wp-block-column {
	background: #f7f7f7;
	border-radius: 10px;
	padding: 24px 20px;
	border-left: 4px solid var(--zs-green-primary);
}

.zs-feature__title {
	font-size: 18px;
	margin-bottom: 8px;
	color: var(--zs-dark);
}

.zs-features__lead {
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	margin: 40px 0 16px;
}

/* -----------------------------------------------------------------------
   BANK LOGOS — white, centred
   --------------------------------------------------------------------- */
.zs-banks {
	background-color: #f7f7f7;
}

.zs-banks h2 {
	margin-bottom: 40px;
}

.zs-banks__cols {
	align-items: center;
	gap: 32px;
}

.zs-bank-logo img {
	max-height: 60px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 0.2s, opacity 0.2s;
	margin: 0 auto;
	display: block;
}

.zs-bank-logo img:hover {
	filter: none;
	opacity: 1;
}

/* -----------------------------------------------------------------------
   ESKOM COST SECTION — dark
   --------------------------------------------------------------------- */
.zs-eskom {
	background-color: var(--zs-dark);
	color: var(--zs-white);
}

.zs-eskom h2,
.zs-eskom h3,
.zs-eskom p,
.zs-eskom li {
	color: var(--zs-white);
}

.zs-eskom__cols {
	align-items: center;
	gap: 48px;
}

.zs-eskom__img img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.zs-eskom ul {
	border-left: 4px solid var(--zs-green-primary);
	padding-left: 20px;
	margin: 16px 0 24px;
}

/* -----------------------------------------------------------------------
   ARE WE A GOOD FIT — light
   --------------------------------------------------------------------- */
.zs-fit {
	background-color: var(--zs-white);
	text-align: center;
}

.zs-fit__list {
	display: inline-block;
	text-align: left;
	margin: 0 auto 32px;
}

.zs-fit__list li {
	padding: 6px 0;
	padding-left: 8px;
}

.zs-fit__list li::marker {
	color: var(--zs-green-primary);
}

/* -----------------------------------------------------------------------
   COMPARISON TABLE — dark
   --------------------------------------------------------------------- */
.zs-comparison {
	background-color: var(--zs-black);
	color: var(--zs-white);
}

.zs-comparison h2 {
	color: var(--zs-white);
}

.zs-comparison__table table {
	width: 100%;
	border-collapse: collapse;
}

.zs-comparison__table th,
.zs-comparison__table td {
	padding: 16px 24px;
	text-align: left;
	border-bottom: 1px solid rgba(255,255,255,0.15);
	color: var(--zs-white);
}

.zs-comparison__table thead th {
	background: var(--zs-near-black);
	font-size: 18px;
	font-weight: 700;
}

.zs-comparison__table .zs-col-us {
	color: var(--zs-green-bright);
}

.zs-comparison__table .zs-col-them {
	color: #ff5555;
}

.zs-comparison__table tbody tr:hover {
	background: rgba(255,255,255,0.04);
}

/* -----------------------------------------------------------------------
   FAQ — light, details/summary accordion
   --------------------------------------------------------------------- */
.zs-faq {
	background-color: #f7f7f7;
}

.zs-faq__item {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 12px;
	background: var(--zs-white);
	overflow: hidden;
}

.zs-faq__item summary {
	padding: 20px 24px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
	position: relative;
	color: var(--zs-dark);
}

.zs-faq__item summary::after {
	content: '+';
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--zs-green-primary);
}

.zs-faq__item[open] summary::after {
	content: '−';
}

.zs-faq__item p {
	padding: 0 24px 20px;
	margin: 0;
	color: #555;
}

/* -----------------------------------------------------------------------
   FINAL CTA — cover block
   --------------------------------------------------------------------- */
.zs-final-cta {
	text-align: center;
	background-color: var(--zs-black);
}

.zs-final-cta h2 {
	color: var(--zs-white);
	font-size: 40px;
	margin-bottom: 32px;
}

.zs-btn-large .wp-block-button__link {
	font-size: 20px;
	padding: 18px 48px;
}

/* -----------------------------------------------------------------------
   RESPONSIVE — homepage sections
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.zs-hero__cols,
	.zs-pain__cols,
	.zs-services__layout,
	.zs-eskom__cols {
		flex-direction: column;
	}

	.zs-hero__h1 {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.zs-hero__h1 {
		font-size: 28px;
	}

	.zs-process__cols,
	.zs-testimonials__cols,
	.zs-banks__cols {
		flex-direction: column;
	}

	.zs-features__row {
		flex-direction: column;
	}

	.zs-comparison__table th,
	.zs-comparison__table td {
		padding: 12px 16px;
		font-size: 14px;
	}
}

/* ── Homepage full-width layout ───────────────────────────── */
.page-id-252 .site-content,
.page-id-252 .content-area,
.page-id-252 .entry-content,
.page-id-252 .inside-article {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
.page-id-252 .inside-page-header { display: none; }

/* ── Elementor image height fix (HTML attr override) ─────── */
.page-id-252 .elementor-widget-image img,
.page-id-252 .elementor-image img {
  height: auto !important;
}

/* ── Elementor flex-stretch & contain-intrinsic-size fixes ── */
html body.page-id-252 .elementor .elementor-widget-image .elementor-widget-container {
  height: auto !important;
  min-height: 0 !important;
}
html body.page-id-252 .elementor img {
  height: auto !important;
  contain-intrinsic-size: auto !important;
}

/* ── Fix WP auto-sizes contain-intrinsic-size (1500px gap) ── */
html body.page-id-252 .elementor img[sizes] {
  contain-intrinsic-size: none !important;
}

/* ── All Elementor pages: full-width content area ─────────── */
.elementor-default .site-content,
.elementor-default .content-area,
.elementor-default .entry-content,
.elementor-default .inside-article {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
.elementor-default .inside-page-header { display: none; }

/* ── WP auto-sizes contain-intrinsic-size fix (all pages) ─── */
.elementor-default .elementor img[sizes],
.elementor img[sizes] {
  contain-intrinsic-size: none !important;
}

/* ── Elementor pages: break GP 1200px outer container ─────── */
.elementor-default.page .grid-container.container,
.elementor-default.page .site {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}