.site-footer {
	background-color: var(--color-green-950);
	color: rgba(255, 255, 255, 0.85);
	padding: 80px var(--gutter) 32px;
}

.site-footer__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
}

.site-footer__logo {
	display: inline-block;
	padding-bottom: 20px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.site-footer__logo img {
	width: 220px;
	max-width: 100%;
	height: auto;
}

.site-footer__tagline {
	font-family: var(--font-accent);
	font-style: italic;
	font-size: 18px;
	color: var(--color-white);
	margin: 4px 0 0;
}

.site-footer__socials {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.site-footer__social {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--color-tan-light);
	color: var(--color-green-800);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.site-footer__social svg {
	width: 20px;
	height: 20px;
}

.site-footer__social:hover {
	opacity: 0.85;
}

.site-footer__col h3 {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 18px;
	margin-bottom: 20px;
}

.site-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__col a {
	font-family: var(--font-body);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	transition: opacity 0.2s ease;
}

.site-footer__col a:hover {
	opacity: 0.7;
}

.site-footer__contact-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}

.site-footer__contact-item svg {
	width: 18px;
	height: 18px;
	color: var(--color-tan-light);
	flex-shrink: 0;
}

.site-footer__contact-item a {
	color: inherit;
}

.site-footer__meta {
	grid-column: 1 / -1;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 13px;
	opacity: 0.6;
	text-align: center;
}

.site-footer__meta p {
	margin: 0;
}

/* Copyright i crèdits a l'esquerra, enllaços legals a la dreta. En tauleta i mòbil no hi
   caben de costat: tot centrat i un sota l'altre */
.site-footer__meta-line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px 20px;
}

@media (max-width: 1080px) {
	.site-footer__meta-line {
		flex-direction: column;
	}
}

@media (max-width: 700px) {
	/* En mòbil els crèdits van a la línia de sota, sense el punt */
	.site-footer__credits {
		display: block;
		margin-top: 4px;
	}

	.site-footer__credits::before {
		content: none;
	}
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
}

.site-footer__legal a {
	transition: opacity 0.2s ease;
}

.site-footer__legal a:hover {
	opacity: 0.7;
}

.site-footer__credits::before {
	content: "·";
	margin: 0 8px;
}

.site-footer__credits a {
	font-weight: 700;
	transition: opacity 0.2s ease;
}

.site-footer__credits a:hover {
	opacity: 0.7;
}

/* Tauleta: el logo ocupa tota la fila i Navegació, Documents i Contacte van a sota en tres columnes */
@media (max-width: 1080px) {
	.site-footer__inner {
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
		gap: 40px 32px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

/* Mòbil: una sola columna */
@media (max-width: 700px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
	}
}