/**
 * Foxco Particles Styles
 * Styles for section and column particle effects
 * 
 * @package Foxco_Particles
 * @author Foxco - https://foxco.net
 */

/* Particle wrapper - sits as overlay on section/column */
.foxco-particles-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Particle container canvas */
.foxco-particles-container {
    width: 100%;
    height: 100%;
}

.foxco-particles-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure parent elements have proper positioning */
.elementor-section.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section.elementor-section-full_width > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-column-wrap,
.elementor-widget-wrap {
    position: relative;
}

/* For sections */
.elementor-section {
    position: relative;
}

.elementor-section > .foxco-particles-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* For columns */
.elementor-column > .elementor-widget-wrap > .foxco-particles-wrapper,
.elementor-column > .elementor-column-wrap > .foxco-particles-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* For containers (Flexbox) */
.e-container,
.e-con {
    position: relative;
}

.e-container > .foxco-particles-wrapper,
.e-con > .foxco-particles-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Editor mode - make slightly visible and interactive */
.elementor-editor-active .foxco-particles-wrapper {
    opacity: 0.7;
    pointer-events: all;
}

.elementor-editor-active .foxco-particles-wrapper:hover {
    opacity: 1;
}

/* Foxco branding styles */
.elementor-control-foxco_particles_section .elementor-control-section-toggle {
    color: #E26431;
}

/* Ensure content stays above particles by default */
.elementor-section > .elementor-container,
.elementor-column > .elementor-widget-wrap > .elementor-element,
.e-container > .elementor-element,
.e-con > .elementor-element {
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /* Optionally reduce particle count on tablets */
    .foxco-particles-wrapper {
        /* You can add tablet-specific styles if needed */
    }
}

@media (max-width: 767px) {
    /* Optionally hide or reduce on mobile */
    .foxco-particles-wrapper {
        /* Uncomment to hide on mobile if performance is an issue */
        /* display: none; */
    }
}

/* Accessibility - respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .foxco-particles-wrapper {
        display: none !important;
    }
}

/* Print styles - hide particles when printing */
@media print {
    .foxco-particles-wrapper {
        display: none !important;
    }
}

/* Smooth transitions for visibility */
.foxco-particles-wrapper {
    transition: opacity 0.3s ease-in-out;
}