.site-footer {
	border-top: 1px solid var(--listiko-color-border);
	background-color: var(--listiko-color-surface);
	margin-top: var(--listiko-space-6);
}

.site-footer__inner {
	display: grid;
	gap: var(--listiko-space-5);
	padding-block: var(--listiko-space-5);
}

@media (min-width: 768px) {
	.site-footer__inner {
		grid-template-columns: 2fr 1fr 1fr;
		align-items: start;
	}
}

.footer-column__title {
	margin-bottom: var(--listiko-space-2);
	font-size: 1rem;
	font-weight: 700;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--listiko-space-2);
}

.footer-menu a {
	color: var(--listiko-color-text);
}

.footer-menu a:hover {
	color: var(--listiko-color-accent);
}

/* Brand column. */
.footer-brand__logo .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 56px;
}

.footer-brand__name {
	font-size: 1.25rem;
	font-weight: 700;
}

.footer-brand__description {
	margin-top: var(--listiko-space-2);
	color: var(--listiko-color-text-muted);
}

.footer-brand__contact {
	display: flex;
	flex-direction: column;
	gap: var(--listiko-space-2);
	margin-top: var(--listiko-space-3);
	color: var(--listiko-color-text-muted);
}

.footer-brand__contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--listiko-space-2);
}

.footer-brand__contact .icon {
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	color: var(--listiko-color-accent);
}

.footer-brand__social {
	display: flex;
	gap: var(--listiko-space-2);
	margin-top: var(--listiko-space-3);
}

.footer-brand__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--listiko-radius-pill);
	background-color: var(--listiko-color-bg);
	border: 1px solid var(--listiko-color-border);
	color: var(--listiko-color-text);
}

.footer-brand__social a:hover {
	color: var(--listiko-color-accent);
	border-color: var(--listiko-color-accent);
}

.footer-brand__social .icon {
	width: 1.1rem;
	height: 1.1rem;
}

/* Copyright bar. */
.site-info {
	border-top: 1px solid var(--listiko-color-border);
	padding-block: var(--listiko-space-3);
	color: var(--listiko-color-text-muted);
	font-size: 0.875rem;
}
