/* 
 * Editor CSS Overrides 
 * Forces visibility of elements that are normally hidden by JS/Animation logic 
 */

/* 1. Global Reset for Editor Usability */
.elementor-editor-active * {
    cursor: auto !important;
    transition: none !important;
    /* Stop all transitions */
    animation: none !important;
    /* Stop all animations */
}

/* 2. Force Visibility of Hidden/Animated Elements */
.elementor-editor-active .reveal-element,
.elementor-editor-active .reveal-trigger .reveal-element,
.elementor-editor-active .opacity-0,
.elementor-editor-active .invisible,
.elementor-editor-active [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
    /* Ensure they take up space */
}

/* 3. Hero Widget - Make Editable */
.elementor-editor-active #hero-portal {
    height: auto !important;
    /* Remove 300vh scroll height */
    min-height: 100vh !important;
    overflow: visible !important;
}

.elementor-editor-active .sticky-element {
    position: relative !important;
    /* Disable sticky */
    height: auto !important;
    top: auto !important;
    overflow: visible !important;
}

.elementor-editor-active #hero-content-wrapper {
    position: relative !important;
    opacity: 1 !important;
    padding: 100px 0;
    min-height: 50vh;
}

.elementor-editor-active #hero-text {
    transform: none !important;
    opacity: 1 !important;
}

.elementor-editor-active #hero-menu-container {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    background: #09090b !important;
    /* Zinc-950 */
    margin-top: 50px;
    padding: 50px 0;
    z-index: 10 !important;
    display: block !important;
}

/* 4. Workshops Widget - Disable Horizontal Scroll */
.elementor-editor-active #talleres-scroll-trigger {
    height: auto !important;
    /* Reset 400vh */
}

.elementor-editor-active #horizontal-wrapper {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
}

.elementor-editor-active #horizontal-track {
    display: flex !important;
    width: 100% !important;
    transform: none !important;
    /* Reset translateX */
    flex-wrap: wrap !important;
    /* Stack cards */
    gap: 40px !important;
    padding: 40px 0 !important;
}

.elementor-editor-active .workshop-card {
    min-width: 300px !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    /* Full width cards in editor */
    margin-right: 0 !important;
}

/* 5. Marquee Widget - Stop Animation */
.elementor-editor-active .animate-marquee,
.elementor-editor-active .animate-marquee2,
.elementor-editor-active .animate-marquee-infinite,
.elementor-editor-active .animate-marquee-infinite-reverse {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap !important;
    /* Show items stacked or wrapping if needed, usually row is fine */
}

/* Hide duplicate marquee layer to prevent overlapping text mess */
.elementor-editor-active .animate-marquee-infinite>div:nth-child(2),
.elementor-editor-active .animate-marquee-infinite-reverse>div:nth-child(2) {
    display: none !important;
}

/* 6. FAQ Widget - Show Content */
.elementor-editor-active .faq-content {
    max-height: none !important;
    /* Don't collapse */
    opacity: 1 !important;
    padding-bottom: 2rem !important;
    /* Show padding */
    display: block !important;
    border-bottom: 1px dashed #333;
    /* Visual cue */
}

/* 7. Mix-Blend-Mode Fixes for Text Visibility */
.elementor-editor-active .mix-blend-difference,
.elementor-editor-active .mix-blend-screen,
.elementor-editor-active .mix-blend-overlay,
.elementor-editor-active .mix-blend-exclusion {
    mix-blend-mode: normal !important;
}

/* Ensure text is visible depending on context */
.elementor-editor-active #hero-scroll-indicator {
    color: #EC018E !important;
    /* Force pink */
    opacity: 1 !important;
}

/* 8. Textarea/WYSIWYG Resets */
.elementor-editor-active p {
    opacity: 1 !important;
}

/* 9. Intro Widget */
.elementor-editor-active .elementor-widget-e_arts_intro .magnetic-btn {
    border: 1px solid black !important;
    color: black !important;
}

/* 10. Hide Custom Cursor in Editor (It's annoying) */
.elementor-editor-active #custom-cursor {
    display: none !important;
}

/* 11. Z-Index fixes */
.elementor-editor-active .elementor-widget-wrap {
    z-index: auto !important;
    /* Let Elementor handle z-index */
}

/* 2. Hero Widget Specifics */
/* Ensure Hero Content is visible and doesn't rely on scroll */
.elementor-editor-active #hero-portal {
    height: auto !important;
    /* Remove 300vh scroll height */
    min-height: 100vh !important;
}

.elementor-editor-active #hero-content-wrapper {
    position: relative !important;
    opacity: 1 !important;
    padding: 100px 0;
}

.elementor-editor-active .sticky-element {
    position: relative !important;
    /* Disable sticky in editor */
    height: auto !important;
    top: auto !important;
    overflow: visible !important;
}

/* Force Menu Visibility */
.elementor-editor-active #hero-menu-container {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    /* Stack below content instead of absolute overlay */
    background: #000 !important;
    /* Ensure bg is visible */
    margin-top: 50px;
}

/* 3. Workshops Widget - Force Horizontal Scroll / Grid View */
.elementor-editor-active #horizontal-wrapper {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
}

.elementor-editor-active #horizontal-track {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    /* Allow scroll in editor if needed */
    flex-wrap: wrap !important;
    /* OR wrap them so we see all */
    gap: 20px !important;
    transform: none !important;
    /* Remove GSAP transform */
}

/* Ensure individual cards are visible */
.elementor-editor-active .workshop-card {
    min-width: 300px !important;
    flex: 1 1 300px !important;
    opacity: 1 !important;
}


/* 4. Intro Widget Counters */
.elementor-editor-active .reveal-element {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 5. Team Widget Overlays */
.elementor-editor-active .group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
    /* Show hover states if helpful, or keep distinct */
}

/* 6. Target Items */
.elementor-editor-active section {
    opacity: 1 !important;
}

/* 7. Force Text Colors in Editor if they rely on mix-blend-mode */
.elementor-editor-active .mix-blend-difference {
    mix-blend-mode: normal !important;
    color: #EC018E !important;
}

/* 8. Make WYSIWYG Editor usable */
.elementor-editor-active .hero-subtitle p {
    margin: 0;
}