/*
 * Footer — dark, tall: brand + vertical nav, a subtle divider, then a
 * bottom bar with copyright and a second horizontal menu.
 */

.site-footer {
	background-color: var(--color-primary-dark);
	color: #fff;
	padding-block: var(--space-6);
}

.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-6);
	padding-bottom: var(--space-6);
}

.site-footer .site-logo img {
	height: 40px;
	width: auto;
}

.site-footer .site-logo__text {
	color: #fff;
	font-size: var(--font-size-xl);
}

.footer-nav__menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	text-align: right;
}

.footer-nav__menu a {
	color: var(--color-primary-light);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

.footer-nav__menu a:hover {
	color: #fff;
}

.site-footer__divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0 0 var(--space-4);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.site-footer__copyright {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.footer-bottom-nav__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.footer-bottom-nav__menu a {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.footer-bottom-nav__menu a:hover {
	color: #fff;
}

@media (max-width: 700px) {
	.site-footer__top {
		flex-direction: column;
	}

	.footer-nav__menu {
		text-align: left;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}