ul.social-links {
	padding-left: 0;
	display: flex;
}

ul.social-links.has-text-align-center {
	justify-content: center;
}

ul.social-links.has-text-align-right {
	justify-content: flex-end;
}

ul.social-links li {
	list-style-type: none;
}

ul.social-links a {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

ul.social-links svg {
	fill: var(--wp--preset--color--black);
	width: 20px;
	height: 20px;
}

.has-background ul.social-links svg {
	fill: var(--cwp-text-color);
}

/* On the dark top bar and dark groups the icons are white */
.top-hat ul.social-links svg,
.has-primary-background-color ul.social-links svg,
.has-black-background-color ul.social-links svg {
	fill: var(--wp--preset--color--white);
}

.wp-block-cwp-social-links a {
	pointer-events: none;
}
/* List style: one compact row per network (icon, name, follower count in brass-dark on the right),
   hairlines between, each row a link; two columns from tablet up so five networks take three
   rows. The name turns green on hover. */
ul.social-links--list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	margin: 0;
	padding: 0;
}
ul.social-links--list li {
	margin: 0;
	border-bottom: 1px solid var(--wp--custom--color--hairline);
}
ul.social-links--list li:nth-last-child(-n + 2) {
	border-bottom: 0; /* two columns at every width: the last row is the last two items */
}
ul.social-links--list a {
	width: auto;
	height: auto;
	justify-content: flex-start;
	gap: 12px;
	padding: 10px 0; /* a 44px-tall row, the same size as the footer's menu links, easy to tap */
	font-size: 1rem;
	color: var(--wp--preset--color--black);
}
ul.social-links--list svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}
.social-links__name {
	flex: 1 1 auto;
	font-weight: 600;
}
/* Hover: the network's name turns green with a 2px brass underline, the same as the menu links */
ul.social-links--list a {
	text-decoration: none;
}
ul.social-links--list .social-links__name {
	text-decoration: underline transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: color var(--wp--custom--transition--speed), text-decoration-color var(--wp--custom--transition--speed);
}
ul.social-links--list a:is(:hover, :focus) .social-links__name {
	color: var(--wp--preset--color--green);
	text-decoration-color: var(--wp--preset--color--quaternary);
}
.social-links__count {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--wp--preset--color--brass-dark);
	white-space: nowrap;
}


/* Circles style (the footer's Stay Inspired): each network a brass circle with its icon in dark
   green, the follower count under it in the heading face, then the network's name in small brass
   caps. The circles share the row evenly. Hover: the circle turns white with a brass edge, like
   every brass button. */
ul.social-links--circles {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 0;
}
ul.social-links--circles li {
	margin: 0;
}
ul.social-links--circles a {
	width: auto;
	height: auto;
	display: grid;
	justify-items: center;
	gap: 5px;
	text-decoration: none;
}
.social-links__circle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 2px;
	border-radius: 50%;
	background: var(--wp--preset--color--quaternary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--quaternary);
	transition: background var(--wp--custom--transition--speed) ease;
}
ul.social-links--circles svg,
.has-background ul.social-links--circles svg,
.has-primary-background-color ul.social-links--circles svg {
	width: 19px;
	height: 19px;
	fill: var(--wp--preset--color--primary);
}
ul.social-links--circles .social-links__count {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
ul.social-links--circles .social-links__name {
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}
ul.social-links--circles a:is(:hover, :focus-visible) .social-links__circle {
	background: var(--wp--preset--color--white);
}
ul.social-links--circles a:is(:hover, :focus-visible) svg {
	fill: var(--wp--preset--color--brass-dark);
}