/* ===========================================================================
   Helios — Social bar widget
   ======================================================================== */

.hl-social-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--hl-w-border, var(--hl-line));
	border-radius: 999px;
	background-color: var(--hl-w-bg, rgba(11, 9, 8, .55));
	backdrop-filter: blur(10px) saturate(1.1);
}

/* Fixed regardless of where the widget sits in the document, which is what lets
   it live in the header template and still appear at the bottom of every page. */
.hl-social-bar--float {
	position: fixed;
	inset-inline-start: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 65;
	width: max-content;
}

.hl-social-bar--inline {
	position: relative;
	width: max-content;
}

.hl-social-bar a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--hl-cream-faint);
	border-radius: 50%;
	background: transparent;
	color: var(--hl-w-heading, var(--hl-cream));
	transition: .4s var(--hl-ease);
}
.hl-social-bar a svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}
.hl-social-bar a:hover,
.hl-social-bar a:focus-visible {
	background: var(--hl-w-accent, var(--hl-cream));
	border-color: var(--hl-w-accent, var(--hl-cream));
	color: var(--hl-ink);
	transform: translateY(-3px);
}

@media (max-width: 720px) {
	.hl-social-bar { gap: 7px; padding: 8px 10px; }
	.hl-social-bar--float { bottom: 16px; }
	.hl-social-bar a { width: 38px; height: 38px; }
	.hl-social-bar a svg { width: 15px; height: 15px; }
}