/*
 * Footer: the name, the text links and the social icons.
 */

.pm-footer {
	margin-top: 0;
	padding-bottom: var(--wp--preset--spacing--50);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
}

.pm-footer .wp-block-separator {
	margin-bottom: var(--wp--preset--spacing--40);
}

.pm-footer__name {
	margin: 0;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.pm-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-footer__links a {
	color: var(--pm-haze);
}

.pm-footer__links a:hover {
	color: var(--pm-magenta);
}

/* The same arrow the content uses for links that open another site. */
.pm-footer__links a[href^="http"]::after {
	content: " ↗" / "";
}

/* Two classes outrank the flex layout's child margin reset. The auto start
   margin keeps the links beside the icons, not mid-row; the negative end
   margin lines the last glyph up with the separator, not its tap box. */
.pm-footer .pm-footer__links {
	margin-left: auto;
}

.pm-footer .pm-social {
	margin-right: -0.625rem;
}