/*
Theme Name: Avada Child
Description: Child theme for Avada - houses custom CSS (Gutenberg font-fix, etc.) outside of Fusion Builder / WPCode.
Author: Charged SEO
Template: Avada
Version: 1.7.1
Text Domain: Avada
*/

/* Avada's own "Page Content Padding" theme option (Avada > Options > Layout)
   adds 80px top/bottom padding to #main site-wide — that's the actual
   source of the gap above the hero, not anything in our own CSS (our own
   margin-top on the hero was a red herring; removing it didn't touch this).
   #main sits outside .post-content, so it's outside every :where() rule
   below — scoped directly to body.ppes-landing instead, with !important
   since Avada's rule has real specificity. Only killing the top padding;
   the bottom padding before the footer is untouched. */
body.ppes-landing #main {
	padding-top: 0 !important;
}

/* Every rule below is scoped behind `body.ppes-landing` (see functions.php's
   ppes_landing_body_class) — deliberately, so this redesign only affects the
   Round 1 landing pages, not the ~25 existing Fusion Builder pages that also
   share Avada's .post-content wrapper. Without that scope, plain tag
   selectors here (h1, h2, p, ...) would silently cascade site-wide the
   moment this theme goes live. Add a page's slug to that array once it's
   part of the redesign; don't widen these selectors to drop the scope.
   .editor-styles-wrapper is the Gutenberg admin canvas's own wrapper (see
   editor-styles support in functions.php) — targeting it too means what you
   see while editing matches what publishes.
   :where() zeroes the ancestor's specificity, so an explicit block textColor
   (has-*-color classes) or a per-block inline style (e.g. the smaller card
   headings in our patterns) always wins over these defaults. */

/* Force native Gutenberg blocks to match Avada's brand typography, since Avada
   doesn't style wp-block-* elements and they otherwise fall back to serif. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h1,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h2,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h3,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h4,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) p,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) li,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) summary,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-button__link {
	font-family: Raleway, Arial, Helvetica, sans-serif;
}

/* <summary> (the FAQ accordion question) isn't an h1-h4/p/li, so none of the
   rules above touch it — it was falling through entirely to Avada's default
   link-blue styling (and its default ~2.27 line-height, the same oversized
   ratio the p/li rule below tightens to 1.6 — summary just never got
   included in that fix, which is why the FAQ questions wrap with huge gaps
   between lines). Match it to the same weight/color as our other headings. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) summary {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: #414042;
	cursor: pointer;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) h1,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h2,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h3,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h4 {
	color: #414042;
}

/* Font sizes/weights started from the live site's computed styles, then
   stepped down again (2026-08) toward the AHLEC reference's scale — AHLEC
   runs body copy at 14px, H1 32px, H2 26px; we went partway rather than all
   the way, since 14px read too small for this brand's voice:
   - body copy tightened from the live site's ~2.27 line-height ratio to 1.6,
     and dropped from weight 500 to 400 (500 read slightly heavy/dense)
   - h3 given real weight + reduced size so it reads as a heading step down
     from h2, not a same-size unbolded paragraph (the live site's h3 is 35px
     at weight 400, which flattens the hierarchy)
   - subtle negative letter-spacing on headings for a less default-browser feel */
/* !important is required on every size/line-height below: Avada's own
   "Responsive Typography" feature recalculates heading font-size/line-height
   via JS on load/resize and writes the result as an inline style (see
   fusion-responsive-typography-calculated / --fontSize / data-lineheight in
   the rendered markup). An inline style always beats an external stylesheet
   rule unless that rule is !important, so without it Avada's JS silently
   wins on every breakpoint regardless of what's declared here. Safe to force
   here specifically because this selector is scoped to body.ppes-landing —
   only this landing page template, not other Fusion Builder pages sitewide. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) h1 {
	font-size: 38px !important;
	font-weight: 700;
	line-height: 1.4 !important;
	letter-spacing: -0.01em;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) h2 {
	font-size: 38px !important;
	font-weight: 700;
	line-height: 1.31 !important;
	letter-spacing: -0.01em;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) h3 {
	font-size: 24px !important;
	font-weight: 600;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
}

/* No !important here (unlike h1-h3 above) — Avada's responsive-typography
   JS override was only ever observed on headings, and forcing it on every
   paragraph broke WordPress's own font-size utility classes (has-small-
   font-size etc.), since those are also just inline/class-based CSS this
   rule would then always beat regardless of what size was actually chosen
   for a given paragraph (e.g. the hero location bar's small label). */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) p,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) li {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #4c4c4c;
}

/* A touch of breathing room between list items (process steps, brand/option
   lists, etc.) — browsers give <li> no default spacing beyond line-height,
   so items were reading as one dense block. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) li {
	margin-bottom: 10px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) li:last-child {
	margin-bottom: 0;
}

/* Bolt icon on every bulleted (ul) list — brand list, promo offer bullets,
   etc. — instead of the plain default dot, for a touch more polish now
   that the type scale is tighter. Ordered lists (ol, the numbered process
   steps) are untouched — they keep their numbers, this only targets ul. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) ul li {
	list-style: none;
	position: relative;
	padding-left: 26px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) ul li::before {
	content: "\26A1";
	position: absolute;
	left: 0;
	top: 0;
	color: #E9BE3D;
	font-size: 15px;
	line-height: 1.6;
}

/* Checklist override for the Trust Strip's 6-item list — checkmark instead
   of the site-wide bolt, opted in via the "ppes-checklist" custom CSS
   class so it doesn't change bulleted lists anywhere else. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) ul.ppes-checklist li::before {
	content: "\2713";
	color: #E2542A;
	font-weight: 700;
}

/* Text inside a thin utility bar (hero location bar, End of Page marker) —
   the paragraph's own default browser margin-bottom (~1em) was stacking on
   top of the bar's own small padding, making the bar look much taller than
   its actual padding value and pushing the text off-center toward the top.
   Zeroing the margin and tightening line-height (which the general 1.6 body
   rule leaves generous even at a small font size) lets the bar's own
   padding be the only vertical space, so the text sits genuinely centered.
   !important is required: this selector's real specificity is just one
   class (:where() contributes none), and Avada's own live front-end
   stylesheet — which the block editor canvas never loads, hence "looks
   fine in the editor" — apparently sets a real margin on paragraphs with
   enough specificity to beat a plain class selector regardless of source
   order. Confirmed via devtools: the <p> box itself was already the
   correct tight height, but a margin still rendered outside it live. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-bar-label {
	margin: 0 !important;
	line-height: 1.3 !important;
}

/* Explicit content-width match for the hero and its location bar — set
   directly rather than relying solely on the block editor's own generated
   layout CSS (a per-instance class keyed to a global stylesheet), so this
   specific width is guaranteed identical between the two regardless of any
   edge case in how that generated CSS resolves. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-content-width {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Icon wrapper for the Four USPs row (and anywhere else a centered wp:html
   SVG icon sits above a heading) — was a repeated inline style="text-align:
   center" on every icon div; centralised here instead. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-icon-wrap {
	text-align: center;
}

/* Icon stroke color — was a raw stroke="#E2542A" repeated on every inline
   SVG icon; centralised here so a future brand-color change is one line
   instead of a find-and-replace across every pattern that uses an icon. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-icon-wrap svg {
	stroke: #E2542A;
}

/* Location bar tagline ("Home electric car charging specialists") — plain
   bold text now, no pill shape. Moved here from a filled chip that used to
   float inside the hero photo itself; that chip also duplicated the H1's
   wording when the bar separately repeated the page's service name, so
   this replaces both problems at once — the bar now carries the tagline
   (a genuinely different piece of copy from the H1) and the hero itself
   is back down to headline + copy + button. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-bar-pill {
	display: inline-block;
	margin: 0 !important;
	line-height: 1 !important;
}

/* Wraps the bar pill specifically (not the general .ppes-content-width,
   which the hero also uses for its multi-line block content) — flexbox
   centering is exact regardless of container height, unlike
   vertical-align:middle on an inline-block, which aligns against an
   invisible text "strut" and left a ~2px top/bottom discrepancy here. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-bar-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

/* WP core's "constrained" layout support gives every non-full/wide child of
   a `.is-layout-constrained` container margin-left/right:auto (intended so
   wide/full blocks can escape the constrained width) — harmless for a
   full-width child like the H1 (auto margins resolve to 0 when the child
   already fills the row), but once .ppes-bar-wrap above turns this into a
   flex row, those same auto margins actively center the pill via
   flexbox's auto-margin behavior. A single-class selector on .ppes-bar-pill
   isn't specific enough to beat WP core's own selector here, so this
   targets it via the parent pairing instead. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-bar-wrap > .ppes-bar-pill {
	margin: 0 !important;
}

/* Lightning-bolt trust pill (Contact section) — was a long identical inline
   style repeated on every badge span; centralised into one class so future
   badges are a one-word class instead of a copy-pasted style block. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #F7F6F4;
	color: #E2542A;
	font-weight: 700;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 999px;
}

/* Process Steps timeline (auto-numbered via CSS counter, so adding/removing
   a step never needs manual renumbering) — rust circle badge on the title,
   rust accent line beside the description. Replaces the plain
   browser-default numbered list. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-list {
	counter-reset: ppes-step;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step {
	position: relative;
	margin-bottom: 20px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-last {
	margin-bottom: 0;
}

/* The connecting line is one continuous element per step (not something
   independently positioned on the description paragraph, which is what
   made it drift out of alignment with the circle above it). left:13px
   centers a 2px line exactly under the 28px circle (14px center, minus
   half the line's own width) — same math the circle uses, so they can't
   drift apart. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step:not(.ppes-step-last)::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 28px;
	bottom: -20px;
	width: 2px;
	background: rgba(226, 84, 42, 0.25);
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-title {
	counter-increment: ppes-step;
	position: relative;
	padding-left: 42px;
	font-weight: 700;
	color: #414042;
	margin-bottom: 4px;
	min-height: 28px;
	display: flex;
	align-items: center;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-title::before {
	content: counter(ppes-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #E2542A;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-desc {
	padding-left: 42px;
}

/* Process Steps — full-width stacked card variant. Same auto-numbering
   approach as the timeline above (.ppes-process-list), but each step is its
   own full-width card, top to bottom, rather than a connected vertical line
   or a 3-column grid — client feedback specifically asked for the original
   top-down flow back, just as distinct full-width numbered cards instead of
   a plain list, so it doesn't read as a literal duplicate of other pages
   reusing the timeline variant. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-grid {
	counter-reset: ppes-step-grid;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-card {
	counter-increment: ppes-step-grid;
	position: relative;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 2px 14px rgba(51, 51, 51, 0.08);
	padding: 16px 20px;
	padding-left: 64px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-card::before {
	content: counter(ppes-step-grid);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 16px;
	left: 18px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #E2542A;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-title {
	font-weight: 700;
	color: #414042;
	margin-bottom: 0;
}

/* Process Steps — orange side-tab variant. No line, no circles, no card
   backgrounds — each step gets a short rust accent tab on its left edge and
   a thin divider below it, with the step number as a small dark pill beside
   the title. Chosen over the boxed-card variant specifically because
   per-step padding/shadow on every card was pushing the text column well
   past the height of the image beside it; plain divided rows fix that. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-steps-tab {
	display: flex;
	flex-direction: column;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-tab {
	position: relative;
	padding: 14px 0 14px 20px;
	border-bottom: 1px solid #e6e1d6;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-tab:last-child {
	border-bottom: none;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-tab::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 4px;
	border-radius: 2px;
	background: #E2542A;
}

/* !important on display/align-items: the group block wasn't given an
   explicit "layout":{"type":"flex"} attribute, so it renders with WP core's
   default is-layout-flow class — and core's own block-library stylesheet
   (loaded on the live front end, not inside the editor canvas) apparently
   carries enough specificity to quietly override a plain flex declaration
   here, same root cause as every other "fine in the editor, not live" bug
   this page has hit. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-tab-head {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	margin-bottom: 4px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-badge {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700;
	line-height: 1 !important;
	color: #FFFFFF;
	background: #414042;
	border-radius: 999px;
	padding: 4px 10px;
	flex-shrink: 0;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-step-tab-title {
	margin: 0 !important;
	line-height: 1 !important;
	font-weight: 700;
	color: #414042;
}

/* Process Steps without a matching photo (Air Conditioning page — no second
   distinct install photo was available at build time): lays the 6 steps
   out as a 2-column grid instead of the single 55%-width column the EV
   page uses beside its image, so the row doesn't stretch into an
   oddly-narrow list spanning the full 1100px content width. Stacks to one
   column at the same 782px breakpoint every other mobile rule here uses. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-steps-tab-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
}

/* Icon feature cards (Air Conditioning "Reverse cycle air conditioning
   solutions") — off-white card matching the testimonial/three-column-card
   language elsewhere, but with its own class since it also carries an icon
   and a tagline line those patterns don't have. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-feature-card {
	background: #F7F6F4;
	border-radius: 12px;
	padding: 28px 24px;
	height: 100%;
	box-sizing: border-box;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-feature-card-tagline {
	color: #E2542A;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 4px !important;
	margin-bottom: 12px !important;
}

/* Brand strip (Air Conditioning "Reliable brands at competitive prices") —
   each tile centers one logo at a fixed height via object-fit:contain, so
   the 7 source logos (very different native aspect ratios/sizes — a tall
   square Mitsubishi lockup next to a wide Daikin wordmark) all read as the
   same visual weight instead of whatever size they happened to be
   exported at. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 28px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-brand-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	background: #FFFFFF;
	border-radius: 10px;
	padding: 16px 20px;
	box-shadow: 0 2px 10px rgba(51, 51, 51, 0.06);
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-brand-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-card p:not(.ppes-process-title) {
	margin-top: 2px;
}

/* Comparison table (brand/model guide) — plain wp:table core block,
   styled to match the card language elsewhere (radius + soft border)
   rather than a bare browser-default table. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: #FFFFFF;
}

/* border-collapse:collapse defeats a wrapping figure's overflow:hidden
   clipping in every major browser, so rounded corners on the outer
   container get ignored by the table's own square edges. Fixed by using
   border-collapse:separate above and rounding the actual corner cells
   directly instead of relying on the wrapper to clip anything. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table thead tr:first-child th:first-child {
	border-top-left-radius: 16px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table thead tr:first-child th:last-child {
	border-top-right-radius: 16px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 16px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 16px;
}

/* WP core's default table styling leaves a 1px border on every cell with
   no explicit border-color set, which resolves to currentColor — on the
   header row that's the rust text color, producing a straight orange line
   across the very top of the table that doesn't follow the rounded corner
   underneath it (the corner curves in, the straight default border doesn't,
   so they visibly mismatch right at the corner pixel). Resetting to no
   border first, then adding back only the header's own border-bottom
   below, removes every default edge we didn't explicitly ask for. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table th,
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table td {
	border: none !important;
	text-align: left;
	vertical-align: middle;
	padding: 12px 20px;
	font-size: 15px;
	line-height: 1.35;
}

/* Header reads as a small label, not a shaded block — avoids the flat grey
   band that was clipping oddly against the rounded corners below. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table thead th {
	color: #E2542A;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: 16px;
	padding-bottom: 10px;
	/* WP core's default ".wp-block-table td, .wp-block-table th { padding:
	   0.5em }" rule wins over our own th/td padding rule specifically for
	   <th> (an Avada rule targeting "tr td" happens to protect <td> from
	   the same fate, but nothing protects <th>). At this header's 12px
	   font-size, 0.5em resolves to 6px, pulling the header text ~14px to
	   the left of the body text in the column below it. !important to
	   actually win. */
	padding-left: 20px !important;
	padding-right: 20px !important;
	border-bottom: 2px solid #F7F6F4 !important;
}

/* Zebra striping instead of a line under every row — reads as soft banding
   rather than a spreadsheet grid, while still separating rows at a glance. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table tbody tr:nth-child(even) {
	background: #F7F6F4;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) figure.wp-block-table {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(51, 51, 51, 0.08);
}

/* "Swipe to see more" hint — only relevant once the table can actually
   scroll horizontally, which only happens below the 782px breakpoint
   (see the matching display:block override there). Hidden by default so
   desktop/tablet never see it. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-scroll-hint {
	display: none;
	color: #857f72;
	font-size: 12px;
	font-style: italic;
	margin-top: 8px;
}

/* Buttons — codified rule: every CTA is gold by default, dark grey on
   hover, no exceptions. This is enforced with !important because it must
   override per-block background/text color choices (has-*-background-color,
   has-*-color) that carry real specificity our :where()-scoped defaults
   elsewhere deliberately don't compete with — this one rule is intentionally
   absolute, not a fallback. Don't set backgroundColor/textColor to anything
   else on a button block; this rule wins regardless, so it'd just be
   confusing in the editor. Moderate radius instead of the block editor's
   default full-pill shape, and explicit padding (previously left to WP
   core's default, which is looser than this scale intends). */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-button__link {
	background-color: #E9BE3D !important;
	color: #414042 !important;
	font-size: 15px;
	border-radius: 6px;
	padding: 11px 22px;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-button__link:hover {
	background-color: #414042 !important;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-button__link:focus-visible {
	outline: 2px solid #414042;
	outline-offset: 2px;
}

/* The one deliberate exception to the gold-default rule: a button sitting
   on a gold section background (the Final CTA band) needs to invert —
   dark by default, gold on hover — or it has zero contrast against its
   own background. Opt in by adding the "ppes-btn-inverted" custom CSS
   class to that specific button block; don't apply this anywhere else. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-btn-inverted .wp-block-button__link {
	background-color: #414042 !important;
	color: #FFFFFF !important;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-btn-inverted .wp-block-button__link:hover {
	background-color: #E9BE3D !important;
	color: #414042 !important;
}

/* Variant of the above for a button sitting on a rust/orange section
   background (the Final CTA band) — dark by default, same as
   .ppes-btn-inverted, but swaps to rust on hover instead of gold so it
   doesn't clash with the section's own orange. Pair both classes on the
   button block: "ppes-btn-inverted ppes-btn-invert-rust". */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-btn-invert-rust .wp-block-button__link:hover {
	background-color: #E2542A !important;
	color: #FFFFFF !important;
}

/* Compact text for content sitting inside a padded "boxed" surface —
   testimonial cards, process step boxes, FAQ answers. The standard 1.6
   body line-height leaves real visible slack under the last line (half of
   the line-height "above" the descenders), which then stacks on top of the
   box's own bottom padding and makes these sections noticeably taller than
   they need to be. Tightening line-height specifically for boxed copy (not
   body copy generally, which keeps 1.6 for readability) removes that
   compounding without touching the box's actual padding. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-box-text {
	line-height: 1.45 !important;
}

/* Elevation: shadows are reserved for card-style surfaces (any group with
   both a background color and a custom border-radius — service cards,
   testimonial cards, promo boxes) and rounded images. Flat, full-width
   section bands never get a shadow. Sections are separated by background
   color alone — no border/divider lines are used anywhere in this template;
   that's a deliberate choice, not an oversight. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-group.has-background.has-custom-border {
	box-shadow: 0 2px 14px rgba(51, 51, 51, 0.08);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-group.has-background.has-custom-border:hover {
	box-shadow: 0 6px 20px rgba(51, 51, 51, 0.12);
	transform: translateY(-2px);
}

/* Equal-height cards: WP's columns stretch to match the tallest column by
   default, but a card's own inner group doesn't automatically fill that
   stretched height — it just sits at its natural content height, so
   shorter cards in a row look shorter. Stretching the column to a flex
   column and letting the card grow to fill it fixes service cards and
   testimonial cards without touching their markup. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-column {
	display: flex;
	flex-direction: column;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-column > .wp-block-group.has-background.has-custom-border {
	flex-grow: 1;
}

/* FAQ accordion, restyled as cards (matches service-card/testimonial card
   language elsewhere on the page) instead of a bare browser <details>/
   <summary> list with its default disclosure triangle. .wp-block-details
   and summary are both classes/elements WP's Details block already outputs
   — no markup change needed to hook these. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 14px 20px;
	margin-bottom: 8px;
	box-shadow: 0 2px 14px rgba(51, 51, 51, 0.06);
	transition: box-shadow 0.15s ease;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details:hover {
	box-shadow: 0 4px 18px rgba(51, 51, 51, 0.1);
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details summary::-webkit-details-marker {
	display: none;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details summary::after {
	content: "+";
	font-size: 22px;
	font-weight: 700;
	color: #E2542A;
	flex-shrink: 0;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details[open] summary::after {
	content: "\2212";
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details p {
	margin-top: 8px;
	margin-bottom: 0;
}

/* Portrait crop for the image-left/text-right sections (intro, process
   steps, promo offer, features list, secondary CTA). The source photo is a
   landscape shot (1920x1080-ish); a 3:4 portrait box + object-fit:cover
   crops it in-browser to actually fill the column instead of leaving
   whitespace above/below. Swap in a real portrait photo later and this
   still applies cleanly — no markup change needed either way. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-image.has-custom-border img {
	box-shadow: 0 2px 14px rgba(51, 51, 51, 0.08);
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: auto;
}

/* Per-image horizontal focus point within the 3:4 crop box above — each
   source photo is a full landscape shot, so the interesting part (the
   charger/connector/action) isn't always centered once cropped to
   portrait. Values picked by eye per image; object-position is the only
   thing that needs to change between desktop and mobile aspect ratios,
   since the underlying <img> is always the same uncropped file. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-img-pos-a img {
	object-position: 59% 50%;
}
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-img-pos-b img {
	object-position: 44% 50%;
}
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-img-pos-c img {
	object-position: 69% 50%;
}
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-img-pos-d img {
	object-position: 58% 50%;
}
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-img-pos-e img {
	object-position: 58% 50%;
}
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-img-pos-f img {
	object-position: 50% 40%;
}

/* Hero dark overlay. The background photo comes from the Group block's own
   native background-image support (safe — rendered server-side, not part of
   the saved/validated HTML). The dim overlay is plain CSS here instead, via
   a ::before layer, so hero text stays legible over any photo without
   needing WP's background-image and gradient supports to combine (untested,
   uncertain reliability) into one declaration. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-hero {
	position: relative;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(51, 51, 51, 0.65);
	z-index: 0;
}

:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-hero > * {
	position: relative;
	z-index: 1;
}

/* Tagline bar, overlaid across the top edge of the hero photo instead of
   stacked above it as a separate solid block. !important on position:
   overrides the generic ".ppes-hero > *" rule above (same specificity,
   but that rule sets relative — this one needs absolute to actually
   overlay). z-index above the hero's own ::before dim (0) and its other
   children (1) so the bar's text/pill never sits behind them. The bar's
   own background is semi-transparent rather than opaque so the photo
   still reads through slightly underneath it. */
:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-hero-bar {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: rgba(65, 64, 66, 0.55);
	/* This bar is a sibling of .ppes-hero's normal-flow content, not a
	   descendant in the box model sense that matters here — being
	   absolutely positioned, it sits outside .ppes-hero's own padding
	   box entirely, so it never inherited the 1.25em/2.375em padding
	   that WP core's default .wp-block-group.has-background rule gives
	   the hero (and every other alignfull section on this page — that
	   accidental rule is this site's actual mobile gutter). Left/right
	   only, mirroring that exact value, so the tagline text lines up
	   with the H1 at every viewport width instead of sitting flush
	   against the edge. */
	padding-left: 2.375em;
	padding-right: 2.375em;
}

/* Mobile: the hero's 40px top margin + 100px top padding (tuned for
   desktop) leaves a huge empty gap under the header on small screens.
   Section padding generally (60px) also reads too heavy once the viewport
   narrows. 782px matches WP core's own mobile breakpoint.
   Targeting .alignfull rather than matching the padding value as a text
   substring — the substring match was fragile (only caught exactly
   "padding-top:60px", so anything not on that exact value silently
   fell through) and .alignfull reliably identifies every one of our
   top-level section wrappers regardless of its specific padding. */
@media (max-width: 782px) {
	/* Was 26px on the hero vs 22px on every other section — the hero's value
	   was actually dead code anyway (a plain single-class selector loses to
	   the two-class .wp-block-group.alignfull selector below it, regardless
	   of source order), so this just makes the real, rendered value explicit
	   and identical everywhere instead of leaving a misleading number in
	   the hero rule that was never actually applied. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-hero {
		margin-top: 0 !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-group.alignfull {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	/* Section headings step down a notch on mobile — 38px reads oversized
	   once the viewport narrows enough to wrap most headings onto 2 lines.
	   !important needed here too — same Avada inline-style override as the
	   desktop rule above, and Avada's JS recalculates on every breakpoint. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) h2 {
		font-size: 36px !important;
	}

	/* Hero H1 wraps to 2-3 lines on mobile; the desktop 1.4 line-height reads
	   too loose stacked that tightly, so tighten it just for this breakpoint. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) h1 {
		line-height: 1.3 !important;
	}

	/* The <ul> element itself still carries the browser's own default
	   left padding/margin (~40px) — separate from and in addition to the
	   26px padding-left on each <li> for the bolt icon below. That default
	   is what was pushing the whole list further right than the paragraph
	   text above it; not something we'd ever set intentionally on any
	   viewport, but only actually noticeable once space is tight on mobile. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) ul {
		padding-left: 0;
		margin-left: 0;
	}

	/* Bolt-icon bullet lists (e.g. the "From straightforward charging..."
	   sub-points): desktop's 26px indent + 10px gap reads too roomy once
	   each item wraps to 3-4 lines on a narrow screen. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) ul li {
		padding-left: 20px;
	}

	:where(body.ppes-landing .post-content, .editor-styles-wrapper) li {
		margin-bottom: 6px;
	}

	/* Comparison table: on a narrow screen, 3 equal columns crush "Best
	   suited to" down to ~90px wide, forcing 5+ line wraps per cell and
	   blowing the section way out vertically. Standard mobile-table fix:
	   give the table breathing room via a min-width and let the container
	   scroll horizontally instead of forcing every cell to wrap that hard —
	   rows stay short, and swiping sideways to see the rest is a pattern
	   users already know from comparison/pricing tables everywhere. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) figure.wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-table table {
		min-width: 640px;
	}

	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-scroll-hint {
		display: block;
	}

	/* FAQ cards: same 12px gap + 20px/24px padding as desktop read as too
	   much air once each question wraps to 2 lines on a narrow screen. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-details {
		padding: 14px 16px;
		margin-bottom: 8px;
	}

	/* Image-left/text-right sections (intro, features list, process steps,
	   promo offer): the desktop 3:4 portrait crop exists to fill a side
	   column sitting next to text. On mobile these columns stack, so the
	   image runs full-width — a portrait box at full width is very tall
	   (up to ~440px), adding a lot of scroll for no extra information.
	   Switching to a landscape 3:2 box here (object-fit:cover still does
	   the cropping, off the same uncropped source file, just fitting a
	   shorter box) roughly halves that height. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-image.has-custom-border img {
		aspect-ratio: 3 / 2;
	}

	/* "From straightforward charging to fully integrated systems": a plain
	   two-column row (text col, then image col) with no separate heading
	   outside it, so swapping which column comes first on the stacked
	   mobile layout is just a flex order swap on the row's own children. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-columns > .ppes-col-image {
		order: -1;
	}

	/* "Our professional EV charger installation process": here the photo
	   lives inside the same row as the numbered steps, but the heading and
	   intro paragraph are separate siblings ABOVE that row — plain order
	   can only reorder direct flex children, so it can't reach past the
	   row wrapper to put the image ahead of the heading. display:contents
	   on the row lifts its two columns up to become direct children of the
	   same flex container as the heading/paragraph (the row's own margin
	   stops rendering once it's a contents box, hence the explicit
	   margin-bottom on the image column below to replace it), so all four
	   can share one order sequence: image, heading, paragraph, steps. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-intro {
		display: flex;
		flex-direction: column;
	}
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-row {
		/* WP core's "body .is-layout-flex { display:flex }" rule has higher
		   specificity (an element + a class) than this selector's single
		   class (:where() contributes zero), so it was winning and keeping
		   this row as its own flex box instead of dissolving into
		   .ppes-process-intro above. !important to actually win. */
		display: contents !important;
	}
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-intro .ppes-col-image,
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-intro .ppes-col-steps {
		/* Desktop's flex-basis:45%/55% inline styles would otherwise be
		   read as a HEIGHT now that the shared container is column-
		   direction, instead of the width they mean on desktop. */
		flex-basis: auto;
		width: 100%;
	}
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-intro .ppes-col-image {
		order: -1;
		margin-bottom: 16px;
	}
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-heading {
		order: 1;
	}
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-lead {
		order: 2;
	}
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-process-intro .ppes-col-steps {
		order: 3;
	}

	/* Process Steps without a photo (Air Conditioning): the 2-column grid
	   is too cramped once each column drops below ~350px, so stack to one
	   column at the same breakpoint as everything else on this page. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-steps-tab-grid {
		grid-template-columns: 1fr;
	}
}

/* Full-width CTAs below ~480px — a fixed-width button on a narrow phone
   screen leaves a lot of dead space beside it and shrinks the tap target
   below what a primary CTA deserves. Tablet and up keep the normal
   content-sized button (782px query above is untouched by this). */
@media (max-width: 480px) {
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-buttons {
		flex-direction: column;
		width: 100%;
	}

	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-button {
		width: 100%;
	}

	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .wp-block-button__link {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	/* Contact section's two trust badges: centered and given more breathing
	   room between them on a narrow phone screen — the desktop 10px gap felt
	   cramped once they're stacked full-width instead of side by side. */
	:where(body.ppes-landing .post-content, .editor-styles-wrapper) .ppes-badge-row {
		text-align: center;
		margin-top: 14px !important;
	}
}