/* ==========================================================================
   Mind Maprs — footer
   Three bands: brand and call to action, columns, legal bar.
   ========================================================================== */

.site-footer {
	background: var(--mm-surface-alt);
	color: var(--mm-muted-soft);
	font-size: var(--mm-size-sm);
}

.site-footer a {
	color: var(--mm-muted);
	text-decoration: none;
	transition: color var(--mm-duration) var(--mm-ease);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--mm-ink);
	text-decoration: none;
}

/* The footer's blanket link colour must not repaint buttons. */
.site-footer .btn,
.site-footer .btn:hover,
.site-footer .btn:focus-visible {
	color: var(--mm-white);
}

/* --- Brand band ---------------------------------------------------------- */

.site-footer__lead {
	border-bottom: var(--mm-border);
	background: var(--mm-white);
}

.site-footer__lead-inner {
	display: grid;
	gap: clamp(28px, 4vw, 64px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	padding-block: clamp(40px, 5vw, 64px) clamp(36px, 4.5vw, 56px);
}

@media (min-width: 900px) {
	.site-footer__lead-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.site-footer__cta { justify-self: end; text-align: right; }

	/* Optically level the CTA heading with the wordmark beside it. */
	.site-footer__cta { padding-top: 6px; }
}

/* The mark carries the band, so it is set large here rather than at nav size. */
.site-footer__logo img,
.site-footer__logo .custom-logo {
	height: clamp(44px, 5vw, 62px);
	width: auto;
	display: block;
}

.site-footer__logo .custom-logo-link { display: inline-block; }

.site-footer__wordmark {
	margin: 0;
	max-width: none;
	font-family: var(--mm-font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--mm-ink);
}

.site-footer__intro {
	margin: clamp(18px, 2vw, 26px) 0 0;
	max-width: 30em;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.68;
	color: var(--mm-muted);
}

.site-footer__cta-title {
	margin: 0 0 16px;
	max-width: none;
	font-family: var(--mm-font-display);
	font-size: clamp(17px, 1.6vw, 21px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--mm-ink);
}

.site-footer__cta .btn { gap: 12px; }

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

.site-footer__columns {
	display: grid;
	gap: clamp(28px, 3vw, 40px);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	padding-block: clamp(38px, 4.5vw, 60px);
	align-items: start;
}

@media (min-width: 1000px) {
	.site-footer__columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-footer__heading {
	margin: 0 0 20px;
	max-width: none;
	font-family: var(--mm-font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mm-blue);
}

.site-footer__menu {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu li { margin: 0; }

.site-footer__menu a {
	display: inline-block;
	line-height: 1.45;
}

.site-footer__address {
	margin: 16px 0 0;
	max-width: 30em;
	font-size: 13.5px;
	line-height: 1.66;
	color: var(--mm-muted-faint);
}

.site-footer__utility {
	padding-bottom: var(--mm-space-lg);
	border-top: var(--mm-border);
	padding-top: var(--mm-space-lg);
}

/* --- Legal bar ----------------------------------------------------------- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mm-space-sm) var(--mm-space-md);
	padding-block: 26px;
	border-top: var(--mm-border);
	font-size: 13px;
	color: var(--mm-muted-faint);
}

.site-footer__copyright,
.site-credit {
	margin: 0;
	max-width: none;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal li { margin: 0; }
.site-footer__legal a,
.site-credit a { color: var(--mm-muted-faint); }
.site-footer__legal a:hover,
.site-credit a:hover { color: var(--mm-blue); }

@media (max-width: 700px) {
	.site-footer__bottom { justify-content: flex-start; }
	.site-footer__cta { text-align: left; }
	.site-footer__cta .btn { width: 100%; }
}