/**
 * 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;
}

/* ═══════════════════════════════════════════════
   VISITOR TOGGLE
   ───────────────────────────────────────────────
   A small snowflake icon a visitor can click when "Let Visitors
   Toggle This On/Off" is enabled on a section -- a subtle easter
   egg, not a prominent button: just the glyph, no background, no
   label, no pill switch. Off is Foxco orange, clicked-on is white,
   as the only on/off indicator. A soft dark outline keeps it
   legible against light or dark section backgrounds either way.

   Every reset property below is !important -- <button> is one of
   the most commonly themed elements on any site (default padding,
   background, border-radius, box-shadow), and this icon needs to
   look identical regardless of what the active theme does to plain
   buttons elsewhere on the page.

   Positioned inside that specific section (not the whole page) --
   rendered as a sibling of .foxco-particles-wrapper, with its own
   z-index well above the particle effect so it stays clickable
   regardless of that effect's own Z-Index setting.
═══════════════════════════════════════════════ */

.foxco-particles-toggle {
    position: absolute;
    z-index: 999;
    display: inline-block;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    color: #df6737 !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.65), 0 0 5px rgba(0, 0, 0, 0.4);
    transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.15s ease;
}

.foxco-particles-toggle::before {
    content: "\2745"; /* snowflake */
}

.foxco-particles-toggle:hover {
    transform: scale(1.15);
}

.foxco-particles-toggle:focus-visible {
    outline: 2px solid #df6737;
    outline-offset: 2px;
}

.foxco-particles-toggle.is-on {
    color: #ffffff !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.85), 0 0 5px rgba(0, 0, 0, 0.5);
}

.foxco-particles-toggle.pos-top-left     { top: 10px;    left: 10px; }
.foxco-particles-toggle.pos-top-right    { top: 10px;    right: 10px; }
.foxco-particles-toggle.pos-middle-left  { top: 50%; left: 10px;  transform: translateY(-50%); }
.foxco-particles-toggle.pos-middle-right { top: 50%; right: 10px; transform: translateY(-50%); }
.foxco-particles-toggle.pos-middle-left:hover,
.foxco-particles-toggle.pos-middle-right:hover { transform: translateY(-50%) scale(1.15); }
.foxco-particles-toggle.pos-bottom-left  { bottom: 10px; left: 10px; }
.foxco-particles-toggle.pos-bottom-right { bottom: 10px; right: 10px; }

@media (prefers-reduced-motion: reduce) {
    .foxco-particles-toggle {
        display: none !important;
    }
}