/* footer.css — the site footer.

   REBUILT 2026-09-09. The ground was #2e2e2e, a neutral grey unrelated to the brand
   and sitting oddly under a navy site; it is now the deep navy, so the footer reads
   as the bottom of this site rather than as a component borrowed from another one.
   The column headings were 20px at weight 400, which made them the same visual
   weight as the links beneath them and left the groups unreadable as groups. */

.gnt-footer {
	background-color: var(--color-surface-footer);
	color: var(--color-text-inverse);
	padding-block: var(--footer-pad-y) 0;
}

.gnt-footer__main {
	padding-bottom: var(--space-14);
}

/* THREE columns, because footer.php has three children: the brand block and two link
   columns. It declared four (1.6fr plus repeat(3, …)), which left a dead column on the
   right and bunched everything into the left two thirds of the page. */
.gnt-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-12) var(--space-10);
	align-items: start;
}

/* ------------------------------------------------------------------- brand */

.gnt-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	/* No max-width at desktop: the grid column is the measure now, and capping it as
	   well only left unused space inside the column. */
}

/* The class is on the <img> ITSELF here, not on a wrapper — footer.php differs from
   header.php, which wraps its mark in an <a>. So the selector has to be the element,
   not a descendant of it.

   It was written as `.gnt-footer__logo img`, which matched nothing, so no height
   applied and the mark rendered at its intrinsic 800x701: a logo about six times its
   intended size, cropped by the column and reading as a large white arc across the
   footer. Both forms are named below so it keeps working if the markup is ever
   wrapped to match the header. */
.gnt-footer__logo,
.gnt-footer__logo img {
	display: block;
	height: 2.25rem;
	width: auto;
	/* The mark is 1.14:1, so width:auto gives it about 41px. max-width from base.css
	   would otherwise let a narrow column squash it out of ratio. */
	max-width: none;
	margin: 0;
	flex: 0 0 auto;
	align-self: flex-start;
}

.gnt-footer__about {
	margin: 0;
	font-size: var(--text-body-sm);
	line-height: 1.65;
	color: var(--color-text-on-dark-muted);
}

/* ----------------------------------------------------------------- columns */

.gnt-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.gnt-footer__heading {
	margin: 0;
	font-size: var(--text-footer-heading);
	line-height: var(--text-footer-heading-lh);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-inverse);
}

.gnt-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnt-footer__links a,
.gnt-footer__contact a {
	color: var(--color-text-on-dark-muted);
	font-size: var(--text-body);
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--duration-base) var(--easing-standard);
}

.gnt-footer__links a:hover,
.gnt-footer__contact a:hover {
	color: var(--color-text-inverse);
}

.gnt-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-size: var(--text-body);
	line-height: 1.55;
	color: var(--color-text-on-dark-muted);
	font-style: normal;
}

/* ------------------------------------------------------------------- legal */

.gnt-footer__legal {
	border-top: var(--border-width-thin) solid rgba(255, 255, 255, 0.14);
	padding-block: var(--space-6);
}

.gnt-footer__legal .gnt-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4) var(--space-8);
}

.gnt-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnt-footer__legal-links a {
	color: var(--color-text-on-dark-muted);
	font-size: var(--text-body-sm);
	text-decoration: none;
}

.gnt-footer__legal-links a:hover { color: var(--color-text-inverse); }

.gnt-footer__legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	font-size: var(--text-body-sm);
	color: var(--ink-300);
}

.gnt-footer__copyright,
.gnt-footer__credit {
	margin: 0;
}

.gnt-footer__credit a {
	color: inherit;
}

@media (max-width: 1024px) {
	.gnt-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10);
	}

	.gnt-footer__brand {
		grid-column: 1 / -1;
		/* Full width here, so it does need a measure of its own. */
		max-width: 56ch;
	}
}

@media (max-width: 767px) {
	.gnt-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.gnt-footer__main { padding-bottom: var(--space-10); }

	.gnt-footer__legal .gnt-container {
		flex-direction: column;
		align-items: flex-start;
	}
}