/**
 * Tank Free Home - Footer
 * The "Ready to Upgrade" CTA band and the site footer.
 */

/* ==========================================================================
   1. CTA band
   ========================================================================== */

.tfh-cta-band {
	background: var(--tfh-white);
	color: var(--tfh-ink);
	border-top: var(--tfh-border);
}

.tfh-cta-band__inner {
	max-width: 820px;
	margin-inline: auto;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
	text-align: center;
}

.tfh-cta-band__title {
	margin-bottom: var(--tfh-space-4);
	color: var(--tfh-ink);
	font-size: var(--tfh-fs-h2);
}

.tfh-cta-band__text {
	margin-bottom: var(--tfh-space-5);
	color: var(--tfh-grey-500);
	font-size: var(--tfh-fs-sm);
}

.tfh-cta-band__note {
	margin-bottom: var(--tfh-space-8);
	color: var(--tfh-ink);
	font-weight: var(--tfh-fw-medium);
}

.tfh-lead-accent {
	color: var(--tfh-accent);
	font-weight: var(--tfh-fw-bold);
}

.tfh-cta-band__button {
	width: 100%;
	max-width: 560px;
}

/* ==========================================================================
   2. Footer
   ========================================================================== */

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

.tfh-footer__top {
	display: grid;
	gap: var(--tfh-space-10);
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	padding-block: var(--tfh-space-16);
}

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

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

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

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

.tfh-footer__logo {
	width: auto;
}

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

.tfh-footer__about {
	margin: 0;
	max-width: 32ch;
	color: var(--tfh-on-dark-70);
	font-size: var(--tfh-fs-sm);
	line-height: var(--tfh-lh-loose);
}

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

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

.tfh-socials a:hover {
	background: var(--tfh-accent);
	color: var(--tfh-white);
}

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

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

.tfh-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--tfh-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tfh-footer__menu a {
	color: var(--tfh-on-dark-70);
	font-size: var(--tfh-fs-sm);
}

.tfh-footer__menu a:hover {
	color: var(--tfh-white);
}

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

.tfh-footer__contact-text {
	margin: 0 0 var(--tfh-space-4);
	color: var(--tfh-on-dark-70);
	font-size: var(--tfh-fs-sm);
	line-height: var(--tfh-lh-loose);
}

.tfh-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--tfh-space-3);
}

.tfh-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--tfh-space-2);
	margin: 0;
	color: var(--tfh-on-dark-70);
	font-size: var(--tfh-fs-sm);
	line-height: var(--tfh-lh-snug);
}

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

.tfh-footer__contact-item a {
	color: var(--tfh-on-dark-70);
}

.tfh-footer__contact-item a:hover {
	color: var(--tfh-white);
}

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

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

.tfh-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tfh-space-3);
	padding-block: var(--tfh-space-5);
}

.tfh-footer__copyright {
	margin: 0;
	color: var(--tfh-on-dark-40);
	font-size: var(--tfh-fs-xs);
}

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

.tfh-footer__legal a {
	color: var(--tfh-on-dark-40);
	font-size: var(--tfh-fs-xs);
}

.tfh-footer__legal a:hover {
	color: var(--tfh-white);
}