/**
 * Global site footer (footer.php, Figma node 197:1130). A .band variant:
 * dark, inset from left/right/bottom viewport edges, capped at --band-max.
 * The node's Inter on the legal row is drift; Plex Sans throughout.
 */

.site-footer {
	margin-bottom: var(--page-inset);
	padding-block: 64px;
}

/* --------------------------------------------------------------------
 * Top row
 * -------------------------------------------------------------------- */

.site-footer__top {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

.site-footer__brand {
	flex: 0 0 390px;
}

.site-footer__brand-logo {
	display: block;
}

.site-footer__brand-logo .site-logo {
	display: block;
	height: 53px;
	width: auto;
}

.site-footer__tagline {
	margin-top: 64px;
}

/* Plex Sans 20/600 per node (not an Archivo heading). */
.site-footer__tagline-title {
	font-size: 1.25rem; /* 20px */
	line-height: normal;
	font-weight: 600;
	color: var(--color-heading-text-on-dark);
}

.site-footer__tagline-text {
	margin-top: 16px;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-text-on-dark-alpha);
}

.site-footer__cols {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
	gap: 120px;
}

.site-footer__col-title {
	font-size: 0.75rem; /* 12px */
	line-height: normal;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-text-secondary-on-dark);
}

.site-footer__menu {
	margin-top: 32px;
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__menu a,
.site-footer__contact-links a {
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-body-text-on-dark);
	text-decoration: none;
	transition: color 150ms ease;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__contact-links a:hover,
.site-footer__contact-links a:focus-visible {
	color: var(--color-heading-text-on-dark);
}

.site-footer__contact {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.site-footer__address {
	font-style: normal;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-body-text-on-dark);
}

.site-footer__contact-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* --------------------------------------------------------------------
 * Divider + legal row
 * -------------------------------------------------------------------- */

.site-footer__divider {
	margin-top: 64px;
	border-top: 1px solid var(--color-border-on-dark);
}

.site-footer__legal {
	margin-top: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	font-size: 0.8125rem; /* 13px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-text-on-dark-ghost);
}

.site-footer__notice a {
	color: var(--color-text-on-dark-ghost);
	text-decoration: underline;
	transition: color 150ms ease;
}

.site-footer__legal-right {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-shrink: 0;
	margin-left: auto; /* keeps the group right even when the notice is empty */
}

/* Legal links at 500 (MD footer-legal-link; the node's mixed Inter weights
   are drift). */
.site-footer__legal-link {
	color: var(--color-text-on-dark-ghost);
	text-decoration: none;
	font-weight: 500;
	transition: color 150ms ease;
}

.site-footer__notice a:hover,
.site-footer__notice a:focus-visible,
.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
	color: var(--color-text-on-dark-alpha);
}

/* --------------------------------------------------------------------
 * Giant wordmark
 * -------------------------------------------------------------------- */

.site-footer__wordmark {
	margin-top: 64px;
	color: var(--color-surface-dark-card);
}

.site-footer__wordmark svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------
 * Responsive (<=1024): one stacked column
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Brand first, then the two menu columns, then contact. The three
	   .site-footer__col children flow in source order once __cols stops
	   being a row, which already gives that sequence. */
	.site-footer__top {
		flex-direction: column;
		gap: 48px;
	}

	.site-footer__brand {
		flex: 0 0 auto;
	}

	.site-footer__tagline {
		margin-top: 32px;
	}

	/* The two menu columns sit side by side rather than stacking: their items
	   are single short words and a stacked pair wasted the whole right half of
	   the screen. Contact spans both because its phone and email are long
	   enough to wrap in a half column.

	   A grid rather than the desktop flex row, because "two up then one full
	   width" is a row/column relationship and flex can only fake it with
	   basis percentages that have to be kept in step with the gap.

	   48px between the rows is the stacking rhythm the rest of the footer uses
	   here; 32px between the two menus is the site's next step down, and the
	   column gutter should not be as loud as the break between blocks. */
	.site-footer__cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: flex-start;
		gap: 48px 32px;
	}

	.site-footer__col:nth-child(3) {
		grid-column: 1 / -1;
	}

	.site-footer__divider,
	.site-footer__legal,
	.site-footer__wordmark {
		margin-top: 48px;
	}

	/* Legal wraps to two lines: notice above, links below, left aligned. */
	.site-footer__legal {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 16px;
	}

	/* flex-shrink must be restored here: the desktop rule pins this group at
	   its max-content width, so on a narrow line it kept that width and the
	   trailing links were clipped away by the band's overflow (no page
	   scrollbar appeared, so the overflow was silent). Shrinking lets its own
	   flex-wrap actually engage. */
	.site-footer__legal-right {
		margin-left: 0;
		flex-shrink: 1;
		flex-wrap: wrap;
		gap: 16px 24px;
	}

	/* 44px targets for every footer link. */
	.site-footer__menu a,
	.site-footer__contact-links a,
	.site-footer__legal-link,
	.site-footer__notice a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.site-footer__menu {
		gap: 0;
	}

	.site-footer__contact-links {
		gap: 0;
	}

	/* The wordmark is already width:100% of the container, so it scales
	   with the narrower container by itself. Nothing to override. */
}

/* Phone widths: the copyright takes its own line so the legal links stay a
   single unbroken group. Without it the wrap point falls wherever the
   copyright string happens to end, which splits the links unpredictably and
   differs per language. This is the sanctioned 767 exception (something
   genuinely breaks), not a second layout. */
@media (max-width: 767px) {
	.site-footer__copyright {
		flex-basis: 100%;
	}
}