.footer,
.tribe-common .footer {
	/* Puts footer at bottom of page all the time. See reset.css for flexbox implementation. Make sure .footer is a direct child of body. */
	margin-top: auto;
	background-color: var(--purple);
	color: var(--off-white);
	padding-top: var(--spacing-40);
	padding-bottom: var(--spacing-20);
	text-align: center;
	font-size: var(--step-0);

	a {
		color: var(--off-white);

		&:hover,
		&:focus-visible {
			color: var(--white);
		}
	}

	@media (width > 768px) {
		padding-top: var(--spacing-80);
		padding-bottom: var(--spacing-30);

		.container {
			display: flex;
			flex-wrap: wrap;
		}
	}
}

.footer__column {
	@media (width > 768px) {
		width: 50%;
		display: flex;
		flex-direction: column;
	}
}

.footer__column--left {
	@media (width > 768px) {
		text-align: left;
	}
}

.footer__column--right {
	@media (width > 768px) {
		text-align: right;
	}
}

.footer__logo {
	margin-bottom: var(--spacing-20);

	.logo {
		margin: 0 auto;
		max-width: 350px;

		@media (width > 768px) {
			margin: 0;
		}
	}

	svg {
		width: 100%;
	}

	/* logo-white.svg still fills the U and S red. In Figma's footer they knock
	out to the purple ground. */
	path[fill="#af272f"] {
		fill: var(--purple);
	}
}

.footer__address-text {
	> *:last-child {
		margin-bottom: 0;
	}

	/* The intro line comes from the address group's Title field, so it arrives as
	a heading. In the footer it reads as body copy. */
	.address__title {
		font-family: var(--font-primary);
		font-size: var(--step-0);
		font-weight: normal;
		margin-bottom: 0;
	}
}

.footer__social {
	.menu-social__items {
		margin-bottom: var(--spacing-30);

		@media (width > 768px) {
			justify-content: flex-end;
		}
	}

	a.menu-social__link {
		/* The icon carries its own tile; filling it light knocks the mark out to
		the purple behind. menu-social.css loads after this part, so the size
		needs to outrank its 25px default. */
		svg {
			fill: var(--off-white);
			height: 80px;
			transition: 0.3s fill;
		}

		&:hover,
		&:focus-visible {
			svg {
				fill: var(--blush);
			}
		}
	}
}

.footer__copyright {
	margin-top: var(--spacing-40);
	text-align: center;
	width: 100%;
}