/* ==========================================================================
   Wayvo footer — see functions/customFooter.php for the three designs and how
   it replaces OceanWP's (and when the Elementor template still wins).

   Same unit as the website sections: --wvft-u is rendered px per laptop px
   (100cqw / 1440, stopping at 1.333). Padding 40 -> 80 and row gaps 80 -> 160
   from 1440 to 1920 (the monitor frame doubles them); the rest scales.

   One grid for everything, so the phone layout is the same elements placed
   differently: desktop is four columns (logo | logo | tagline | tagline+mark),
   phones two.

   Vendor fights: p / a / ul rules at (0,2,1), over OceanWP's bare element
   rules and the Elementor kit's (0,1,1).
   ========================================================================== */

.wv-ft {
	container-type: inline-size;
	display: block;
	width: 100%;
	background-color: var(--wv-ink, #101011);
	color: var(--wv-white, #ffffff);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* [wayvo_footer] inside page content: break out to the full screen width. */
.wv-ft-preview {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wv-ft__inner {
	/* --wv-cw, not 100cqw (2026-10-21): the ink band stays full width, the
	   columns stop at the content width and centre (tokens.css). */
	--wvft-u: clamp(0.5px, calc(var(--wv-cw, 100cqw) / 1440), 1.3334px);
	--wvft-link: max(16.875px, calc(24 * var(--wvft-u)));
	--wvft-small: max(11px, calc(14 * var(--wvft-u)));
	--wvft-stack: max(7.03px, calc(10 * var(--wvft-u)));

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: calc(20 * var(--wvft-u));
	row-gap: min(160px, max(calc(80 * var(--wvft-u)), calc(var(--wv-cw, 100cqw) / 6 - 160px)));
	box-sizing: border-box;
	max-width: var(--wv-content-max, 1440px);
	margin-inline: auto;
	padding: min(80px, max(calc(40 * var(--wvft-u)), calc(var(--wv-cw, 100cqw) / 12 - 80px)));
}

/* ── Shared text ───────────────────────────────────────────────────────── */
.wv-ft p.wv-ft__tagline,
.wv-ft p.wv-ft__heading,
.wv-ft p.wv-ft__small {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.wv-ft p.wv-ft__heading {
	font-size: var(--wvft-link);
	line-height: 1.2;
}

.wv-ft p.wv-ft__small {
	font-size: var(--wvft-small);
	line-height: 1.4;
}

.wv-ft ul.wv-ft__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wvft-stack);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wv-ft ul.wv-ft__list li {
	margin: 0;
	padding: 0;
}

.wv-ft ul.wv-ft__list li::before,
.wv-ft ul.wv-ft__list li::marker {
	content: none;
}

.wv-ft a.wv-ft__link,
.wv-ft a.wv-ft__cta,
.wv-ft a.wv-ft__inline {
	color: var(--wv-white, #ffffff);
	font-family: inherit;
	font-weight: 400;
	transition: opacity 0.2s ease;
}

.wv-ft a.wv-ft__link,
.wv-ft a.wv-ft__cta {
	font-size: var(--wvft-link);
	line-height: 1.2;
}

.wv-ft a.wv-ft__link {
	text-decoration: none;
}

.wv-ft a.wv-ft__cta,
.wv-ft a.wv-ft__inline {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.wv-ft a.wv-ft__link:hover,
.wv-ft a.wv-ft__link:focus,
.wv-ft a.wv-ft__cta:hover,
.wv-ft a.wv-ft__cta:focus,
.wv-ft a.wv-ft__inline:hover,
.wv-ft a.wv-ft__inline:focus {
	color: var(--wv-white, #ffffff);
	opacity: 0.7;
}

.wv-ft a:focus-visible {
	outline: 2px solid var(--wv-white, #ffffff);
	outline-offset: 3px;
}

/* ── Row 1: logo | tagline … B Corp mark ──────────────────────────────── */
.wv-ft a.wv-ft__logo {
	grid-area: 1 / 1 / 2 / 3;
	/* Top, 12 down — where the design's centring put it in a 70 row. The row
	   is now as tall as the doubled B Corp mark, so centring would drop it. */
	align-self: start;
	justify-self: start;
	display: block;
	width: max(200px, calc(324 * var(--wvft-u)));
	margin-top: calc(12 * var(--wvft-u));
	color: var(--wv-white, #ffffff);
}

.wv-ft__logo-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* 278 wide at 32px = 8.7em: breaks after "A world", as drawn. */
.wv-ft p.wv-ft__tagline {
	grid-area: 1 / 3 / 2 / 5;
	align-self: start;
	max-width: 8.7em;
	font-size: max(22.5px, calc(32 * var(--wvft-u)));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.wv-ft__muted {
	color: #c4c4c4;
}

/* Only the phone layout breaks after "One card." */
.wv-ft__br {
	display: none;
}

/* Twice the design's 70 (Paul, 2026-10-18), i.e. 140 laptop px, held between
   its size at a 1050 screen (102.08) and at 1600 (155.56). Phones: as tall
   as the logo instead (see the phone rules). In cqw, not --wvft-u, whose own 0.5..1.333 clamp would get in
   the way.

   Width AND height are both set, from the SVG's 136.941 x 200.1086 viewBox,
   on the link and on the SVG, with min- sizes and no shrinking: an SVG left
   at width: auto can be squeezed by anything that limits its width, and then
   it scales down whole — the mark kept shrinking below 1000 (Paul). */
.wv-ft {
	--wvft-bcorp-h: clamp(102.08px, calc(var(--wv-cw, 100cqw) * 140 / 1440), 155.56px);
	--wvft-bcorp-w: calc(var(--wvft-bcorp-h) * 136.941 / 200.1086);
}

.wv-ft a.wv-ft__bcorp {
	grid-area: 1 / 4 / 2 / 5;
	align-self: start;
	justify-self: end;
	display: block;
	flex: none;
	width: var(--wvft-bcorp-w);
	min-width: var(--wvft-bcorp-w);
	height: var(--wvft-bcorp-h);
	color: var(--wv-white, #ffffff);
}

.wv-ft a.wv-ft__bcorp svg.wv-ft__bcorp-svg {
	display: block;
	width: var(--wvft-bcorp-w);
	min-width: var(--wvft-bcorp-w);
	max-width: none;
	height: var(--wvft-bcorp-h);
	min-height: var(--wvft-bcorp-h);
	max-height: none;
}

/* ── Row 2: support | pages | account + social ───────────────────────── */
.wv-ft__support {
	grid-area: 2 / 1 / 3 / 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wvft-stack);
}

.wv-ft__support-copy {
	display: flex;
	flex-direction: column;
	gap: var(--wvft-stack);
}

/* 325 wide at 14px = 23.25em: the design's three lines. */
.wv-ft__support-copy .wv-ft__small {
	max-width: 23.25em;
}

.wv-ft__pages {
	grid-area: 2 / 3 / 3 / 4;
}

.wv-ft__more {
	grid-area: 2 / 4 / 3 / 5;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wvft-stack);
}

/* ── Row 3: © | Formerly | address ─────────────────────────────────────── */
.wv-ft__bottom {
	grid-area: 3 / 1 / 4 / 5;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: calc(20 * var(--wvft-u));
	row-gap: 20px;
}

.wv-ft p.wv-ft__address {
	grid-column: 3 / 5;
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame: two columns. Small text is 11px, not the frame's
   9.84 — too small to read on a phone (the same call as the review cards). */
@media (max-width: 767px) {

	.wv-ft__inner {
		--wvft-link: 16.875px;
		--wvft-small: 11px;
		--wvft-stack: 7.03px;

		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14.06px;
		row-gap: 80px;
		padding: 20px;
	}

	/* The mark is as tall as the logo here (Paul, 2026-10-18), so the two
	   share one row width: logo w + mark w (logo h x 136.941 / 200.1086) +
	   the 14.06 gap = the 40px-padded screen. Logo h = w x 159 / 840 (its
	   viewBox), so logo w = (row - 14.06) / (1 + 0.18929 x 0.68433) =
	   (row - 14.06) / 1.12953, never over the design's 303.26. */
	.wv-ft {
		--wvft-logo-w: min(303.26px, calc((100cqw - 40px - 14.06px) / 1.12953));
		--wvft-bcorp-h: calc(var(--wvft-logo-w) * 159 / 840);
	}

	/* Logo and mark centred on each other (Paul, 2026-10-18). */
	.wv-ft a.wv-ft__logo {
		grid-area: 1 / 1 / 2 / 3;
		align-self: center;
		width: var(--wvft-logo-w);
		margin-top: 0;
	}

	.wv-ft a.wv-ft__bcorp {
		grid-area: 1 / 2 / 2 / 3;
		align-self: center;
	}

	/* 157 wide at 22.5px = 6.98em: "A world of / better choices." */
	.wv-ft p.wv-ft__tagline {
		grid-area: 2 / 1 / 3 / 2;
		max-width: 6.98em;
		font-size: 22.5px;
	}

	.wv-ft__br {
		display: inline;
	}

	.wv-ft__support {
		grid-area: 2 / 2 / 3 / 3;
	}

	.wv-ft__support-copy .wv-ft__small {
		max-width: none;
	}

	.wv-ft__pages {
		grid-area: 3 / 1 / 4 / 2;
	}

	.wv-ft__more {
		grid-area: 3 / 2 / 4 / 3;
	}

	.wv-ft__bottom {
		grid-area: 4 / 1 / 5 / 3;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14.06px;
	}

	.wv-ft p.wv-ft__address {
		grid-column: 1 / 3;
	}
}

/* ── Phones: no copy under 15px (Paul, 2026-10-21) ───────────────────────────
   The same size as the phone buttons (tokens.css). max() so anything already
   bigger keeps its size; same selectors as above, later, so they win. */
@media (max-width: 767px) {

	.wv-ft p.wv-ft__small {
		font-size: 15px;
	}
}