/**
 * Yard Ready Home - Footer
 * Optional subscribe band, site footer columns and the bottom bar.
 */

/* ==========================================================================
   1. Subscribe band
   ========================================================================== */

.yrh-subscribe-band {
	background: var(--yrh-lime);
}

.yrh-subscribe-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--yrh-space-6);
	padding-block: var(--yrh-space-8);
}

.yrh-subscribe-band__title {
	margin: 0;
	max-width: 32rem;
	color: var(--yrh-ink);
	font-size: var(--yrh-fs-h4);
}

.yrh-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yrh-space-3);
	width: 100%;
	max-width: 30rem;
}

.yrh-subscribe__field {
	flex: 1 1 220px;
	border: 0;
	border-radius: var(--yrh-radius-pill);
	padding: 14px 22px;
}

.yrh-subscribe__submit {
	flex: 0 0 auto;
	padding: 14px 28px;
	border: 0;
	background: var(--yrh-btn-green);
	color: var(--yrh-white);
	font-weight: var(--yrh-fw-semibold);
	transition: background-color var(--yrh-transition);
}

.yrh-subscribe__submit:hover {
	background: var(--yrh-btn-green-dark);
}

.yrh-subscribe-embed :is(input, button) {
	border-radius: var(--yrh-radius-pill);
}

/* ==========================================================================
   2. Site footer
   ========================================================================== */

.yrh-footer {
	position: relative;
	background: var(--yrh-navy);
	color: var(--yrh-on-dark-70);
	clip-path: polygon(100% 27.87%, 100% 100%, 0% 100%, 0% 12.22%, 25.78% 0%, 66.89% 13.93%);
}

@media (max-width: 560px) {
	/* The notch is cut with height-relative percentages, sized for a short,
	   wide desktop footer. Once the columns stack to 1fr the footer gets
	   much taller relative to its width, so the same percentages eat far
	   enough into the top to clip the brand column's heading and text. */
	.yrh-footer {
		clip-path: none;
	}
}

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

.yrh-footer a:hover {
	color: var(--yrh-lime);
}

.yrh-footer__top {
	display: grid;
	gap: var(--yrh-space-12);
	padding-top: clamp(4rem, 2rem + 8vw, 7rem);
	padding-bottom: var(--yrh-space-16);
	grid-template-columns: minmax(240px, 1.2fr) repeat(3, 1fr);
}

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

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

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

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

.yrh-footer__brand-link {
	display: flex;
	align-items: center;
	gap: var(--yrh-space-3);
}

.yrh-footer__logo {
	width: auto;
}

.yrh-footer__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: var(--yrh-radius-circle);
	background: rgba(255, 255, 255, 0.1);
	color: var(--yrh-lime);
}

.yrh-footer__logo--fallback {
	color: var(--yrh-white);
	font-size: 1.375rem;
	font-weight: var(--yrh-fw-bold);
}

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

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

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

.yrh-socials a:hover {
	background: var(--yrh-lime);
	color: var(--yrh-ink);
}

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

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

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

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

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

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

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

/* ==========================================================================
   3. Bottom bar
   ========================================================================== */

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

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

.yrh-footer__copyright {
	margin: 0;
}

.yrh-footer__legal {
	display: flex;
	gap: var(--yrh-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}