/**
 * 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;
}
/* Homepage-only exception (2026-09-06): the Newsletter section
 * (template-parts/homepage/newsletter.php) is also dark (#111) and sits
 * directly above .site-footer with no wrapper in between, so the
 * sitewide 60px gap above inserts a strip of the page's white background
 * between two sections meant to read as one continuous dark block. Zero
 * out the gap only for this specific adjacency — every other page still
 * gets the full 60px rule above, unchanged.
 *
 * 2026-09-07 follow-up: a border/divider line at this seam was
 * considered and explicitly rejected by the user (would read as a
 * repeating pattern against other consecutive dark sections). Breathing
 * room between Newsletter and the footer now comes entirely from
 * .newsletter's own increased top/bottom padding below, not from any
 * margin, gap, or visible line at this boundary — see homepage.css. */
.newsletter + .site-footer {
	margin-top: 0;
}
/* Newsletter now renders above the footer on EVERY page (2026-09-26,
* footer-columns.php), not only the homepage. The footer's own 60px
* page-content gap is zeroed above (the two are one dark block), so the
* section itself carries that gap on non-homepage pages — otherwise it sat
* flush against the page content (pagination, filter sidebar). The
* homepage is excluded: its own sections already space themselves. */
body:not(.home) .newsletter {
	margin-top: 60px;
}
/* Single-product page: "You May Also Like" (.related-products-section) is
* #fafafa and carries its own bottom padding into the dark block (see the
* rule below) — a margin here would expose a white strip between them. */
.related-products-section + .newsletter {
	margin-top: 0;
}
/* Single-product page (2026-09-07): the same white-strip problem as the
 * newsletter case above, one step removed — "You May Also Like"
 * (.related-products-section) is #fafafa, not white, but the sitewide
 * 60px gap above is still plain white, so it read as an unwanted stripe
 * between a light section and the dark footer. Same fix pattern: zero
 * the margin here and let the section's own bottom padding
 * (single-product.css) carry the #fafafa color through what used to be
 * blank space, instead of leaving a differently-colored sliver exposed. */
.related-products-section + .site-footer {
	margin-top: 0;
}
/* Footer logo (2026-09-28, Phase 3 — optional, Appearance > Customize >
 * Brand — Colors & Type). Only ever present in markup when an admin has
 * set one (footer-columns.php), so the `+` adjacency below only changes
 * .footer-top's own top padding in that case — a site with no footer
 * logo configured keeps the original 56px unchanged. */
.footer-logo-wrap {
	padding: 40px 24px 0;
}
.footer-logo {
	display: inline-block;
}
.footer-logo img {
	max-height: 32px;
	width: auto;
	display: block;
}
.footer-logo-wrap + .footer-top {
	padding-top: 26px;
}

.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.
	 * 2-value left/right restored explicitly (2026-09-07 fix) — the old
	 * `padding: 56px 0 26px` 3-value shorthand zeroed left/right, same
	 * .wrap-clobbering bug as .site-header-inner above (see header.css)
	 * and .footer-bottom below — footer.css loads after base.css, so it
	 * silently overrode .wrap's 24px horizontal gutter for this element. */
	padding: 56px 24px 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;
	/* 2-value left/right restored explicitly (2026-09-07 fix) — same
	 * .wrap-clobbering bug as .footer-top/.site-header-inner (see
	 * their comments above/in header.css): the old `padding: 16px 0`
	 * zeroed the sides, pushing the copyright line and legal links
	 * flush to the true page edges instead of the standard 24px inset. */
	padding: 16px 24px;
	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;
	}
}

/* ---------------- Newsletter ---------------- */
.newsletter {
	background: #111;
	color: #fff;
	text-align: center;
	/* Increased top/bottom (2026-09-07, user-approved) — the seam between
	 * this section and .site-footer below is now the SAME background
	 * color (footer.css's .newsletter + .site-footer margin-top:0), with
	 * no gap and deliberately no divider line (a line was considered and
	 * rejected — would read as a repeating pattern against other
	 * consecutive dark sections). This padding is the only thing giving
	 * the two sections breathing room now, so it needs to carry more
	 * weight than the original 46px did: was `padding: 46px 24px`. */
	padding: 64px 24px 72px;
}
.newsletter h2 {
	text-transform: uppercase;
	margin-bottom: 8px;
}
.newsletter p {
	color: #ccc;
	margin-bottom: 20px;
}
.newsletter form {
	display: flex;
	max-width: 420px;
	margin: 0 auto;
}
.newsletter input {
	flex: 1;
	border: 0;
	padding: 12px;
	font-size: 13px;
}
.newsletter button {
	background: #fff;
	color: #111;
	border: 0;
	padding: 0 20px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
}
.newsletter .fineprint {
	font-size: 11px;
	color: #888;
	margin-top: 10px;
}
.newsletter button:disabled {
	opacity: 0.6;
	cursor: default;
}