/*
 * am-footer — the site footer treatment: brand + ethos, link columns, the direct
 * line (a real person answers), and a legal bottom row.
 *
 * Layout only. For the dark, orange-on-neutral treatment, compose it with the
 * section classes rather than duplicating the token remap:
 *   recommended wrapper classes:  am-section am-section--inverse am-footer
 * (am-section gives the band padding + background + inverse token remap; am-footer
 * lays out the inside). Drop --inverse for a light footer.
 *
 * Structure:
 *   am-footer
 *     am-footer__inner
 *       am-footer__top                 grid: brand column + link columns
 *         am-footer__brand
 *           am-footer__brand-name      "Activemind"
 *           am-footer__ethos           the Security by Heart ethos line
 *           am-footer__contact         name · email · phone (the direct line)
 *         am-footer__col               a column of links
 *           am-footer__heading
 *           am-footer__list / __link
 *       am-footer__bottom              copyright + small print
 *         am-footer__legal
 */

.am-footer__inner {
	max-width: var(--am-container-max);
	margin-inline: auto;
	padding-inline: var(--am-container-pad);
}

.am-footer__top {
	display: grid;
	gap: var(--am-space-700);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.am-footer__top {
		grid-template-columns: 1.5fr repeat(3, 1fr);
		gap: var(--am-space-600);
	}
}

/* Brand column ------------------------------------------------------------- */
.am-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-300);
	max-width: var(--am-content-narrow);
}

.am-footer__brand-name {
	color: var(--am-color-heading);
	font-size: var(--am-font-size-500);
	font-weight: var(--am-weight-bold);
	letter-spacing: var(--am-tracking-tight);
}

.am-footer__ethos {
	color: var(--am-color-accent);
	font-size: var(--am-font-size-100);
	font-weight: var(--am-weight-semibold);
	letter-spacing: var(--am-tracking-wide);
	text-transform: uppercase;
}

.am-footer__contact {
	margin-block-start: var(--am-space-300);
	color: var(--am-color-text);
	font-weight: var(--am-weight-medium);
	line-height: var(--am-leading-snug);
}

/* Link columns ------------------------------------------------------------- */
.am-footer__heading {
	margin-block: 0 var(--am-space-300);
	color: var(--am-color-heading);
	font-size: var(--am-font-size-200);
	font-weight: var(--am-weight-semibold);
	letter-spacing: var(--am-tracking-wide);
	text-transform: uppercase;
}

.am-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.am-footer__list li {
	margin: 0;
}

.am-footer__list li + li {
	margin-block-start: var(--am-space-300);
}

.am-footer__list a,
.am-footer__link {
	color: var(--am-color-text-muted);
	text-decoration: none;
	transition: color var(--am-transition);
}

.am-footer__list a:hover,
.am-footer__link:hover {
	color: var(--am-color-accent);
}

/* Bottom row --------------------------------------------------------------- */
.am-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-400);
	justify-content: space-between;
	margin-block-start: var(--am-space-700);
	padding-block-start: var(--am-space-500);
	border-block-start: 1px solid var(--am-color-border);
	color: var(--am-color-text-muted);
	font-size: var(--am-font-size-200);
}

.am-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-400);
}