/**
 * Gymnastics Plus - the site footer, standalone
 * ---------------------------------------------------------------------------
 * THE ASK (JP, 2026-09-07): "yes lets do the footer sweep on the remaining
 * pages", after choosing, from two options put to him, the one where the pages
 * KEEP THEIR CURRENT LOOK and only gain the real footer.
 *
 * WHY THIS FILE EXISTS. The shared footer's styling lived inside
 * css/gp-homepage.css, which loads only for templates registered in
 * gp_public_surface_templates(). So the footer could not be added to a page
 * without also giving that page the homepage's reset, body font, link
 * treatment and heading scale, which would have restyled fifteen live pages.
 * The rules below are that footer's rules and nothing else, so a page can wear
 * the footer and change in no other way.
 *
 * IDENTICAL BY CONSTRUCTION, not by eye: every declaration is the one
 * gp-homepage.css already ships, consuming the same --gpp-* tokens from
 * assets/css/gp-public.css (a pure token file: one :root, zero element
 * selectors, so loading it restyles nothing). Two footers that resolve the
 * same tokens cannot drift apart in colour.
 *
 * ONE DELIBERATE DIFFERENCE: `footer` pins its own font-family. On the
 * homepage the footer inherits Inter from the body; on a page that has not
 * joined the public surface it would inherit that page's font instead, which
 * is exactly the Poppins-instead-of-Inter defect the owner caught on the legal
 * page (2026-09-07). Pinning it makes the footer self-contained and immune to
 * whatever the host page's body font is.
 *
 * Tokens only, no raw hex, no :root of its own.
 *
 * OWNERSHIP: this is a SHARED SEAM. It was cut here because the footer sweep
 * needed it and the UB lane is parked; UB inherits it when it unparks, and a
 * change to it is a coordinated slice reviewed by both UI lanes and merged
 * before anything that depends on it, exactly like the frozen component
 * library and the token layer. Do not fork a second copy of these rules.
 */

footer {
	background: var(--gpp-color-bg-invert);
	color: var(--gpp-color-text-muted-dark);
	padding: 56px 0 30px;
	font-size: 13.5px;
	/* Pinned, not inherited. See the note above. The 1.6 is not a choice: it is
	   what the homepage footer resolves to, inheriting gp-base's body
	   line-height. Measured against the homepage's own render; 1.5 was my first
	   value and it made every box 5px shorter. */
	font-family: 'Inter', sans-serif;
	line-height: 1.6;
}

/* The footer's own container. gp-homepage.css defines .wrap for the whole
   page; this scopes the same numbers to the footer so it cannot collide with
   a host page that already uses that class name for something else. */
footer .wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

footer a {
	color: inherit;
	text-decoration: none;
}

.foot-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--gpp-line);
	margin-bottom: 24px;
}

.foot-col h4 {
	color: var(--gpp-color-text-invert);
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.foot-col a {
	display: block;
	color: var(--gpp-color-text-muted-dark);
	margin-bottom: 10px;
	transition: color .15s;
}

.foot-col a:hover {
	color: var(--gpp-color-text-invert);
}

.foot-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

/* The legal links: no underline (owner ruling 2026-09-07), hover is the
   affordance, same as every other link in this footer. */
.foot-legal a:hover {
	color: var(--gpp-color-text-invert);
}

footer img {
	display: block;
	max-width: 100%;
}


/* ==========================================================================
   RESPONSIVE, the same breakpoints gp-homepage.css uses for this footer.
   ========================================================================== */

@media (max-width: 1024px) {
	footer .wrap { padding: 0 28px; }
}

@media (max-width: 900px) {
	.foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 700px) {
	footer .wrap { padding: 0 22px; }
}

@media (max-width: 560px) {
	footer { padding: 42px 0 26px; }
	footer .wrap { padding: 0 20px; }
}

@media (max-width: 430px) {
	.foot-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 30px; }
	.foot-bottom { flex-direction: column; align-items: center; text-align: center; text-wrap: balance; gap: 6px; }
}