/*
 * Unit17 footer v2 (template-parts/footer-v2.php, switch in inc/footer.php).
 *
 * Tokens from u17-system.css. Loaded after u17-chrome.css: the newsletter form's rules there are
 * pixel-locked to the old Elementor footer, so the few that differ are overridden inside .u17-footer--v2.
 */

.u17-footer--v2 {
	font-family: var(--u17-font);
	font-weight: 300;
	color: var(--u17-on-dark-2);
	background: var(--u17-ink);
}

.u17-footer--v2 :where(p) {
	margin: 0;
}

.u17-f2__wrap {
	max-width: calc(var(--u17-wrap) + 2 * var(--u17-gutter));
	margin-inline: auto;
	padding-inline: var(--u17-gutter);
}

.u17-f2__title {
	font-size: var(--u17-fs-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--u17-tracking-label);
	text-transform: uppercase;
	color: var(--u17-teal);
}

.u17-footer--v2 a {
	color: var(--u17-on-dark-2);
	text-decoration: none;
	transition: color var(--u17-fast) var(--u17-ease);
}

.u17-footer--v2 a:hover,
.u17-footer--v2 a:focus-visible {
	color: var(--u17-teal);
}

.u17-footer--v2 a:focus-visible {
	outline: 2px solid var(--u17-teal);
	outline-offset: 2px;
}

.u17-f2__ico {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.u17-f2__nowrap {
	white-space: nowrap;
}

/* ============================================================ newsletter strip */
.u17-f2__news {
	background: var(--u17-surface);
	border-bottom: 1px solid var(--u17-edge);
	padding-block: var(--u17-space-5);
}

.u17-f2__news-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: var(--u17-space-4) var(--u17-space-6);
	align-items: center;
}

.u17-f2__news-lead {
	margin-top: var(--u17-space-1);
	font-size: var(--u17-fs-lead);
	font-weight: 400;
	line-height: 1.35;
	color: var(--u17-on-dark);
}

/* the form: field and button side by side; the Turnstile slot (1px at rest) and messages below */
.u17-footer--v2 .u17-subscribe__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 10px;
}

.u17-footer--v2 .u17-subscribe__group {
	width: auto;
}

.u17-footer--v2 .u17-subscribe__captcha-group {
	grid-column: 1 / -1;
	grid-row: 2;
}

.u17-footer--v2 .u17-subscribe .u17-subscribe__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.u17-footer--v2 .u17-subscribe .u17-subscribe__input,
.u17-footer--v2 .u17-subscribe .u17-subscribe__group .u17-subscribe__input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	background: var(--u17-ink);
	border: 1px solid var(--u17-on-dark-dim);
	font-size: 16px; /* 16px: iOS does not zoom into the field */
	font-weight: 300;
	color: var(--u17-on-dark);
}

.u17-footer--v2 .u17-subscribe .u17-subscribe__input:focus {
	border-color: var(--u17-teal);
	box-shadow: 0 0 0 1px var(--u17-teal) inset;
}

.u17-footer--v2 .u17-subscribe .u17-subscribe__btn {
	width: auto;
	height: 48px;
	margin-top: 0;
	padding: 0 28px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: var(--u17-tracking-button);
}

.u17-footer--v2 .u17-subscribe__msg {
	grid-column: 1 / -1;
}

.u17-footer--v2 .u17-footer__subscribe-here {
	margin: 0;
}

/* ============================================================ main */
.u17-f2__main {
	padding-block: var(--u17-space-6);
}

.u17-f2__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--u17-space-5) var(--u17-space-5);
	align-items: start;
}

.u17-f2__logo {
	display: inline-block;
	line-height: 0;
}

.u17-f2__logo img {
	display: block;
	width: 145px;
	height: auto;
}

.u17-f2__about {
	max-width: 340px;
	margin-top: var(--u17-space-3);
	font-size: var(--u17-fs-small);
	line-height: 1.55;
	color: var(--u17-on-dark-muted);
}

.u17-f2__contact {
	display: grid;
	gap: 10px;
	margin: var(--u17-space-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--u17-fs-small);
	line-height: 1.4;
}

.u17-f2__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.u17-f2__contact .u17-f2__ico {
	margin-top: 1px;
	color: var(--u17-teal);
}

.u17-f2__contact a {
	overflow-wrap: anywhere;
}

.u17-f2__social {
	display: flex;
	gap: 10px;
	margin-top: var(--u17-space-4);
}

.u17-f2__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--u17-edge-3);
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
}

.u17-f2__social a:hover,
.u17-f2__social a:focus-visible {
	border-color: var(--u17-teal);
}

.u17-f2__social .u17-ico {
	height: 1em;
	fill: currentColor;
}

.u17-f2__links {
	margin: var(--u17-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.u17-f2__links li {
	margin: 0;
}

.u17-f2__links a {
	display: inline-block;
	padding-block: 5px;
	font-size: var(--u17-fs-small);
	line-height: 1.4;
}

/* ============================================================ bottom bar */
.u17-f2__bottom {
	background: var(--u17-ink); /* its own, as the old footer's: contrast tools read it even before phones render the footer */
	border-top: 1px solid var(--u17-edge);
	padding-block: var(--u17-space-4);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--u17-on-dark-muted);
}

.u17-f2__bottom-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"copy   pay"
		"credit pay";
	gap: 4px var(--u17-space-4);
	align-items: center;
}

.u17-f2__copy {
	grid-area: copy;
}

.u17-f2__credit {
	grid-area: credit;
	font-size: 12px;
	color: var(--u17-on-dark-muted); /* 5.7:1 on ink; --u17-on-dark-dim was 3.9:1, under WCAG's 4.5:1 */
}

.u17-f2__pay {
	grid-area: pay;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px 14px;
}

.u17-f2__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--u17-on-dark-2);
}

.u17-f2__secure .u17-f2__ico {
	width: 16px;
	height: 16px;
	color: var(--u17-teal);
}

.u17-f2__pay-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.u17-f2__pay-list li {
	margin: 0;
	line-height: 0;
}

.u17-f2__pay-list img {
	display: block;
	width: 38px;
	height: 24px;
	border-radius: 3px;
}

/* ============================================================ tablet */
@media (max-width: 1100px) {
	.u17-f2__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.u17-f2__brand {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 var(--u17-space-5);
	}

	.u17-f2__brand > :not(.u17-f2__logo) {
		grid-column: 2;
	}

	.u17-f2__logo {
		grid-row: 1 / span 3;
	}

	.u17-f2__about {
		max-width: none;
		margin-top: 0;
	}
}

/* ============================================================ phones */
@media (max-width: 767px) {
	.u17-f2__news {
		padding-block: var(--u17-space-5) var(--u17-space-4);
	}

	.u17-f2__news-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.u17-f2__main {
		padding-block: var(--u17-space-5);
	}

	.u17-f2__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"brand   brand"
			"shop    company"
			"shop    care";
		gap: var(--u17-space-5) var(--u17-space-3);
	}

	.u17-f2__brand {
		grid-area: brand;
		display: block;
	}

	.u17-f2__about {
		margin-top: var(--u17-space-3);
	}

	.u17-f2__col--shop { grid-area: shop; }
	.u17-f2__col--company { grid-area: company; }
	.u17-f2__col--care { grid-area: care; }

	.u17-f2__links a {
		padding-block: 7px; /* 34px rows: comfortable taps */
	}

	.u17-f2__bottom {
		padding-block: var(--u17-space-4) var(--u17-space-5);
		text-align: center;
	}

	.u17-f2__bottom-inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"pay"
			"copy"
			"credit";
		gap: 6px;
	}

	.u17-f2__pay {
		justify-content: center;
		margin-bottom: var(--u17-space-3);
	}

	.u17-f2__pay-list {
		justify-content: center;
	}
}