/**
 * WLRE Theme — Footer.
 *
 * Figma sources:
 *   - Desktop: node 6238:156636  (1440 canvas, 80 top / 64 bottom / 100 side)
 *   - Mobile:  node 6238:154822  (375 canvas, 48 top / 32 bottom / 16 side)
 *
 * Layout contract:
 *   - Deep-navy ground (#0A2438) on all breakpoints; no gradient.
 *   - Top row = brand block (logo + H4 tagline with aqua accent) vs right-
 *     aligned three-column nav (Quick Links / Legal & Support / Get in Touch).
 *   - Bottom band = hairline divider, then copyright ↔ social chips.
 *   - Mobile stacks the top row, inlines the columns vertically, flips the
 *     bottom band so socials sit above copyright.
 *
 * Logo is `wlre_brand_logo()` (inc/logo.php). This file sizes the logo
 * wrapper — never edit the SVG paths to adjust dimensions.
 *
 * All size/spacing/typography values reference design tokens from
 * assets/css/global.css. Pixel literals remain only where Figma pins a
 * specific non-scale value (logo dimensions, column widths, icon sizes).
 */

.wlre-footer {
	background: var(--wlre-color-brand-900);
	color: var(--wlre-color-white);
	padding-block: var(--wlre-space-64) var(--wlre-space-24);
	/* Horizontal padding comes from `.wlre-container`, which already caps
	 * content at 1240px and centres it. Figma's 100px side padding on a
	 * 1440 canvas matches the container's own gutter rules. */
}

.wlre-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-32);
}

/* Figma's footer content zone is 1240px wide (1440 canvas minus 100 side
 * padding). The default `.wlre-container` caps at 1240 INCLUDING its own
 * padding, which leaves only 1040 of usable content at ≥1024 — too tight
 * for the brand column (449) + 48 gap + links column (605) = 1102. Widen
 * the cap on the footer only so the space-between row lands at Figma's
 * intended 138px breathing room without pushing links onto a second line. */
@media (min-width: 1024px) {
	.wlre-footer__inner {
		max-width: var(--wlre-wide-width);
	}
}

/* === Top row ========================================================
 * Two zones — brand on the left (flex:0 natural width, max 449px), link
 * columns on the right (flex:0 natural width). `justify-content:
 * space-between` pushes them apart; on tablet they wrap, on mobile they
 * stack via the media query below. */
.wlre-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wlre-space-48);
	flex-wrap: wrap;
}

/* === Brand block — logo + H4 tagline ================================ */
.wlre-footer__brand {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: stretch;
	gap: var(--wlre-space-24);
	flex-shrink: 0;
	max-width: 320px;
	min-height: 48px;
}

.wlre-footer__logo-link {
	display: inline-flex;
	align-items: center;
	color: var(--wlre-color-white);
	text-decoration: none;
	/* Logo inherits white from this colour; the aqua roof stays fixed. */
}

.wlre-footer__logo-link:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: var(--wlre-space-4);
	border-radius: var(--wlre-space-4);
}

.wlre-footer__logo-mark {
	display: inline-flex;
	/* Figma-pinned logo dimensions; not a token-scale value. */
	width: 185px;
	height: 48px;
}

.wlre-footer__logo-mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* H4 tagline — 28px DM Sans semibold, accent word in Tiffany Aqua. */
.wlre-footer__tagline {
	margin: 0;
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: var(--wlre-font-size-h4);
	line-height: var(--wlre-line-height-heading);
	color: var(--wlre-color-white);
}

.wlre-footer__tagline-accent {
	color: var(--wlre-color-accent-500);
}

/* === Right side — 4 link columns ====================================
 * Figma 6819:380910 (updated footer) shows 4 equal-width nav columns:
 * Per chi compra | Per chi vende | Altro | Area privata. Use a CSS grid
 * so columns stay locked to the same width regardless of label length. */
.wlre-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wlre-space-12);
	flex-shrink: 0;
	flex-grow: 1;
	max-width: 800px;
}

.wlre-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-20);
	min-width: 0;
}

.wlre-footer__col-heading {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-l);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-white);
	margin: 0;
}

.wlre-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-12);
	width: 100%;
	max-width: 100%;
}

.wlre-footer__links a {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-neutral-400);
	text-decoration: none;
	transition: color 0.18s ease;
}

.wlre-footer__links a:hover,
.wlre-footer__links a:focus-visible {
	color: var(--wlre-color-white);
}

/* Contact column items pair an icon with a label — 6px gap per Figma. */
.wlre-footer__links--contact a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wlre-footer__contact-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--wlre-color-neutral-400);
}

.wlre-footer__links--contact a:hover .wlre-footer__contact-icon,
.wlre-footer__links--contact a:focus-visible .wlre-footer__contact-icon {
	color: var(--wlre-color-white);
}

/* === Bottom band ==================================================== */
.wlre-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-32);
	width: 100%;
}

.wlre-footer__divider {
	display: block;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
	width: 100%;
}

.wlre-footer__bottom-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wlre-space-24);
	flex-wrap: wrap;
}

.wlre-footer__copyright {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-white);
	margin: 0;
}

/* === Socials — 32px rounded squares with 0.333px white border ======== */
.wlre-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--wlre-space-12);
}

.wlre-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 6px;
	border-radius: var(--wlre-radius-sm);
	border: 0.333px solid var(--wlre-color-white);
	color: var(--wlre-color-white);
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wlre-footer__social svg {
	width: 20px;
	height: 20px;
}


.wlre-footer__social:hover,
.wlre-footer__social:focus-visible {
	background: var(--wlre-color-accent-500);
	border-color: var(--wlre-color-accent-500);
	color: var(--wlre-color-brand-900);
}

/* === Tablet — keep the top row split, but reflow 4 cols to 2x2 ======= */
@media (max-width: 1023px) and (min-width: 768px) {
	.wlre-footer__top {
		gap: var(--wlre-space-32);
	}
	.wlre-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* === Mobile (≤767) — Figma 6238:154822 =============================== */
@media (max-width: 767px) {
	.wlre-footer {
		padding-block: var(--wlre-space-48) var(--wlre-space-32);
	}

	.wlre-footer__inner {
		gap: var(--wlre-space-48);
	}

	.wlre-footer__top {
		flex-direction: column;
		gap: var(--wlre-space-48);
	}

	.wlre-footer__brand {
		max-width: 100%;
		min-height: 0;
		gap: var(--wlre-space-24);
	}

	.wlre-footer__logo-mark {
		/* Figma mobile logo 154×40 (~83% of desktop). */
		width: 154px;
		height: 40px;
	}

	.wlre-footer__tagline {
		font-size: var(--wlre-font-size-h5);
	}

	/* Columns stack vertically on mobile with 32px between groups. */
	.wlre-footer__cols {
		grid-template-columns: 1fr;
		gap: var(--wlre-space-32);
		max-width: 100%;
		width: 100%;
	}

	.wlre-footer__col {
		gap: var(--wlre-space-16);
	}

	.wlre-footer__links {
		width: 100%;
	}

	.wlre-footer__links a,
	.wlre-footer__links--contact a {
		font-size: 13px;
		min-height: var(--wlre-tap-target-inline);
		padding-block: var(--wlre-space-4);
	}

	.wlre-footer__contact-icon {
		width: 16px;
		height: 16px;
	}

	.wlre-footer__bottom {
		gap: var(--wlre-space-24);
	}

	/* Mobile Figma flips the order — social chips above the copyright. */
	.wlre-footer__bottom-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wlre-space-24);
	}

	.wlre-footer__socials {
		order: 1;
		gap: var(--wlre-space-12);
	}

	.wlre-footer__copyright {
		order: 2;
		font-size: 13px;
	}

	.wlre-footer__social {
		width: 28px;
		height: 28px;
		padding: 5.25px;
		border-radius: 7px;
	}

	.wlre-footer__social svg {
		width: 17.5px;
		height: 17.5px;
	}
}