/* ==========================================================================
   Footer.
   ========================================================================== */

.footer {
	padding: var(--space-32) var(--space-16);
	border-top: var(--border-default);
	background-color: var(--color-panel);
}

.footer__inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	gap: var(--space-16);
}

.footer__brand {
	color: var(--color-text);
	font-size: var(--font-size-sm);
}

.footer__brand .footer__mascot {
	margin-right: var(--space-8);
}

.footer__brand .footer__tagline {
	color: var(--color-text-muted);
}

.footer__nav {
	flex-wrap: wrap;
	gap: var(--space-16);
}

.footer__nav a {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.footer__nav a:hover {
	color: var(--color-accent);
}

.footer__version {
	margin-left: auto;
	color: var(--color-accent-warm);
	font-size: var(--font-size-xs);
}

.footer__note {
	max-width: var(--container-wide);
	margin: var(--space-16) auto 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

@media (max-width: 640px) {
	.footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer__version {
		margin-left: 0;
	}
}