/*
 * Footer — site-wide component.
 *
 * Every value traces to Swiftheat Home v2.dc.html's `<footer>`, measured
 * with Chrome DevTools — confirmed identical (structurally and visually)
 * across all 5 full-page approved design files by diffing each file's own
 * `<footer>...</footer>` block; only link hrefs differ, and only in the
 * expected "same-page anchor here, cross-page anchor elsewhere" way a
 * static multi-page mockup keeps one shared component correct per page.
 *
 * .site-footer__inner uses box-sizing:border-box from the start, and the
 * heading/link colors are declared explicitly rather than left to
 * inheritance — both defensive measures already learned from every prior
 * section's own Elementor Kit collisions, applied proactively here too.
 */

.site-footer {
	background: var(--color-navy-deepest);
	color: var(--text-on-dark-muted);
}

.site-footer__inner {
	padding: 88px var(--gutter-desktop) 0;
	box-sizing: border-box;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 64px;
}

.site-footer__logo {
	display: inline-block;
	background: var(--color-bg-white);
	padding: 10px 16px;
	line-height: 0;
}

.site-footer__logo img {
	height: 34px;
	width: auto;
	display: block;
}

.site-footer__desc {
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	line-height: var(--lh-body);
	max-width: 340px;
	margin: 20px 0 28px;
}

.site-footer .site-footer__catalogue {
	/* Explicit color, not just inherited — the "explicit beats inherited"
	   Elementor Kit lesson from Why Swiftheat/Contact, applied
	   proactively rather than discovered as a bug here. */
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid rgba(143, 166, 201, 0.4);
	color: var(--text-on-dark);
	font-family: var(--font-primary);
	font-size: var(--fs-body-small);
	font-weight: var(--fw-extrabold);
	text-decoration: none;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.site-footer .site-footer__catalogue:hover,
.site-footer .site-footer__catalogue:focus-visible {
	border-color: var(--text-on-dark);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-on-dark);
}

.site-footer__heading {
	font-family: var(--font-mono);
	/* 11.5px is this element's own exact size — no matching token, same
	   value Why Swiftheat's caption and Industries' tile-use happen to
	   use, kept as its own literal per the established pattern. */
	font-size: 11.5px;
	/* 0.16em — verified: 1.84px ÷ 11.5px = 0.16em, the same literal value
	   Quality's PASS badge happens to use, not a shared token. */
	letter-spacing: 0.16em;
	color: var(--text-on-dark-value);
	margin-bottom: 22px;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--fs-body-small);
}

.site-footer .site-footer__links a,
.site-footer .site-footer__contact a {
	/* Explicit color, not just inherited from .site-footer's own
	   color — same defensive reasoning as .site-footer__catalogue above. */
	color: var(--text-on-dark-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-footer .site-footer__links a:hover,
.site-footer .site-footer__links a:focus-visible,
.site-footer .site-footer__contact a:hover,
.site-footer .site-footer__contact a:focus-visible {
	/* Design's own generic `a:hover{color:#E31E24}` rule (confirmed live
	   on the approved design file, not assumed) applies to these links
	   since they have no `style-hover` override of their own — reproduced
	   explicitly here since this theme has no equivalent sitewide
	   generic-anchor-hover rule to inherit it from. */
	color: var(--color-red);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--fs-body-small);
}

.site-footer__contact span:last-child {
	/* Design's own line-height for the two-line address value only —
	   confirmed via direct read of the design's own inline style, not
	   applied to the other single-line contact rows. */
	line-height: var(--lh-body);
}

.site-footer .site-footer__bottom {
	/* 2-class selector needed for margin-top specifically — found live
	   that the shared `.site-container` utility class (home.css) sets
	   `margin:0 auto` at equal (0,1,0) specificity for the same
	   `margin-top` property; ties resolve to whichever stylesheet is
	   enqueued later (home.css, in this case), silently resetting this
	   element's own margin-top to 0. The same class of same-specificity
	   collision already found against Elementor's Kit CSS elsewhere in
	   this project, this time between two of this theme's own
	   stylesheets — fixed the same way. */
	padding: 32px var(--gutter-desktop);
	margin-top: 72px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: var(--ls-micro);
}

/* ---- Responsive ----
 * The approved design has zero @media queries anywhere in the whole
 * design folder (confirmed by grep, same check repeated every section
 * this project has built). The 4→2→1 column collapse below reuses the
 * same pattern already established for every grid-based section on this
 * site — not invented fresh for the Footer. */

@media (max-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 48px;
	}

	.site-footer__about {
		/* Spans both columns at 2-column width so the logo/description/CTA
		   block isn't awkwardly squeezed into a single narrow column next
		   to just one link list. */
		grid-column: span 2;
	}
}

@media (max-width: 768px) {
	.site-footer__inner {
		padding: 64px var(--gutter-mobile) 0;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.site-footer__about {
		grid-column: span 1;
	}

	.site-footer .site-footer__bottom {
		/* 2-class selector, matching the base rule's own specificity fix
		   above — a media query narrows WHEN a rule applies, not its
		   specificity, so a single-class override here would still lose
		   the margin-top tie to the base `.site-footer .site-footer__bottom`
		   rule. Confirmed live: without this, mobile marginTop measured
		   72px instead of the intended 48px. */
		padding: 24px var(--gutter-mobile);
		margin-top: 48px;
		flex-direction: column;
		gap: 8px;
	}
}