/**
 * Footer v2 (owner-approved direction, 2026-10-27; Figma 1041:46780). Markup: parts/footer.html and
 * the footer shortcodes in inc/navigation.php.
 *
 * Groups, in one DOM order for every layout so keyboard order always matches the screen (plan review
 * Q-2). Footer v3.1 order (owner-approved 2026-10-29, Figma 1147:55060): Company, the Footer navigation
 * (Services, Service Areas, Quick Links), then Contact. Then one divider; © and the agency credit; a
 * small centred legal row (published, verified legal pages only). No estimate button (Footer v3).
 *
 * Layouts:
 *   ≥ 1240 px   five columns in the Figma widths (284 / 244 / 168 / 136 / 256 at 1440, 48 px gaps);
 *               the minima keep every label on one line down to 1240 px.
 *   768–1239    row 1 Company; row 2 Services | Service Areas; row 3 Quick Links | Contact.
 *   < 768       stacked: Company, Services in two columns, Service Areas | Quick Links, Contact.
 */

.foot {
	padding: clamp(3rem, 7vw, 5.5rem) 0 2.25rem;
	background: var(--navy-2);
	color: var(--on-dark-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.foot__cols {
	display: grid;
	/* The Figma widths at 1440 (284 / 244 / 168 / 136 / 256). Each minimum is the smaller of a rem width
	   (one-line labels at the default text size, down to 1240) and a share of the footer: the shares and
	   gaps stay under 100 %, so larger text from the browser or the accessibility toolbar narrows the
	   columns and wraps their text instead of widening the page (1.4.4, 1.4.10). */
	grid-template-columns:
		minmax(min(15.75rem, 22%), 284fr)
		minmax(min(14.5rem, 20.3%), 244fr)
		minmax(min(8.25rem, 11.5%), 168fr)
		minmax(min(6.5rem, 9.1%), 136fr)
		minmax(min(12rem, 18%), 256fr);
	column-gap: clamp(1.5rem, 3.34vw, 3rem);
	align-items: start;
}

.foot__brand {
	grid-column: 1;
}

.foot__nav {
	display: grid;
	grid-column: 2 / 5;
	grid-template-columns: subgrid;
	align-items: start;
}

.foot__col--contact {
	grid-column: 5;
}

@supports not (grid-template-columns: subgrid) {
	.foot__nav {
		grid-template-columns: minmax(0, 244fr) minmax(0, 168fr) minmax(0, 136fr);
		column-gap: clamp(1.5rem, 3.34vw, 3rem);
	}
}

/* ------------------------------------------------------------------ Company */

.foot__logo {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6875rem;
	color: #fff;
}

.foot__logo .wp-block-site-logo {
	line-height: 0;
}

.foot__logo .custom-logo {
	width: 4rem;
	height: 4rem;
	object-fit: contain;
}

.foot__logo .custom-logo-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.foot__logo-name {
	font: 700 1.125rem/1 var(--sans);
	letter-spacing: -0.01em;
	color: #fff;
}

.foot__line {
	margin-top: 1.125rem;
	line-height: 1.6;
}

.foot .foot__social {
	display: flex;
	gap: 0.5rem;
	margin: 2.625rem 0 0;
	padding: 0;
}

.foot__social .wp-social-link {
	margin: 0;
	background: none;
	color: #fff;
}

.foot__social .wp-social-link a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid #fff;
	border-radius: var(--radius);
	color: #fff;
}

/* No hover effect at all (owner, R1.8): the icons look exactly the same under the pointer: no colour,
   background, border, shadow, scale, movement or animation (WordPress core scales a social link to
   110 % on hover; that is cancelled too). Keyboard focus keeps the visible focus ring. */
.foot .foot__social .wp-social-link.wp-social-link,
.foot .foot__social .wp-social-link.wp-social-link:hover {
	transform: none;
	transition: none;
	box-shadow: none;
	background: none;
}

.foot .foot__social .wp-social-link a,
.foot .foot__social .wp-social-link a:hover,
.foot .foot__social .wp-social-link a:active {
	border-color: #fff;
	background: none;
	color: #fff;
	box-shadow: none;
	transform: none;
	transition: none;
}

.foot .foot__social .wp-social-link a:focus-visible {
	outline: var(--hydro-focus);
	outline-color: #fff;
	outline-offset: 3px;
}

.foot__social .wp-social-link svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
}

/* ------------------------------------------------------------------ column titles and link lists */

.foot .foot__title {
	margin: 0 0 1rem;
	font: 600 0.8125rem/1.125rem var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal);
}

.foot .foot__links {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot__links li {
	margin: 0;
	padding: 0;
}

.foot__links a {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.125rem 0;
	line-height: 1.5rem;
	color: var(--on-dark-muted);
	text-decoration: none;
}

.foot__links a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.foot__links a[aria-current="page"] {
	color: #fff;
}

/* The external link wraps as text, so its arrow follows the last word (as a flex item it was left at the
   column edge when "Concrete Coatings" wraps in a narrow column). */
.foot__links .ext-link {
	display: inline-block;
}

.foot__links .ext-link__arrow {
	margin-left: 0.3em;
}

/* "View all service areas →" and "Contact Us →". */
.foot__links .foot__all,
.foot__more a {
	gap: 0.375rem;
	font-weight: 600;
	color: var(--teal);
}

.foot__more a {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	font-weight: 500;
	color: var(--on-dark);
	text-decoration: none;
}

.foot__links .foot__all::after,
.foot__more a::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
	transition: transform 0.25s var(--ease);
}

/* "View all service areas" is the last link of the last column: it wraps inside the column (never
 * past the content edge) and the arrow follows the last word. */
.foot__links .foot__all {
	display: inline;
	line-height: 1.5rem;
}

.foot__links li:has(.foot__all) {
	text-wrap: balance;
}

.foot__links .foot__all::after {
	display: inline-block;
	margin-left: 0.375rem;
	vertical-align: -0.15em;
}

.foot__links .foot__all:hover,
.foot__more a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.foot__links .foot__all:hover::after,
.foot__more a:hover::after {
	transform: translateX(3px);
}

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

.foot__col--contact > * + * {
	margin-top: 1rem;
}

.foot .foot__col--contact .foot__title {
	margin-bottom: 0;
}

.foot__phone a {
	display: inline-flex;
	align-items: center;
	min-height: 2.125rem;
	font: 600 1.375rem/1.875rem var(--display);
	color: #fff;
	text-decoration: none;
}

.foot__phone a:hover {
	text-decoration: underline;
}


.foot__addr {
	padding-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.375rem;
}

.foot__addr-label {
	display: block;
	margin-bottom: 0.25rem;
	font: 600 0.75rem/1rem var(--sans);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.foot__addr-text {
	display: block;
}

/* ------------------------------------------------------------------ bottom */

.foot__bottom {
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--on-dark-muted);
}

.foot__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

.foot__bar a {
	display: inline-block;
	padding: 0.125rem 0; /* a 24 px target inside the 20 px line */
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.foot__bar a:hover {
	text-decoration: underline;
}

/* [hydro_legal_links] (hydro-core) lists only published, verified legal pages; empty, it takes no room. */
.foot .hydro-legal {
	margin-top: 1.125rem;
}

.foot .hydro-legal ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	line-height: 1.25rem;
}

.foot .hydro-legal a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	color: var(--on-dark-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color 0.2s ease;
}

.foot .hydro-legal a:hover,
.foot .hydro-legal a:focus-visible,
.foot .hydro-legal a[aria-current="page"] {
	color: #fff;
}

.foot a:focus-visible {
	outline-color: var(--teal);
}

/* ------------------------------------------------------------------ tablet arrangement (768–1239) */
@media (max-width: 1239px) {
	/* Row 1 Company; rows 2 and 3 the navigation's grid (Services | Service Areas, then Quick Links)
	   with Contact beside Quick Links: the navigation shares the footer's columns and rows (subgrid). */
	.foot__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}

	.foot__brand {
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.foot__nav {
		grid-column: 1 / 3;
		grid-row: 2 / 4;
		grid-template-rows: subgrid;
		margin-top: 2.5rem;
		padding-top: 2.5rem;
		border-top: 1px solid var(--on-dark-muted);
	}

	.foot__col--services {
		grid-column: 1;
		grid-row: 1;
	}

	.foot__col--areas {
		grid-column: 2;
		grid-row: 1;
	}

	.foot__col--quick {
		grid-column: 1;
		grid-row: 2;
	}

	.foot__col--contact {
		grid-column: 2;
		grid-row: 3;
	}

	/* Row 3: one divider across both columns (Contact's reaches back over the gap). */
	.foot__col--quick,
	.foot__col--contact {
		margin-top: 2.5rem;
		padding-top: 2.5rem;
		border-top: 1px solid var(--on-dark-muted);
	}

	.foot__col--contact {
		margin-left: -1.5rem;
		padding-left: 1.5rem;
	}

	@supports not (grid-template-rows: subgrid) {
		.foot__nav {
			grid-row: 2;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: 1.5rem;
		}

		.foot__col--contact {
			grid-column: 1 / 3;
			margin-left: 0;
			padding-left: 0;
		}
	}

	.foot__bottom {
		margin-top: 2.5rem;
	}
}

@media (max-width: 1099px) {
	.foot {
		padding: 4rem 0 calc(1.75rem + env(safe-area-inset-bottom));
	}

	/* Without JavaScript the phone action bar never steps aside: keep the bottom clear of it. */
	html:not(.js) .foot {
		padding-bottom: 4.75rem;
	}

	.foot .wrap {
		width: calc(100% - 2 * var(--hydro-gutter));
	}
}

/* ------------------------------------------------------------------ phones (< 768) */
@media (max-width: 767px) {
	.foot {
		padding-top: 3rem;
	}

	.foot__cols {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;
	}

	.foot__brand,
	.foot__col--contact,
	.foot__nav {
		grid-column: 1;
		grid-row: auto;
	}

	.foot__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		column-gap: 1rem;
		row-gap: 2.5rem;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.foot__col--services {
		grid-column: 1 / 3;
		grid-row: auto;
		padding-top: 2rem;
		border-top: 1px solid var(--on-dark-muted);
	}

	.foot__col--services .foot__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
	}

	.foot__col--areas {
		grid-column: 1;
		grid-row: auto;
	}

	.foot__col--quick {
		grid-column: 2;
		grid-row: auto;
	}

	.foot__col--quick,
	.foot__col--contact {
		margin: 0;
		padding: 0;
		border-top: 0;
	}


	.foot__bottom {
		margin-top: 2.5rem;
	}

	.foot__bar {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		text-align: center;
	}

	.foot .hydro-legal {
		margin-top: 1rem;
	}
}

/* ---------------------------------------------- accessibility launcher clearance */

/* The Accessibility Pro Plus launcher is fixed at the bottom right (a 48 px button 18 px from the edge
   and 24 px up; 12 px and 16 px on phones) and only lifts above fixed bars, so at the end of the page
   it cannot be scrolled away from the bottom row. Row layouts keep the corner beside the credit free
   (the reserve shrinks to nothing as the side margin grows; 5.25rem also covers a classic scrollbar,
   which 100vw includes); the stacked phone layout ends below the launcher's zone (offset + size + 8 px),
   which also keeps a future legal row clear. */
@media (min-width: 768px) and (max-width: 1427px) {
	.foot__bar {
		padding-inline-end: max(0px, calc(5.25rem - (100vw - 100%) / 2));
	}
}

@media (max-width: 767px) {
	.foot {
		padding-bottom: calc(5rem + env(safe-area-inset-bottom));
	}
}

@media (max-width: 600px) {
	.foot {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}
}