@layer layouts {
	.site-footer {
		background-color: var(--color-text);
		color: var(--color-bg);
		padding: var(--space-section) var(--site-padding);
	}

	.site-footer__inner {
		max-width: var(--mid-width);
		margin-inline: auto;
	}

	.site-footer__columns {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}

	.site-footer__heading {
		font-size: var(--text-xl);
		font-weight: 900;
		text-transform: uppercase;
		line-height: var(--leading-tight);
		margin-block-end: var(--space-xl);

		& a {
			color: inherit;
			text-decoration: none;
		}
	}

	/* --- Shared link styles --- */

	.site-footer a {
		color: var(--color-bg);
		text-decoration: none;

		&:hover {
			opacity: 0.7;
		}

		&:focus-visible {
			outline: 2px solid var(--color-bg);
			outline-offset: 2px;
			border-radius: 2px;
		}
	}

	/* --- Navigation column --- */

	.site-footer__nav {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);

		& a {
			font-size: var(--text-lg);
			font-weight: 500;
			text-transform: uppercase;
		}
	}

	/* --- Contact column --- */

	.site-footer__address {
		font-style: normal;
		line-height: var(--leading-normal);
		margin-block-end: var(--space-lg);
	}

	.site-footer__contact {
		margin-block-end: var(--space-lg);

		& p {
			margin: 0;
			line-height: var(--leading-normal);
		}
	}

	.site-footer__social {
		& a {
			line-height: var(--leading-normal);
		}
	}

	/* --- Contact column inner split --- */

	.site-footer__col-split {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
	}

	@media (width >= 48rem) {
		.site-footer__col-split {
			flex-direction: row;
			gap: var(--space-2xl);
		}

		.site-footer__col-split-left {
			flex: 1;
		}

		.site-footer__col-split-right {
			flex-shrink: 0;
		}
	}

	/* --- Opening hours column --- */

	.site-footer__hours {
		margin: 0;
		display: grid;
		grid-template-columns: auto auto;
		row-gap: var(--space-lg);
	}

	.site-footer__hours-item {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		column-gap: var(--space-lg);

		& dt {
			font-weight: 700;
			grid-row: 1 / 3;
			text-transform: uppercase;
		}

		& dd {
			margin: 0;
		}
	}

	/* --- Bottom bar --- */

	.site-footer__bottom {
		margin-block-start: var(--space-3xl);
		text-align: center;
		font-size: var(--text-sm);

		& p {
			margin: 0;
			line-height: var(--leading-normal);
		}
	}

	/* --- Desktop layout --- */

	@media (width >= 48rem) {
		.site-footer__columns {
			grid-template-columns: 1fr 1fr 1fr;
		}

		.site-footer__col:last-child {
			text-align: right;
		}

		.site-footer__col:last-child .site-footer__hours {
			justify-content: end;
		}
	}
}