/* ============================================================
   FOOTER — site-footer
   Figma source: node 52:475
   ============================================================ */

/* ----------------------------------------------------------
   Base (mobile-first)
---------------------------------------------------------- */

.site-footer {
	background: var(--color-gray-light);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-8);
	padding-inline: var(--container-pad);
}

/* Column headings
---------------------------------------------------------- */

.site-footer__heading {
	font-size: var(--size-md);       /* 18px — Figma confirmed */
	font-weight: var(--weight-bold); /* 700  — Figma confirmed */
	color: var(--color-text);
	line-height: calc( 26 / 18 );
	margin: 0 0 var(--space-2);      /* 8px — Figma: content starts 7px below heading */
}

/* Nav menus (columns 1 & 2)
---------------------------------------------------------- */

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);             /* 4px — Figma confirmed */
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu a {
	font-size: 0.9375rem;              /* 15px — Figma confirmed */
	font-weight: var(--weight-regular);
	color: var(--color-text);
	text-decoration: none;
	line-height: calc( 26 / 15 );
	transition: color var(--transition-fast);
}

.site-footer__menu a:hover {
	color: var(--color-primary);
}

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

.site-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);             /* 8px — Figma confirmed */
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: 0.9375rem;              /* 15px — Figma confirmed */
	font-weight: var(--weight-regular);
	color: var(--color-text);
	line-height: calc( 26 / 15 );
}

.site-footer__contact-item strong {
	font-weight: var(--weight-bold);
	display: block;
}

.site-footer__contact-item a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-footer__contact-item a:hover {
	color: var(--color-primary);
}

/* Contact icons */

.site-footer__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-top: 5px;
	color: var(--color-primary);
}

.site-footer__icon i {
	font-size: 13px;
	line-height: 1;
}

/* Brand column (logo + socials)
---------------------------------------------------------- */

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

.site-footer__logo {
	display: inline-flex;
	text-decoration: none;
}

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

/* Social icons
---------------------------------------------------------- */

.site-footer__socials {
	display: flex;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--color-primary);
	color: var(--color-text-light);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: background var(--transition-fast);
}

.site-footer__social-link:hover {
	background: var(--color-primary-dark);
}

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

.site-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-3);
	padding-inline: var(--container-pad);
	text-align: center;
}

.site-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal-menu li {
	display: flex;
	align-items: center;
}

.site-footer__legal-menu li + li::before {
	content: '|';
	padding-inline: var(--space-2);
	font-size: var(--size-sm);
	color: var(--color-text);
}

.site-footer__legal-menu a {
	font-size: var(--size-sm);
	font-weight: var(--weight-regular);
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-footer__legal-menu a:hover {
	color: var(--color-primary);
}

.site-footer__copyright {
	font-size: var(--size-sm);         /* 14px — Figma confirmed */
	font-weight: var(--weight-regular);
	color: var(--color-text);
	line-height: var(--leading-normal);
	margin: 0;
}

.site-footer__copyright a {
	color: var(--color-text);
	text-decoration: underline;
	transition: color var(--transition-fast);
}

.site-footer__copyright a:hover {
	color: var(--color-primary);
}

/* ----------------------------------------------------------
   Tablet (≥ 640px) — 2-column grid
---------------------------------------------------------- */

@media (min-width: 640px) {

	.site-footer__inner {
		grid-template-columns: repeat( 2, 1fr );
	}

}

/* ----------------------------------------------------------
   Desktop (≥ 992px) — 4-column grid
---------------------------------------------------------- */

@media (min-width: 992px) {

	.site-footer__inner {
		grid-template-columns: repeat( 4, 1fr );
		padding-block: var(--section-py);         /* 80px — Figma confirmed */
		row-gap: var(--space-8);                  /* 48px row — Figma confirmed */
		column-gap: var(--space-2);               /* 8px col  — Figma confirmed */
	}

	.site-footer__col--brand {
		align-items: flex-end;
	}

	.site-footer__socials {
		justify-content: flex-end;
	}

}