/* ═════════════════════════════════════════════════════════════════
   SITE FOOTER
   ═════════════════════════════════════════════════════════════════ */

.site-footer {
	background: var(--cream);
	padding: clamp(48px, 5vw, 80px) var(--container-x) clamp(32px, 3vw, 48px);
	border-top: 1px solid var(--rule);
}

/* ── Grid: logo column + link columns, then bottom bar ── */
.footer-wrap {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-rows: auto auto;
	column-gap: clamp(32px, 20vw, 250px);
	row-gap: clamp(32px, 4vw, 56px);
}
.footer-left   { grid-column: 1; grid-row: 1; }
.footer-cols   { grid-column: 2; grid-row: 1; }
.footer-bottom { grid-column: 1 / -1; grid-row: 2; }

.footer-logo img { height: 52px; width: auto; max-width: none; filter: drop-shadow(0px 1.5px 1.5px rgba(0,0,0,1)); }

/* CALM + Loquat IQ are wrapped in .footer-col-group so they can share
   one grid cell on mobile. On desktop the wrapper is invisible. */
.footer-col-group { display: contents; }

/* ── Link columns ── */
.footer-cols {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(16px, 2vw, 40px);
}
.footer-col-title {
	font-size: 30px; font-weight: 500; color: var(--ink-muted); margin-bottom: 1rem;
	/* Keep multi-word titles like "Loquat IQ" on a single line at all
	   widths — the grid columns shrink on narrow viewports and we
	   don't want the brand word-marks to wrap. */
	white-space: nowrap;
}
/* Standalone columns with no link list under them (currently "CALM" and
   "Loquat IQ") read as full products, not section headers — render
   their title in ink so they match link-emphasis weight. */
.footer-col:not(:has(ul)) .footer-col-title { color: var(--ink); }

/* When the column title itself is a link (CALM, Loquat IQ), inherit
   the title's typography from the parent <h4> so anchor defaults
   don't over-style it, and add the same orange hover the body
   links use for visual continuity. */
.footer-col-title-link {
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}
.footer-col-title-link:hover { color: var(--orange); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* Footer link labels must never wrap — items like "Cards & Payments"
   and "Account opening" stay on a single line at every breakpoint;
   the grid row-gap handles rhythm between items instead. */
.footer-link-placeholder { font-size: 24px;  cursor: default; white-space: nowrap; }
.footer-link { font-size: 24px; white-space: nowrap; color: var(--ink); text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--orange); }
/* Business column: hover lands on brand-green so the colour reads
   as the Business theme accent in this theme's product pages
   (Consumer/About keep the default orange hover). */
.footer-col--business .footer-link:hover,
.footer-col--business .footer-col-title-link:hover { color: var(--green); }
.footer-privacy-link { font-size: 22px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; color: var(--ink); padding-left: 70px;}
.footer-privacy-link:hover { color: var(--ink); }

/* ── Bottom bar ── */
.footer-bottom {
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 70px;
	padding-top: 1.5rem;
	font-size: 22px; color: var(--ink-muted);
}
.footer-bottom-left { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.dot-sep { opacity: .4; }

/* ── Social icons ── */
.footer-social { display: flex; align-items: center; gap: 30px; }
.social-icon {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	color: var(--ink-muted);
	transition: color .2s, border-color .2s, opacity .2s;
	flex-shrink: 0;
}
.social-icon:hover { color: var(--ink); border-color: var(--ink); }
/* New icon set: each brand SVG ships its own colour + proportions, so
   render as an <img> inside the circle chip and cap the visible glyph. */
.social-icon img {
	display: block;
	width: 25px;
	height: 25px;
	object-fit: contain;
}
.social-icon:hover img { opacity: .75; }

/* ── Responsive ──
   Below 1400px the logo column + the huge column-gap eat too much
   room and push the link columns into each other, so scale the
   logo, gaps, and text sizes down in a coordinated step before the
   grid collapses. The existing clamp()s already handle the very
   bottom of the range — this breakpoint stops the layout going
   cramped in the 1025–1400px band. */
@media (max-width: 1400px) {
	.footer-wrap {
		grid-template-columns: max-content 1fr;
		column-gap: clamp(24px, 4vw, 80px);
		row-gap: clamp(28px, 3vw, 40px);
	}
	.footer-logo img { height: 52px; }
	.footer-cols { gap: clamp(12px, 1.5vw, 24px); }
	.footer-col-title { font-size: clamp(20px, 1.8vw, 26px); margin-bottom: .75rem; }
	.footer-link-placeholder,
	.footer-link { font-size: clamp(16px, 1.4vw, 20px); }
	.footer-privacy-link { font-size: clamp(16px, 1.4vw, 20px); padding-left: 40px; }
	.footer-bottom { gap: clamp(24px, 3vw, 50px); font-size: clamp(16px, 1.4vw, 20px); }
	.footer-social { gap: 20px; }
	.social-icon { width: 26px; height: 26px; }
	.social-icon img { width: 22px; height: 22px; }
}
@media (max-width: 1024px) {
	.footer-cols { grid-template-columns: repeat(3, 1fr); }
	.footer-logo img { height: 48px; }
}
@media (max-width: 767px) {
	.site-footer {
		padding: 44px 24px 0;
	}

	/* Stack everything vertically, centered */
	.footer-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	.footer-logo img { height: 30px; }

	/* Columns: 2-col grid, full width */
	.footer-cols {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}

	/* CALM + Loquat IQ share the left cell in row 2 */
	.footer-col-group {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.footer-col-title {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 0;
		white-space: normal;
	}

	.footer-col ul { gap: 8px; }

	.footer-link,
	.footer-link-placeholder { font-size: 14px; white-space: normal; }

	/* Footer bottom: vertical stack, centered, with top rule as divider */
	.footer-bottom {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		padding-top: 28px;
		padding-bottom: 24px;
		font-size: 14px;
		border-top: 1px solid var(--rule);
		width: 100%;
	}

	/* Social icons float above the text in mobile */
	.footer-social { order: -1; }

	/* Bottom-left row: centered, privacy forces to its own line */
	.footer-bottom-left { flex-wrap: wrap; justify-content: center; }

	.footer-privacy-link {
		flex-basis: 100%;
		text-align: center;
		padding-left: 0;
		font-size: 14px;
	}
}