/*
 * Footer, following the reference: on a warm band, link columns with small
 * capital titles, a newsletter column divided by a vertical rule, a bottom
 * row with payment labels (left) and round social icons (right), then a
 * centred copyright bar. Phones stack the newsletter first, then the columns.
 */

.site-footer {
	border-top: 1px solid var(--qilaada-color-border-warm);
	background: var(--qilaada-color-beige-60);
	font-size: var(--qilaada-text-base);
}

.site-footer__main {
	display: grid;
	grid-template-areas:
		"newsletter"
		"links"
		"bottom";
	gap: 2.25rem;
	padding-block: 2.5rem 1.5rem;
}

.site-footer__grid {
	grid-area: links;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

.footer-newsletter {
	grid-area: newsletter;
}

.site-footer__bottom {
	grid-area: bottom;
	display: grid;
	gap: var(--qilaada-space-4);
}

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

@media (min-width: 1024px) {
	.site-footer__main {
		grid-template-areas:
			"links"
			"bottom";
		grid-template-columns: minmax(0, 1fr);
		gap: 4rem;
		padding-block: 4.4rem 1.75rem;
	}

	/* Newsletter column: 435px of content, 40px from a full-height rule. */
	.site-footer__main--newsletter {
		grid-template-areas:
			"links newsletter"
			"bottom bottom";
		grid-template-columns: minmax(0, 1fr) 29.7rem;
		column-gap: 0;
	}

	.site-footer__grid {
		grid-template-columns: repeat(var(--footer-columns, 4), auto);
		justify-content: start;
		column-gap: clamp(2.5rem, 5vw, 5.75rem);
	}

	/* Bottom padding keeps the form clear of the social icons placed below it. */
	.site-footer__main--newsletter .footer-newsletter {
		grid-row: 1 / 3;
		margin-block: -4.4rem -1.75rem;
		padding: 4.15rem 0 5rem 2.5rem;
		border-inline-start: 1px solid var(--qilaada-color-border-warm);
	}

	.site-footer__main--newsletter .site-footer__bottom {
		grid-column: 1;
		padding-inline-end: 2.5rem;
	}

	.site-footer__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-self: end;
	}

	/* With a newsletter, the social icons sit at the foot of its column. */
	.site-footer__main--newsletter .footer-social {
		position: absolute;
		inset-inline-end: var(--qilaada-gutter);
		bottom: 1.75rem;
	}

	.site-footer__main--newsletter {
		position: relative;
	}
}

.footer-column__title,
.footer-newsletter__title {
	margin: 0 0 1.25rem;
	font-family: var(--qilaada-font-body);
	font-size: var(--qilaada-text-base);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.3;
}

.footer-newsletter__title {
	font-size: var(--qilaada-text-lg);
}

.footer-brand__text {
	max-width: 22rem;
	margin: 0 0 var(--qilaada-space-4);
	color: var(--qilaada-color-muted);
}

.footer-links {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links a {
	color: #6b6866;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.footer-links a:hover {
	color: var(--qilaada-color-text);
	text-decoration: underline;
}

.footer-links__contact {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

.footer-links__contact .icon {
	width: 1rem;
	height: 1rem;
}

/* Newsletter */
.footer-newsletter__text {
	max-width: 27rem;
	margin: 0 0 1.25rem;
	color: var(--qilaada-color-gray-50);
	line-height: 1.4;
}

.footer-newsletter__form form,
.newsletter-sample {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qilaada-space-2);
}

@media (min-width: 640px) {
	.newsletter-sample {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 1rem;
	}
}

.newsletter-sample input {
	min-height: var(--qilaada-button-height);
	border-color: var(--qilaada-color-white);
	background: var(--qilaada-color-white);
}

.newsletter-sample .button {
	padding-inline: 2.1rem;
	border-radius: 0;
	font-family: var(--qilaada-font-body);
	letter-spacing: 0.04em;
}

.newsletter-sample .button:disabled,
.newsletter-sample input:disabled {
	cursor: not-allowed;
	opacity: 1;
}

.newsletter-sample__note {
	grid-column: 1 / -1;
	margin: var(--qilaada-space-1) 0 0;
	color: var(--qilaada-color-gray-50);
	font-size: var(--qilaada-text-xs);
}

/* Payment labels: small white tags. */
.footer-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-payments li {
	display: grid;
	place-items: center;
	min-width: 2.125rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 0.1875rem;
	background: var(--qilaada-color-white);
	color: var(--qilaada-color-text);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Social: 32px round outlined icons. */
.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-social__link {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--qilaada-color-text);
	border-radius: 50%;
	color: var(--qilaada-color-text);
	transition: background-color var(--qilaada-duration) var(--qilaada-ease), color var(--qilaada-duration) var(--qilaada-ease);
}

.footer-social__link:hover {
	background: var(--qilaada-color-text);
	color: var(--qilaada-color-white);
}

.footer-social__link .icon {
	width: 0.875rem;
	height: 0.875rem;
}

/* Centred copyright bar across the full width, as on the reference. */
.site-footer__copyright {
	margin: 0;
	padding: 1.4rem var(--qilaada-gutter) 1.6rem;
	border-top: 1px solid var(--qilaada-color-border-warm);
	color: var(--qilaada-color-black);
	font-size: var(--qilaada-text-base);
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Homepage design footer (template-parts/footer/homepage.php), on the
 * design's warm band: a service strip of four facts with icons, a rule, then the link
 * columns beside the Qilaada logo, a brand line and round social
 * icons; a copyright bar below. As on the reference, the content runs
 * the full width of the page, level with the header logo at either side. Phones: the strip one fact per row, the columns two by two, the
 * logo block last.
 */
.home-footer {
	--home-footer-rule: #ddd8cc;
	border-top: 1px solid #e2ddd2;
	background: #f0ebe1; /* [ref] approved design */
	color: #111;
	font-family: var(--qilaada-font-body);
}

.home-footer__features,
.home-footer__main {
	padding-inline: 1.25rem;
}

.home-footer__features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding-block: 2.25rem 2rem;
	border-bottom: 1px solid var(--home-footer-rule);
	list-style: none;
}

.home-footer__feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.home-footer__feature .icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: -0.0625rem;
}

.home-footer__feature-title,
.home-footer__feature-text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.35;
}

.home-footer__feature-title {
	font-weight: 600;
}

.home-footer__feature-text {
	margin-top: 0.25rem;
	color: #555;
	font-size: 0.75rem;
}

.home-footer__main {
	display: grid;
	gap: 2.5rem;
	padding-block: 2.25rem 2.5rem;
}

.home-footer__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.25rem 1rem;
}

.home-footer__title {
	margin: 0 0 1.125rem;
	color: #111;
	font-family: var(--qilaada-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-transform: uppercase;
}

.home-footer__links {
	display: grid;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	line-height: 1.2;
	list-style: none;
}

.home-footer__links li {
	display: flex;
}

.home-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #4a4a4a;
	font-size: 0.8125rem;
	line-height: 1.2;
	text-decoration: none;
	text-transform: capitalize;
}

a.home-footer__link:hover {
	color: #111;
	text-decoration: underline;
}

.home-footer__link--contact {
	text-transform: none;
	overflow-wrap: anywhere;
}

.home-footer__link .icon {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
}

/* A business detail that is not available yet: an empty shaded bar. */
.home-footer__bar {
	display: inline-block;
	width: 6.5rem;
	height: 0.625rem;
	border-radius: 1px;
	background: rgb(0 0 0 / 0.08);
}

.home-footer__logo {
	display: inline-block;
	line-height: 0;
}

.home-footer__logo img {
	width: auto;
	height: 2.25rem;
}

.home-footer__brand-text {
	max-width: 17rem;
	margin: 1rem 0 0;
	color: #555;
	font-size: 0.75rem;
	line-height: 1.55;
}

.home-footer__social {
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.home-footer .footer-social__link {
	width: 2.125rem;
	height: 2.125rem;
	border-color: #111;
	color: #111;
}

.home-footer .footer-social__link:hover {
	border-color: #111;
	background: #111;
	color: #fff;
}

.home-footer__social--placeholder .footer-social__link {
	border-color: rgb(0 0 0 / 0.2);
}

.home-footer__copyright {
	padding: 0.875rem var(--qilaada-gutter);
	border-top: 1px solid var(--home-footer-rule);
	color: #111;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
}

@media (min-width: 640px) {
	.home-footer__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 2rem;
	}

	.home-footer__columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	/* Full width inside the site gutter. As on the reference, the four link
	   columns and the logo column share one row at an equal pitch, and the
	   four strip items spread across the same width. */
	.home-footer {
		--home-footer-gap: 2rem;
	}

	.home-footer__features,
	.home-footer__main {
		margin-inline: 1.9375rem; /* The header's side padding. */
		padding-inline: 0;
	}

	.home-footer__features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--home-footer-gap);
		padding-block: 1.75rem 1.5rem;
	}

	.home-footer__main {
		grid-template-columns: minmax(0, 1fr) calc((100% - 4 * var(--home-footer-gap)) / 5);
		column-gap: var(--home-footer-gap);
		padding-block: 2.5rem 2.75rem;
	}

	.home-footer__columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--home-footer-gap);
	}

	.home-footer__title {
		margin-bottom: 1.25rem;
	}

	.home-footer__logo img {
		height: 2rem;
		margin-top: -0.375rem; /* Optical alignment with the column titles. */
	}

	.home-footer__brand-text {
		margin-top: 0.875rem;
	}

	/* The support address stays on one line. */
	.home-footer__link--contact {
		white-space: nowrap;
		overflow-wrap: normal;
	}

	.home-footer__copyright {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding-block: 0;
		font-size: 0.75rem;
	}
}

/* 1024–1199px: tighter gaps keep the five columns' titles on one line. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.home-footer {
		--home-footer-gap: 1.25rem;
	}
}