/*
 * Footer v2 - three candidate designs (see inc/footer-v2.php).
 * Every colour is a design-system token (assets/css/cw-tokens.css) with its
 * literal fallback, per the token file's own convention. Zone rules honoured:
 * lime CTAs carry --cw-olive text (never white), rewards blue appears nowhere.
 * One responsive layout per variant - no separate desktop/mobile markup.
 */

/* ==========================================================================
   SHARED SKELETON
   ========================================================================== */

.cwf2 {
	--cwf2-container: 1100px;
	--cwf2-font: -apple-system, "system-ui", "Segoe UI", roboto, helvetica, arial, sans-serif;
	font-family: var(--cwf2-font);
	font-size: 15px;
	line-height: 1.65;
}

.cwf2 .cwf2-main {
	padding: 48px 24px 40px;
}

.cwf2 .cwf2-grid {
	max-width: var(--cwf2-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
	gap: 40px;
}

.cwf2--olive .cwf2-grid {
	grid-template-columns: 1.4fr 1fr 1fr;
}

@media (max-width: 900px) {
	.cwf2 .cwf2-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.cwf2 .cwf2-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

.cwf2 .cwf2-heading {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cwf2 .cwf2-text {
	margin: 0 0 14px;
}

.cwf2 .cwf2-link {
	display: block;
	padding: 3px 0;
	text-decoration: none;
}

.cwf2 .cwf2-strong {
	font-weight: 700;
}

.cwf2 .cwf2-button {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--cw-lime, #80bc00);
	color: var(--cw-olive, #16210a);
	font-weight: 700;
	text-decoration: none;
}

.cwf2 .cwf2-button:hover {
	background: var(--cw-lime-deep, #5f8c00);
	color: var(--cw-olive, #16210a);
}

.cwf2 .cwf2-brandimg {
	max-width: 240px;
	width: 100%;
	height: auto;
	display: block;
}

.cwf2 .cwf2-visitors {
	margin-top: 18px;
	font-size: 13px;
	opacity: 0.85;
}

.cwf2 .cwf2-visitors__label {
	font-weight: 700;
	margin-right: 6px;
}

.cwf2 .cwf2-bottom {
	padding: 16px 24px;
	text-align: center;
	font-size: 13px;
}

.cwf2 .cwf2-copy {
	margin: 0;
}

/* Social list (markup shared with the historic footer's renderer) - chrome.css
 * still targets the same bare .cwpr-footer__social class for the OLD footer
 * (li/li a { flex: 1; ... } and a 15px all-round padding), which - unopposed
 * here - stretched every item to an equal, oversized box instead of a compact
 * row hugging its own content. Reset both back out. */
.cwf2 .cwpr-footer__social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 14px 0 0;
	padding: 0;
}

.cwf2 .cwpr-footer__social li {
	flex: none;
}

.cwf2 .cwpr-footer__social a {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: flex-start;
	gap: 7px;
	padding: 4px 0;
	text-decoration: none;
	font-size: 14px;
}

.cwf2 .cwpr-footer__social .icon {
	font-size: 20px;
}

/* Icon-only below ~360px of column width (this column sits alongside three
   others once the grid collapses to one column on phones, so it still has
   the full viewport width - the fix is for narrower phones/split panes
   where even that single column is tight). Labels hide, icons stay tappable
   at a slightly larger size to keep the touch target honest. */
@media (max-width: 380px) {
	.cwf2 .cwpr-footer__social {
		gap: 22px;
	}

	.cwf2 .cwpr-footer__social a span:not(.icon) {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.cwf2 .cwpr-footer__social .icon {
		font-size: 22px;
	}
}

/* ==========================================================================
   OPTION 1 - INK LEDGER (cool dark, lime rule, four columns)
   ========================================================================== */

/* #cwpr-footer selector, not .cwf2--ink: chrome.css sets color on the bare
 * #cwpr-footer id (still needed there for the historic footer, which has no
 * v2 variant class), and an id always outguns any number of classes - so a
 * plain class-only rule here would lose the base text colour to chrome.css's
 * dark ink, then have it inherit onto every child with no colour of its own. */
#cwpr-footer.cwf2--ink {
	background: var(--cw-ink, #263238);
	color: var(--cw-on-ink, #dfe3e4);
	border-top: 3px solid var(--cw-lime, #80bc00);
}

.cwf2--ink .cwf2-heading {
	color: #fff;
}

.cwf2--ink a {
	color: var(--cw-on-ink, #dfe3e4);
}

.cwf2--ink .cwf2-link:hover,
.cwf2--ink .cwf2-text a:hover,
.cwf2--ink .cwpr-footer__social a:hover {
	color: var(--cw-lime-bright, #b5e048);
}

.cwf2--ink .cwf2-strong {
	color: #fff;
}

.cwf2--ink .cwf2-text--muted {
	opacity: 0.75;
	font-size: 14px;
}

.cwf2--ink .cwf2-brandimg {
	background: var(--cw-card, #fff);
	border-radius: 10px;
	padding: 12px 16px;
	box-sizing: border-box;
}

.cwf2--ink .cwf2-bottom {
	background: rgba(0, 0, 0, 0.22);
	color: var(--cw-on-ink, #dfe3e4);
}

/* ==========================================================================
   OPTION 2 - BRAND GREY (revised per user 2026-08-20: the chosen columns
   layout on the design-system grey - --cw-ink-2, the logo grey; statement
   band dropped; Customer Care button)
   ========================================================================== */

/* #cwpr-footer selector - see the .cwf2--ink base rule above for why. */
#cwpr-footer.cwf2--olive {
	background: var(--cw-ink-2, #52575a);
	color: #fff;
}

.cwf2--olive .cwf2-heading {
	color: var(--cw-lime-bright, #b5e048);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.cwf2--olive .cwf2-text--contact {
	font-size: 15px;
}

.cwf2--olive .cwf2-text--contact .cwf2-strong {
	color: var(--cw-lime-bright, #b5e048);
}

.cwf2--olive a {
	color: #fff;
}

.cwf2--olive .cwf2-link {
	color: #fff;
}

.cwf2--olive .cwf2-link:hover,
.cwf2--olive .cwf2-text a:hover,
.cwf2--olive .cwpr-footer__social a:hover {
	color: var(--cw-lime-bright, #b5e048);
}

.cwf2--olive .cwf2-visitors {
	color: #fff;
	opacity: 0.8;
}

.cwf2--olive .cwf2-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--cwf2-container);
	margin: 0 auto;
	padding: 18px 24px;
	color: #fff;
}

.cwf2--olive .cwf2-bottom .cwf2-brandimg {
	max-width: 170px;
}

@media (max-width: 560px) {
	.cwf2--olive .cwf2-bottom {
		flex-direction: column;
	}
}

/* ==========================================================================
   OPTION 3 - AISLE END (light retail: lime-wash promise band, page ground)
   ========================================================================== */

/* #cwpr-footer selector - see the .cwf2--ink base rule above for why. */
#cwpr-footer.cwf2--aisle {
	background: var(--cw-ground, #f7f7f5);
	color: var(--cw-ink, #263238);
	border-top: 1px solid var(--cw-line, #e7e5df);
}

.cwf2--aisle .cwf2-promise {
	background: var(--cw-lime-wash, #f3f9e4);
	border-bottom: 1px solid var(--cw-lime-line, #dcecb8);
}

.cwf2--aisle .cwf2-promise__inner {
	max-width: var(--cwf2-container);
	margin: 0 auto;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.cwf2--aisle .cwf2-promise__msg {
	margin: 0;
	font-size: 16px;
	color: var(--cw-olive, #16210a);
}

.cwf2--aisle .cwf2-heading {
	color: var(--cw-ink, #263238);
}

.cwf2--aisle a {
	color: var(--cw-ink-2, #52575a);
}

.cwf2--aisle .cwf2-strong,
.cwf2--aisle .cwf2-text .cwf2-strong {
	color: var(--cw-lime-dark, #4c7000);
}

.cwf2--aisle .cwf2-link:hover,
.cwf2--aisle .cwf2-text a:hover,
.cwf2--aisle .cwpr-footer__social a:hover {
	color: var(--cw-lime-dark, #4c7000);
}

.cwf2--aisle .cwf2-col {
	border-left: 1px solid var(--cw-line, #e7e5df);
	padding-left: 24px;
}

.cwf2--aisle .cwf2-col:first-child {
	border-left: 0;
	padding-left: 0;
}

@media (max-width: 900px) {
	.cwf2--aisle .cwf2-col {
		border-left: 0;
		padding-left: 0;
	}
}

.cwf2--aisle .cwf2-visitors {
	color: var(--cw-grey, #6b6b6b);
}

.cwf2--aisle .cwf2-bottom {
	background: var(--cw-card, #fff);
	border-top: 1px solid var(--cw-line, #e7e5df);
	color: var(--cw-grey, #6b6b6b);
}