/* Site footer bar.
   Design: desktop and mobile.
   The header is its own component - see css/header.css. */

/* ==========================================================================
   Footer legal bar - 53px red band.
   ========================================================================== */

.site-footer {
	/* The footer is a filled band, so its gap is a margin - padding here would
	   just make the red bar taller. Zero on a page whose last section is
	   itself a full-bleed band, which is what the homepage design draws
	   (contact ends 6162, the bar starts 6162). */
	margin-top: var(--footer-space-above, var(--space-default));
	background: var(--red);
	color: var(--white);
	padding-inline: var(--gutter);
}

.site-footer__inner {
	display: flex;
	/* Between the 767 stack and roughly 1000 the row is 710px of content in
	   697px of band, so it squeezed rather than stacked and "Privacy Policy"
	   broke onto two lines. Wrapping is the measurement; the breakpoint below
	   is only the centring the mobile frame draws. */
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px 40px;
	width: 100%;
	max-width: var(--container);
	min-height: 53px;
	margin-inline: auto;
	padding-block: 8px;
	font-size: 16px;
	line-height: 21px;
}

.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 40px; }

/* Short labels - they wrap the ROW, never themselves. */
.site-footer__links a,
.site-footer__credit { white-space: nowrap; }
.site-footer__links a { text-decoration: underline; text-underline-position: from-font; }
.site-footer__links a:hover { text-decoration-thickness: 2px; }

@media (max-width: 767px) {

	/* Mobile stacks the bar to 185px tall and centres it. */
	.site-footer__inner {
		flex-direction: column;
		gap: 10px;
		padding-block: 20px;
		text-align: center;
	}
	.site-footer__links { flex-direction: column; gap: 10px; }
	.site-footer__legal { max-width: 330px; }
}

/* A page ending in a filled band needs no gap - the two colours meet, as the
   homepage design draws them. Everything else gets the standard rhythm. */
.footer-flush .site-footer { --footer-space-above: 0px; }