/*
 * footer.css — newsletter band, link columns, legal row.
 * Source: /design/navigation.md §8
 */

.ait-footer {
	margin-top: var(--s-9);
	background: var(--c-surface);
	border-top: var(--border-hair);
}

/* ---------------------------------------------------------------------------
 * Newsletter band — above the columns, on purpose
 * ------------------------------------------------------------------------ */

.ait-footer__band {
	background: var(--c-band);
	padding-block: var(--s-7);
}

.ait-footer__band-inner {
	max-width: 640px;
	text-align: center;
}

.ait-footer__band-title {
	margin-bottom: var(--s-2);
	font-size: var(--fs-h3);
	color: var(--c-primary);
}

.ait-footer__band-copy {
	margin-bottom: var(--s-4);
	color: var(--c-ink);
}

.ait-footer__band-soon {
	margin: 0;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Link columns — 4 across on desktop, stacked on mobile
 * ------------------------------------------------------------------------ */

.ait-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	padding-block: var(--s-7);
}

@media (min-width: 640px) {
	.ait-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ait-footer__cols {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: var(--s-7);
		padding-block: var(--s-8);
	}
}

.ait-footer__brand {
	display: block;
	margin-bottom: var(--s-2);
	color: var(--c-primary);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.ait-footer__mission {
	margin-bottom: var(--s-3);
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
}

.ait-footer__heading {
	margin-bottom: var(--s-3);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
 * Column accordions (navigation.md §8)
 *
 * The columns are `<details>` shipped `open`, so a reader without JavaScript
 * gets every link; `drawer.js` closes the two secondary columns below 640px.
 * From 640px the disclosure affordance is removed entirely — the marker, the
 * pointer, and the 48px target — because at two columns and up there is nothing
 * to collapse and a heading that looks tappable but is not is worse than a
 * heading.
 * ------------------------------------------------------------------------ */

.ait-footer__acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	cursor: pointer;
}

.ait-footer__acc > summary:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

@media (min-width: 640px) {
	.ait-footer__acc > summary {
		min-height: 0;
		cursor: default;
		list-style: none;
	}

	.ait-footer__acc > summary::-webkit-details-marker {
		display: none;
	}
}

.ait-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ait-footer__links > li {
	margin: 0 0 var(--s-2);
}

/* base.css gives content lists a success dot; navigation lists are not content. */
.ait-footer__links > li::before {
	content: none;
}

.ait-footer__links a {
	color: var(--c-ink);
	font-size: var(--fs-small);
	text-decoration: none;
}

.ait-footer__links a:hover {
	color: var(--c-primary);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Legal row
 * ------------------------------------------------------------------------ */

.ait-footer__legal {
	border-top: var(--border-hair);
	padding-block: var(--s-5);
	background: var(--c-bg);
}

.ait-footer__legal p {
	margin: 0;
	color: var(--c-ink-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-tight);
}

.ait-footer__legal a {
	color: var(--c-ink-muted);
	text-decoration: underline;
}

.ait-footer__legal a:hover {
	color: var(--c-primary);
}

/* ---------------------------------------------------------------------------
 * Responsive visibility helpers
 *
 * Uses `hidden`, not display:none on a wrapper, so the hidden variant is
 * removed from the accessibility tree too — otherwise a screen reader reads
 * the CTA label twice.
 * ------------------------------------------------------------------------ */

.ait-show-sm {
	display: inline;
}

.ait-hide-sm {
	display: none;
}

@media (min-width: 480px) {
	.ait-show-sm {
		display: none;
	}

	.ait-hide-sm {
		display: inline;
	}
}