/**
 * pchs/trust-seals
 *
 * The plate behind each logo is always white: the seals are supplied as
 * artwork on white, and the row usually sits on navy.
 */

.pchs-sample-chip {
	display: inline-block;
	margin-inline-start: 0.4em;
	padding: 0.15em 0.4em;
	border: 1px solid var(--wp--custom--color--sample-border);
	border-radius: var(--wp--custom--radius--xxs);
	background: var(--wp--custom--color--sample-bg);
	color: var(--wp--custom--color--sample-ink);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.2;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.pchs-trust-seals {
	--pchs-pad-x: var(--wp--preset--spacing--50);

	padding-block: var(--wp--custom--section--y);
}

@media (min-width: 48em) {
	.pchs-trust-seals {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

.pchs-trust-seals--navy-deep {
	background: var(--wp--preset--color--navy-deep);
}

.pchs-trust-seals--navy {
	background: var(--wp--preset--color--navy);
}

.pchs-trust-seals--base {
	background: var(--wp--preset--color--base);
	border-block: 1px solid var(--wp--preset--color--border);
}

.pchs-trust-seals--surface {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--border);
}

.pchs-trust-seals__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pchs-pad-x);
	box-sizing: border-box;
	text-align: center;
}

.pchs-trust-seals__title {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.4;
	text-transform: uppercase;
}

.pchs-trust-seals--navy-deep .pchs-trust-seals__title,
.pchs-trust-seals--navy .pchs-trust-seals__title {
	color: var(--wp--custom--color--border-cool-2);
}

.pchs-trust-seals--base .pchs-trust-seals__title,
.pchs-trust-seals--surface .pchs-trust-seals__title {
	color: var(--wp--preset--color--muted);
}

/* A centred wrapping row: a short last row sits in the middle instead of
   leaving one seal at the left edge (4 seals at 768 went 3 + 1). */
.pchs-trust-seals__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* As wide as its tile: the 8rem logo box plus the plate's padding. */
.pchs-trust-seals__seal {
	flex: 0 0 calc(8rem + 2 * var(--wp--preset--spacing--30));
}

/* Four seals do not fit one row until 62em, and three plus one reads as a
   leftover; two by two until then. */
@media (max-width: 61.99em) {
	.pchs-trust-seals--grid .pchs-trust-seals__list {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
	}
}

/*
 * A centred tile rather than a full-width bar.
 *
 * The client read the old plates as "unnatural and unfinished" (2026-09-20),
 * and the reason is that they spanned the whole grid cell: a row of wide white
 * slabs on navy, each holding a differently-shaped logo. The white itself has
 * to stay. Two of the seals ship without an alpha channel — BBB A+ is drawn on
 * white and the Qualified Remodeler badge is a solid square — so removing the
 * plate would not remove the rectangle, it would only remove the rounding from
 * it. Sizing the plate to the logo instead, with a rounder corner and a hairline
 * edge, makes the same white read as a badge tile someone chose.
 */
/*
 * One fixed box per logo, the logo contained inside it. The sources are all
 * different shapes (Good Housekeeping 160x90, BBB 160x63, Top 500 and Angi
 * square), and a box sized to each made the square badges tower over the wide
 * ones. The same box for all four evens their optical weight.
 */
.pchs-trust-seals__plate {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: 8rem;
	height: 5rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--navy-deep) 12%, transparent );
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
}

.is-awaiting-logo .pchs-trust-seals__plate,
.is-awaiting-confirmation .pchs-trust-seals__plate {
	/* A dashed plate reads as "placeholder" before anyone reads the note. */
	border: 1px dashed var(--wp--custom--color--border-cool-2);
}

.pchs-trust-seals__logo {
	max-width: 7.5rem;
	max-height: 4.5rem;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.pchs-trust-seals__mark {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--weight--heavy);
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.25;
	text-transform: uppercase;
	text-wrap: balance;
}

.pchs-trust-seals__label {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.35;
	text-wrap: balance;
}

/*
 * Grid only: "A+ Central Illinois office" wraps to two lines while the other
 * three labels stay on one, so the sublabels sat 19px apart on the home page at
 * 1440. Hold two lines so every sublabel starts on the same row.
 */
.pchs-trust-seals--grid .pchs-trust-seals__label {
	min-height: 2lh;
}

.pchs-trust-seals__sublabel,
.pchs-trust-seals__note {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
}

.pchs-trust-seals--navy-deep .pchs-trust-seals__label,
.pchs-trust-seals--navy .pchs-trust-seals__label {
	color: var(--wp--preset--color--border-cool);
}

.pchs-trust-seals--navy-deep .pchs-trust-seals__sublabel,
.pchs-trust-seals--navy .pchs-trust-seals__sublabel,
.pchs-trust-seals--navy-deep .pchs-trust-seals__note,
.pchs-trust-seals--navy .pchs-trust-seals__note {
	color: var(--wp--custom--color--border-cool-2);
}

.pchs-trust-seals--base .pchs-trust-seals__sublabel,
.pchs-trust-seals--surface .pchs-trust-seals__sublabel,
.pchs-trust-seals--base .pchs-trust-seals__note,
.pchs-trust-seals--surface .pchs-trust-seals__note {
	color: var(--wp--preset--color--muted);
}

.pchs-trust-seals__footnote {
	max-width: 60ch;
	margin: var(--wp--preset--spacing--50) auto 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.pchs-trust-seals--navy-deep .pchs-trust-seals__footnote,
.pchs-trust-seals--navy .pchs-trust-seals__footnote {
	color: var(--wp--custom--color--border-cool-2);
}

.pchs-trust-seals--base .pchs-trust-seals__footnote,
.pchs-trust-seals--surface .pchs-trust-seals__footnote {
	color: var(--wp--preset--color--muted);
}

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

/*
 * The compact row used mid-page on service pages: logos only, no labels,
 * because the section above has already made the claim.
 */
.pchs-trust-seals--strip {
	padding-block: var(--wp--custom--section--y-tight);
}

.pchs-trust-seals--strip .pchs-trust-seals__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	justify-content: center;
}

/*
 * At 360 the strip seal is 9.5rem (~152px); two plus the gap exceed the 312px
 * content column, so four seals stacked 1+1+1+1 (/about/, /reviews/). Force
 * the same 2×2 the grid variant uses until two can share a flex row.
 */
@media ( max-width: 24.99em ) {
	.pchs-trust-seals--strip .pchs-trust-seals__list {
		display: grid;
		grid-template-columns: repeat( 2, auto );
		justify-content: center;
		gap: var(--wp--preset--spacing--40);
	}
}

/*
 * The client asked for this row bigger (2026-09-30): at 3rem the seals read as
 * a footnote. The plate is a box the logo fits inside, so the width cap has to
 * grow with the height, or the wide marks (Good Housekeeping, BBB) stay pinned
 * by width and only the square ones get bigger.
 */
/* No plate on a light strip. On navy the white plate stays, as in the grid:
   without it the BBB mark's navy box melts into the ground and the dark-red
   Top 500 badge reads dim. */
.pchs-trust-seals--strip:is( .pchs-trust-seals--base, .pchs-trust-seals--surface ) .pchs-trust-seals__plate {
	padding: 0;
	background: none;
	border: 0;
}

/* The larger strip the client asked for, from the width where four fit in
   one row. */
@media (min-width: 62em) {
	.pchs-trust-seals--strip .pchs-trust-seals__plate {
		width: 10rem;
		height: 6rem;
	}

	.pchs-trust-seals--strip .pchs-trust-seals__logo {
		max-width: 9.5rem;
		max-height: 5.5rem;
	}
}

.pchs-trust-seals--strip .pchs-trust-seals__sublabel {
	display: none;
}

/* No white plate on a light strip, so the type-only mark takes the row's ink.
   On navy it sits on the plate and keeps the plate's navy. */
.pchs-trust-seals--strip:is( .pchs-trust-seals--base, .pchs-trust-seals--surface ) .pchs-trust-seals__mark {
	color: inherit;
}

.pchs-trust-seals--strip.pchs-trust-seals--navy,
.pchs-trust-seals--strip.pchs-trust-seals--navy-deep {
	color: var(--wp--preset--color--base);
}

.pchs-trust-seals--strip.pchs-trust-seals--base,
.pchs-trust-seals--strip.pchs-trust-seals--surface {
	color: var(--wp--preset--color--navy);
}

.pchs-trust-seals--strip .pchs-trust-seals__label {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--xs);
}