/**
 * Footer — izebuy design system.
 *
 * A configurable, widget-driven footer:
 *   • Subscribe band   — optional newsletter sign-up (Theme Options → Footer).
 *   • Widget columns   — Footer Column 1–4 (Appearance → Widgets). Admins drop in
 *                        a Navigation Menu widget for links, a Custom HTML widget
 *                        for shortcodes, etc. Laid out as a responsive auto-fit
 *                        grid that only shows the columns that hold widgets.
 *   • Footer nav       — the optional "Footer" menu, a horizontal row of links.
 *   • Social row       — the site-wide social links (shared .ize-social pills).
 *   • Copyright bar    — the bottom-most strip (Theme Options → Copyrights).
 *
 * All colours come from tokens driven by Theme Options → Appearance (footer +
 * copyright colours), via classifieds_izebuy_brand_css() in includes/frontend.php:
 *   --ize-footer-bg / --ize-footer-ink / --ize-footer-link   (the footer body)
 *   --ize-copyright-bg / --ize-copyright-ink                 (the bottom strip)
 *
 * Markup: footer.php + sidebar-footer.php.
 * Depends on: tokens.css, widgets.css (the .ize-widget card this file restyles),
 * socials.css (the .ize-social pill this file recolours for a dark background).
 */

/* ── Shell ───────────────────────────────────────────────────────────────── */

.ize-footer {
	background: var(--ize-footer-bg);
	color: var(--ize-footer-ink);
	font-size: var(--ize-fs-base);
	line-height: var(--ize-lh);
}

/* Bounded, centred content column shared by every footer section — matches the
 * rest of the site (keys off --ize-container). The footer/copyright background
 * colours run full width; only the content inside is constrained. */
.ize-footer__inner {
	max-width: var(--ize-container);
	margin: 0 auto;
	padding-left: var(--ize-4);
	padding-right: var(--ize-4);
}

/* Links default to the footer link colour; specific parts (social pills,
 * copyright) override this below. */
.ize-footer a {
	color: var(--ize-footer-link);
}

/* ── Widget columns ──────────────────────────────────────────────────────── */

/* Auto-fit grid: as many equal columns as fit, so 1–4 filled columns always lay
 * out evenly (and it collapses to a single column on phones with no media query).
 * min(100%, 220px) keeps a lone column from forcing overflow on narrow screens. */
.ize-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--ize-5) var(--ize-6);
	padding-top: var(--ize-7);
	padding-bottom: var(--ize-6);
}

/* Strip the light sidebar-card chrome (.ize-widget from widgets.css) so footer
 * widgets sit flat on the dark footer instead of as white cards. */
.ize-footer .ize-widget {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 var(--ize-5);
}
.ize-footer .ize-widget:last-child {
	margin-bottom: 0;
}
.ize-footer .ize-widget__title {
	margin: 0 0 var(--ize-3);
	color: var(--ize-footer-ink);
	font-size: var(--ize-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Widget body: muted footer ink for text, footer-link for links. Covers the
 * common widgets (Navigation Menu, Pages, Categories, Custom HTML, Text). */
.ize-footer .ize-widget p {
	margin: 0 0 var(--ize-3);
	color: color-mix(in srgb, var(--ize-footer-ink) 78%, transparent);
	font-size: var(--ize-fs-sm);
}
.ize-footer .ize-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ize-footer .ize-widget li {
	line-height: 1.4;
}
.ize-footer .ize-widget li + li {
	margin-top: var(--ize-2);
}
.ize-footer .ize-widget a {
	color: var(--ize-footer-link);
	text-decoration: none;
	font-size: var(--ize-fs-sm);
}
.ize-footer .ize-widget a:hover,
.ize-footer .ize-widget a:focus-visible {
	text-decoration: underline;
}

/* ── Footer nav (the "Footer" menu) ──────────────────────────────────────── */

.ize-footer__nav {
	padding-top: var(--ize-4);
}
.ize-footer__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ize-2) var(--ize-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ize-footer__menu li {
	margin: 0;
}
.ize-footer__menu a {
	color: color-mix(in srgb, var(--ize-footer-ink) 85%, transparent);
	font-size: var(--ize-fs-sm);
	text-decoration: none;
}
.ize-footer__menu a:hover,
.ize-footer__menu a:focus-visible {
	color: var(--ize-footer-link);
	text-decoration: underline;
}

/* ── Social row ──────────────────────────────────────────────────────────── */

.ize-footer__socials {
	display: flex;
	justify-content: center;
	padding: var(--ize-5) var(--ize-4) 0;
}
.ize-footer__socials .ize-socials {
	justify-content: center;
}
/* Recolour the shared .ize-social pill (light by default) for the dark footer. */
.ize-footer .ize-social {
	color: var(--ize-footer-ink);
	border-color: color-mix(in srgb, var(--ize-footer-ink) 30%, transparent);
}
.ize-footer .ize-social:hover,
.ize-footer .ize-social:focus-visible {
	color: var(--ize-footer-bg);
	background: var(--ize-footer-link);
	border-color: var(--ize-footer-link);
}

/* ── Copyright strip ─────────────────────────────────────────────────────── */

.ize-footer__copyright {
	margin-top: var(--ize-6);
	background: var(--ize-copyright-bg);
	color: var(--ize-copyright-ink);
	font-size: var(--ize-fs-sm);
	text-align: center;
}
.ize-footer__copyright .ize-footer__inner {
	padding-top: var(--ize-4);
	padding-bottom: var(--ize-4);
}
.ize-footer__copyright p {
	margin: 0;
}
.ize-footer__copyright a {
	color: var(--ize-copyright-ink);
	text-decoration: underline;
}
.ize-footer__copyright a:hover,
.ize-footer__copyright a:focus-visible {
	color: var(--ize-footer-link);
}

/* When the copyright strip is the only thing in the footer (no widgets / nav /
 * socials above it), drop the top margin so it doesn't leave a dark gap. */
.ize-footer__copyright:first-child {
	margin-top: 0;
}

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	/* Centre the column content so a single stacked column doesn't look ragged. */
	.ize-footer__widgets {
		text-align: center;
	}
	.ize-footer__widgets .ize-socials {
		justify-content: center;
	}
}