/* ===========================================================
   Social Icons by Foxco
   Every icon link carries a real accessible name (aria-label,
   set in widget.php) -- this stylesheet only handles the visual
   side. The icon glyph itself is aria-hidden so screen readers
   read the label once, not the label plus a stray icon name.
   =========================================================== */

.foxco-si-wrap {
	display: inline-block;
}

.foxco-si-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 12px;
}

.foxco-si-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.foxco-si-link {
	--foxco-si-color: #1a1a2e;
	--foxco-si-bg: var(--foxco-si-color);
	--foxco-si-icon-color: #ffffff;
	--foxco-si-hover-bg: #df6737;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	text-decoration: none;
	background: var(--foxco-si-bg);
	color: var(--foxco-si-icon-color);
	transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.foxco-si-link i,
.foxco-si-link svg {
	font-size: 16px;
	line-height: 1;
}

/* Shapes */
.foxco-si-shape-circle .foxco-si-link      { border-radius: 50%; }
.foxco-si-shape-rounded-square .foxco-si-link { border-radius: 8px; }
.foxco-si-shape-square .foxco-si-link      { border-radius: 0; }
.foxco-si-shape-none .foxco-si-link {
	background: transparent !important;
	color: var(--foxco-si-color, var(--foxco-si-bg));
	width: auto;
	height: auto;
}

/* Preset: Real Brand Colors -- --foxco-si-color is set inline per icon,
   background derives from it so each platform shows its own color */
.foxco-si-preset-brand-colors .foxco-si-link {
	background: var(--foxco-si-color);
	color: #ffffff;
}
.foxco-si-preset-brand-colors.foxco-si-shape-none .foxco-si-link {
	color: var(--foxco-si-color);
}

/* Preset: Monochrome -- single color set inline, used for both bg and
   the icon-only (shape:none) look */
.foxco-si-preset-monochrome .foxco-si-link {
	background: var(--foxco-si-color);
	color: #ffffff;
}
.foxco-si-preset-monochrome.foxco-si-shape-none .foxco-si-link {
	color: var(--foxco-si-color);
}

/* Preset: Custom -- bg/icon/hover colors set inline from the widget's
   Custom Colors controls */
.foxco-si-preset-custom .foxco-si-link {
	background: var(--foxco-si-bg);
	color: var(--foxco-si-icon-color);
}
.foxco-si-preset-custom .foxco-si-link:hover {
	background: var(--foxco-si-hover-bg);
}

/* Preset: Foxco Brand */
.foxco-si-preset-foxco .foxco-si-link { background: #1a1a2e; color: #ffffff; }
.foxco-si-preset-foxco .foxco-si-link:hover { background: #df6737; }

/* Preset: Dr Guberman */
.foxco-si-preset-guberman .foxco-si-link { background: #2c79c0; color: #ffffff; }
.foxco-si-preset-guberman .foxco-si-link:hover { background: #f9bf26; }

/* Preset: Saleen */
.foxco-si-preset-saleen .foxco-si-link { background: #000000; color: #ffffff; }
.foxco-si-preset-saleen .foxco-si-link:hover { background: #cb2d42; }

/* Preset: Modern Minimal */
.foxco-si-preset-minimal .foxco-si-link { background: #f1f1f1; color: #1a1a1a; }
.foxco-si-preset-minimal .foxco-si-link:hover { background: #1a1a1a; color: #ffffff; }

/* Hover effects -- skipped entirely for users who prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
	.foxco-si-hover-lift .foxco-si-link:hover   { transform: translateY(-4px); }
	.foxco-si-hover-grow .foxco-si-link:hover   { transform: scale(1.15); }
	.foxco-si-hover-rotate .foxco-si-link:hover { transform: rotate(10deg); }
	.foxco-si-hover-bounce .foxco-si-link:hover { animation: foxco-si-bounce 0.5s ease; }
}

@keyframes foxco-si-bounce {
	0%, 100% { transform: translateY(0); }
	30%      { transform: translateY(-6px); }
	60%      { transform: translateY(0); }
	80%      { transform: translateY(-2px); }
}

/* Keep a visible focus ring for keyboard users -- shape:none links in
   particular have no background to hint they're focusable otherwise */
.foxco-si-link:focus-visible {
	outline: 2px solid #df6737;
	outline-offset: 2px;
}