/* ==========================================================================
   Footer
   Converted from design-reference/showroom-floor.css §14.

   Five columns from 782px, two below it: rooms, showrooms, company, and the
   signup across the remaining two. The export's `.signup { max-width: 420px }`
   is dropped rather than converted — 420px has no token behind it, and in a
   five-track grid the column already decides the width. Its 10px link gap
   becomes step--12, the same conversion the mega-menu makes. Recorded in
   design-reference/README.md.
   ========================================================================== */

.tfs-site-footer {
	padding-block: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--ground);
	border-top: var(--wp--custom--hairline);
}

@media (min-width: 782px) {
	.tfs-site-footer {
		padding-block: var(--wp--preset--spacing--70);
	}
}

/* --------------------------------------------------------------------------
   Columns
   -------------------------------------------------------------------------- */

.tfs-site-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: var(--wp--custom--hairline);
}

@media (min-width: 782px) {
	.tfs-site-footer__cols {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/*
 * The nav block wraps three columns in one element. display:contents lifts
 * them into this grid as three items rather than one cell holding three, which
 * is the whole reason it exists — and these are plain divs and a <nav> each, so
 * nothing is lost from the accessibility tree.
 */
.tfs-footer-nav {
	display: contents;
}

/* Core's flow layout puts a preset step above every child; this grid's own gap
   is the spacing here, so that second rhythm has to come off. */
.tfs-site-footer__cols > * {
	margin-block-start: 0;
}

.tfs-footer-col {
	min-width: 0;
}

/* The signup takes the two tracks the three link columns leave. Below 782px it
   spans the pair, because two half-width form fields at 360px are unusable. */
.tfs-footer-signup {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	.tfs-footer-signup {
		grid-column: span 2;
	}
}

/* --------------------------------------------------------------------------
   Column headings and links

   theme.json already sets h4 to the utility face; these are h2 for the
   document outline — each column is a named landmark — so the face is restated
   here rather than the heading level being chosen to get a look.
   -------------------------------------------------------------------------- */

.tfs-footer-col__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--utility);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-footer-col__links {
	display: grid;
	gap: var(--wp--custom--step--12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tfs-footer-col__link {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-footer-col__link:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* Focus indicators are exempt from the no-shadow rule: outline, never shadow. */
.tfs-footer-col__link:focus-visible,
.tfs-footer-showroom__phone:focus-visible,
.tfs-footer-legal__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* --------------------------------------------------------------------------
   Showrooms — a name, where it is, and a number to call
   -------------------------------------------------------------------------- */

.tfs-footer-col--showrooms .tfs-footer-col__links {
	gap: var(--wp--preset--spacing--30);
}

.tfs-footer-showroom__address {
	display: grid;
	gap: var(--wp--custom--step--4);
	margin: var(--wp--custom--step--8) 0 0;
	font-style: normal;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.tfs-footer-showroom__phone {
	display: inline-block;
	margin-block-start: var(--wp--custom--step--4);
	font-size: var(--wp--preset--font-size--caption);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.tfs-footer-showroom__phone:hover {
	color: var(--wp--preset--color--accent-hover);
}

/* --------------------------------------------------------------------------
   Signup — the fields and the button are form.css and button.css unchanged
   -------------------------------------------------------------------------- */

.tfs-footer-signup__copy {
	margin: 0 0 var(--wp--preset--spacing--20);
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

.tfs-footer-signup__fields {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

@media (min-width: 600px) {
	.tfs-footer-signup__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tfs-footer-signup__submit {
		grid-column: 1 / -1;
	}
}

.tfs-footer-signup__submit {
	display: grid;
}

/* Empty until the module writes to it, and it must not hold open a gap while
   it is. :empty rather than [hidden] because the module sets textContent. */
.tfs-footer-signup__status {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
}

.tfs-footer-signup__status:empty {
	display: none;
}

.tfs-footer-signup__note {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   The base row
   -------------------------------------------------------------------------- */

.tfs-site-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--50);
}

.tfs-site-footer__base > * {
	margin-block-start: 0;
}

.tfs-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--custom--step--8) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-footer-legal__copyright,
.tfs-footer-legal__provenance {
	margin: 0;
}

/* Provenance is one of the two things CLAUDE.md lets the saddle colour mark.
   `saddle-text` because it is 12px type on `ground`: 4.61:1, where the
   decorative value is 3.53:1 and fails AA. */
.tfs-footer-legal__provenance {
	color: var(--wp--preset--color--saddle-text);
}

.tfs-footer-legal__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tfs-footer-legal__link {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}

.tfs-footer-legal__link:hover {
	color: var(--wp--preset--color--accent);
}