/**
 * pchs/site-footer — front-end styles.
 */

/*
 * trust-seals is navy-deep too and sits directly above the footer on most
 * templates, so the two merged into one 926px dark slab. The seam is the rule
 * plus the extra top padding: the same divider language the footer already uses
 * between its own regions, at the strength the outer boundary needs.
 */
.pchs-site-footer {
	background-color: var(--wp--preset--color--navy-deep);
	border-block-start: 1px solid color-mix( in srgb, var(--wp--preset--color--base) 22%, transparent );
	color: var(--wp--custom--color--border-cool-2);
	font-size: var(--wp--preset--font-size--base);
}

.pchs-site-footer__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.pchs-site-footer__top {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid color-mix( in srgb, var(--wp--preset--color--base) 14%, transparent );
}

/* Brand
   ------------------------------------------------------------------------- */

.pchs-site-footer__logo {
	display: inline-block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
}

/*
 * The reversed artwork is a white oval with the mark inside it, so the plate
 * would only put a white rectangle behind a white oval. render.php has said
 * since day one that switching the attribute "is not enough, the stylesheet has
 * to drop its background at the same time" — this is that rule. It had never
 * been written, so `reversed` would have painted a logo-shaped hole.
 *
 * Client (2026-09-20): the rectangles behind the footer marks read as
 * "unnatural and unfinished". The oval is the brand's own edge, so there is no
 * rectangle left to explain.
 *
 * Client (2026-09-30): header and footer in the same colourway, so the footer
 * now uses `color`. That artwork is the same oval on a transparent ground, and
 * its yellow fill carries the mark on navy by itself, so it drops the plate for
 * the same reason. Only a Customizer logo, whose shape nobody knows, keeps it.
 */
.pchs-site-footer__logo--color,
.pchs-site-footer__logo--reversed {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

.pchs-site-footer__logo img {
	display: block;
	width: auto;
	height: 7rem;
	max-width: 100%;
}

/* Toll-free reads before the two branch numbers and is styled to stand out. */
.pchs-site-footer__tollfree {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Type from the .pchs-micro role; only the colour is local. */
.pchs-site-footer__tollfree-label {
	color: var(--wp--preset--color--green-light);
}

.pchs-site-footer__tollfree .pchs-site-footer__phone {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--weight--heavy);
}

.pchs-site-footer__title-link {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--weight--heavy);
	text-decoration: none;
}

.pchs-site-footer__blurb {
	max-width: 22rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--custom--color--navy-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--body);
}

/* Link columns
   ------------------------------------------------------------------------- */

.pchs-site-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--bold);
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: var(--wp--custom--leading--title);
	text-transform: uppercase;
}

/* No gap: each link is already a 45px row (padding below), and the gap only
   stretched a phone footer by 72px of nothing. */
.pchs-site-footer__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pchs-site-footer__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	/*
	 * Measured 42px tall (column) / 40px (policies) after the spacing--30
	 * padding fix — still under the 44px floor. min-height lands on the token.
	 */
	min-height: var(--pchs-tap);
	padding-block: 0;
	color: var(--wp--custom--color--border-cool-2);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--title);
	text-decoration: none;
}

/* Full column width so short labels ("Blog", 29px wide) are not a pinprick. */
.pchs-site-footer__list > li > .pchs-site-footer__link {
	display: flex;
	width: 100%;
}

.pchs-site-footer__link:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--link--underline-offset);
}

/* Offices
   ------------------------------------------------------------------------- */

.pchs-site-footer__list--offices {
	gap: var(--wp--preset--spacing--40);
}

.pchs-site-footer__address {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	line-height: var(--wp--custom--leading--body);
}

.pchs-site-footer__office-name {
	color: var(--wp--preset--color--base);
	font-weight: var(--wp--custom--weight--bold);
}

.pchs-site-footer__office-street {
	color: var(--wp--custom--color--border-cool-2);
	text-wrap: pretty;
}

.pchs-site-footer__phone {
	justify-self: start;
	min-height: var(--pchs-tap);
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--green-light);
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--bold);
	text-decoration: none;
}

.pchs-site-footer__phone:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--link--underline-offset);
}

/* Layout only; the look is the shared .pchs-btn component. */
.pchs-site-footer__cta {
	display: inline-flex;
	margin-top: var(--wp--preset--spacing--40);
	justify-self: start;
}

/* Legal row
   ------------------------------------------------------------------------- */

.pchs-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
}

.pchs-site-footer__copyright {
	margin: 0;
	color: var(--wp--custom--color--navy-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--body);
}

/*
 * The licence left the trust-seal row for this line (client, 2026-09-30), so it
 * is the only place a homeowner can read the number. It takes the brighter ink
 * and a heavier weight so it does not sink into the copyright notice, and wraps
 * as one unit rather than splitting the number from its name on a phone.
 */
.pchs-site-footer__license {
	display: inline-block;
	color: var(--wp--custom--color--border-cool-2);
	font-weight: var(--wp--custom--weight--bold);
}

.pchs-site-footer__sep {
	padding: 0 var(--wp--preset--spacing--10);
}

.pchs-site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.pchs-site-footer__social,
.pchs-site-footer__policies {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pchs-site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: color-mix( in srgb, var(--wp--preset--color--base) 10%, transparent );
	color: var(--wp--custom--color--border-cool-2);
	text-decoration: none;
}

.pchs-site-footer__social-link:hover {
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--base);
}

.pchs-site-footer__social-link .pchs-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.pchs-site-footer__policies .pchs-site-footer__link {
	font-size: var(--wp--preset--font-size--xs);
}

/* Wider than the social icon gap so Terms / Privacy do not read as one label. */
.pchs-site-footer__policies {
	gap: var(--wp--preset--spacing--40);
}

.pchs-site-footer__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Focus is app.css's ring; the root's .pchs-on-dark sets it for navy-deep. */

/* Layout
   ------------------------------------------------------------------------- */

.pchs-site-footer__top {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

/* Phones: the three link columns pair up two across instead of stacking
   single file; brand and offices keep the full width. */
@media (max-width: 47.99em) {
	.pchs-site-footer__inner {
		padding-top: var(--wp--preset--spacing--70);
	}

	/* The odd column out (Company) spans the row and splits its own list over
	   the same two tracks, so no half-empty row is left behind it. */
	.pchs-site-footer__brand,
	.pchs-site-footer__offices,
	.pchs-site-footer__col--last {
		grid-column: 1 / -1;
	}

	.pchs-site-footer__col--last .pchs-site-footer__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: var(--wp--preset--spacing--60);
	}

	/* Each office on two lines: name and number on one, the street under. */
	.pchs-site-footer__address {
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: baseline;
		column-gap: var(--wp--preset--spacing--40);
	}

	.pchs-site-footer__office-name {
		grid-area: 1 / 1;
	}

	.pchs-site-footer__address .pchs-site-footer__phone {
		grid-area: 1 / 2;
	}

	.pchs-site-footer__office-street {
		grid-area: 2 / 1 / 3 / -1;
	}

	/* Copyright and licence stack; a separator would dangle at a line end. */
	.pchs-site-footer__sep {
		display: none;
	}

	.pchs-site-footer__license {
		display: block;
	}

	/*
	 * Legal row at 360: copyright, social, policies used to sit in one wrapping
	 * flex row and left uneven orphans. Stack meta, then social, then policies.
	 */
	.pchs-site-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
	}

	.pchs-site-footer__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
		width: 100%;
	}
}

/* Tablets and small laptops: two across left the offices alone on a third
   row. Six tracks put brand and offices side by side, then the three link
   columns in one row under them. */
@media (min-width: 48em) and (max-width: 79.99em) {
	.pchs-site-footer__top {
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	}

	.pchs-site-footer__brand {
		grid-column: span 3;
	}

	.pchs-site-footer__offices {
		grid-row: 1;
		grid-column: 4 / -1;
	}

	.pchs-site-footer__col {
		grid-column: span 2;
	}
}

@media (min-width: 80em) {
	.pchs-site-footer__top {
		grid-template-columns: 1.6fr repeat( 3, minmax( 0, 1fr ) ) 1.5fr;
		gap: var(--wp--preset--spacing--70);
	}
}