/*
 * Site footer: newsletter strip, link columns, bottom bar.
 */

.site-footer {
	background: var(--color-ink-solid);
	color: rgba(255, 255, 255, 0.72);
}

/* ---- Newsletter strip ---- */
.footer-newsletter {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding-block: var(--space-8);
	flex-wrap: wrap;
}

.footer-newsletter__title {
	color: #fff;
	margin-bottom: var(--space-1);
}

.footer-newsletter__text {
	margin: 0;
	font-size: var(--fs-sm);
}

.footer-newsletter__form {
	display: flex;
	gap: var(--space-2);
	flex: 0 1 420px;
	min-width: 280px;
}

.footer-newsletter__form .form-input {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.footer-newsletter__form .form-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter__form .btn--primary {
	background: var(--color-accent);
	flex-shrink: 0;
}

.footer-newsletter__form .btn--primary:hover {
	background: var(--color-accent-dark);
}

/* ---- Columns ---- */
.footer-columns {
	display: grid;
	/* Brand + Quick Links + Shop + Help + (Newsletter & Contact) */
	grid-template-columns: 1.35fr 0.9fr 0.9fr 0.85fr 1.6fr;
	gap: var(--space-6);
	padding-block: var(--space-10);
}

.footer-col__title {
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--space-4);
}

.footer-col__list li {
	margin-bottom: var(--space-2);
}

.footer-col__list a {
	font-size: var(--fs-sm);
	transition: color var(--duration-fast) var(--ease-standard);
}

.footer-col__list a:hover {
	color: #fff;
}

.footer-logo-text {
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-3);
}

.footer-logo {
	margin-bottom: var(--space-3);
}

.footer-logo img {
	/* Larger than the header's 48px: a white mark this fine gets
	   visually crushed on a solid dark background at small sizes
	   (thin light-on-dark strokes read thinner than the same weight
	   dark-on-light), so it needs the extra size here to stay legible. */
	max-height: 60px;
	width: auto;
}

.footer-col__text {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	margin-bottom: var(--space-4);
	max-width: 32ch;
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-left: -8px;
}

.footer-social .icon-btn {
	color: rgba(255, 255, 255, 0.72);
	width: 36px;
	height: 36px;
}

.footer-social .icon-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* ---- Contact column: icon + text rows, instead of a plain link
   list — matches the icon-led language used by the trust card and
   value props elsewhere on the site. ---- */
.footer-col__list--contact li {
	margin-bottom: var(--space-3);
}

.footer-col__list--contact li:last-child {
	margin-bottom: 0;
}

.footer-col__list--contact a,
.footer-col__list--contact .footer-col__list-item--static {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.footer-col__list--contact svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: rgba(255, 255, 255, 0.5);
}

.footer-col__newsletter-form {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
	margin-bottom: var(--space-6);
}

.footer-col__newsletter-form .form-input {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-sm);
	border-radius: var(--radius-sm);
}

.footer-col__newsletter-form .form-input:focus {
	border-color: var(--color-accent);
	background: rgba(255, 255, 255, 0.1);
}

.footer-col__newsletter-form .form-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.footer-col__newsletter-form .btn--primary {
	background: var(--color-accent);
	color: #fff;
	flex-shrink: 0;
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-sm);
	border-radius: var(--radius-sm);
}

.footer-col__newsletter-form .btn--primary:hover {
	background: var(--color-accent-dark);
}

.footer-col__contact-block {
	padding-top: var(--space-2);
}

.footer-col__contact-block .footer-col__title {
	margin-bottom: var(--space-3);
}

.footer-widget__title {
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-3);
}

/* ---- Bottom bar ---- */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
	font-size: var(--fs-xs);
	flex-wrap: wrap;
}

.footer-bottom__copyright {
	margin: 0;
}

.footer-bottom__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.footer-bottom__legal a:hover {
	color: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.footer-columns {
		/* Brand and Contact need the full row (logo/about/social,
		   phone/email/address), but Quick Links, Shop and Help are
		   short link lists — keep those three side by side in one
		   row instead of stacking the whole footer into one long
		   column. Relies on source order: Brand (forced full-width)
		   comes first, then Quick Links/Shop/Help fall into row 2's
		   three cells automatically, then Contact (forced full-width)
		   starts its own row. */
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6) var(--space-3);
	}

	.footer-col--brand,
	.footer-col--contact,
	.footer-col--widgets {
		grid-column: 1 / -1;
	}

	.footer-newsletter__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-newsletter__form {
		width: 100%;
	}

	.footer-bottom__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}
}