/**
 * The Golf Shot — Site footer
 *
 * Loaded on every page (see inc/enqueue.php). Markup in
 * template-parts/footer/site-footer.php, rendered inside Blocksy's
 * <footer id="footer">.
 *
 * Mobile (< 690px): single column. Tablet: 2 columns.
 * Desktop (>= 1000px): 4 columns, brand column wider.
 */

.gs-footer {
	--gs-footer-text: var(--gs-cream);
	--gs-footer-muted: rgba(245, 241, 232, 0.55);
	--gs-footer-link: rgba(245, 241, 232, 0.85);
	--gs-footer-line: rgba(245, 241, 232, 0.14);

	padding-top: var(--gs-space-xl);
	padding-bottom: var(--gs-space-md);
	background-color: var(--gs-ink);
	color: var(--gs-footer-text);
}

.gs-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gs-space-lg) var(--gs-space-md);
}

/* Brand column */

.gs-footer__logo {
	display: inline-block;
	font-family: var(--gs-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--gs-footer-text);
	text-decoration: none;
}

/*
 * Logo image (white transparent PNG, 1045 x 480). The file has a transparent
 * margin of ~4.8% of its width on every side; the negative margins trim it
 * so the visible logo aligns with the tagline and the column headings.
 * Rendered 260px wide => visible logo ~235 x 95px.
 */
.gs-footer__logo-image {
	--gs-footer-logo-width: 260px;

	display: block;
	width: var(--gs-footer-logo-width);
	max-width: none;
	height: auto;
	margin: calc(var(--gs-footer-logo-width) * -0.048);
	margin-right: 0;
}

.gs-footer__tagline {
	max-width: 30ch;
	margin: var(--gs-space-sm) 0 0;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-xs);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: var(--gs-tracking-wide);
	text-transform: uppercase;
	color: var(--gs-footer-muted);
}

/* Link columns */

.gs-footer__heading {
	margin: 0 0 var(--gs-space-sm);
	font-family: var(--gs-font-heading);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--gs-tracking-wide);
	text-transform: uppercase;
	color: var(--gs-footer-muted);
}

.gs-footer__links,
.gs-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-footer__link {
	display: inline-block;
	padding-block: 0.625rem; /* ~44px tap target on mobile */
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-sm);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gs-footer-link);
	transition: color var(--gs-duration) var(--gs-ease);
}

.gs-footer__link--small {
	font-size: var(--gs-text-xs);
	letter-spacing: 0.08em;
}

.gs-footer__logo:hover,
.gs-footer__logo:focus-visible,
.gs-footer__link:hover,
.gs-footer__link:focus-visible {
	color: var(--gs-footer-text);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}

.gs-footer__logo:focus-visible,
.gs-footer__link:focus-visible {
	outline: 2px solid var(--gs-footer-text);
	outline-offset: 3px;
}

/* Bottom row */

.gs-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-xs);
	margin-top: var(--gs-space-lg);
	padding-top: var(--gs-space-md);
	border-top: 1px solid var(--gs-footer-line);
}

.gs-footer__copyright {
	margin: 0;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gs-footer-muted);
}

.gs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--gs-space-md);
}

/* Tablet */
@media (min-width: 690px) {
	.gs-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--gs-space-md);
	}
}

/* Desktop */
@media (min-width: 1000px) {
	.gs-footer__grid {
		grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	}

	/* Mouse-sized targets: tighter list rhythm. */
	.gs-footer__link {
		padding-block: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-footer__link {
		transition: none;
	}
}