/* Custom Social Bar — front-end styles (v2.6.0)
 * Icons are inline SVG (see PHP) — no external font/CDN, so they can never
 * fail to load or fall back to an empty "tofu" box.
 * Each icon is its own independent badge: there is NO shared/common
 * background wrapping the whole stack — only spacing (gap) ties them
 * together visually.
 */

.csb-sidebar {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	z-index: 9999;
	/* Intentionally no background, blur, border or padding here — that was
	   the "common/shared" panel behind every icon. Removed on request so
	   each icon stands on its own individual background only. */
	background: none;
	padding: 0;
	margin: 0;
	overflow: visible;
}

.csb-sidebar.csb-left {
	left: 12px;
}

.csb-sidebar.csb-right {
	right: 12px;
}

/* -----------------------------------------------------------------------
 * Scroll reveal — hidden while still in the hero/first screen, fades and
 * slides in once the visitor scrolls past the admin-set threshold
 * (assets/js/scroll-reveal.js toggles the .csb-visible class). Only
 * applied when the "Hide in hero area" admin setting is on.
 * --------------------------------------------------------------------- */
.csb-sidebar.csb-scroll-reveal {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.csb-sidebar.csb-left.csb-scroll-reveal {
	transform: translateY(-50%) translateX(-10px);
}
.csb-sidebar.csb-right.csb-scroll-reveal {
	transform: translateY(-50%) translateX(10px);
}
.csb-sidebar.csb-scroll-reveal.csb-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}
@media (max-width: 480px) {
	.csb-sidebar.csb-scroll-reveal,
	.csb-sidebar.csb-left.csb-scroll-reveal,
	.csb-sidebar.csb-right.csb-scroll-reveal {
		transform: translateX(-50%) translateY(10px);
	}
	.csb-sidebar.csb-scroll-reveal.csb-visible {
		transform: translateX(-50%) translateY(0);
	}
}

/* Each icon: its own brand-color background (set inline per platform).
   This IS the "individual background" — every icon is a self-contained
   badge, not a cell inside a shared bar. */
.csb-item {
	position: relative;
	box-sizing: border-box;
	width: var(--csb-icon-size, 30px);
	height: var(--csb-icon-size, 30px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	opacity: 0;
	overflow: visible; /* let hover lift + sound-wave rings expand past the icon's own box */
	will-change: transform;
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

/* Lock icon color/visibility so a theme's global a:hover / a:visited rules
   can never make the glyph "disappear" or change color. */
.csb-sidebar a.csb-item,
.csb-sidebar a.csb-item:link,
.csb-sidebar a.csb-item:visited,
.csb-sidebar a.csb-item:hover,
.csb-sidebar a.csb-item:focus,
.csb-sidebar a.csb-item:active {
	color: #fff !important;
	text-decoration: none !important;
}
.csb-sidebar a.csb-item:hover,
.csb-sidebar a.csb-item:focus-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

/* The SVG glyph itself — always visible, always on top of the wave rings. */
.csb-item .csb-svg {
	display: block;
	width: calc(var(--csb-icon-size, 30px) * 0.5);
	height: calc(var(--csb-icon-size, 30px) * 0.5);
	position: relative;
	z-index: 3;
	color: #fff;
	fill: currentColor;
	flex-shrink: 0;
}

.csb-shape-round .csb-item {
	border-radius: 50%;
}
.csb-shape-rounded .csb-item {
	border-radius: 20%;
}

/* Hover = real animation (lift + slight tilt + scale + glow), not a flat
   color swap. z-index bump keeps the hovered icon above its neighbours. */
.csb-sidebar.csb-left .csb-item:hover {
	z-index: 10;
	transform: translateX(6px) translateY(-2px) scale(1.15) rotate(-6deg);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	border-color: rgba(230, 230, 230, 0.6);
}
.csb-sidebar.csb-right .csb-item:hover {
	z-index: 10;
	transform: translateX(-6px) translateY(-2px) scale(1.15) rotate(6deg);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	border-color: rgba(230, 230, 230, 0.6);
}

/* -----------------------------------------------------------------------
 * Icons with no URL filled in yet: fully visible, no dark/greyed overlay.
 * They only get a soft dashed ring so the admin can spot which ones still
 * need a link — the icon itself stays exactly as bright as the rest.
 * --------------------------------------------------------------------- */
.csb-item.csb-empty {
	opacity: 1;
	filter: none;
	outline: 1px dashed rgba(255, 255, 255, 0.55);
	outline-offset: 2px;
}
.csb-item.csb-empty:hover {
	opacity: 1;
}

/* -----------------------------------------------------------------------
 * "Sound wave" pulse rings — base look (position, border, radius) PLUS a
 * pure-CSS fallback @keyframes animation, so the rings are visibly
 * pulsing even if JavaScript never runs (blocked, a script-optimization
 * plugin breaks load order, etc.). When waves.js successfully initializes
 * it takes over with the Web Animations API (richer admin-configurable
 * strength/reach/hover-burst) and turns this CSS animation off per
 * element, so the two never run stacked on top of each other.
 * --------------------------------------------------------------------- */
.csb-wave {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border-style: solid;
	border-width: var(--csb-wave-width, 2px);
	border-color: var(--csb-wave-color, var(--csb-icon-color, #ffffff));
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transform: scale(0.85);
	animation: csbWaveFallback 2.4s ease-out infinite;
}
.csb-wave-2 { animation-delay: 0.8s; }
.csb-wave-3 { animation-delay: 1.6s; }

@keyframes csbWaveFallback {
	0%   { transform: scale(0.85); opacity: 0.55; }
	65%  { opacity: 0.18; }
	100% { transform: scale(2); opacity: 0; }
}

/* Hover: rings get visibly thicker too, on top of the bigger/brighter
   burst keyframes that JS switches to (see waves.js). If JS never ran,
   this alone still gives a clear, faster reaction on hover. */
.csb-item:hover .csb-wave,
.csb-item:focus-visible .csb-wave {
	border-width: calc(var(--csb-wave-width, 2px) + 1px);
	animation-duration: 1.1s;
}

/* Entrance animation on page load */
.csb-item.csb-anim-slide {
	animation: csbSlideInLeft 0.35s ease forwards;
}
.csb-sidebar.csb-right .csb-item.csb-anim-slide {
	animation-name: csbSlideInRight;
}
.csb-item.csb-anim-fade {
	animation: csbFadeIn 0.35s ease forwards;
}
.csb-item.csb-anim-pop {
	animation: csbPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes csbSlideInLeft {
	from { opacity: 0; transform: translateX(-14px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes csbSlideInRight {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes csbFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes csbPop {
	from { opacity: 0; transform: scale(0.6); }
	to   { opacity: 1; transform: scale(1); }
}

/* Respect users who've asked their OS/browser to reduce motion by making
   the effect calmer (slower, no hover-lift jump) — but NOT hidden. Site
   owners already have a manual "Icon wave effect" on/off switch in the
   admin for full control, so we no longer auto-hide waves here; auto-
   hiding caused the effect to disappear entirely for anyone whose OS/
   browser had this setting on, even when they wanted waves visible. */
@media (prefers-reduced-motion: reduce) {
	.csb-item {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
	}
	.csb-wave {
		animation-duration: 3.2s;
	}
}

/* Keyboard focus should be just as visible as hover, without changing colors */
.csb-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Mobile: dock horizontally at the bottom so it never covers content */
@media (max-width: 480px) {
	.csb-sidebar {
		top: auto;
		bottom: 12px;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
	.csb-sidebar .csb-item {
		width: calc(var(--csb-icon-size, 30px) * 0.9);
		height: calc(var(--csb-icon-size, 30px) * 0.9);
	}
	.csb-sidebar .csb-item .csb-svg {
		width: calc(var(--csb-icon-size, 30px) * 0.45);
		height: calc(var(--csb-icon-size, 30px) * 0.45);
	}
	.csb-sidebar .csb-item.csb-anim-slide {
		animation-name: csbFadeIn;
	}
	.csb-sidebar.csb-left .csb-item:hover,
	.csb-sidebar.csb-right .csb-item:hover {
		transform: translateY(-4px) scale(1.12);
	}
}