/*
Theme Name: Power Direct Generators
Theme URI: https://powerdirectgenerators.test
Author: Dom Abbott
Description: Website for Power Direct Generators — new, used and hire generators up to 200kVA. Classic theme: header and footer are PHP templates with menus from Appearance → Menus and logos/strap text from the Customizer; page sections ship as Gutenberg block patterns. Contact Form 7 for enquiries.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: powerdirect
*/

:root {
	--pdg-blue: #094FD1;
	--pdg-blue-deep: #06319A;
	--pdg-green: #B3D109;
	--pdg-green-dark: #9CB708;
	--pdg-ink: #0A0A0B;
	--pdg-paper: #FFFFFF;
	--pdg-haze: #F1F3F6;
	--pdg-rule: #DCE0E6;
	--pdg-mute: #5A6069;
	--pdg-on-dark: rgba(255, 255, 255, 0.82);
	--pdg-content: 1280px;
	--pdg-gutter: clamp(20px, 4vw, 28px);
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* ---------------------------------- Chrome layout

   header.php and footer.php are plain PHP templates, so the flex and max-width
   that core's block layout generates for block themes is declared here. The
   same goes for the horizontal gutter on full-width sections, which comes from
   theme.json root padding on .wp-site-blocks — an element only block themes
   output.
*/

.pdg-strip-inner,
.pdg-footer-inner,
.pdg-page-inner {
	max-width: var(--pdg-content);
	margin-inline: auto;
	padding-inline: var(--pdg-gutter);
}

.pdg-header-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 34px;
	max-width: var(--pdg-content);
	margin-inline: auto;
	padding-inline: var(--pdg-gutter);
}

/* Full-bleed sections constrain their own inner content, so the gutter sits on
   the section itself rather than on a wrapper around the content. */
.pdg-section,
.pdg-hero {
	padding-inline: var(--pdg-gutter);
}

/* Sections butt up against each other and the header/footer — no root gaps. */
.pdg-main > * + * { margin-block-start: 0; }

.pdg-strip-inner p,
.pdg-footer-bottom p { margin: 0; }

/* ---------------------------------- Generic section rhythm */

.pdg-section {
	padding-top: 88px;
	padding-bottom: 88px;
}

.pdg-bg-haze { background: var(--pdg-haze); }
.pdg-bg-ink { background: var(--pdg-ink); color: #fff; }
.pdg-bg-blue { background: var(--pdg-blue); color: #fff; }

.pdg-bg-ink a,
.pdg-bg-blue a { color: #fff; }

/* The skewed accent bar above a section heading. */
.pdg-flash {
	display: block;
	width: 88px;
	height: 8px;
	background: var(--pdg-green);
	transform: skewX(-20deg);
	margin-bottom: 26px;
}

.pdg-flash--blue { background: var(--pdg-blue); }

.pdg-lede {
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	color: var(--pdg-mute);
	max-width: 62ch;
	line-height: 1.5;
}

.pdg-bg-ink .pdg-lede,
.pdg-bg-blue .pdg-lede { color: var(--pdg-on-dark); }

/* Core's constrained layout forces `margin-inline: auto !important` on any
   child, so the header group stays full width and the measure is set on its
   own children instead — which keeps section headers left-aligned. */
.pdg-head { margin-bottom: 44px; }

.pdg-head > * { max-width: 56ch; }

.pdg-head h2 { margin-top: 0; }
.pdg-head p { margin-top: 16px; }

/* Highlighted words inside a heading take the green slab from the wireframe. */
h1 mark, h2 mark, h3 mark {
	background: var(--pdg-green);
	color: var(--pdg-ink);
	padding: 0.02em 0.18em;
	display: inline-block;
	transform: skewX(-6deg);
}

/* ---------------------------------- Buttons */

.pdg-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 17px 30px;
	border: 2px solid transparent;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: var(--pdg-green);
	color: var(--pdg-ink);
	transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.pdg-btn:hover,
.wp-block-button__link:hover { transform: translateY(-2px); }

.pdg-btn:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--pdg-green);
	outline-offset: 3px;
}

.pdg-btn--blue,
.wp-block-button.is-style-blue .wp-block-button__link { background: var(--pdg-blue); color: #fff; }

.pdg-btn--dark,
.wp-block-button.is-style-dark .wp-block-button__link { background: var(--pdg-ink); color: #fff; }

.pdg-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/* ---------------------------------- Top strip */

.pdg-strip {
	background: var(--pdg-ink);
	color: #fff;
	font-size: 0.83rem;
}

.pdg-strip-inner {
	display: flex;
	gap: 12px 26px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 11px;
	padding-bottom: 11px;
}

.pdg-strip-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
}

.pdg-strip-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.pdg-strip-link:hover { color: var(--pdg-green); }

.pdg-strip-link svg { color: var(--pdg-green); flex: none; }

/* ---------------------------------- Header */

.pdg-header {
	border-bottom: 1px solid var(--pdg-rule);
	position: sticky;
	top: 0;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(6px);
	z-index: 40;
	padding-top: 16px;
	padding-bottom: 16px;
}

.pdg-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex: none;
}

.pdg-logo img {
	max-width: 190px;
	height: auto;
	display: block;
}

.pdg-logo-text {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	line-height: 1.05;
	text-transform: uppercase;
	border: 2px solid var(--pdg-rule);
	padding: 9px 13px;
	color: var(--pdg-mute);
	max-width: 11ch;
}

.pdg-nav { display: flex; align-items: center; margin-left: auto; }

ul.pdg-menu {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pdg-menu a {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--pdg-ink);
	text-decoration: none;
	white-space: nowrap;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	display: block;
}

.pdg-menu a:hover,
.pdg-menu a:focus-visible { border-color: var(--pdg-green); }

.pdg-menu .current-menu-item > a { border-color: var(--pdg-green); }

/* The overlay-only controls stay hidden on desktop. */
.pdg-nav-cta,
.pdg-nav-phone,
.pdg-nav-close { display: none; }

.pdg-header-actions { display: flex; align-items: center; gap: 12px; }

.pdg-header-cta { padding: 12px 20px; font-size: 0.92rem; }

@media (max-width: 1240px) {
	.pdg-header-inner { gap: 20px; }
	ul.pdg-menu { gap: 16px; }
	.pdg-menu a { font-size: 0.875rem; }
	.pdg-header-cta { padding: 12px 15px; font-size: 0.875rem; }
}

/* ---------------------------------- Mobile nav (burger + overlay) */

.pdg-burger {
	display: none;
	background: var(--pdg-blue);
	color: #fff;
	border: 0;
	padding: 11px;
	cursor: pointer;
	line-height: 0;
}

@media (max-width: 1080px) {
	.pdg-header-inner { gap: 16px; }
	.pdg-header-cta { display: none; }
	.pdg-burger { display: flex; }
	.pdg-nav { display: none; }

	.pdg-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: fixed;
		inset: 0;
		z-index: 100;
		background: var(--pdg-ink);
		padding: 56px 24px calc(40px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
	}

	.pdg-nav.is-open ul.pdg-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		flex: 1;
	}

	.pdg-nav.is-open .pdg-menu a {
		display: block;
		color: #fff;
		font-family: var(--wp--preset--font-family--archivo-black);
		font-size: 1.35rem;
		text-transform: uppercase;
		letter-spacing: -0.01em;
		padding: 14px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.pdg-nav.is-open .pdg-nav-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 28px;
		background: var(--pdg-green);
		color: var(--pdg-ink);
		text-align: center;
		padding: 17px;
		font-weight: 700;
		text-decoration: none;
	}

	.pdg-nav.is-open .pdg-nav-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 12px;
		border: 2px solid rgba(255, 255, 255, 0.4);
		color: #fff;
		padding: 15px;
		font-weight: 700;
		text-decoration: none;
	}

	.pdg-nav.is-open .pdg-nav-close {
		display: flex;
		position: absolute;
		top: 16px;
		right: 20px;
		background: none;
		border: 0;
		color: #fff;
		padding: 8px;
		cursor: pointer;
		line-height: 0;
	}

	body.pdg-nav-locked { overflow: hidden; }
}

/* ---------------------------------- Hero */

/* Padding is symmetric so the centre-aligned image column reads as centred
   against the whole blue block, not just against the columns row. */
.pdg-hero {
	background: var(--pdg-blue);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding-top: 96px;
	padding-bottom: 96px;
}

/* The skewed green wash across the right of the hero. */
.pdg-hero::after {
	content: "";
	position: absolute;
	right: -8%;
	top: -30%;
	width: 46%;
	height: 180%;
	background: var(--pdg-green);
	transform: skewX(-20deg);
	opacity: 0.16;
	pointer-events: none;
}

/* Lift the hero content above the skewed wash so the photo isn't tinted. */
.pdg-hero > * { position: relative; z-index: 1; }

.pdg-hero h1 { margin-bottom: 0; }

.pdg-hero-sub {
	max-width: 54ch;
	margin-top: 28px;
	font-size: 1.12rem;
	color: rgba(255, 255, 255, 0.9);
}

.pdg-hero .wp-block-buttons { margin-top: 36px; gap: 14px; }

/* The image column is centre-aligned, so the figure centres itself within it
   rather than filling the column edge to edge. */
.pdg-hero figure.wp-block-image {
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.pdg-hero figure.wp-block-image img {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 900px) {
	.pdg-hero { padding-top: 64px; padding-bottom: 64px; }
}

/* ---------------------------------- Trust strip */

.pdg-trust {
	background: var(--pdg-ink);
	color: #fff;
	padding: 28px var(--pdg-gutter);
}

.pdg-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	max-width: var(--pdg-content);
	margin-inline: auto;
}

.pdg-trust-grid b {
	display: block;
	color: var(--pdg-green);
	font-size: 0.97rem;
}

.pdg-trust-grid span {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 820px) {
	.pdg-trust-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------- Route cards (buy / used / hire) */

.pdg-routes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--pdg-rule);
	border: 2px solid var(--pdg-ink);
}

.pdg-route {
	background: var(--pdg-paper);
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pdg-route-k {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 1.5rem;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -0.02em;
}

.pdg-route-k em { font-style: normal; color: var(--pdg-blue); }

.pdg-route p { font-size: 0.98rem; color: var(--pdg-mute); margin: 0; }

.pdg-route-best {
	border-left: 6px solid var(--pdg-green);
	padding: 10px 0 10px 14px;
	font-weight: 600;
	color: var(--pdg-ink);
	font-size: 0.95rem;
}

.pdg-route-go {
	margin-top: auto;
	font-weight: 700;
	color: var(--pdg-blue);
	text-decoration: none;
	border-bottom: 2px solid var(--pdg-green);
	align-self: flex-start;
	padding-bottom: 2px;
}

@media (max-width: 900px) {
	.pdg-routes { grid-template-columns: 1fr; }
}

/* ---------------------------------- Sizing tool */

.pdg-tool {
	background: #fff;
	border: 2px solid var(--pdg-ink);
	margin-top: 8px;
}

.pdg-qgrid { display: grid; grid-template-columns: repeat(4, 1fr); }

.pdg-q {
	padding: 26px 24px;
	border-right: 1px solid var(--pdg-rule);
	border-bottom: 1px solid var(--pdg-rule);
}

.pdg-q:last-child { border-right: 0; }

.pdg-q-step {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--pdg-mute);
	display: block;
	margin-bottom: 6px;
}

.pdg-q h3 {
	font-size: 1.18rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

.pdg-opts { display: flex; flex-wrap: wrap; gap: 7px; }

.pdg-opt {
	border: 2px solid var(--pdg-rule);
	background: #fff;
	padding: 8px 13px;
	font: 600 0.85rem var(--wp--preset--font-family--archivo);
	cursor: pointer;
	color: var(--pdg-ink);
}

.pdg-opt:hover { border-color: var(--pdg-ink); }

.pdg-opt:focus-visible { outline: 3px solid var(--pdg-blue); outline-offset: 2px; }

.pdg-opt[aria-pressed="true"] {
	background: var(--pdg-ink);
	color: #fff;
	border-color: var(--pdg-ink);
}

@media (max-width: 980px) {
	.pdg-qgrid { grid-template-columns: 1fr 1fr; }
	.pdg-q:nth-child(2) { border-right: 0; }
}

@media (max-width: 620px) {
	.pdg-qgrid { grid-template-columns: 1fr; }
	.pdg-q { border-right: 0; }
}

.pdg-result {
	background: var(--pdg-blue);
	color: #fff;
	padding: 32px 28px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 28px;
	align-items: center;
}

.pdg-result-big {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: clamp(1.5rem, 3vw, 2.3rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0;
}

.pdg-result-sub {
	margin: 12px 0 0;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.88);
	max-width: 60ch;
}

.pdg-result-notes {
	margin-top: 14px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pdg-result-notes span {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 5px 11px;
	font-size: 0.82rem;
}

@media (max-width: 820px) {
	.pdg-result { grid-template-columns: 1fr; }
}

.pdg-human {
	padding: 22px 28px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	font-weight: 600;
}

.pdg-human a {
	color: var(--pdg-blue);
	border-bottom: 2px solid var(--pdg-green);
	text-decoration: none;
	padding-bottom: 2px;
}

/* ---------------------------------- Browse by output / application */

.pdg-bands {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.pdg-band {
	border: 2px solid var(--pdg-ink);
	padding: 22px 18px;
	text-decoration: none;
	display: block;
	background: #fff;
	transition: background-color 0.12s ease;
}

.pdg-band:hover { background: var(--pdg-green); }

.pdg-band b {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 1.22rem;
	display: block;
	line-height: 1;
	letter-spacing: -0.02em;
}

.pdg-band span {
	font-size: 0.82rem;
	color: var(--pdg-mute);
	display: block;
	margin-top: 8px;
}

.pdg-band:hover span { color: var(--pdg-ink); }

@media (max-width: 1000px) { .pdg-bands { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px) { .pdg-bands { grid-template-columns: 1fr 1fr; } }

.pdg-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.pdg-chip {
	border: 2px solid var(--pdg-rule);
	padding: 11px 17px;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--pdg-ink);
}

.pdg-chip:hover { border-color: var(--pdg-ink); }

/* ---------------------------------- Check lists (used stock) */

.pdg-checks {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 13px;
}

.pdg-checks li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 1rem;
}

.pdg-bg-ink .pdg-checks li { color: rgba(255, 255, 255, 0.9); }

.pdg-checks li::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: var(--pdg-green);
	transform: skewX(-20deg);
	margin-top: 6px;
}

/* ---------------------------------- Brands */

.pdg-brandrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 26px 0;
	align-items: center;
}

.pdg-brandrow figure.wp-block-image {
	margin: 0;
	border: 2px solid var(--pdg-rule);
	padding: 24px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 104px;
}

.pdg-brandrow figure.wp-block-image img { max-height: 54px; width: auto; }

@media (max-width: 680px) { .pdg-brandrow { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------- Guides */

.pdg-ggrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Not links — the card is the whole guide. No hover lift, because nothing
   happens on click. */
.pdg-guide {
	background: #fff;
	padding: 30px 26px;
	border-top: 8px solid var(--pdg-blue);
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.pdg-guide:nth-child(3n-1) { border-top-color: var(--pdg-green); }

.pdg-guide h3 { margin: 0; font-size: 1.18rem; line-height: 1.2; }

.pdg-guide p { font-size: 0.95rem; color: var(--pdg-mute); margin: 0; }

@media (max-width: 960px) { .pdg-ggrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pdg-ggrid { grid-template-columns: 1fr; } }

/* ---------------------------------- Parts & support */

.pdg-ticks {
	list-style: none;
	margin: 26px 0 30px;
	padding: 0;
	display: grid;
	gap: 11px;
	font-weight: 600;
}

.pdg-ticks li { padding-left: 22px; position: relative; }

.pdg-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 11px;
	height: 5px;
	background: var(--pdg-green);
	transform: skewX(-20deg);
}

/* ---------------------------------- Closing CTA */

.pdg-cta {
	background: var(--pdg-blue);
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.pdg-cta::before {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -60%;
	width: 40%;
	height: 160%;
	background: var(--pdg-green);
	transform: skewX(-20deg);
	opacity: 0.15;
	pointer-events: none;
}

.pdg-cta > * { position: relative; }

.pdg-cta h2 { max-width: 20ch; margin-inline: auto; }

.pdg-cta .pdg-lede,
.has-text-align-center > .pdg-lede { margin-inline: auto; }

.pdg-cta .pdg-lede { margin: 22px auto 0; text-align: center; }

.pdg-cta .wp-block-buttons { justify-content: center; margin-top: 34px; gap: 14px; }

.pdg-cta-note {
	display: block;
	margin-top: 22px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
}

/* ---------------------------------- Contact section */

.pdg-contact-grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.pdg-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

.pdg-form-card {
	background: #fff;
	border: 2px solid var(--pdg-ink);
	padding: 32px 30px;
	color: var(--pdg-ink);
}

.pdg-form-card h3 { margin: 0 0 6px; font-size: 1.4rem; }

.pdg-form-card .pdg-card-sub {
	color: var(--pdg-mute);
	font-size: 0.95rem;
	margin: 0 0 20px;
}

.pdg-talk-card {
	border-left: 6px solid var(--pdg-green);
	padding: 18px 0 18px 18px;
	margin-top: 28px;
}

.pdg-talk-card strong { display: block; font-size: 0.95rem; }

.pdg-talk-phone {
	display: block;
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 1.8rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	margin: 4px 0;
}

.pdg-talk-card small { color: var(--pdg-on-dark); font-size: 0.85rem; }

/* ---------------------------------- Contact Form 7 */

.pdg-cf7-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}

/* Let grid items shrink below their content's intrinsic width so the controls
   stay inside their track instead of blowing the cell out. */
.pdg-cf7-grid .pdg-field { min-width: 0; }

.pdg-cf7-grid .pdg-field-full { grid-column: 1 / -1; }

@media (max-width: 520px) {
	.pdg-cf7-grid { grid-template-columns: 1fr; }
}

.pdg-field label {
	display: block;
	font-size: 0.84rem;
	font-weight: 700;
	margin-bottom: 6px;
}

.pdg-field .wpcf7-form-control-wrap { display: block; width: 100%; }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	border: 2px solid var(--pdg-rule);
	border-radius: 0;
	padding: 12px 14px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	color: var(--pdg-ink);
}

.wpcf7 textarea { min-height: 110px; }

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 3px solid var(--pdg-blue);
	outline-offset: -1px;
	border-color: var(--pdg-blue);
}

/* Route radio pills (buy new / used / hire / not sure) */

.pdg-route-pick .wpcf7-radio { display: flex; gap: 8px; flex-wrap: wrap; }

.pdg-route-pick .wpcf7-list-item { margin: 0; flex: 1; min-width: 104px; }

.pdg-route-pick .wpcf7-list-item label {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--pdg-rule);
	padding: 11px 10px;
	font-size: 0.84rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	margin: 0;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.pdg-route-pick .wpcf7-list-item input { position: absolute; opacity: 0; }

.pdg-route-pick .wpcf7-list-item label:has(input:checked) {
	border-color: var(--pdg-ink);
	background: var(--pdg-ink);
	color: #fff;
}

.pdg-cf7-submit { margin: 18px 0 0; }

.pdg-cf7-submit .wpcf7-submit {
	width: 100%;
	background: var(--pdg-green);
	color: var(--pdg-ink);
	border: 0;
	padding: 17px 30px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.pdg-cf7-submit .wpcf7-submit:hover { background: var(--pdg-green-dark); }

.pdg-form-smallprint {
	text-align: center;
	font-size: 0.78rem;
	color: var(--pdg-mute);
	margin-top: 12px;
}

.wpcf7-not-valid-tip { font-size: 0.72rem; color: #C53015; margin-top: 4px; }

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	border-radius: 0;
	font-size: 0.85rem;
	padding: 10px 14px;
	border-width: 2px;
}

.wpcf7 form.sent .wpcf7-response-output { border-color: #2E7D32; color: #2E7D32; }

/* The sizing tool hands its answers to this hidden field. */
.pdg-field-hidden { display: none; }

/* ---------------------------------- Footer */

.pdg-footer {
	background: var(--pdg-ink);
	color: rgba(255, 255, 255, 0.7);
	padding-top: 64px;
	font-size: 0.9rem;
}

.pdg-footer h4 {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-weight: 400;
	color: var(--pdg-green);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.pdg-footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }

.pdg-footer a:hover { color: var(--pdg-green); }

.pdg-footer p { margin: 0 0 12px; }

.pdg-footer-cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 40px;
}

.pdg-footer-col--brand .pdg-logo { margin-bottom: 14px; }

.pdg-footer-col--brand .pdg-logo img { max-width: 190px; }

.pdg-footer-col--brand .pdg-logo-text { color: #fff; border-color: rgba(255, 255, 255, 0.25); }

.pdg-footer-col--brand > p { max-width: 34ch; }

ul.pdg-footer-menu,
ul.pdg-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

ul.pdg-footer-contact { margin: 18px 0 0; gap: 11px; }

.pdg-footer-contact li { display: flex; align-items: flex-start; gap: 10px; }

.pdg-footer-contact svg { flex: 0 0 auto; margin-top: 3px; color: var(--pdg-green); }

.pdg-icon-whatsapp svg { color: #25D366; }

.pdg-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	margin-top: 44px;
	padding: 22px 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.82rem;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}

ul.pdg-legal-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pdg-legal-menu li { margin: 0; }

/* Dot separator between legal links */
.pdg-legal-menu li + li::before { content: "·"; margin: 0 10px; }

@media (max-width: 1100px) { .pdg-footer-cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .pdg-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pdg-footer-cols { grid-template-columns: 1fr; } }

/* ---------------------------------- Social links

   One rule set for both placements (template-parts/social-links.php). Declared
   after the strip and footer so the plain `a` colours in those sections lose
   the specificity tie and the icons inherit their container's colour instead.
*/

ul.pdg-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

ul.pdg-social li { margin: 0; }

.pdg-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: inherit;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.pdg-social a:hover,
.pdg-social a:focus-visible { background: var(--pdg-green); color: var(--pdg-ink); }

.pdg-social--footer { margin-top: 20px; margin-left: -6px; }

/* ---------------------------------- Generic page content */

.pdg-page-inner { padding-block: 0; }

.pdg-page-inner h1 { margin-bottom: 24px; }

.pdg-page-inner > * + * { margin-top: 1.1em; }

/* ---------------------------------- Generator listings

   The filter bar reuses .pdg-bands and .pdg-chips wholesale — they were already
   the right components — and adds an .is-on state borrowed from the sizing
   tool's .pdg-opt[aria-pressed="true"].
*/

.pdg-filters {
	border: 2px solid var(--pdg-ink);
	padding: 22px;
	margin-bottom: 32px;
	display: grid;
	gap: 14px;
}

.pdg-filter-bands { gap: 10px; }

.pdg-band.is-on,
.pdg-chip.is-on {
	background: var(--pdg-ink);
	border-color: var(--pdg-ink);
	color: #fff;
}

.pdg-band.is-on span { color: rgba(255, 255, 255, 0.75); }

.pdg-filters .pdg-chips { margin-top: 0; }

.pdg-filter-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	border-top: 1px solid var(--pdg-rule);
	padding-top: 16px;
}

.pdg-filter-count { margin: 0; font-size: 0.92rem; color: var(--pdg-mute); }
.pdg-filter-count strong { color: var(--pdg-ink); }

.pdg-sorts { margin-left: auto; }
.pdg-sorts .pdg-chip { padding: 7px 12px; font-size: 0.84rem; }

.pdg-filter-clear {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--pdg-blue);
	text-decoration: none;
	border-bottom: 2px solid var(--pdg-green);
	padding-bottom: 2px;
}

@media (max-width: 720px) {
	.pdg-sorts { margin-left: 0; }
}

/* ---------------------------------- Unit cards */

.pdg-units { margin-top: 0; }

.pdg-unit {
	border: 2px solid var(--pdg-ink);
	background: #fff;
	text-decoration: none;
	color: var(--pdg-ink);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.pdg-unit:hover,
.pdg-unit:focus-visible {
	box-shadow: 14px 14px 0 var(--pdg-ink);
	transform: translate(-2px, -2px);
}

.pdg-unit-media {
	position: relative;
	border-bottom: 2px solid var(--pdg-ink);
	background: var(--pdg-haze);
}

.pdg-unit-media img {
	display: block;
	width: 100%;
	/* height:auto is load-bearing. WordPress prints width/height attributes on a
	   real featured image, which act as a specified height — and aspect-ratio
	   only computes a height when height is auto. Without this, uploaded photos
	   render at their full attribute height while the SVG placeholder (which has
	   no such attributes) crops correctly, so the grid goes ragged. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* kVA badge — the skewed green slab used throughout the site. */
.pdg-unit-k {
	position: absolute;
	left: 0;
	bottom: 14px;
	background: var(--pdg-green);
	color: var(--pdg-ink);
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	padding: 7px 16px 7px 14px;
	transform: skewX(-12deg);
	transform-origin: left bottom;
}

.pdg-unit-body {
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.pdg-unit-title {
	font-size: 1.1rem;
	line-height: 1.15;
	margin: 0;
}

.pdg-unit-line { font-size: 0.9rem; color: var(--pdg-mute); margin: 0; }

.pdg-unit-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.pdg-unit-tags span {
	border: 1.5px solid var(--pdg-rule);
	padding: 3px 9px;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pdg-mute);
}

.pdg-unit-foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--pdg-rule);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.pdg-price {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: 1.3rem;
	letter-spacing: -0.02em;
}

.pdg-price small { font-family: var(--wp--preset--font-family--archivo); font-size: 0.8rem; font-weight: 600; color: var(--pdg-mute); }

.pdg-unit-go {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--pdg-blue);
	border-bottom: 2px solid var(--pdg-green);
	padding-bottom: 2px;
}

/* ---------------------------------- Empty state */

.pdg-empty {
	border: 2px dashed var(--pdg-rule);
	padding: 48px 32px;
	text-align: left;
}

.pdg-empty h3 { font-size: 1.5rem; margin: 0 0 12px; }
.pdg-empty p { color: var(--pdg-mute); max-width: 56ch; margin: 0; }

.pdg-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pdg-empty .pdg-btn--ghost { color: var(--pdg-ink); }

/* ---------------------------------- Single unit */

.pdg-unit-head { padding-bottom: 40px; }

/* Yoast renders this as nested spans with a » between them, so the current
   page is styled off .breadcrumb_last rather than :last-child. */
.pdg-breadcrumb { font-size: 0.88rem; margin: 0 0 22px; color: var(--pdg-mute); }
.pdg-breadcrumb a { color: var(--pdg-mute); text-decoration: none; border-bottom: 2px solid var(--pdg-green); padding-bottom: 2px; }
.pdg-breadcrumb a:hover { color: var(--pdg-ink); }
.pdg-breadcrumb .breadcrumb_last { color: var(--pdg-ink); font-weight: 600; }

.pdg-unit-head h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-bottom: 18px; }

.pdg-unit-head .pdg-unit-tags { margin-bottom: 24px; }

.pdg-unit-price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	border-top: 2px solid var(--pdg-ink);
	padding-top: 22px;
}

.pdg-unit-price .pdg-price { font-size: 2rem; }
.pdg-unit-price .pdg-btn { margin-left: auto; }

@media (max-width: 680px) {
	.pdg-unit-price .pdg-btn { margin-left: 0; width: 100%; justify-content: center; }
}

.pdg-unit-main {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.pdg-unit-main { grid-template-columns: 1fr; gap: 40px; }
}

.pdg-unit-photo { margin: 0 0 28px; border: 2px solid var(--pdg-ink); }
.pdg-unit-photo img { display: block; width: 100%; height: auto; }

.pdg-unit-content > * + * { margin-top: 1.1em; }

.pdg-unit-docs { margin-top: 28px; }
.pdg-unit-docs a { color: var(--pdg-blue); font-weight: 600; }

.pdg-spec-head { font-size: 1.2rem; margin: 0 0 16px; }

.pdg-spec {
	margin: 0;
	border-top: 2px solid var(--pdg-ink);
}

.pdg-spec > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pdg-rule);
}

.pdg-spec dt { font-size: 0.88rem; color: var(--pdg-mute); margin: 0; }
.pdg-spec dd { font-weight: 700; font-size: 0.92rem; margin: 0; text-align: right; }

.pdg-unit-single .pdg-contact-grid { align-items: start; }