/**
 * Brandly Animated Lines — Stylesheet
 *
 * Handles:
 *   1. Canvas positioning and z-layer stacking inside Elementor containers
 *   2. Ensuring content layer (widgets) always paints above the canvas
 *   3. Elementor editor compatibility
 *   4. Accessibility — prefers-reduced-motion
 *   5. DPR-sharp rendering hints
 *
 * Z-layer strategy:
 *   [.e-con]                position: relative  (stacking context)
 *     [.brandly-lines-canvas]  absolute; z-index: 0  ← above CSS bg, below content
 *     [.e-con-inner]            position: relative; z-index: 1  ← content on top
 *
 * @package Brandly
 * @version 1.0.0
 */

/* ==========================================================================
   1. Canvas Element
   ========================================================================== */

/**
 * Core canvas positioning.
 * Covers the entire container exactly, sits above the CSS background/image,
 * and below all child content via z-index.
 *
 * pointer-events: none — canvas never intercepts clicks, hovers, or touch.
 * will-change: contents — hints the browser to promote to a compositor layer
 *              without locking a static transform (avoids blur sub-pixel shifts).
 * image-rendering: pixelated is intentional for crisp edge on HiDPI — the JS
 *              scales the backing store by DPR so the logical CSS pixels remain sharp.
 */
 .brandly-lines-canvas {
	position        : absolute;
	inset           : 0;
	width           : 100% !important; /* override any Elementor inline sizing */
	height          : 100% !important;
	display         : block;
	z-index         : 0;
	pointer-events  : none;
	user-select     : none;
	-webkit-user-select : none;
	will-change     : contents;

	/* Prevents canvas from inheriting border-radius overflows on some browsers */
	border-radius   : inherit;

	/* Prevent canvas from receiving focus (it has aria-hidden=true but belt+suspenders) */
	outline         : none;
	tab-index       : -1;
}

/* ==========================================================================
   2. Stacking — Content Layer Above Canvas
   ========================================================================== */

/**
 * .e-con-inner is Elementor's flex container that wraps all child widgets
 * inside a container element. We ensure it stacks above the canvas.
 *
 * The :has() selector is broadly supported in modern browsers (2022+).
 * For non-supporting browsers, the canvas still renders — it just won't
 * guaranteed z-index above content. In practice, DOM order (canvas is first
 * child, content follows) handles this correctly in most cases anyway.
 */
.e-con:has( > .brandly-lines-canvas ) > .e-con-inner {
	position : relative;
	z-index  : 1;
}

/**
 * When Elementor uses the legacy Section/Column layout instead of containers.
 * (Kept for forward-compatibility if module expands later.)
 */
.elementor-section:has( > .brandly-lines-canvas ) > .elementor-container {
	position : relative;
	z-index  : 1;
}

.elementor-column:has( > .brandly-lines-canvas ) > .elementor-widget-wrap {
	position : relative;
	z-index  : 1;
}

/* ==========================================================================
   3. Container Stacking Context
   ========================================================================== */

/**
 * Guarantee the container creates a proper stacking context so our z-index
 * values are evaluated within the container scope, not against the global stack.
 *
 * Note: We avoid `isolation: isolate` here because it can interfere with
 * CSS mix-blend-mode that users may have set on the container background.
 * `overflow: hidden` on the container (often already set by Elementor) is
 * sufficient for clip; we only enforce `position: relative` via JS when needed.
 */
.e-con:has( > .brandly-lines-canvas ) {
	/**
	 * z-index: 0 creates a stacking context without disrupting the
	 * container's position in the page stack.
	 * Only apply when we know the container has our canvas.
	 */
	z-index : 0; /* stacking context anchor */
}

/* ==========================================================================
   4. Elementor Editor Compatibility
   ========================================================================== */

/**
 * In the editor preview iframe, the canvas should be fully visible
 * so users can preview the effect while adjusting controls.
 *
 * The editor may add `.elementor-editor-active` to <body>.
 * No special hiding needed — canvas visibility is controlled by JS.
 */
.elementor-editor-active .brandly-lines-canvas {
	z-index : 0; /* ensure correct stacking inside editor too */
}

/**
 * When an element is selected/focused in the editor, Elementor shows
 * an overlay UI. Make sure the canvas doesn't visually interfere.
 */
.elementor-editor-active .e-con.elementor-element-editable > .brandly-lines-canvas {
	opacity : 0.4; /* dim slightly when element is being edited for clarity */
	transition : opacity 0.2s ease;
}

.elementor-editor-active .e-con:not( .elementor-element-editable ) > .brandly-lines-canvas {
	opacity : 1;
	transition : opacity 0.2s ease;
}

/* ==========================================================================
   5. Responsive Overflow Guard
   ========================================================================== */

/**
 * Ensure lines never visually escape the container bounds.
 * Elementor often sets overflow: hidden already — this makes it explicit
 * when our module is active, protecting against themes that reset it.
 */
.e-con:has( > .brandly-lines-canvas ) {
	overflow : hidden;
}

/* ==========================================================================
   6. Accessibility — Reduced Motion
   ========================================================================== */

/**
 * When the user has requested reduced motion via OS settings,
 * hide the canvas completely. The JS also checks this flag and skips
 * initialization, so this is a belt-and-suspenders CSS fallback
 * that works even if JS hasn't run yet.
 */
@media ( prefers-reduced-motion: reduce ) {
	.brandly-lines-canvas {
		display    : none !important;
		visibility : hidden !important;
	}
}

/* ==========================================================================
   7. Print
   ========================================================================== */

/**
 * Never print the animated canvas — it would render as a blank box.
 */
@media print {
	.brandly-lines-canvas {
		display : none !important;
	}
}