/**
 * footer.css
 *
 * Ported directly from the approved review mockups.
 */

/*
 * margin-top is the canonical page-content-to-footer gap for the WHOLE
 * site (added 2026-09-02, testing-round item 18) — since footer.php
 * calls get_template_part('template-parts/footer/footer-columns')
 * directly after whatever a page template just rendered, with no shared
 * <main> wrapper in between, styling the footer's own top edge is the
 * one rule every page automatically gets, with zero per-template markup
 * changes. Replaces three separate, inconsistent one-off paddings that
 * had drifted apart (.cart-layout 60px, .checkout-layout 60px,
 * .shop-layout 50px — see cart.css/checkout.css/shop.css) and were
 * missing entirely on the cart's empty state and the single-product
 * page (the two gaps reported in this item). Same category of fix as
 * the earlier breadcrumb CSS consolidation into base.css — one
 * canonical rule instead of N one-off copies that can silently miss a
 * page.
 */
.site-footer {
	background: #111;
	color: #ccc;
	margin-top: 60px;
}
.footer-top {
	/* Extra top padding here (was 40px) stands in for the vertical space
	 * the removed Customer Service/Sales/Hotline/Order Tracking contact
	 * bar used to provide, now that .footer-top is the first thing
	 * inside .site-footer. */
	padding: 56px 0 26px;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.footer-grid h4 {
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}
.footer-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-grid a {
	color: #bbb;
	font-size: 12.5px;
	display: block;
	padding: 3px 0;
}
.footer-grid a:hover {
	color: #fff;
}

/* Social icons: only rendered by footer-columns.php when a URL is
 * actually filled in for that platform — self-service configurability,
 * per docs/spec-review.md Section 3. Vertical stack, icon + platform
 * name per row (changed 2026-09-02 from a horizontal row of circular
 * icon-only badges — per explicit design request). Icons are inline
 * SVGs (template-parts/footer/social-icons.php) — grayscale/currentColor,
 * matching this theme's no-color-outside-swatches convention. */
.footer-social {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}
.footer-social a {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: #bbb;
	padding: 2px 0;
}
.footer-social a svg {
	width: 18px;
	height: 18px;
	flex: none;
	fill: currentColor;
}
.footer-social a:hover {
	color: #fff;
}

.footer-bottom {
	border-top: 1px solid #333;
	padding: 16px 0;
	font-size: 11.5px;
	color: #888;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.footer-bottom .legal-links a {
	color: #888;
	margin-right: 10px;
}
.footer-bottom .legal-links a:hover {
	color: #fff;
}

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