/*
Theme Name: Pure Energy Stream
Theme URI: https://pureenergystream.com/
Author: Pure Energy Stream
Description: Full-site-editing block theme for pureenergystream.com, recreated from the Wix landing page preview (October 2026). Jost typography, navy/blue wavy section transitions, converted with native block markup.
Version: 1.0.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pes-wix
Tags: block-patterns, full-site-editing, custom-colors, custom-fonts, featured-images
*/

/* ===========================================================================
   Fonts — Jost, self-hosted (the exact weight files the Wix site served)
   =========================================================================== */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/jost-400.woff2) format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(assets/fonts/jost-500.woff2) format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(assets/fonts/jost-600.woff2) format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/jost-700.woff2) format("woff2");
}

/* ===========================================================================
   Base
   =========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

/* ===========================================================================
   Header (sticky, white, subtle bottom shadow — as in the Wix design)
   =========================================================================== */

.pes-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: #ffffff;
	box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(0, 0, 0, 0.04);
	padding: 14px 16px;
}

.pes-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	max-width: 980px;
	margin: 0 auto;
}

.pes-header .wp-block-site-logo .aligncenter {
	margin: 0;
}

.pes-header .wp-block-site-logo img {
	max-height: 64px;
	width: auto;
}

.pes-nav .wp-block-navigation-item__label,
.pes-nav .wp-block-navigation-submenu__label {
	color: #000000;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.9;
	text-decoration: none;
}

.pes-nav .wp-block-navigation-item__label:hover,
.pes-nav .wp-block-navigation-item__label:focus,
.pes-nav .wp-block-navigation-item.is-current .wp-block-navigation-item__label {
	color: #063e67;
}

/* ===========================================================================
   Wavy section transitions
   Exact wave paths from the Wix design. Each wave is the *previous* section's
   color, anchored to the top edge of the section it flows into.
   =========================================================================== */

.pes-hero,
.pes-bullets,
.pes-impact,
.pes-why,
.pes-diagram {
	position: relative;
}

/* Hero (navy) -> bullets band (blue): navy sag, deep left / shallow right.
   The wave overlaps the "Save 8–12%" bullets; the city image band sits at
   the bottom of the blue band, below the list and button. */
.pes-bullets::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: clamp(60px, 20.83vw, 400px);
	background: url(assets/images/wave-navy.svg) top center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Whole-facility (white) -> Our Impact (navy): white sag. */
.pes-impact::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: clamp(50px, 8.96vw, 172px);
	background: url(assets/images/wave-white.svg) top center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Our Impact (navy) -> "Why choose" band (warehouse photo), bottom edge: white rise. */
.pes-impact::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: clamp(48px, 8.96vw, 172px);
	background: url(assets/images/wave-white.svg) bottom center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Why choose: soft white rise (63% opacity) from the off-white zone above,
   painted over the warehouse photo behind the section. */
.pes-why::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: clamp(80px, 15.3vw, 294px);
	background: url(assets/images/wave-white-up.svg) top center / 100% 100% no-repeat;
	opacity: 0.63;
	pointer-events: none;
}

/* Why choose (blue) -> EcoMAXIM diagram (navy): white sag. */
.pes-diagram::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: clamp(36px, 4.69vw, 90px);
	background: url(assets/images/wave-white.svg) top center / 100% 100% no-repeat;
	pointer-events: none;
}

/* EcoMAXIM diagram (navy) -> EcoMAXIM explained (white), bottom edge: white rise. */
.pes-diagram::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: clamp(28px, 3.59vw, 69px);
	background: url(assets/images/wave-white-up.svg) bottom center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Padding so content lands where the Wix layout puts it. Note: the "Our
   Impact" and "Why choose" headings deliberately sit INSIDE the top white
   wave zone (the wave is the section's background there), so those bands
   get small top padding and the titles are positioned to paint above it. */
.pes-bullets {
	padding: 0 16px 0;
}

/* The city image band ends flush with the band's bottom edge; keep the
   Wix rhythm (39px) between the button and the image. */
.pes-bullets .pes-btn {
	margin: 0 0 39px 0;
}

.pes-impact {
	padding: 81px 16px calc(clamp(48px, 8.96vw, 172px) + 40px);
}

.pes-why {
	padding: 93px 16px 48px;
}

.pes-diagram {
	padding: 146px 16px calc(clamp(24px, 3.59vw, 69px) + 10px);
}

/* ===========================================================================
   Section bands
   =========================================================================== */

.pes-hero {
	background: var(--wp--preset--color--navy);
	padding: 47px 16px 0;
}

.pes-hero-title {
	color: #ffffff;
	font-weight: 600;
	font-size: clamp(1.9rem, 3.5vw, 2.6875rem);
	line-height: 1.3;
	margin: 0 auto 40px;
	max-width: 760px;
}

.pes-hero-img {
	display: none;
	aspect-ratio: 980 / 318;
	background: url(assets/images/hero-city.jpg) center / cover no-repeat;
}

.pes-bullets {
	/* background: var(--wp--preset--color--blue); */
	background: url(assets/images/hero-city.jpg) center / cover no-repeat;
}

.pes-bullets-list {
	position: relative;
	color: #ffffff;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
	max-width: 460px;
	margin: 45px 0 28px;
	padding-left: 1.2em;
}

.pes-bullets-list li {
	margin: 0 0 6px;
}

.pes-bullets .wp-block-button {
	position: relative;
}

.pes-section-white {
	background: #ffffff;
	padding: 93px 16px 58px;
}

/* EcoMAXIM Explained band: tighter top spacing (Wix: 50px). */
.pes-explained-band {
	padding: 50px 16px 48px;
}

/* Video band: its own rhythm (Wix: heading 14px below the top edge). */
.pes-video-band {
	padding: 48px 16px 64px;
}

.pes-wf-text {
	max-width: 708px;
	margin: 0 auto 36px;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.8;
}

.pes-impact {
	background: var(--wp--preset--color--navy);
}

.pes-impact-title {
	/* Wix source: navy heading sitting in the white wave zone above the
	   navy band (reads as dark-on-white), so no white override here. */
	font-weight: 700;
	position: relative; /* paint above the white wave behind it */
}

/* Column labels sit on the navy band below the wave zone. */
.pes-impact-label {
	color: #ffffff;
	position: relative;
}

.pes-impact-badge {
	width: 180px;
	height: 180px;
	margin: 0 auto 24px;
	background: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pes-impact-icon {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.pes-impact-recycle {
	width: 140px;
	height: 50px;
	background-image: url(assets/images/impact-recycle.png);
}

.pes-impact-protect {
	width: 88px;
	height: 100px;
	background-image: url(assets/images/impact-protect.png);
}

.pes-impact-bills {
	width: 104px;
	height: 115px;
	background-image: url(assets/images/impact-bills.png);
}

/* Why choose: the warehouse photo is the section's background (the Wix
   section fills a 980x646 frame with the photo); the blue underlay only
   shows if the photo is ever removed. */
.pes-why {
	background-color: var(--wp--preset--color--blue);
	background-image: url(assets/images/warehouse.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Paint the two white boxes above the 63% wave (like the title). */
.pes-why .wp-block-columns {
	position: relative;
}

.pes-why-title {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	margin-bottom: 48px;
	position: relative; /* paint above the 63% white wave behind it */
}

.pes-box {
	background: #ffffff;
	padding: 40px 36px;
	margin: 0;
	height: 100%;
}

.pes-box p {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	margin: 0 0 16px;
}

.pes-box p:last-child {
	margin-bottom: 0;
}

.pes-box .pes-box-title {
	font-weight: 700;
}

.pes-box .pes-benefits {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.6;
	margin: 8px 0 0;
	padding-left: 1.2em;
}

.pes-box .pes-benefits li {
	margin: 0 0 8px;
}

/* ===========================================================================
   EcoMAXIM diagram band
   =========================================================================== */

.pes-diagram {
	background: var(--wp--preset--color--navy);
}

.pes-diagram-img {
	width: min(604px, 100%);
	aspect-ratio: 604 / 405;
	margin: 0 auto;
	background: url(assets/images/diagram-mdp.png) center / contain no-repeat;
}

/* ===========================================================================
   EcoMAXIM explained (long text)
   =========================================================================== */

.pes-explained-text {
	max-width: 730px;
	margin: 0 auto;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
}

.pes-explained-text p {
	margin: 0 0 20px;
}

/* ===========================================================================
   Partnerships — the Net Zero banner spans the full row, the nine partner
   logos follow in a 3x3 grid (order matches the Wix layout)
   =========================================================================== */

.pes-partners {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
	align-items: center;
	justify-items: center;
	margin-top: 24px;
}

.pes-partner {
	height: 150px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.pes-partner-netzero {
	grid-column: 1 / -1;
	height: 190px;
}

.pes-partner-scaqmd       { background-image: url(assets/images/partner-scaqmd.jpg); }
.pes-partner-ladwp        { background-image: url(assets/images/partner-ladwp.png); }
.pes-partner-unibail      { background-image: url(assets/images/partner-unibail.jpg); }
.pes-partner-netzero      { background-image: url(assets/images/partner-netzero.png); }
.pes-partner-westernasset { background-image: url(assets/images/partner-westernasset.jpg); }
.pes-partner-larta        { background-image: url(assets/images/partner-larta.png); }
.pes-partner-cfcfa        { background-image: url(assets/images/partner-cfcfa.png); }
.pes-partner-wellsfargo   { background-image: url(assets/images/partner-wellsfargo.jpg); }
.pes-partner-kbm          { background-image: url(assets/images/partner-kbm.png); }
.pes-partner-laci         { background-image: url(assets/images/partner-laci.png); }

/* ===========================================================================
   Video placeholder (Wix page ships a placeholder video — swap for a real
   embed when the footage is available)
   =========================================================================== */

.pes-video {
	position: relative;
	aspect-ratio: 777 / 437;
	margin: 0 auto;
	max-width: 777px;
	background: url(assets/images/video-placeholder.jpg) center / cover no-repeat;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.pes-video::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
}

.pes-video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-42%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 17px;
	border-color: transparent transparent transparent #ffffff;
}

/* ===========================================================================
   Buttons
   =========================================================================== */

.pes-btn .wp-block-button__link {
	padding: 0.9em 2.6em;
	text-decoration: none;
}

.pes-btn .wp-block-button__link:hover,
.pes-btn .wp-block-button__link:focus {
	background-color: #175f9c;
	color: #ffffff;
}

/* ===========================================================================
   Footer
   =========================================================================== */

.pes-footer {
	background: #ffffff;
	padding: 56px 16px 40px;
	text-align: center;
}

.pes-footer .wp-block-site-logo {
	margin: 0 0 28px;
}

.pes-footer .wp-block-site-logo img {
	max-height: 90px;
	width: auto;
}

.pes-footer-links a {
	color: #000000;
	font-size: var(--wp--preset--font-size--foot);
	letter-spacing: 0.03em;
	text-decoration: none;
}

.pes-footer-links a:hover,
.pes-footer-links a:focus {
	color: #063e67;
	text-decoration: underline;
}

.pes-social {
	margin: 24px 0;
}

.pes-social a {
	display: inline-block;
	width: 36px;
	height: 36px;
	margin: 0 6px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.pes-social-linkedin    { background-image: url(assets/images/social-linkedin.png); }
.pes-social-instagram   { background-image: url(assets/images/social-instagram.png); }
.pes-social-facebook    { background-image: url(assets/images/social-facebook.png); }
.pes-social-youtube     { background-image: url(assets/images/social-youtube.png); }

.pes-copyright {
	font-size: var(--wp--preset--font-size--tiny);
	color: #808080;
	margin: 16px 0 0;
}

/* ===========================================================================
   Small screens
   =========================================================================== */

@media (max-width: 781px) {
	.pes-partners {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}

	.pes-partner-netzero {
		grid-column: 1 / -1;
		height: 140px;
	}

	.pes-impact-badge {
		width: 140px;
		height: 140px;
	}

	.pes-box {
		padding: 28px 22px;
	}
}

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

:root :where(.is-layout-constrained) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}