/*
 * Global footer — the dark band closing every page.
 *
 * Enqueued on every page by inc/site-chrome-assets.php; markup in
 * template-parts/site-footer.php. Tokens only; no !important.
 *
 * The design frame shows 120px of inline padding, which is not padding: the
 * frame is 1440 and 120 + 1200 + 120 = 1440, so it is the 1200 container
 * centred. That is exactly what .wsc-section + .wsc-container already do, and
 * hardcoding 120 here would break every viewport but one.
 *
 * The 120px gap BETWEEN the logo and the link columns is real, and has no
 * theme.json token, so it is a locally-scoped custom property rather than a raw
 * length loose in the rules.
 */

.wsc-site-footer {
	--wsc-footer-col-gap: clamp(2.5rem, 5vw, 7.5rem); /* 40 → 120px */

	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
}

.wsc-site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60); /* 40px */
}

/* Logo ↔ link columns ---------------------------------------------------- */

.wsc-site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wsc-footer-col-gap);
}

.wsc-site-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wsc-footer-col-gap);
}

.wsc-site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30); /* 16px */
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The design widths, pinned in CSS rather than left to the markup's width
 * attribute. The attribute reserves space before the file loads, but only an SVG
 * gets one (see inc/site-logo.php) — a raster fallback would otherwise render at
 * whatever size it was uploaded at.
 */
.wsc-site-footer__logo {
	display: block;
	width: 14.1875rem; /* 227px */
	max-width: 100%;
	height: auto;
}

.wsc-site-footer__credit-logo {
	display: block;
	width: 10rem; /* 160px */
	max-width: 100%;
	height: auto;
}

.wsc-site-footer__link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono); /* 13px */
	letter-spacing: 0; /* The Mono token is 0; the inherited body default is -1%. */
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--wp--preset--color--bg);
}

/* Disclaimer and legal row ----------------------------------------------- */

/*
 * The rule above the disclaimer, separating the link columns from the small
 * print. It rides on the disclaimer rather than being its own element, so it
 * cannot outlive the block it introduces — an empty disclaimer leaves no
 * orphaned line floating in the middle of the footer.
 */
.wsc-site-footer__disclaimer {
	padding-top: var(--wp--preset--spacing--50); /* 32px */
	border-top: 1px solid var(--wp--preset--color--border-dark);
	font-size: var(--wp--preset--font-size--small); /* 12px */
	letter-spacing: 0.01em; /* Small-Regular is +1%, against the body's -1%. */
	line-height: 1.5; /* 18px */
}

.wsc-site-footer__disclaimer :where(p):last-child {
	margin-bottom: 0;
}

.wsc-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30); /* 16px */
	font-size: var(--wp--preset--font-size--small); /* 12px */
	letter-spacing: 0.01em; /* Small-Regular is +1%, against the body's -1%. */
	line-height: 1.5; /* 18px */
}

/*
 * Only the copyright is dimmed. The credit logo beside it sits at full strength
 * in the design — fading the whole row would take the wordmark down with it.
 */
.wsc-site-footer__copyright {
	margin: 0;
	opacity: 0.4;
}

/* Mobile — one column all the way down ----------------------------------- */

@media (max-width: 767px) {
	.wsc-site-footer__menu,
	.wsc-site-footer__cols,
	.wsc-site-footer__legal {
		flex-direction: column;
	}

	.wsc-site-footer__legal {
		align-items: flex-start;
	}
}