/**
 * Window Smart Home - Footer
 * Brand column with newsletter, link columns, contact column and bottom bar.
 */

/* ==========================================================================
   1. Site footer
   ========================================================================== */

.wsh-footer {
	background: var(--wsh-gradient-navy);
	color: var(--wsh-on-dark-70);
}

.wsh-footer a {
	color: var(--wsh-on-dark-70);
}

.wsh-footer a:hover {
	color: var(--wsh-white);
}

.wsh-footer__top {
	display: grid;
	gap: var(--wsh-space-12);
	padding-block: var(--wsh-space-16);
	grid-template-columns: minmax(260px, 1.3fr) repeat(3, 1fr);
}

@media (max-width: 900px) {
	.wsh-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.wsh-footer__top {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------
   Brand column
   ------------------------------------------------------------------------ */

.wsh-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wsh-space-5);
}

.wsh-footer__logo {
	width: auto;
}

.wsh-footer__logo--fallback {
	display: inline-flex;
	align-items: center;
	gap: var(--wsh-space-2);
	color: var(--wsh-white);
	font-size: 1.375rem;
	font-weight: var(--wsh-fw-bold);
}

.wsh-footer__logo--fallback .wsh-branding__icon {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wsh-white);
}

.wsh-footer__about {
	margin: 0;
	max-width: 26rem;
	font-size: var(--wsh-fs-sm);
	line-height: var(--wsh-lh-loose);
}

.wsh-newsletter {
	display: flex;
	gap: var(--wsh-space-2);
	width: 100%;
	max-width: 22rem;
}

.wsh-newsletter__field {
	flex: 1 1 auto;
	border: 0;
	border-radius: var(--wsh-radius-pill);
	padding: 13px 20px;
}

.wsh-newsletter__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border: 0;
	border-radius: var(--wsh-radius-circle);
	background: var(--wsh-blue);
	color: var(--wsh-white);
	transition: background-color var(--wsh-transition);
}

.wsh-newsletter__submit:hover {
	background: var(--wsh-blue-dark);
}

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

.wsh-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wsh-radius-circle);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wsh-white);
	transition: background-color var(--wsh-transition);
}

.wsh-socials a:hover {
	background: var(--wsh-blue);
}

/* ------------------------------------------------------------------------
   Link columns
   ------------------------------------------------------------------------ */

.wsh-footer__heading {
	margin: 0 0 var(--wsh-space-5);
	color: var(--wsh-white);
	font-size: var(--wsh-fs-h5);
}

.wsh-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--wsh-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wsh-fs-sm);
}

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

.wsh-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--wsh-space-4);
	font-size: var(--wsh-fs-sm);
}

.wsh-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wsh-space-3);
	margin: 0;
}

.wsh-footer__contact-item svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--wsh-blue);
}

/* ==========================================================================
   2. Bottom bar
   ========================================================================== */

.wsh-footer__bottom {
	border-top: 1px solid var(--wsh-hairline);
}

.wsh-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wsh-space-4);
	padding-block: var(--wsh-space-5);
	font-size: var(--wsh-fs-xs);
	text-align: center;
}

.wsh-footer__copyright {
	margin: 0;
}