/**
 * Palletways V2 — global styles that theme.json cannot express.
 *
 * Keep values pointing at presets (--wp--preset--*) or theme.json custom
 * values (--wp--custom--*) so a change in theme.json flows through here.
 * Block-specific CSS lives in assets/css/blocks/<namespace>/<block>.css and
 * only loads on pages that use that block.
 */

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--brand-green-subtle);
	color: var(--wp--preset--color--text-primary);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

:where(p, li) a {
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

/* Smooth hand-over when the colour mode changes, as in the design system. */
@media not (prefers-reduced-motion: reduce) {
	body,
	.wp-block-group,
	.wp-block-template-part {
		transition:
			background-color 0.5s ease,
			color 0.5s ease,
			border-color 0.5s ease;
	}
}

/*
 * Full-width sections stack edge to edge. Without this the root block gap
 * would show a strip of page background between two coloured sections.
 */
.is-layout-flow > .alignfull + .alignfull,
.is-layout-constrained > .alignfull + .alignfull,
.wp-site-blocks > * + footer.wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Form fields — Figma "field" component. theme.json sets the box (border,
 * 8px radius, 12/16 padding); this adds height and states. Typed text stays
 * 16px so iOS doesn't zoom on focus; the placeholder uses the 14px/300 style.
 * ---------------------------------------------------------------------- */
:where(input:is([type="text"], [type="email"], [type="search"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]), select, textarea) {
	box-sizing: border-box;
	min-height: 54px;
	color: var(--wp--preset--color--text-primary);
	font-family: inherit;
	transition:
		background-color 0.15s,
		border-color 0.15s,
		box-shadow 0.15s;

	&::placeholder {
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		opacity: 1;
	}

	&:hover:not(:focus, :disabled) {
		border-color: var(--wp--preset--color--border-bold);
	}

	&:focus {
		border-color: var(--wp--preset--color--focus);
	}

	&[aria-invalid="true"] {
		border-color: var(--wp--preset--color--error);
		box-shadow: 0 0 0 3px var(--wp--preset--color--error-subtle);
	}

	&:disabled {
		background-color: var(--wp--preset--color--surface-bold);
		border-color: var(--wp--preset--color--border-subtle);
		color: var(--wp--preset--color--text-disabled);
		cursor: not-allowed;
	}
}

/* -------------------------------------------------------------------------
 * Colour-mode helpers
 *
 * Add `pw-show-light` / `pw-show-dark` to an image or group (Advanced →
 * Additional CSS class) to pair a light and a dark asset, as the design
 * system does for the logo and hero photos.
 * ---------------------------------------------------------------------- */
:root[data-color-mode="dark"] .pw-show-light,
:root:not([data-color-mode="dark"]) .pw-show-dark {
	display: none !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-mode]) .pw-show-light {
		display: none !important;
	}

	:root:not([data-color-mode]) .pw-show-dark {
		display: revert !important;
	}
}

/* -------------------------------------------------------------------------
 * Section styles
 * ---------------------------------------------------------------------- */

/*
 * The navy section renders its contents in the dark colour scheme, so every
 * preset inside it (text, borders, buttons, links) flips automatically.
 */
.is-style-section-navy {
	color-scheme: dark;
}

.is-style-section-navy :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--text-primary);
}

/* Alerts: icon, title and message sit on one line, as in the Alert component. */
:where([class*="is-style-alert-"]).is-layout-flex {
	min-height: 5rem;
	align-items: center;
}

/* -------------------------------------------------------------------------
 * Paragraph styles
 * ---------------------------------------------------------------------- */
:is(p.is-style-tag, p.is-style-tag-brand, p.is-style-badge) {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	white-space: nowrap;
}

p.is-style-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	white-space: nowrap;
}

/* Step pill: "STEP 1", navy with beige text (beige with navy text in dark
   mode), tilted -2° as in the brand guide. Content is just the number. */
p.is-style-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: fit-content;
	padding: 5px 10px;
	background-color: light-dark(#0C1F6B, #E9E4DE) !important;
	color: light-dark(#E9E4DE, #0C1F6B) !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	rotate: -2deg;

	&::before {
		content: "Step\00a0";
	}
}

/* Tags: 11px uppercase on light blue, orange, pink or green (styles/blocks).
   Navy text except on pink, so each pill reads at 4.5:1 or better. */
:is(p.is-style-tag, p.is-style-tag-orange, p.is-style-tag-pink, p.is-style-tag-green) {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	white-space: nowrap;
}

/*
 * Highlight label — the green "marker" behind a few words of a heading
 * ("Pallet deliveries"). Applied from the toolbar's Highlight label format
 * (assets/js/editor.js), saved as <mark class="pw-highlight">.
 */
mark.pw-highlight {
	display: inline-block;
	margin-block: 0.08em;
	padding: 0.06em 0.32em 0.1em;
	border-radius: 0.28em;
	background-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--brand-ink);
	box-shadow: 0 0.12em 0 rgb(12 31 107 / 0.12);
	rotate: -2deg;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* In a hero the label sits on its own line above the rest of the headline. */
.pw-hero h1 mark.pw-highlight {
	margin-block-end: 0.12em;
}

/* Tags in a row: let a flex group of tags wrap instead of overflowing. */
.is-layout-flex:has(> p.is-style-tag, > p.is-style-tag-brand, > p.is-style-tag-orange, > p.is-style-tag-pink, > p.is-style-tag-green, > p.is-style-badge) {
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * Lists
 * ---------------------------------------------------------------------- */
ul.is-style-links,
ol.is-style-links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
	list-style: none;
	margin-inline: 0;
}

/* -------------------------------------------------------------------------
 * Separator
 * ---------------------------------------------------------------------- */
.wp-block-separator.is-style-accent {
	height: 6px;
	border: 0;
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Post terms as tags
 * ---------------------------------------------------------------------- */
.wp-block-post-terms.is-style-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 300;
	text-transform: uppercase;

	& .wp-block-post-terms__separator {
		display: none;
	}

	& a {
		padding: 4px 8px;
		border-radius: var(--wp--custom--radius--tag);
		background-color: var(--wp--preset--color--surface-bold);
		color: var(--wp--preset--color--text-secondary);
		text-decoration: none;
	}
}

/* -------------------------------------------------------------------------
 * Cards
 *
 * A card that holds a "read more" link at the bottom keeps it there even when
 * the cards in a row have different amounts of text.
 * ---------------------------------------------------------------------- */
:is(.is-style-card, .is-style-card-muted, .is-style-card-outline).is-layout-flex.is-vertical {
	height: 100%;
}

:is(.is-style-card, .is-style-card-muted, .is-style-card-outline) > .pw-push-end,
.is-layout-flex.is-vertical > .pw-push-end {
	margin-block-start: auto;
}

/*
 * Cards (brand guide, Oct 2026): 24px corners. Light mode: white with a soft
 * navy shadow. Dark mode: deep navy with a 1px beige outline at 22%.
 */
:is(.is-style-card, .is-style-card-outline, .pw-tp__card) {
	border: 1px solid light-dark(transparent, rgb(233 228 222 / 0.22)) !important;
	border-radius: var(--wp--custom--radius--xl) !important;
	background-color: var(--wp--preset--color--surface-raised) !important;
	box-shadow: light-dark(0 10px 30px rgb(12 31 107 / 0.08), none) !important;
}

/* Review cards inside the wizard would otherwise inherit its fixed navy. */
.pw-tp__card {
	color: var(--wp--preset--color--text-primary);
}

.is-style-card-outline {
	border-color: light-dark(rgb(12 31 107 / 0.18), rgb(233 228 222 / 0.22)) !important;
	box-shadow: none !important;
}

/* Muted card: white like the others in light mode (the guide has no grey
   card), translucent beige in dark mode, as the guide's secondary cards. */
.is-style-card-muted {
	background-color: light-dark(#FFFFFF, rgb(233 228 222 / 0.08)) !important;
	box-shadow: light-dark(0 10px 30px rgb(12 31 107 / 0.08), none) !important;
}

:root[data-color-mode="dark"] .is-style-card-muted {
	border: 1px solid rgb(233 228 222 / 0.18) !important;
	background-color: rgb(233 228 222 / 0.08) !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-mode]) .is-style-card-muted {
		border: 1px solid rgb(233 228 222 / 0.18) !important;
		background-color: rgb(233 228 222 / 0.08) !important;
	}
}

/* Post cards run the image edge to edge (top padding 0); without an image,
   give the text its padding back. */
.wp-block-post .is-style-card:not(:has(> .wp-block-post-featured-image)) {
	padding-top: var(--wp--preset--spacing--lg) !important;
}

/* Links that end with an arrow, e.g. "View prohibited items →". */
.pw-arrow-link a,
a.pw-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	font-weight: 600;
	text-decoration: none;

	&::after {
		content: "";
		width: var(--wp--custom--icon-size--lg);
		height: var(--wp--custom--icon-size--lg);
		background-color: currentColor;
		mask: url("../icons/caret-circle-right.svg") center / contain no-repeat;
		transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--transition-spring-smooth);
	}

	&:hover {
		text-decoration: underline;

		&::after {
			transform: translateX(3px);
		}
	}
}

/* "See more ↗" links in review cards. */
.pw-external-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--spacing--comp-x-xs);
	text-decoration: none;

	&::after {
		content: "";
		width: var(--wp--custom--icon-size--sm);
		height: var(--wp--custom--icon-size--sm);
		background-color: currentColor;
		mask: url("../icons/external-link.svg") center / contain no-repeat;
	}

	&:hover {
		text-decoration: underline;
	}
}

/* Trustpilot review card (patterns/trustpilot-reviews.php). */
.pw-review-card {
	min-height: 16.375rem;
}

/*
 * Trustpilot reviews, 2026 refresh: green "Trustpilot" eyebrow over a bold
 * title, a pill rating summary, raised cards with navy initials and green
 * "See more →" links. Covers the palletways-trustpilot block (.pw-tp) and
 * the theme's fallback pattern, so the plugin itself needs no change.
 */
.pw-tp__title,
.pw-reviews-title {
	color: var(--wp--preset--color--text-primary) !important;
	font-size: var(--wp--preset--font-size--headline-5) !important;
	font-weight: 800;
	line-height: 1.2;

	&::before {
		content: "Trustpilot";
		display: block;
		margin-block-end: 4px;
		color: var(--wp--preset--color--brand-brown);
		font-size: 0.6875rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		line-height: 1.2;
		text-transform: uppercase;
	}
}

.pw-tp__summary {
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text-primary);
	box-shadow: var(--wp--preset--shadow--elevation-1);
}

.pw-tp__summary-score {
	font-weight: 800;
}

.pw-tp__card {
	gap: 10px;
	padding: 18px 20px;
	border-radius: var(--wp--custom--radius--xl);
	background-color: var(--wp--preset--color--surface-raised);
	box-shadow: var(--wp--preset--shadow--elevation-2);
}

.pw-review-card {
	padding: 18px 20px !important;
}

.pw-tp__name {
	font-weight: 700;
}

.pw-tp__avatar,
p.is-style-avatar {
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--wp--preset--color--brand-ink);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	box-shadow: 0 0 0 1.5px light-dark(transparent, var(--wp--preset--color--white));
}

.pw-tp__more,
.pw-review-card .pw-external-link {
	color: var(--wp--preset--color--brand-green-bold) !important;
	font-weight: 700;
}

.pw-tp__more::after,
.pw-review-card .pw-external-link a::after {
	mask-image: url("../icons/arrow-right.svg");
}

/* Photo card with a navy scrim; the whole card is the link. */
.pw-feature-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--wp--preset--gradient--navy-scrim);
		pointer-events: none;
	}

	& :where(h2, h3, h4) {
		text-shadow: 0 1px 8px rgb(12 31 107 / 0.4);
	}

	& a {
		color: inherit;
		text-decoration: none;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
		}

		&:hover {
			text-decoration: underline;
		}
	}
}

/* -------------------------------------------------------------------------
 * Header (template part, "Sticky" style). The scroll state is set by the
 * palletways/header Interactivity store — see assets/js/header.js.
 * ---------------------------------------------------------------------- */
header.wp-block-template-part.is-style-sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.pw-site-header {
	border-bottom: 3px solid var(--wp--preset--color--brand-green);
	background-color: var(--wp--preset--color--surface);

	& > .pw-site-header__inner {
		min-height: var(--wp--custom--header--height);
		transition: min-height var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-standard);
	}

	@media not (prefers-reduced-motion: reduce) {
		transition: padding var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-standard);
	}

	/* Anything with this class only shows once the page has scrolled. */
	& .pw-header-reveal {
		display: none !important;
	}
}

.is-scrolled .pw-site-header {
	padding-block: var(--wp--custom--spacing--comp-y-sm) !important;

	& > .pw-site-header__inner {
		min-height: var(--wp--custom--header--height-compact);
	}

	& .pw-header-reveal {
		display: flex !important;
	}
}

/* The quote page is where "Get a quote" leads, so the header drops it there. */
.pw-is-quote-page .pw-site-header .pw-header-cta {
	display: none !important;
}

/*
 * Past step 1 the wizard shows its step tracker (or the order summary), so the
 * quote page's title only takes up room: hide it, close the gap it leaves and
 * pull the form up under the header (the section's padding is inline).
 */
:has(> .pw-quote-title + .pw-quote-form:not(.pw-order-received) :is(.pw-funnel__intro, .pw-complete)) {
	padding-top: var(--wp--preset--spacing--lg) !important;

	& > .pw-quote-title {
		display: none;
	}

	& > .pw-quote-title + * {
		margin-block-start: 0;
	}
}

/* In the editor, show the scroll-only items (faded) so they can be edited. */
.editor-styles-wrapper .pw-site-header .pw-show-tablet {
	display: grid !important;
	opacity: 0.6;
}

.editor-styles-wrapper .pw-site-header .pw-header-reveal {
	display: flex !important;
	opacity: 0.6;
}

/*
 * Responsive header. Everything fits from ~1280px; below that the header
 * gives up space in steps instead of overflowing:
 *   ≤1279px  colour toggle and account link become icon-only
 *   ≤1023px  only the logo and the menu button stay in the bar; the menu,
 *            toggle, account link, country switcher and "Get a quote" move
 *            into the drawer (parts/navigation.html, opened by The Framework
 *            Core's menu button)
 */
@media (max-width: 1279px) {
	.pw-site-header :is(.pw-toggle__label, .pw-account-link__label):not(.pw-drawer *) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

.pw-site-header .pw-show-tablet {
	display: none;
}

@media (max-width: 1023px) {
	.pw-site-header .pw-hide-tablet {
		display: none !important;
	}

	.pw-site-header .pw-show-tablet {
		display: grid;
	}
}

/* -------------------------------------------------------------------------
 * Drawer (mobile sheet) — parts/navigation.html
 * ---------------------------------------------------------------------- */
.pw-drawer {
	color: var(--wp--preset--color--text-primary);

	& .pw-drawer__top {
		min-height: var(--wp--custom--header--height);
	}

	/* Submenus are always open here, as headed groups. */
	& .wp-block-navigation .wp-block-navigation-submenu {
		flex-direction: column;
		align-items: flex-start;
	}

	& .wp-block-navigation .wp-block-navigation__submenu-container {
		flex-direction: column;
		align-items: flex-start;
		left: auto !important;
		top: auto !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		padding: var(--wp--preset--spacing--sm) 0 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		gap: var(--wp--preset--spacing--md);

		&::before {
			display: none;
		}

		& .wp-block-navigation-item__content {
			padding: 0 !important;
			color: var(--wp--preset--color--text-secondary);
		}

		& .wp-block-navigation-item__content:hover {
			background: none;
		}
	}

	& .wp-block-navigation__submenu-icon {
		display: none !important;
	}

	& .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--body-l);
		font-weight: 600;
		line-height: 1.4;
	}

	& .pw-drawer__functions {
		padding-top: var(--wp--preset--spacing--lg);
		border-top: 1px solid var(--wp--preset--color--border-subtle);
	}

	/* Open upwards: the switcher sits near the bottom of the drawer. */
	& .pw-site-switcher__menu {
		top: auto;
		bottom: calc(100% + var(--wp--preset--spacing--xs));
	}
}

/* The drawer's own panel follows the colour mode. */
.menu-content .wp-block-the-framework-navigation-drawer {
	background-color: var(--wp--preset--color--surface);
}

/* The framework sizes the drawer with 100vw, which includes a classic
   scrollbar; on narrow screens fill the visible viewport instead. */
@media (max-width: 30rem) {
	.wp-block-the-framework-menu + .menu-content {
		left: 0;
		right: 0;
	}

	.menu-content .wp-block-the-framework-navigation-drawer {
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 781px) {
	.pw-site-header .pw-hide-mobile {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Footer — navy in both colour modes (brand guide, Oct 2026). It uses the
 * "Section · navy" style, so everything inside renders in the dark scheme.
 * ---------------------------------------------------------------------- */
.pw-site-footer {
	border-top: 3px solid var(--wp--preset--color--brand-green);
}

/* "Europe's most trusted pallet network" as a tilted green pill. */
.pw-footer-tagline {
	width: fit-content;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--brand-green);
	color: #0C1F6B !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	rotate: -2deg;
}

.pw-site-footer.is-style-section-navy {
	background-color: var(--wp--custom--color--footer-bg) !important;
	color: var(--wp--preset--color--text-secondary) !important;

	& :where(a) {
		color: inherit;
	}

	& :where(h1, h2, h3, h4, h5, h6) {
		color: var(--wp--preset--color--text-primary);
	}
}

/* -------------------------------------------------------------------------
 * Hero (patterns/hero.php) — the photo is the group's background image, and
 * the copy sits on a soft fade so it stays readable, as in the design system.
 * ---------------------------------------------------------------------- */
.pw-hero {
	position: relative;
	isolation: isolate;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--wp--preset--gradient--hero-fade);
		pointer-events: none;
	}

	@media (max-width: 781px) {
		&::before {
			background: light-dark(rgb(233 228 222 / 0.82), rgb(12 31 107 / 0.85));
		}

		& .wp-block-buttons,
		& .wp-block-button,
		& .wp-block-button__link {
			width: 100%;
		}
	}
}

/*
 * Home hero, 2026 refresh: a shorter band, a display-size headline and a
 * smaller lede, no blue rule, and "Get a quote" ahead of "Track an order".
 * Written against the classes the hero pattern has always used, so pages
 * built from the earlier pattern pick up the new look without being edited.
 */
.pw-hero:not(.pw-hero--page) {
	min-height: min(44rem, 88svh) !important;
	border-bottom-width: 0 !important;

	& h1 {
		font-size: var(--wp--preset--font-size--display);
		line-height: 1.08;
		letter-spacing: -0.015em !important;
	}

	& p.has-body-strong-font-size {
		max-width: 34rem;
		font-size: var(--wp--preset--font-size--body-l) !important;
		font-weight: 500;
		line-height: 1.5 !important;
	}

	& .wp-block-buttons {
		gap: var(--wp--preset--spacing--sm);

		& > .wp-block-button:not(.is-style-secondary, .is-style-light, .is-style-ghost) {
			order: -1;
		}
	}

	/* Phones: keep "Pallet deliveries" on one line and the lede compact. */
	@media (max-width: 480px) {
		& h1 {
			font-size: 2rem !important;
		}

		& p.has-body-strong-font-size,
		& p.has-body-l-font-size {
			font-size: 1.0625rem !important;
		}
	}
}

/*
 * Dark mode background: a group with an image chosen under "Dark mode
 * background" (inc/design-system.php) shows it while the page is dark.
 * Heroes still on the theme's day photo without one get the night photo.
 * Saved pages link the day photo without a version, so it is set again
 * here with one to get past browser caches; the dark rules below win.
 */
.pw-hero[style*="hero-day.jpg"] {
	background-image: url("../images/hero-day.jpg?v=2") !important;
}

:root[data-color-mode="dark"] .has-dark-background {
	background-image: var(--pw-dark-bg) !important;
}

:root[data-color-mode="dark"] .pw-hero[style*="hero-day.jpg"]:not(.has-dark-background) {
	background-image: url("../images/hero-night.jpg?v=2") !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-mode]) .has-dark-background {
		background-image: var(--pw-dark-bg) !important;
	}

	:root:not([data-color-mode]) .pw-hero[style*="hero-day.jpg"]:not(.has-dark-background) {
		background-image: url("../images/hero-night.jpg?v=2") !important;
	}
}

/*
 * Page hero (patterns/page-hero.php, inc/page-sections.php): a stronger white
 * fade than the home hero so the dark-blue title and intro read over the
 * motorway photo, as in the Figma inner pages.
 */
.pw-hero--page {
	&::before {
		background: linear-gradient(85deg, light-dark(rgb(255 255 255 / 0.6), rgb(12 31 107 / 0.9)) 46%, light-dark(rgb(255 255 255 / 0), rgb(12 31 107 / 0.3)) 72%);
	}

	/* Phones: the photo sits behind the text, so drop the desktop height and
	   lay an even scrim over it. */
	@media (max-width: 781px) {
		min-height: 0 !important;
		padding-block: var(--wp--preset--spacing--4-xl) !important;

		&::before {
			background: light-dark(rgb(255 255 255 / 0.7), rgb(12 31 107 / 0.82));
		}
	}
}

.pw-hero--page .wp-block-the-framework-breadcrumbs {
	color: var(--wp--preset--color--text-secondary);
}

/* -------------------------------------------------------------------------
 * Page sections (inc/page-sections.php)
 * ---------------------------------------------------------------------- */

/* Content card text without the white box (About us). */
.pw-card-plain {
	padding: 32px 24px;
}

/* Cards stacked in one column keep their own height. */
.is-style-card.pw-card-auto.is-layout-flex.is-vertical {
	height: auto;
}

.is-style-card .wp-block-image:first-child {
	margin-block-end: var(--wp--preset--spacing--sm);
}

/* Photo call to action: white text straight on a dark photo, as in Figma.
   On phones the text covers the photo, so it gets a scrim there. */
.pw-cta-photo {
	/* Long button labels wrap instead of pushing the panel past its edge on phones. */
	& .wp-block-button__link {
		white-space: normal;
	}

	position: relative;
	isolation: isolate;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
	}

	& :where(h3, p) {
		width: 100%;
		margin: 0;
	}

	@media (max-width: 781px) {
		padding-inline: var(--wp--preset--spacing--lg) !important;

		&::before {
			background: rgb(12 31 107 / 0.6);
		}
	}
}

/*
 * Topics box (Preparing a pallet): stays in view beside the guide. The border
 * is set here rather than in the block (it predates the border-default slug
 * rename, when a block border colour also recoloured the text).
 */
.pw-topics {
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--preset--border-radius--lg);
	color: var(--wp--preset--color--text-primary);
	position: sticky;
	top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--lg));

	& p {
		margin: 0;
	}

	& a {
		color: inherit;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

/* The guide's headings were saved at weight 400; the guide sets 800. */
.pw-topics-layout :is(h2, h3)[id] {
	font-weight: 800 !important;
}

.pw-topics-layout :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--lg));
}

/* Category tags: the brand's light blue tag (paragraph "Tag" style). */
.pw-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	font-size: 0;

	& .wp-block-post-terms__separator {
		display: none;
	}

	& a {
		padding: 5px 12px;
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--wp--preset--color--accent-light-blue);
		color: var(--wp--preset--color--brand-navy);
		font-size: 0.6875rem;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.1em;
		text-decoration: none;
		text-transform: uppercase;

		&:hover {
			background-color: light-dark(#8FE6FF, #8FE6FF);
		}
	}
}

/* Blog cards: the photo runs edge to edge across the top of the card. */
.pw-post-card {
	overflow: hidden;
	min-width: 0;

	/* A flex column would otherwise let a wide image push its card past the grid track. */
	& > * {
		min-width: 0;
		max-width: 100%;
	}

	& .wp-block-post-featured-image {
		width: 100%;
	}

	& .wp-block-read-more {
		align-self: flex-start;
		margin-inline: var(--wp--preset--spacing--lg);
	}
}

/* -------------------------------------------------------------------------
 * Inner pages, brand guide Oct 2026 (About us, Why us, Services, Help Centre)
 * ---------------------------------------------------------------------- */

/* Page hero (inc/page-sections.php page_hero()): copy on the left, the truck
   photo as a rounded card on the right; the photo goes under the copy on
   phones. */
.pw-page-hero {
	& .wp-block-the-framework-breadcrumbs {
		color: var(--wp--preset--color--text-secondary);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	& h1 {
		line-height: 1.12;
	}

	& p {
		max-width: 34rem;
		color: var(--wp--preset--color--text-secondary);
	}

	& .wp-block-buttons {
		gap: var(--wp--preset--spacing--sm);
	}

	& .pw-photo img {
		object-position: 72% 50%;
	}
}

/* Screen-fitted heroes: the first screen below the header up to 1200px tall,
   phones included, and 70% of the screen above that (a full hero leaves the page
   looking empty there). Always on the home hero; a page hero opts in with the
   "Hero · full height" block style. A body class turns this on per site: see
   inc/design-system.php. */
.pw-hero-fit :is(.pw-hero:not(.pw-hero--page), .pw-page-hero.is-style-hero-full-height) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100svh - var(--wp--custom--header--height) - var(--wp-admin--admin-bar--height, 0px)) !important;

	& > * {
		width: 100%;
	}

	@media (min-height: 1201px) {
		min-height: 70svh !important;
	}
}

/* WordPress gives grid groups inline-size containment, so inside a vertical flex
   group they need an explicit width, or their rows come out far too tall. */
.is-layout-flex.is-vertical > .is-layout-grid {
	width: 100%;
}

/* Section label above a heading ("Error 404"), brown uppercase as in the
   guide's "Trustpilot" and "Who we are" labels. */
p.pw-eyebrow {
	margin-block-end: calc(var(--wp--preset--spacing--sm) * -1);
	color: light-dark(#8A7250, #BD9460);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Search on the 404 page: as wide as the intro. */
.pw-404-search {
	max-width: 34rem;
}

/* Search page (patterns/search.php): the query title at page-title size,
   text-only result cards, pill pagination. */
.pw-search-hero {
	& .wp-block-the-framework-breadcrumbs {
		color: var(--wp--preset--color--text-secondary);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	& p.pw-eyebrow {
		margin-block-end: 0;
	}

	& .wp-block-query-title {
		margin-block: 0;
		line-height: 1.12;
	}
}

.pw-search-results {
	& .wp-block-post-title a {
		color: inherit;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	& .wp-block-post-excerpt__excerpt {
		margin: 0;
	}

	& .wp-block-read-more {
		color: var(--wp--preset--color--brand-green-bold);
	}
}

.pw-search-empty {
	max-width: 44rem;
}

.pw-pagination {
	margin-block-start: var(--wp--preset--spacing--xxl);
	gap: var(--wp--preset--spacing--xs);
	font-weight: 700;

	& :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.5rem;
		min-height: 2.5rem;
		padding-inline: 0.75rem;
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--wp--preset--color--surface-raised);
		color: var(--wp--preset--color--text-primary);
		text-decoration: none;
	}

	& .page-numbers.current {
		background-color: light-dark(#0C1F6B, #E9E4DE);
		color: light-dark(#E9E4DE, #0C1F6B);
	}

	& .page-numbers.dots {
		background: none;
	}
}

/* Photo card: 24px corners and a soft navy shadow, as in the guide. */
.pw-photo {
	margin: 0;

	& img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--wp--custom--radius--xl);
		box-shadow: 0 18px 40px rgb(12 31 107 / 0.16);
	}
}

/* The CookieYes policy brings its own "Cookie Policy" H1; the page already has that title. */
#cky-policy-container .cookie-policy-h1 {
	display: none;
}

/*
 * Tables: core table blocks and the CookieYes cookie list share one look, a
 * rounded panel with a tinted header row and lines between the rows. Wide
 * tables scroll inside the panel on phones, so the page itself never does.
 * [class] and the longer selectors below outrank Framework Core's core-table.css,
 * whose zebra rows use a fixed light colour.
 */
:is(.wp-block-table[class], .cky-table-wrapper) {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-raised);
	--pw-table-cell-padding: 14px 16px;

	@media (max-width: 781px) {
		--pw-table-cell-padding: 10px 12px;
	}

	& table {
		width: 100%;
		border-collapse: collapse;

		/* Narrow screens fit the columns to their text, so "2200 mm" stays on one line. */
		@media (max-width: 781px) {
			table-layout: auto;
		}
	}

	/* Four columns or more of mixed length also fit to their text, and scroll on phones. */
	& table:has(tr > :nth-child(4)) {
		table-layout: auto;

		@media (max-width: 781px) {
			min-width: 38rem;
		}
	}

	& table thead {
		border: 0;
	}

	/* Rows carry the lines and the tint, so no seams show between cells. */
	& table tr:nth-child(n) {
		border-bottom: 1px solid var(--wp--preset--color--border-subtle);
		background: none;
	}

	& table tbody tr:last-child {
		border-bottom: 0;
	}

	& table tr > :is(th, td) {
		padding: var(--pw-table-cell-padding);
		border: 0;
		color: var(--wp--preset--color--text-primary);
		text-align: start;
		vertical-align: top;
		word-break: normal;
	}

	/* The header row. Some tables keep it as the first body row instead of a thead. */
	& table thead tr:nth-child(n),
	& table:not(:has(thead)) tr:first-child {
		background-color: var(--wp--preset--color--surface-bold);
	}

	& table thead tr > :is(th, td),
	& table:not(:has(thead)) tr:first-child > * {
		font-weight: 700;
	}
}

/* CookieYes injects fixed colours and 12px text; the ID outranks them so dark mode works. */
#cky-policy-container .cky-cookie-audit-table {
	& :is(th, td) {
		padding: var(--pw-table-cell-padding);
		border: 0;
		background: none;
		color: var(--wp--preset--color--text-primary);
		font-size: var(--wp--preset--font-size--small);
	}

	& td p {
		font-size: inherit;
		line-height: inherit;
	}
}

/* Photos beside text on the inner pages get the same card corners. */
.wp-block-post-content .wp-block-column > .wp-block-image:not(.pw-photo, .is-style-plain) img {
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: light-dark(0 18px 40px rgb(12 31 107 / 0.16), none);
}

/* Bulleted lists: brand-accent dots in turn (light blue, orange, pink). */
.wp-block-post-content ul.wp-block-list:not([class*="is-style-"]) {
	padding-inline-start: 1.25em;

	& > li {
		padding-inline-start: 0.25em;
	}

	& > li::marker {
		color: #5ED9FF;
		font-size: 1.25em;
	}

	& > li:nth-child(3n + 2)::marker {
		color: #FF6608;
	}

	& > li:nth-child(3n)::marker {
		color: #DE008F;
	}

	& > li + li {
		margin-block-start: 0.4em;
	}
}

/* Steps list style (styles/blocks/list-steps.json): a "STEP n" pill (as
   p.is-style-step-number) beside each item of a numbered list; other lists
   stay plain. The counter follows the list's "Start value", since some
   pages save every step as its own list (<ol start="2">, <ol start="3"> …). */
ol.wp-block-list.is-style-steps {
	counter-reset: pw-step;
	padding-inline-start: 0;
	list-style: none;

	& > li {
		position: relative;
		min-height: 1.6em;
		padding-inline-start: 5rem;
		counter-increment: pw-step;
	}

	& > li + li {
		margin-block-start: var(--wp--preset--spacing--sm);
	}

	&[start="2"] {
		counter-reset: pw-step 1;
	}

	&[start="3"] {
		counter-reset: pw-step 2;
	}

	&[start="4"] {
		counter-reset: pw-step 3;
	}

	&[start="5"] {
		counter-reset: pw-step 4;
	}

	&[start="6"] {
		counter-reset: pw-step 5;
	}

	&[start="7"] {
		counter-reset: pw-step 6;
	}

	&[start="8"] {
		counter-reset: pw-step 7;
	}

	&[start="9"] {
		counter-reset: pw-step 8;
	}

	&[start="10"] {
		counter-reset: pw-step 9;
	}

	&[start="11"] {
		counter-reset: pw-step 10;
	}

	&[start="12"] {
		counter-reset: pw-step 11;
	}

	& > li::before {
		content: "Step\00a0" counter(pw-step);
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0.1em;
		padding: 3px 9px;
		border-radius: var(--wp--custom--radius--pill);
		background-color: light-dark(#0C1F6B, #E9E4DE);
		color: light-dark(#E9E4DE, #0C1F6B);
		font-size: 0.6875rem;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		white-space: nowrap;
		rotate: -2deg;
	}
}

/* Photo call to action (cta_photo()): a navy card with the photo on its
   left third instead of a full-bleed photo band. Deep navy with a beige
   outline in dark mode, like the other dark cards. */
.pw-cta-photo {
	justify-content: flex-start !important;
	min-height: 18rem !important;
	padding-block: var(--wp--preset--spacing--3-xl) !important;
	/* A percentage here counts the full-width section around the card, so cap it at the card's own 40% on wide screens. */
	padding-inline: calc(min(40%, 0.4 * var(--wp--style--global--content-size)) + var(--wp--preset--spacing--3-xl)) var(--wp--preset--spacing--3-xl) !important;
	border: 1px solid light-dark(transparent, rgb(233 228 222 / 0.22));
	border-radius: var(--wp--custom--radius--xl);
	background-color: light-dark(#0C1F6B, #081650) !important;
	background-size: 0 0 !important;
	background-repeat: no-repeat !important;
	box-shadow: light-dark(0 18px 40px rgb(12 31 107 / 0.16), none);
	color-scheme: dark;

	/* The group's own background image, cropped into the left 40%. */
	&::after {
		content: "";
		position: absolute;
		inset: 0 60% 0 0;
		z-index: -1;
		background-image: inherit;
		background-size: cover;
		background-position: center;
		pointer-events: none;
	}

	& > .wp-block-group {
		flex-basis: auto !important;
		max-width: 36rem;
	}

	& h3 {
		color: #FFFFFF;
	}

	& p {
		color: rgb(233 228 222 / 0.82);
	}

	@media (max-width: 781px) {
		padding: calc(12rem + var(--wp--preset--spacing--lg)) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl) !important;

		&::before {
			display: none;
		}

		&::after {
			inset: 0 0 auto;
			height: 12rem;
		}
	}
}

/* Topics box (Preparing a pallet, FAQs): a white card with a brown
   "Topics" eyebrow; the links turn into green pills on hover. White in both
   colour modes, like the guide's other interactive cards. */
.pw-topics {
	padding: var(--wp--preset--spacing--md) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--xl) !important;
	background-color: #FFFFFF !important;
	box-shadow: 0 10px 30px rgb(12 31 107 / 0.1);
	color: #0C1F6B;
	color-scheme: light;

	& > :first-child:is(h2, h3, h4, h5, h6, p) {
		margin-block-end: var(--wp--preset--spacing--xs);
		color: #8A7250 !important;
		font-size: 0.6875rem !important;
		font-weight: 800 !important;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	& :is(h2, h3, h4, h5, h6, p, li):not(.pw-topics > :first-child) {
		font-size: var(--wp--preset--font-size--small) !important;
		font-weight: 700;
		line-height: 1.3 !important;
	}

	& a {
		display: block;
		margin-inline: -0.6rem;
		padding: 0.35rem 0.6rem;
		border-radius: var(--wp--custom--radius--sm);
		color: #0C1F6B !important;

		&:hover,
		&:focus-visible {
			background-color: #00C300;
			text-decoration: none;
		}
	}
}

/* FAQ accordions (The Framework Core accordion): white cards with a green
   round "+" in both colour modes, bold navy questions. */
details.wp-block-the-framework-accordion {
	--active-background-color: #FFFFFF;
	--active-border-color: transparent;
	--active-title-color: #0C1F6B;
	margin: 0;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--lg) !important;
	background-color: #FFFFFF !important;
	box-shadow: 0 8px 24px rgb(12 31 107 / 0.08);
	color: #0C1F6B;
	color-scheme: light;
	overflow: hidden;

	& > summary {
		align-items: center;
		color: #0C1F6B;

		& :is(h2, h3, h4, h5, h6) {
			margin: 0;
			color: inherit !important;
			font-size: var(--wp--preset--font-size--body) !important;
			font-weight: 700 !important;
		}

		& .icon {
			display: inline-grid;
			place-items: center;
			flex: 0 0 auto;
			width: 1.5rem;
			height: 1.5rem;
			border-radius: 50%;
			background-color: #00C300;
			color: #0C1F6B;

			& svg {
				width: 0.7rem;
				height: 0.7rem;
			}
		}
	}

	& .details-content {
		color: var(--wp--preset--color--text-secondary);
	}
}

.is-layout-flex:has(> details.wp-block-the-framework-accordion) {
	gap: var(--wp--preset--spacing--sm) !important;
}

/* -------------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------------- */
.pw-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * V1 group widths ("Medium Container" / "Small Container"), kept so older
 * content renders. New content: use the group's Layout → Content width.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-style-medium {
	max-width: var(--wp--custom--container--medium);
}

.wp-block-group.is-style-small {
	max-width: var(--wp--custom--container--small);
}

/* Alert title + divider + message (patterns/alert-*.php). */
:where([class*="is-style-alert-"]) > .pw-alert__title {
	flex-shrink: 0;
	padding-inline-end: var(--wp--preset--spacing--lg);
	margin-inline-end: calc(var(--wp--preset--spacing--lg) - var(--wp--preset--spacing--xs));
	border-inline-end: 2px solid currentColor;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

@media (max-width: 600px) {
	[class*="is-style-alert-"].is-layout-flex {
		flex-wrap: wrap !important;
	}

	:where([class*="is-style-alert-"]) > .pw-alert__title {
		border: 0;
		padding: 0;
		margin: 0;
	}
}