/*
 * Webgig Site Enhancements — front-end styles.
 * Hand-written, no build step. Colors hardcoded as fallback (self-contained,
 * does not depend on the active theme's CSS variables); the plugin's PHP
 * overrides the scrollbar colors inline from saved settings on every request.
 */

/* ------------------------------------------------------------------ */
/* Scrollbar (sitewide, pure CSS)                                      */
/* Does not conflict with existing carousel scrollbar-hiding rules     */
/* elsewhere in the theme (those target specific carousel containers,  */
/* this targets html — scrollbar pseudo-elements are scoped per box).  */
/* ------------------------------------------------------------------ */

html {
	scrollbar-width: thin;
	scrollbar-color: #0043D4 #13224F;
}

html::-webkit-scrollbar {
	width: 12px;
}

html::-webkit-scrollbar-track {
	background: #13224F;
}

html::-webkit-scrollbar-thumb {
	background: #0043D4;
	border-radius: 999px;
	border: 3px solid #13224F;
}

html::-webkit-scrollbar-thumb:hover {
	background: #1480FF;
}

/* ------------------------------------------------------------------ */
/* Custom cursor                                                       */
/* cursor:none is applied only via JS-added class (progressive          */
/* enhancement) — never a CSS default, so unsupported devices never see */
/* a missing cursor.                                                    */
/* ------------------------------------------------------------------ */

html.webgig-se-cursor-active,
html.webgig-se-cursor-active * {
	cursor: none;
}

@media ( pointer: coarse ) {
	html.webgig-se-cursor-active,
	html.webgig-se-cursor-active * {
		cursor: auto !important;
	}
}

.webgig-se-cursor {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 999999;
	will-change: transform;
}

/* Glow Dot */
.webgig-se-cursor--glow-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --webgig-se-cursor-color, #1480FF );
	box-shadow: 0 0 20px 6px color-mix( in srgb, var( --webgig-se-cursor-color, #1480FF ) 35%, transparent );
	transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease;
}

.webgig-se-cursor--glow-dot.is-hovering {
	width: 22px;
	height: 22px;
	background: var( --webgig-se-cursor-hover-color, #57AAFF );
}

/* Outline Ring */
.webgig-se-cursor--outline-ring {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid var( --webgig-se-cursor-color, #0043D4 );
	background: transparent;
	transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease;
}

.webgig-se-cursor--outline-ring.is-hovering {
	width: 48px;
	height: 48px;
	background: color-mix( in srgb, var( --webgig-se-cursor-hover-color, #57AAFF ) 15%, transparent );
}

/* Reactive Dot + Ring (two elements) */
.webgig-se-cursor--dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --webgig-se-cursor-color, #1480FF );
}

.webgig-se-cursor--ring {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid var( --webgig-se-cursor-hover-color, #57AAFF );
	background: transparent;
	transition: width 0.15s ease, height 0.15s ease;
}

.webgig-se-cursor--ring.is-hovering {
	width: 52px;
	height: 52px;
}