/**
 * Component: Footer columns
 * Usage: .site-footer__columns > .footer-col (repeated) — see footer.php.
 */

.site-footer__columns {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding: var(--space-5) var(--space-4);
	display: grid;
	gap: var(--space-5);
	/* Sized to content rather than equal thirds: bio has a full
	   sentence, links are short single words, social+newsletter is
	   compact. */
	grid-template-columns: minmax(12rem, 1.6fr) minmax(7rem, 0.8fr) minmax(9rem, 1fr);
	border-top: 1px solid var(--color-border);
}

.footer-col__title {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding-bottom: var(--space-2);
	margin: 0 0 var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.footer-col__title--spaced {
	margin-top: var(--space-4);
}

.footer-col p {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}

.footer-col__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/*
 * Same hover treatment as .site-nav a (see components/nav.css): an
 * animated underline sweep plus a text-shadow "bolding" fake, since the
 * self-hosted fonts here are static weights, not a variable font that
 * could animate font-weight directly.
 */
.footer-col__list a,
.footer-col__link-button {
	position: relative;
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	padding-bottom: 0.15em;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
	text-decoration: none;
	text-shadow: 0 0 0 transparent;
	cursor: pointer;
	text-align: left;
	/*
	 * balance, not pretty — pretty only avoids a lone widow word on the
	 * LAST line of longer copy (see base.css's p rule) and did nothing
	 * useful for this two-line link text, still breaking as "Receive
	 * Reflections on" / "Wellbeing". balance actively evens out line
	 * lengths across the whole block, same as this theme's h1/h2 use it
	 * for — better suited to short text like this.
	 */
	text-wrap: balance;
	transition: color var(--transition-base), text-shadow 200ms ease;
}

.footer-col__list a::after,
.footer-col__link-button::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 200ms ease;
}

.footer-col__list a:hover,
.footer-col__list a:focus-visible,
.footer-col__list .current-menu-item > a,
.footer-col__link-button:hover,
.footer-col__link-button:focus-visible {
	color: var(--color-primary);
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

.footer-col__list a:hover::after,
.footer-col__list a:focus-visible::after,
.footer-col__list .current-menu-item > a::after,
.footer-col__link-button:hover::after,
.footer-col__link-button:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Only the underline sweep is motion (a scaleX transform) — the
	 * color/text-shadow fade on the link/button itself is a plain color
	 * change, not a vestibular trigger, so it keeps transitioning. Same
	 * convention as button.css/card.css/news-list.css/nav.css.
	 */
	.footer-col__list a::after,
	.footer-col__link-button::after {
		transition: none;
	}
}

.site-footer__bottom {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding: var(--space-4);
	border-top: 1px solid var(--color-border);
	/*
	 * Flex + justify-content:space-between, not a grid — with exactly
	 * 3 items, this genuinely does center the middle one (the Privacy
	 * Policy link) relative to the other two's actual content edges,
	 * not just the container's geometric center: space-between makes
	 * the gap before item 2 equal the gap after it, and since item 1/
	 * item 3 sit flush against the container's own edges, "equal gaps"
	 * and "centered between their content edges" work out to the same
	 * position. (A 1fr/auto/1fr grid was tried first and looked
	 * off-center — it centers relative to the container instead, which
	 * isn't the same thing once the copyright text and "Scroll Up" are
	 * such different widths.)
	 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}

.site-footer__bottom .site-info {
	margin: 0;
}

.site-footer__privacy-link {
	margin: 0;
}

.site-footer__bottom a {
	color: inherit;
}

.back-to-top {
	text-decoration: none;
	transition: color var(--transition-base);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	color: var(--color-primary);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

@media (max-width: 56rem) {
	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 30rem) {
	.site-footer__columns {
		grid-template-columns: 1fr;
	}
}