/*
 * Footer sign-off band (footer.php's .pm-footer-signoff, added in the
 * 2026-08-22 homepage/site review pass). Sits above the existing
 * .footer_bar_wrapper copyright row inside footer.php's <footer>, on every
 * non-blank template. Design tokens from css/reset.css; the CTA borrows the
 * pm-density-toggle pill language (portfolio-grid.css) so the site's
 * controls keep one voice.
 */

/*
 * The whole <footer> (signoff band + the theme's own copyright row below
 * it) shares one warm surface now (Kedyn's call, 2026-08-23: "why 2
 * different blocks/footers" - the copyright row was plain white while the
 * signoff band above it was warm grey, so the two read as unrelated
 * stacked components instead of one footer). .footer_bar_wrapper itself
 * stays transparent so this shows through.
 */
.footer_bar {
	background: var(--surface-warm, #edebe7);
}

/*
 * No hard border-top: the old 1px divider read as a harsh dark line
 * (Kedyn's call, 2026-08-22).
 *
 * No background of its own, either (removed 2026-08-23): it used to carry
 * a faint top-down gradient wash over the warm surface, meant to soften a
 * white-to-grey handoff. Once .footer_bar above picked up the same warm
 * surface as a flat color, that wash's top edge sat a couple percent
 * darker than the flat grey directly above it (Sponsored/Featured By) -
 * visible as a hard seam line right at the DOM boundary ("see how there's
 * a line... doesn't flow well"). Inheriting .footer_bar's flat background
 * instead of painting its own is what actually makes it one band.
 */
.pm-footer-signoff {
	text-align: center;
	padding: 64px 20px 56px;
}

.pm-footer-signoff__logo {
	display: inline-block;
	line-height: 0;
	transition: transform 0.25s ease;
}

.pm-footer-signoff__logo img {
	max-height: 52px;
	width: auto;
}

.pm-footer-signoff__logo:hover,
.pm-footer-signoff__logo:focus-visible {
	transform: translateY(-3px);
}

/* The click animation Kedyn asked for - a quick springy press. */
.pm-footer-signoff__logo:active {
	animation: pm-footer-logo-pop 0.35s ease;
}

@keyframes pm-footer-logo-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(0.88) rotate(-3deg); }
	70%  { transform: scale(1.06) rotate(2deg); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.pm-footer-signoff__logo,
	.pm-footer-signoff__logo:active {
		transition: none;
		animation: none;
	}
}

.pm-footer-signoff__name {
	font-family: var(--font-family-heading);
	font-size: 22px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-heading-text);
}

.pm-footer-signoff__line {
	font-family: var(--font-family-body);
	font-size: 14px;
	/*
	 * #777 on the footer band (#edebe7) is 3.76:1 - fails AA, on every page.
	 * #5f5f5f is 5.36:1 against that same band.
	 */
	color: #5f5f5f;
	margin: 10px 0 26px;
}

.pm-footer-signoff__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 28px;
}

.pm-footer-signoff__nav a {
	/* -button, not -heading: uppercase nav chrome, not editorial voice
	   (2026-08-23 type decision - same reasoning as screen.css's button
	   rule and the mobile-nav sweep). */
	font-family: var(--font-family-button, var(--font-family-heading));
	font-size: 12px;
	letter-spacing: var(--button-letter-spacing);
	text-transform: uppercase;
	color: #555;
	transition: color 0.2s ease;
	/* Padded to a >=40px touch target - the bare 12px text was an ~18px
	   tap target (2026-08-23 mobile audit). Negative margin keeps the
	   visual gap rhythm the flex gap already sets. */
	display: inline-block;
	padding: 12px 8px;
	margin: -12px -8px;
}

.pm-footer-signoff__nav a:hover,
.pm-footer-signoff__nav a:focus-visible {
	color: var(--color-heading-text);
}

.pm-footer-signoff__nav a.pm-footer-signoff__cta {
	margin: 0; /* the plain-link negative-margin trick above must not shift the pill */
	padding: 10px 22px;
	border: 1px solid var(--color-border);
	border-radius: 22px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pm-footer-signoff__nav a.pm-footer-signoff__cta:hover,
.pm-footer-signoff__nav a.pm-footer-signoff__cta:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-heading-text);
}

@media (max-width: 480px) {
	.pm-footer-signoff {
		padding: 40px 16px 36px;
	}

	.pm-footer-signoff__nav {
		gap: 12px 20px;
	}
}