/**
 * Integrhum Interactive Background — Widget Styles
 *
 * The canvas wrapper is pulled out of document flow via `position: absolute`
 * so it acts purely as a decoration layer and never affects the layout of
 * any Elementor container, grid or flex context.
 *
 * @package Integrhum\InteractiveBackground
 * @version 1.0.0
 */

/* ─────────────────────────────────────────────────────────────
   Wrapper
   Occupies zero document-flow space. JS sets position, z-index
   and size at runtime based on widget settings (Attach Mode).
───────────────────────────────────────────────────────────────*/
.integrhum-ib-wrapper {
	/* Base positioning — overridden inline by the JS engine. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

	/*
	 * pointer-events: none ensures the canvas never intercepts clicks,
	 * form inputs or other interactive elements inside the container.
	 */
	pointer-events: none;

	/* Default stacking order — overridden inline by cfg.zIndex. */
	z-index: 0;

	/* Remove the wrapper from flex / grid flow entirely. */
	flex: none;
	align-self: auto;
	margin: 0;
	padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   Parent container positioning safety net (CSS layer)

   Elementor containers are already position:relative in most
   themes and configurations. This rule guards the rare cases
   where they are not.

   @supports selector(:has()) is broadly supported (Chrome 105+,
   Firefox 121+, Safari 15.4+). For older browsers the JS engine
   also applies position:relative via getComputedStyle fallback.
───────────────────────────────────────────────────────────────*/
@supports selector(:has(*)) {
	.elementor-element:has( > .elementor-widget-container > .integrhum-ib-wrapper ) {
		position: relative;
	}
}

/* ─────────────────────────────────────────────────────────────
   Canvas element
───────────────────────────────────────────────────────────────*/
.integrhum-ib-canvas {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   Reduced motion — CSS layer
   The JS engine also detects this via MediaQueryList and pauses
   the RAF loop. Both layers together ensure zero animation is
   rendered for users who have requested reduced motion.
───────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
	.integrhum-ib-canvas {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────
   Elementor editor indicator
   A faint dashed outline helps designers discover where the
   widget is placed in the layout. Hidden on the live preview
   and never visible to site visitors.
───────────────────────────────────────────────────────────────*/
.elementor-editor-active .integrhum-ib-wrapper {
	outline: 1px dashed rgba(14, 97, 247, 0.3);
	outline-offset: -1px;
}