/* FooterV3 — escape-hatch values only. Layout, spacing, type and palette are framework utilities/tokens. */

.ftr.v3 {
	/* DRAFT: hairline alpha. No bdr_ utility honours a palette token's own alpha (--bdr-clr-o is 1). */
	--ftr-v3-rl-o: 0.3;
	--bdr-clr-o: var(--ftr-v3-rl-o);

	.ftr-v3-mp-lnk {
		/* DRAFT: the framework removes every anchor underline and ships no restore utility. */
		text-decoration: underline;
		text-underline-position: from-font;
	}
}

/* Landmark design (Figma 18723:21729): 64px padding, the LD watermark down the right edge,
   a 250px logo beside the nav (Primary Nav type, 24px gaps), phone in the Phone style, and
   24px social icons 16px apart. Applies on every page, since all layouts use FooterV3. */
.ftr.v3 {
	--ftr-lg-mx-wd: 250;
	/* The -clc formula resolves where it is declared (:root in footer-tools.css), so it is
	   re-declared here to pick up the value above. */
	--ftr-lg-mx-wd-clc: calc((var(--ftr-lg-mx-wd-mbl) * 1px) + (var(--ftr-lg-mx-wd) - var(--ftr-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));

	padding-block: 4rem;
	background-image: url('/media/home/footer/ld-watermark.png');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;

	.ftr-nv ul {
		column-gap: 1.5rem;
	}

	.so-lk svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.so-lk {
		font-size: 1.5rem;
	}

	ul:has(> li > .so-lk) {
		gap: 1rem;
	}

	@media screen and (width < 1280px) {
		background-size: 14rem auto;
		background-position: right -3rem bottom 2rem;

		/* Contact row: let the address wrap instead of running off the screen */
		hr + .flx > .fit {
			flex: 1 1 100%;
			max-width: 100%;
			flex-wrap: wrap;
			justify-content: center;
			text-align: center;
			white-space: normal;
		}
	}
}