/**
 * Footer — 4-column link directory + address/social, blush background,
 * thin divider above a centered copyright line.
 */

.zozia-footer {
	background-color: var(--wp--preset--color--surface);
}

.zozia-footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xl);
	justify-content: space-between;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl);
}

.zozia-footer__column {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 180px;
}

/* Brand column (logo + tagline) runs wider than a link list and its
   text needs breathing room, so give it a larger basis than the other
   three columns. */
.zozia-footer__column--brand {
	flex: 1 1 240px;
	max-width: 280px;
}

.zozia-footer__brand-logo img {
	display: block;
	height: 56px;
	width: auto;
}

.zozia-footer__brand-desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.zozia-footer__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
}

.zozia-footer__title--follow {
	margin-top: 4px;
}

.zozia-footer__link,
.zozia-footer__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.zozia-footer__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.zozia-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
}

.zozia-footer__social svg {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--white);
}

.zozia-footer__bottom {
	display: flex;
	justify-content: center;
	padding: 16px var(--wp--preset--spacing--xl);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.zozia-footer__copyright {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 599px) {
	.zozia-footer__top {
		flex-direction: column;
		gap: var(--wp--preset--spacing--lg);
	}

	/* Stacked, the columns' flex-basis sizes the main axis — which is now
	   height, not width — so a short column like LEGAL would get padded
	   out to its basis in mostly empty space. Height should follow
	   content here. */
	.zozia-footer__column,
	.zozia-footer__column--brand {
		flex: 0 0 auto;
		max-width: none;
	}
}