/**
 * Site footer. White, per the comp and DESIGN.md's pixel sampling -- not
 * navy, do not "fix" that.
 *
 * Geometry is SPEC-home S09 (docs/qa/comp-spec/SPEC-home.md; band top
 * y=4694, 1 unit = 1 CSS px at 1440), stated relative to the band top:
 *
 *   lockup       341.3 x 84 at x=96, 73 down
 *   boilerplate  20px Cormorant, 470px column, 30 below the lockup
 *   headings     30px Cormorant Bold at x=632 / 930 / 1128, ~76 down
 *   links        20px Cormorant, first at 127 down, 31.5px pitch
 *   socials      ~30px solid navy marks, 24px apart
 *   copyright    a thin rule, then the line, 59px of air under it
 *
 * The columns sit in the comps' 1260px band column (x=90..1350,
 * --width-wide from layout.css); the four tracks are the comp's own
 * column starts expressed as a ratio of that 1260 (542 : 298 : 198 :
 * 222) so they land on x=90/632/930/1128 at 1440 and keep their
 * proportions on a narrower desktop. The comp's band is 463px tall with
 * five links in the Links column; this site's column carries nine, so the
 * band is taller by four link rows -- the pitch is the comp's, the count
 * is the Copy Master's.
 *
 * Where the comp puts the social marks -- a row at y=5015 under the Links
 * column -- collides with links 6 and 7 of a nine-link column, so they
 * sit under the phone and email in the Connect column instead, the
 * column they belong to.
 *
 * Breakpoints are CONVENTIONS.md's literals: 768 and 1024, plus 1200
 * for the four-track row (below it the Links column's longest label,
 * "Request a Business Valuation", would wrap).
 */

.site-footer {
	/* Comp coordinates -- see the header comment. */
	--footer-top: 73px;
	--footer-lockup-width: 341px;
	--footer-lockup-inset: 6px;
	--footer-boilerplate-width: 470px;
	--footer-boilerplate-gap: 30px;
	--footer-heading-gap: 21px;
	--footer-link-gap: 9.5px;
	--footer-social-size: 30px;
	--footer-rule-gap: 46px;
	--footer-rule-weight: 0.75px;
	--footer-bottom: 59px;

	background-color: var(--color-white);
	color: var(--color-navy);
}

.site-footer a {
	color: var(--color-navy);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.site-footer a:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.site-footer__inner {
	box-sizing: border-box;
	max-width: calc(var(--width-wide) + 2 * var(--space-xl));
	margin-inline: auto;
	padding: var(--footer-top) var(--space-lg) var(--footer-bottom);
}

@media (min-width: 768px) {
	.site-footer__inner {
		padding-inline: var(--space-xl);
	}
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.site-footer__col {
	min-width: 0;
}

/* The comp's lockup sits 6px inside the column's left edge (x=96 in a
   column that starts at 90). */
.site-footer__col--brand {
	padding-inline-start: var(--footer-lockup-inset);
}

.site-footer__logo {
	display: block;
	width: var(--footer-lockup-width);
	max-width: 100%;
}

/* The comp's light lockup at its measured 341px width; the artwork is
   500x122 with real alpha, so height follows the ratio. */
.site-footer__logo-image {
	display: block;
	width: 100%;
	height: auto;
}

.site-footer__boilerplate {
	max-width: var(--footer-boilerplate-width);
	margin: var(--footer-boilerplate-gap) 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-footer-link);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
}

.site-footer__heading {
	margin: 0 0 var(--footer-heading-gap);
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	color: var(--color-navy);
}

.footer-menu,
.site-footer__connect {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--footer-link-gap);
}

.footer-menu a,
.site-footer__connect a {
	/* Block, so each row is exactly one 22px line box -- an inline anchor
	   inside the <li> adds the strut's descender and the pitch drifts to
	   32.5px against the comp's 31.5. */
	display: block;
}

.footer-menu a,
.site-footer__connect a,
.site-footer__address,
.site-footer__coverage {
	font-family: var(--font-serif);
	font-size: var(--text-footer-link);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
}

.site-footer__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--footer-link-gap);
	margin: 0 0 var(--footer-link-gap);
}

.site-footer__coverage {
	margin: 0;
}

/* The comp's navy marks: solid squares, white glyph, 24px apart. On a
   phone the square itself grows to the 44px tap target rather than
   padding an invisible hit area around a 30px mark. */
/*
 * The comp puts the social marks in a centred row under the logo and the
 * boilerplate, not in the Connect column: its four 30px fills sit at
 * x=581..780 on a 1440 band, which is the middle of the page, while the
 * Connect column starts at x=1128. They were in Connect, hard right,
 * which is what made the footer read as a different layout from the one
 * that was drawn.
 */
.site-footer__social {
	list-style: none;
	margin: var(--space-xl) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
}

.site-footer__social-link {
	display: block;
	width: var(--footer-social-size);
	height: var(--footer-social-size);
}

.site-footer__social-link:hover .site-footer__social-mark rect,
.site-footer__social-link:focus-visible .site-footer__social-mark rect {
	fill: var(--color-gold);
}

.site-footer__social-mark {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--color-navy);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs) var(--space-md);
	max-width: var(--width-content);
	margin: var(--footer-rule-gap) auto 0;
	padding-top: var(--space-md);
	border-top: var(--footer-rule-weight) solid var(--color-navy);
	text-align: center;
}

.site-footer__copyright {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	/* Set on the list, not only the anchors: the <li> would otherwise keep
	   the body's 22px strut around a 13px link. */
	font-size: var(--text-micro);
	line-height: var(--leading-body);
}

.site-footer__legal a {
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	line-height: var(--leading-body);
}

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xl) var(--space-lg);
	}
}

@media (min-width: 1200px) {
	.site-footer__grid {
		grid-template-columns: 542fr 298fr 198fr 222fr;
		gap: 0;
	}
}

/*
 * Touch-sized rows for the footer's links, on phones and tablets only.
 *
 * Measured at 375 across every page: the link rows are 22px tall and the
 * two legal links 15px, against the 44px floor, sitting at the comp's
 * 31.5px pitch -- a column of half-height targets 9px apart, which is the
 * shape that produces "I tapped the wrong one".
 *
 * A pseudo-element hit area was tried first and cannot work here: at a
 * 31.5px pitch two 44px areas overlap by 12.5px, the lower one wins the
 * tap, and the effective target lands back at the pitch (measured: 33px).
 * The row itself has to grow, so the pitch grows with it -- which is
 * allowed, because the comp is a 1440 drawing and defines no phone or
 * tablet view. Above 1024 the comp's 31.5px pitch is untouched.
 *
 * The legal pair sits in a flex row rather than a column, so there the
 * pseudo-element does work: nothing is stacked above or below it.
 *
 * The social marks are 44x44 on a phone already; the same size applies up
 * to 1024, where they were dropping back to the comp's 30px on exactly
 * the devices that need them bigger.
 */
@media (max-width: 1024px) {
	.footer-menu a,
	.site-footer__connect a {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.site-footer__social-link {
		width: 2.75rem;
		height: 2.75rem;
	}

	.site-footer__legal a {
		position: relative;
	}

	.site-footer__legal a::after {
		content: '';
		position: absolute;
		inset: -15px -10px;
	}
}

@media (max-width: 767px) {
	.site-footer__social-link {
		width: 2.75rem;
		height: 2.75rem;
	}

	/* The copyright and the two legal links stack on a phone; the bar
	   stays centred so it reads as one line group, not three rows. */
	.site-footer__bottom {
		flex-direction: column;
	}
}

/* The Elementor Kit's custom CSS (kit post 126, loaded on Elementor-built pages such as /listings/)
   still carries "#site-header, #site-footer { display: none }" from the old theme. This selector
   outranks that ID-only rule without !important. */
body #site-footer {
	display: block;
}