/* Site footer: deep espresso, three bands (slogan, columns, departments) and a copyright bar. Mobile-first. */

.iw-footer {
	background: var(--iw-color-espresso);
	color: var(--iw-color-taupe-light);
	font-size: var(--iw-text-sm);
}

.iw-footer__inner {
	max-width: var(--iw-container);
	margin: 0 auto;
	padding: var(--iw-space-16) var(--iw-gutter) var(--iw-space-8);
}

.iw-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.iw-footer a:hover {
	color: var(--iw-color-on-ink);
}

/* Zero-specificity reset, so component rules below (e.g. departments padding) win */
:where(.iw-footer ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.iw-footer__heading {
	margin: 0 0 var(--iw-space-4);
	color: var(--iw-color-on-ink);
	font-family: var(--iw-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Columns */
.iw-footer__columns {
	display: grid;
	gap: var(--iw-space-10) var(--iw-space-8);
	padding: 0 0 var(--iw-space-12);
}

.iw-footer__logo {
	display: inline-block;
	margin-bottom: var(--iw-space-4);
}

.iw-footer__logo img {
	width: 160px;
	height: auto;
}

.iw-footer__brand p {
	max-width: 24rem;
	margin: 0;
}

.iw-footer__list,
.iw-footer__lines {
	display: grid;
	gap: var(--iw-space-2);
}

.iw-footer address {
	margin-bottom: var(--iw-space-3);
	font-style: normal;
}

.iw-footer__hours {
	margin: 0 0 var(--iw-space-3);
}

/* Bottom bar */
.iw-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--iw-space-3) var(--iw-space-8);
	padding-top: var(--iw-space-8);
	border-top: 1px solid rgb(255 255 255 / 14%);
	color: var(--iw-color-taupe);
}

.iw-footer__bottom p {
	margin: 0;
}

/* Social icons at the right end of the bottom bar, muted like the rest of the bar */
.iw-footer__social {
	display: flex;
	align-items: center;
	gap: var(--iw-space-1);
	/* The icon boxes are 44px for touch; pull them outward so the icons align with the content edge
	   (left when stacked on mobile, right when they sit at the end of the bar) */
	margin: -12px 0 -12px -12px;
}

@media (min-width: 640px) {
	.iw-footer__social {
		margin: -12px -12px -12px 0;
	}

	/* A thin divider groups the credit and the icons as one block at the right end */
	.iw-footer__credit {
		padding-right: var(--iw-space-6);
		border-right: 1px solid rgb(255 255 255 / 18%);
	}
}

.iw-footer__social a {
	display: grid;
	place-items: center;
	/* 44px touch target around the 20px icon */
	width: 44px;
	height: 44px;
	color: var(--iw-color-taupe);
}

.iw-footer__social a:hover {
	color: var(--iw-color-taupe-light);
}

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

.iw-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--iw-space-3) var(--iw-space-8);
}

.iw-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--iw-space-2) var(--iw-space-6);
}

/* Right end of the bar: web design credit, then the social icons */
.iw-footer__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--iw-space-3) var(--iw-space-6);
}

.iw-footer__credit {
	margin: 0;
}

/* The studio name reads as a signature: brighter than the muted bar, underlined on hover */
.iw-footer .iw-footer__credit a,
.iw-footer__credit span {
	color: var(--iw-color-taupe-light);
	font-weight: 600;
}

.iw-footer .iw-footer__credit a:hover {
	color: var(--iw-color-on-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Phone: copyright and credit centred, the icons centred on their own row under the credit */
@media (max-width: 639px) {
	.iw-footer__legal > p {
		width: 100%;
		text-align: center;
	}

	.iw-footer__end {
		flex-direction: column;
		width: 100%;
		gap: var(--iw-space-2);
	}

	.iw-footer__credit {
		text-align: center;
	}

	.iw-footer__social {
		margin: 0 0 -12px;
	}
}

@media (min-width: 640px) {
	.iw-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

@media (min-width: 1024px) {
	.iw-footer__columns {
		grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--iw-space-16);
		padding: 0 0 var(--iw-space-16);
	}

	.iw-footer__brand {
		grid-column: auto;
	}
}