/*
 * Scott Pool 2026 -- site footer.
 *
 * Phase 2D: replaces the inherited Twenty Twenty-Five demo footer (stock
 * Blog/About/FAQs/Authors/Events/Shop/Patterns/Themes links, all href="#")
 * with a simple functional campaign footer. Reuses the same dark-section
 * treatment already established for .sp-callout (primary-navy background +
 * --text-on-inverse text) and the existing .sp-section/.sp-container layout
 * utilities from base.css -- nothing invented here, just the same tokens
 * applied to a new landmark.
 *
 * Phase 12: restructured from a two-row layout (contact/nav row, then a
 * separate social/privacy row) into a single three-column row -- contact
 * left, social+Privacy Policy center, nav right -- per team mockup
 * direction. The markup move (parts/footer.html) folded the old standalone
 * .sp-footer__meta wrapper into .sp-footer__social-col, now a third child
 * of .sp-footer__inner alongside .sp-footer__contact and .sp-footer__nav;
 * URLs, labels, and the two legal disclaimer paragraphs after
 * .sp-footer__inner are all unchanged.
 */

/* Core stamps the theme's global block-gap (theme.json's --wp--preset--spacing--8,
   32px) as margin-block-start on every top-level child of .wp-site-blocks via
   `:where(.wp-site-blocks) > *` -- zero specificity, so a plain class selector
   here overrides it outright. Left at its default, that shows up as a
   full-width white seam between the last content section and the footer's own
   template-part wrapper, splitting what's designed to read as one continuous
   dark band on pages that close with .sp-callout (Home, Meet Scott). The
   footer already gets its own vertical rhythm from .sp-section's padding
   (below), so this accidental extra margin is redundant everywhere and
   actively wrong wherever the seam is visible. */
footer.wp-block-template-part {
	margin-top: 0;
}

.sp-footer {
	background: var(--wp--preset--color--primary-navy);
	color: var(--text-on-inverse);
}

.sp-footer a {
	color: var(--text-on-inverse);
}
.sp-footer a:hover {
	color: var(--text-on-inverse-muted);
}

.sp-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}
/* Phase 13: .sp-footer__inner's own block ships layout:{"type":"flow"},
   which stamps core's `.wp-block-group-is-layout-flow` class on it --
   `:where(.wp-block-group-is-layout-flow) > *` then applies the same
   32px blockGap as margin-block-start to every child after the first,
   regardless of the *container's* own display mode (that :where() rule
   only cares about the child's position among siblings, so it still
   fires even though .sp-footer__inner itself is flex/grid, not flow,
   per the display overrides below). That gave .sp-footer__social-col and
   .sp-footer__nav (2nd/3rd children) an extra 32px pushed onto whatever
   this file's own `gap` (mobile) or `grid-template-columns` row (desktop)
   already provided -- on mobile it was just extra, redundant vertical
   space; on desktop, since align-items:start compares each item's own
   margin box, that same 32px landed as a real ~32px top offset, exactly
   the "nav starts lower than contact" misalignment reported. Zeroed
   unconditionally: this file already controls all the spacing that
   matters via gap/grid-areas below. */
.sp-footer__inner > * {
	margin-block-start: 0;
}

.sp-footer__name {
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--2);
}

.sp-footer__contact p {
	margin: 0 0 var(--wp--preset--spacing--2);
}

/* Phase 14: "Scott Pool Campaign" (left column) is a bold label
   (.sp-footer__name, 700), but the nav links (right column) were plain
   body weight -- team feedback that the two columns didn't feel like
   similar visual weight. A modest semi-bold on the nav links (not the
   same full 700, which would compete with the campaign-name label as the
   stronger of the two) narrows that gap without changing the primary
   site nav's own styling elsewhere -- scoped to the footer nav only. */
.sp-footer__nav a {
	font-weight: 600;
}
.sp-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--6);
}
.sp-footer__nav li {
	margin: 0;
}

/* ===== Social icons + Privacy Policy column =====
   Icons above, Privacy Policy centered directly beneath them. Mobile
   default: centered, matching the rest of the mobile stack. */
.sp-footer__social-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

@media (max-width: 767px) {
	/* Team mockup direction (Phase 13): social icons + Privacy Policy first
	   (full width, centered), then a two-column row below with contact on
	   the left and nav on the right, each left-aligned within its own
	   column -- CSS grid-template-areas gets that exact order without
	   touching the underlying markup/DOM order (the "social" area is
	   simply placed before "contact"/"nav" despite .sp-footer__social-col
	   being the *second* child in the HTML). */
	.sp-footer__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"social social"
			"contact nav";
		gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
	}
	.sp-footer__social-col {
		grid-area: social;
	}
	.sp-footer__contact {
		grid-area: contact;
	}
	.sp-footer__nav {
		grid-area: nav;
	}
	.sp-footer__nav ul {
		flex-direction: column;
		gap: var(--wp--preset--spacing--2);
	}
}

@media (min-width: 768px) {
	/* Three-column composition per team mockup: contact (left) and nav
	   (right) balance each other around the social+Privacy Policy column,
	   which stays visually centered regardless of how wide the left/right
	   content actually is -- equal 1fr side tracks with the center column
	   sized to its own content (auto) guarantees that centering, rather
	   than a flex gap that only looks centered by coincidence. Left/right
	   columns are top-aligned and keep their own natural (left-aligned)
	   text flow; only the center column's own children are centered. */
	.sp-footer__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		gap: var(--wp--preset--spacing--10);
	}
	.sp-footer__social-col {
		justify-self: center;
	}
	.sp-footer__nav {
		justify-self: end;
		text-align: left;
	}
}

/* Compact icon-only treatment: core's own is-style-logos-only removes the
   per-service brand background chips (default style), leaving just the
   glyph tinted via iconColor -- set to white above to read correctly on
   the navy footer. */
.sp-footer__social {
	gap: var(--wp--preset--spacing--3) !important;
	/* Phase 12: core sizes the is-style-logos-only glyph at 1.25em, resolved
	   against the block's own font-size (16px at has-small-icon-size, i.e.
	   a 20px rendered icon) -- team feedback was that the icon row still
	   read as small/buried against the navy footer. Bumped the em basis
	   here (single-class override; core's has-small-icon-size rule is the
	   same specificity but loads earlier, so this wins on source order
	   alone, no !important needed) to land at the top of the requested
	   ~18-22px rendered range instead of the middle. */
	font-size: 18px;
}
.sp-footer__social .wp-block-social-link {
	background: transparent;
}
/* Core's is-style-logos-only strips all anchor padding (0), which left the
   icon's own clickable area exactly as small as the glyph itself -- no
   breathing room, part of the same "buried" feedback as the size bump
   above. core's padding:0 rule is itself wrapped in :where(), effectively
   zero specificity, so a plain descendant selector overrides it outright. */
.sp-footer__social .wp-block-social-link-anchor {
	padding: 6px;
}
/* Core already ships a subtle hover scale (transform: scale(1.1)); this
   adds an actual color shift so hover/focus is legible against navy too,
   reusing the same muted-on-navy token the rest of the footer's own links
   already use for :hover (.sp-footer a:hover, above). */
.sp-footer__social .wp-block-social-link:hover,
.sp-footer__social .wp-block-social-link:focus-within {
	color: var(--text-on-inverse-muted);
}

.sp-footer__privacy {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
}