@layer components {
	.tf-footer {
		background-color: var(--tf-surface-dark);
		color: var(--tf-text-on-dark);
	}

	.tf-footer__inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--tf-space-l);
		padding-block: var(--tf-space-2xl) var(--tf-space-l);
	}

	.tf-footer__col--brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--tf-space-m);
	}

	.tf-footer__logo {
		line-height: 0;
	}

	.tf-footer__logo img {
		block-size: var(--tf-space-l);
		inline-size: auto;
	}

	.tf-footer__site-name {
		color: var(--tf-text-on-dark);
		font-size: var(--tf-font-size-l);
		font-weight: 700;
		text-decoration: none;
	}

	.tf-footer__stat {
		display: inline-block;
		margin: 0;
		padding: var(--tf-space-xs) var(--tf-space-s);
		border: 1px solid var(--tf-border-on-dark);
		border-radius: var(--tf-radius-m);
		font-size: var(--tf-font-size-s);
		font-weight: 700;
	}

	.tf-footer__col-heading {
		margin: 0 0 var(--tf-space-s);
		color: var(--tf-text-muted-on-dark);
		font-size: var(--tf-font-size-s);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	[dir="rtl"] .tf-footer__col-heading {
		text-transform: none;
		letter-spacing: normal;
	}

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

	.tf-footer__menu a {
		color: var(--tf-text-on-dark);
		font-size: var(--tf-font-size-s);
		text-decoration: none;
	}

	.tf-footer__menu a:hover {
		color: var(--tf-text-muted-on-dark);
	}

	.tf-footer__contact-list {
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-s);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tf-footer__contact-item {
		display: flex;
		align-items: flex-start;
		gap: var(--tf-space-xs);
	}

	.tf-footer__icon {
		flex: 0 0 auto;
		color: var(--tf-text-muted-on-dark);
		margin-block-start: 0.15em;
	}

	.tf-footer__contact-text {
		display: flex;
		flex-direction: column;
	}

	.tf-footer__contact-label {
		color: var(--tf-text-muted-on-dark);
		font-size: var(--tf-font-size-s);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	[dir="rtl"] .tf-footer__contact-label {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-footer__contact-text a {
		color: var(--tf-text-on-dark);
		font-size: var(--tf-font-size-s);
		text-decoration: none;
	}

	.tf-footer__contact-text a:hover {
		color: var(--tf-text-muted-on-dark);
	}

	/* Social links — dynamic, Customizer-driven (inc/customizer.php).
	 * Sits below Contact Details; the whole list is simply absent from
	 * the DOM when no URL is set (terraforce_social_links()), so no
	 * empty-state CSS is needed here. */
	.tf-social {
		display: flex;
		gap: var(--tf-space-s);
		list-style: none;
		margin: var(--tf-space-m) 0 0;
		padding: 0;
	}

	.tf-social__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border: 1px solid var(--tf-border-on-dark);
		border-radius: var(--tf-radius-full);
		color: var(--tf-text-muted-on-dark);
		transition: color 150ms ease, border-color 150ms ease;
	}

	.tf-social__link:hover {
		color: var(--tf-text-on-dark);
		border-color: var(--tf-text-on-dark);
	}

	.tf-footer__bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--tf-space-s);
		padding-block: var(--tf-space-m);
		border-block-start: 1px solid var(--tf-border-on-dark);
	}

	.tf-footer__copyright {
		margin: 0;
		color: var(--tf-text-muted-on-dark);
		font-size: var(--tf-font-size-s);
	}

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

	.tf-footer__legal-links a {
		color: var(--tf-text-muted-on-dark);
		font-size: var(--tf-font-size-s);
		text-decoration: none;
	}

	.tf-footer__legal-links a:hover {
		color: var(--tf-text-on-dark);
	}

	@media (max-width: 767px) {
		.tf-footer__inner {
			grid-template-columns: 1fr;
			gap: var(--tf-space-xl);
			padding-block: var(--tf-space-xl) var(--tf-space-m);
		}

		.tf-footer__bottom {
			flex-direction: column;
			align-items: flex-start;
		}
	}
}