/*
 * The Bandcamp, YouTube, Facebook and Instagram icon links in the header and footer.
 */

.pm-social {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Inline SVG filled with currentColor follows the link colours. The 44px
   box keeps each icon an easy tap target on small screens. */
.pm-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--pm-haze);
}

.pm-social a:hover,
.pm-social a:focus-visible {
	color: var(--pm-magenta);
}

.pm-social svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

/* Smaller in the header so the sticky bar keeps the height the hero assumes. */
.pm-header .pm-social {
	margin-right: -0.5rem;
}

.pm-header .pm-social a {
	width: 2.25rem;
	height: 2.25rem;
}

.pm-header .pm-social svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Icons share the title's row on narrow screens so the sticky bar stays two
   rows tall; the nav takes the second row. */
@media (max-width: 50rem) {
	.pm-header .pm-social {
		order: 1;
		margin-left: auto;
	}

	.pm-header__bar > .pm-nav {
		order: 2;
		flex-basis: 100%;
		margin-left: 0;
	}
}