/* 
 * Elementor Widget Container Fixes
 * Resolves styling conflicts between custom widgets and Elementor's container system
 */

/* =============================================================================
   GENERAL ELEMENTOR WIDGET CONTAINER FIXES
   ============================================================================= */

/* Reset margins and padding for all custom AC widgets */
.elementor-widget-article-carousel,
.elementor-widget-article-showcase,
.elementor-widget-fact-box,
.elementor-widget-featured-section,
.elementor-widget-magazine-section,
.elementor-widget-newsletter-builder,
.elementor-widget-newsroom-section,
.elementor-widget-poll,
.elementor-widget-qa-section,
.elementor-widget-spotlight_carousel {
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset the inner widget container wrapper */
.elementor-widget-article-carousel .elementor-widget-container,
.elementor-widget-article-showcase .elementor-widget-container,
.elementor-widget-fact-box .elementor-widget-container,
.elementor-widget-featured-section .elementor-widget-container,
.elementor-widget-magazine-section .elementor-widget-container,
.elementor-widget-newsletter-builder .elementor-widget-container,
.elementor-widget-newsroom-section .elementor-widget-container,
.elementor-widget-poll .elementor-widget-container,
.elementor-widget-qa-section .elementor-widget-container,
.elementor-widget-spotlight_carousel .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* =============================================================================
   SWIPER CONTAINER FIXES (for carousel widgets)
   ============================================================================= */

/* Fix for all swiper-based widgets */
.article-carousel .swiper-container,
.spotlight-carousel .swiper-container,
.featured-section .swiper-container {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    touch-action: pan-x pan-y;
}

/* =============================================================================
   SECTION AND COLUMN CONTAINER FIXES
   ============================================================================= */

/* Fix margins for Elementor sections containing our widgets */
.elementor-section:has(.article-carousel),
.elementor-section:has(.fact-box),
.elementor-section:has(.featured-section-wrapper),
.elementor-section:has(.spotlight-carousel),
.elementor-column:has(.article-carousel),
.elementor-column:has(.fact-box),
.elementor-column:has(.featured-section-wrapper),
.elementor-column:has(.spotlight-carousel) {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fallback for browsers without :has() support */
.elementor-section .article-carousel,
.elementor-section .fact-box,
.elementor-section .featured-section-wrapper,
.elementor-section .spotlight-carousel,
.elementor-column .article-carousel,
.elementor-column .fact-box,
.elementor-column .featured-section-wrapper,
.elementor-column .spotlight-carousel {
    margin-top: calc(-1 * var(--elementor-column-gap, 0px)) !important;
    margin-bottom: calc(-1 * var(--elementor-column-gap, 0px)) !important;
}

/* =============================================================================
   SPECIFIC WIDGET FIXES
   ============================================================================= */

/* Article Carousel Widget Fixes */
.elementor-widget-article-carousel .article-carousel {
    max-width: none !important;
    width: 100% !important;
}

.elementor-widget-article-carousel .swiper-slide {
    box-sizing: border-box;
}

/* Fact Box Widget Fixes */
.elementor-widget-fact-box .fact-box {
    width: 100%;
    box-sizing: border-box;
}

/* Featured Section Widget Fixes */
.elementor-widget-featured-section .featured-section-wrapper {
    max-width: none !important;
    width: 100% !important;
}

.elementor-widget-featured-section .featured-main-grid,
.elementor-widget-featured-section .featured-sub-grid {
    width: 100%;
    box-sizing: border-box;
}

.elementor-widget-featured-section .featured-item-container {
    box-sizing: border-box;
    overflow: hidden;
}

/* Poll Widget Fixes */
.elementor-widget-poll .poll-container {
    width: 100%;
    box-sizing: border-box;
}

/* Remove container overrides - let Tailwind classes work as intended */

/* QA Section Widget - Add missing container padding to match other sections */
.elementor-widget-qa-section {
    padding-left: 1rem !important; /* px-4 equivalent */
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .elementor-widget-qa-section {
        padding-left: 1.5rem !important; /* sm:px-6 equivalent */
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .elementor-widget-qa-section {
        padding-left: 2rem !important; /* lg:px-8 equivalent */
        padding-right: 2rem !important;
    }
}

/* =============================================================================
   RESPONSIVE CONTAINER FIXES
   ============================================================================= */

/* Ensure proper responsive behavior */
@media (max-width: 767px) {
    .elementor-widget-article-carousel,
    .elementor-widget-fact-box,
    .elementor-widget-featured-section,
    .elementor-widget-poll,
    .elementor-widget-spotlight_carousel {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .elementor-widget-article-carousel .elementor-widget-container,
    .elementor-widget-fact-box .elementor-widget-container,
    .elementor-widget-featured-section .elementor-widget-container,
    .elementor-widget-poll .elementor-widget-container,
    .elementor-widget-spotlight_carousel .elementor-widget-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =============================================================================
   ELEMENTOR EDITOR SPECIFIC FIXES
   ============================================================================= */

/* Fix display issues in Elementor editor */
.elementor-editor-active .elementor-widget-article-carousel,
.elementor-editor-active .elementor-widget-fact-box,
.elementor-editor-active .elementor-widget-featured-section,
.elementor-editor-active .elementor-widget-poll,
.elementor-editor-active .elementor-widget-spotlight_carousel {
    min-height: 50px;
}

.elementor-editor-active .elementor-widget-article-carousel .elementor-widget-container,
.elementor-editor-active .elementor-widget-fact-box .elementor-widget-container,
.elementor-editor-active .elementor-widget-featured-section .elementor-widget-container,
.elementor-editor-active .elementor-widget-poll .elementor-widget-container,
.elementor-editor-active .elementor-widget-spotlight_carousel .elementor-widget-container {
    outline: 1px dashed rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   Z-INDEX MANAGEMENT
   ============================================================================= */

/* Ensure proper stacking order */
.elementor-widget-article-carousel .swiper-button-prev,
.elementor-widget-article-carousel .swiper-button-next,
.elementor-widget-spotlight_carousel .swiper-button-prev,
.elementor-widget-spotlight_carousel .swiper-button-next {
    z-index: 10;
}

.elementor-widget-article-carousel .swiper-pagination,
.elementor-widget-spotlight_carousel .swiper-pagination {
    z-index: 10;
}

/* =============================================================================
   HOMEPAGE LAYOUT CONSISTENCY
   ============================================================================= */

/* Add proper container and main wrapper styling for Elementor containers */
.elementor-element.homepage-container {
    /* Apply container styles similar to the original homepage */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .elementor-element.homepage-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .elementor-element.homepage-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Add main wrapper spacing */
.elementor-element.homepage-main {
    margin-top: 1rem !important;
}

@media (min-width: 640px) {
    .elementor-element.homepage-main {
        margin-top: 2rem !important;
    }
}

/* =============================================================================
   CLEARFIX AND OVERFLOW MANAGEMENT
   ============================================================================= */

/* Ensure proper clearing and overflow handling */
.elementor-widget-article-carousel::after,
.elementor-widget-fact-box::after,
.elementor-widget-featured-section::after,
.elementor-widget-poll::after,
.elementor-widget-spotlight_carousel::after {
    content: "";
    display: table;
    clear: both;
}

/* Prevent unwanted overflow */
.elementor-widget-article-carousel,
.elementor-widget-fact-box,
.elementor-widget-featured-section,
.elementor-widget-poll,
.elementor-widget-spotlight_carousel {
    overflow: visible;
}