/*
 * PC Green — Custom Stylesheet
 * New design work goes here. Existing site styles live in Customizer Additional CSS.
 * Do not edit style.css directly.
 */

/* ============================================================
   Brand Color Variables
   ============================================================ */
:root {
	--color-forest:        #13734b;
	--color-night-sky:     #112f48;
	--color-cottage-green: #206651;
	--color-blue-silver:   #6b99b5;
	--color-silver-blue:   #b1c3ce;
	--color-powder:        #e8eef2;
	--color-sage:          #719583;
	--color-buttercup:     #ec8a34;
	--color-light-bg:      #eeeef0;
	--color-black:         #333333;
	--color-white:         #ffffff;
	--color-error:         #ed3241;
	--color-orange:        #f39727;
	--color-yellow:        #ffc821;
}


/* ============================================================
   How It Works — Steps
   Add class "wte-steps" to the Columns block wrapper.
   Each column gets a Custom HTML block with .wte-icon-group at the top,
   then a Heading and Paragraph block for the text.
   ============================================================ */
.wte-steps {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	align-items: flex-start;
	position: relative;
}

/* single continuous dotted line from center of first icon to center of last */
/* left/right: 10% = center of each column at 5 equal columns (100% / 5 / 2) */
.wte-steps::before {
	content: '';
	position: absolute;
	top: 87px;
	left: 10%;
	right: 10%;
	height: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Ccircle cx='7' cy='3' r='2.5' fill='%23206651'/%3E%3C/svg%3E");
	background-size: 14px 6px;
	background-repeat: repeat-x;
	background-position: 0 center;
	z-index: 0;
}

.wte-steps .wp-block-column {
	flex: 1;
	min-width: 0;
	text-align: center;
	position: relative;
	padding: 0 15px;
	z-index: 1;
}

.wte-icon-group {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-bottom: 15px;
}

.wte-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-cottage-green);
	color: var(--color-white);
	font-family: Jost;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 5px;
}

.wte-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: #f3f6ed;
	border: 5px solid #e2ecd5;
	color: var(--color-forest);
	font-size: 42px;
	margin: 0 auto;
	--fa-primary-color:     var(--color-forest);
	--fa-secondary-color:   var(--color-white);
	--fa-secondary-opacity: 1;
}

.wte-steps .wp-block-column h3 {
	color: var(--color-cottage-green);
	font-size: 18px;
	margin-top: 15px;
	margin-bottom: 8px;
}

.wte-steps .wp-block-column p {
	font-size: 15px;
	line-height: 1.6;
}

@media screen and (max-width: 768px) {
	.wte-steps { flex-wrap: wrap; }
	.wte-steps .wp-block-column { flex: 0 0 100%; padding: 0; }
	.wte-steps::before { display: none; }
}


/* ============================================================
   Brush Stroke Shortcodes
   [brush_stroke] — standalone decorative line
   [underline]text[/underline] — wraps text with brush stroke beneath
   ============================================================ */
.brush-stroke-line {
	height: 8px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	margin: 12px auto;
}

.entry-content p:empty { display: none; }

/* ============================================================
   Brush Underline Shortcode
   Usage: [underline]text[/underline]  or  [underline color="#fff"]text[/underline]
   Default color: buttercup (#ec8a34)
   ============================================================ */
.brush-underline {
	display: inline;
	padding-bottom: 14px;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 6px;
}


/* ============================================================
   Rotating Text Shortcode
   Usage: [rotating_text static="Actions may help businesses" words="Reduce costs, Save energy"]
   ============================================================ */
.rotating-text-wrap {
	display: block;
	text-align: center;
}

.rotating-text-rotator {
	display: grid;
	width: fit-content;
	margin: 0 auto;
	justify-items: center;
}

.rotating-text-static {
	display: block;
	color: var(--color-white);
}

.rotating-text-word {
	grid-area: 1/1;
	width: fit-content;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s ease, transform 0.45s ease;
	color: var(--color-white);
	text-transform: lowercase;
	padding-bottom: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4 C40 3 80 2.5 100 3 C140 3.5 170 3 198 4 C180 5.5 140 6 100 5.5 C60 6 30 5.5 2 4 Z' fill='%23ec8a34'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 6px;
}

.rotating-text-word.active {
	opacity: 1;
	transform: translateY(0);
}

.rotating-text-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
	margin-bottom: 22px;
}

.rotating-text-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	position: relative;
}

.rotating-text-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transition: background 0.25s ease, transform 0.25s ease;
}

.rotating-text-dot:hover::before {
	background: rgba(255, 255, 255, 0.65);
}

.rotating-text-dot.active::before {
	background: var(--color-buttercup);
	transform: translate(-50%, -50%) scale(1.4);
}

.rotating-text-dot:focus {
	outline: none;
}

.rotating-text-word.leaving {
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}


/* ============================================================
   Steps Container — images fill right column to text height
   The right column's inner is position:absolute (giving the column
   zero intrinsic height). align-self:stretch then sizes the column
   to match the left text column, and images cover-fill that space.
   ============================================================ */

/* Right column: stays in flex flow but has zero intrinsic height */
.steps-container .gb-block-layout-column:last-child {
	align-self: stretch !important;
	position: relative;
	overflow: hidden;
}

/* Absolute fill — images don't push the column's own height */
.steps-container .gb-block-layout-column:last-child .gb-block-layout-column-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
}

/* Equal share of the column height; bottom image clips if it overruns */
.steps-container .gb-block-layout-column:last-child figure {
	flex: 1;
	margin: 0;
	min-height: 0;
	overflow: hidden;
}

.steps-container .gb-block-layout-column:last-child figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.steps-container .gb-block-layout-column:last-child figure:last-child img {
	object-position: center bottom;
}

/* Mobile (≤960px): revert everything to normal flow, first image only */
@media (max-width: 960px) {
	.steps-container .gb-block-layout-column:last-child {
		align-self: auto !important;
		position: static;
		overflow: visible;
	}
	.steps-container .gb-block-layout-column:last-child .gb-block-layout-column-inner {
		position: static;
		display: block;
	}
	.steps-container .gb-block-layout-column:last-child figure:first-child {
		display: block !important;
	}
	.steps-container .gb-block-layout-column:last-child figure:not(:first-child) {
		display: none !important;
	}
	.steps-container .gb-block-layout-column:last-child figure img {
		height: auto;
	}
}


/* ============================================================
   How It Works page (page-id-13) — paragraph size bump
   ============================================================ */
.page-id-7298 .entry-content p {
	font-size: 1.2em;
}
.page-id-7298 .entry-content li {
	font-size: 1.2em;
}
.page-id-7298 .hero p,
.page-id-7298 .hero li {
	font-size: 1em;
}


/* ============================================================
   How It Works — desktop h2 size + vertical center with number
   Removes float at ≥1200px, switches number + h2 to inline-block
   so vertical-align:middle gives exact center alignment.
   Responsive font sizes handled by Customizer at ≤1199px.
   ============================================================ */
@media screen and (min-width: 1200px) {
	.how-it-works .steps-number {
		float: none !important;
		display: inline-block;
		vertical-align: middle;
	}
	.how-it-works h2 {
		display: inline-block !important;
		vertical-align: middle !important;
		font-size: 28px !important;
		line-height: 1.25;
		margin-left: 15px !important;
		margin-top: 0;
		margin-bottom: 0;
		width: calc(100% - 120px);
		box-sizing: border-box;
	}
}


/* ============================================================
   Accordion / FAQs
   ============================================================ */

/* Replace FA web-font chevron (broken with SVG+JS kit) with CSS SVG icon */
.accordion button::after {
	content: '' !important;
	font-family: unset !important;
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313734b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(180deg);
	transition: transform .2s ease-in-out;
	float: right;
	margin-right: -30%;
	margin-top: 4px;
}

.accordion button.collapsed::after {
	transform: rotate(0deg);
}

/* Remove focus outline — overrides Customizer's webkit focus ring rule */
html body .accordion button:focus,
html body .accordion button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}