/* ==========================================================================
   Social links

   Inline SVG in `currentColor`, so the same block is surface-on-accent in the
   announcement bar and ink in the footer without either place restating a
   colour. No icon font: a font is a network request, a flash of unstyled
   glyphs, and a square where a logo should be if it fails.

   Every icon is aria-hidden and the accessible name is on the link, so a
   screen reader says "Instagram, opens in a new tab" once rather than twice.
   ========================================================================== */

.tfs-social {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--step--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tfs-social__item {
	margin: 0;
}

.tfs-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* A 20px glyph in a 44px target: the icon is what you see, the target is
	   what you hit. */
	min-width: var(--wp--custom--control--tap-target-minimum);
	min-height: var(--wp--custom--control--tap-target-minimum);
	color: inherit;
	text-decoration: none;
}

.tfs-social__link:hover {
	color: inherit;
	text-decoration: none;
	opacity: 0.72;
}

/* Focus indicators are exempt from the no-shadow rule: outline, never shadow.
   currentColor rather than accent, because on the accent-coloured bar an
   accent ring would be invisible. */
.tfs-social__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid currentColor;
	outline-offset: calc(var(--wp--custom--focus--offset) * -1);
}

.tfs-social__icon {
	display: block;
}