/**
 * Teatro Municipal de Chillán - Elementor Compatibility Styles
 * 
 * These styles ensure proper integration between the theme and Elementor
 */

/* ==========================================================================
   ELEMENTOR GENERAL FIXES
   ========================================================================== */

/* Ensure Elementor sections respect theme colors */
.elementor-page .elementor-section {
    --e-global-color-primary: var(--brand-red);
    --e-global-color-secondary: var(--brand-dark);
    --e-global-color-text: var(--brand-light);
    --e-global-color-accent: var(--brand-red);
}

/* Fix z-index issues */
.elementor-section-wrap {
    position: relative;
    z-index: 1;
}

/* Elementor Canvas template - full width no header/footer */
.elementor-template-canvas {
    background-color: var(--brand-dark);
}

/* Elementor Full Width template */
.elementor-template-full-width .site-content {
    padding: 0;
    max-width: 100%;
}

/* ==========================================================================
   ELEMENTOR WIDGETS THEME INTEGRATION
   ========================================================================== */

/* Buttons - match theme style */
.elementor-button {
    font-family: var(--font-family);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.elementor-button-wrapper .elementor-button {
    border-radius: 4px;
}

/* Headings - use theme typography */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-family);
}

/* Text Editor - theme colors */
.elementor-widget-text-editor {
    color: var(--brand-light);
}

[data-theme="light"] .elementor-widget-text-editor {
    color: var(--color-text);
}

/* ==========================================================================
   ELEMENTOR SECTIONS WITH THEME BACKGROUNDS
   ========================================================================== */

/* Dark section */
.elementor-section.teatro-section-dark {
    background-color: var(--brand-dark);
    color: var(--brand-light);
}

/* Gray section */
.elementor-section.teatro-section-gray {
    background-color: var(--brand-gray);
    color: var(--brand-light);
}

/* Surface section */
.elementor-section.teatro-section-surface {
    background-color: var(--brand-surface);
    color: var(--brand-light);
}

/* Light mode support for sections */
[data-theme="light"] .elementor-section.teatro-section-dark {
    background-color: #ffffff;
    color: #171717;
}

[data-theme="light"] .elementor-section.teatro-section-gray {
    background-color: #f5f5f5;
    color: #171717;
}

[data-theme="light"] .elementor-section.teatro-section-surface {
    background-color: #e5e5e5;
    color: #171717;
}

/* ==========================================================================
   ELEMENTOR RESPONSIVE FIXES
   ========================================================================== */

@media (max-width: 1024px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100%;
        padding: 0 1.5rem;
    }
}

@media (max-width: 768px) {
    .elementor-section {
        padding: 2rem 0;
    }
    
    .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
        padding: 1rem;
    }
}

/* ==========================================================================
   ELEMENTOR + THEME HEADER/FOOTER
   ========================================================================== */

/* When using theme header with Elementor content */
.elementor-page .site-content {
    padding-top: 0;
}

/* Elementor page with theme header - adjust first section */
.elementor-page .elementor-section:first-child {
    padding-top: 80px; /* Header height */
}

/* Full height hero sections */
.elementor-section.elementor-section-full-height {
    min-height: 100vh;
    min-height: 100dvh;
}

/* ==========================================================================
   ELEMENTOR POPUP FIXES
   ========================================================================== */

.elementor-popup-modal {
    z-index: 9999;
}

/* ==========================================================================
   ELEMENTOR FORMS THEME STYLE
   ========================================================================== */

.elementor-form .elementor-field-group .elementor-field {
    background-color: var(--brand-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--brand-light);
    border-radius: 4px;
    padding: 0.875rem 1rem;
}

.elementor-form .elementor-field-group .elementor-field:focus {
    border-color: var(--brand-red);
    outline: none;
}

.elementor-form .elementor-button[type="submit"] {
    background-color: var(--brand-red);
    color: white;
    border: none;
    padding: 1rem 2rem;
}

.elementor-form .elementor-button[type="submit"]:hover {
    background-color: var(--brand-red-dark);
}

[data-theme="light"] .elementor-form .elementor-field-group .elementor-field {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    color: #171717;
}

/* ==========================================================================
   ELEMENTOR CAROUSEL/SLIDER FIXES
   ========================================================================== */

.elementor-widget-image-carousel .swiper-pagination-bullet {
    background: var(--brand-muted);
}

.elementor-widget-image-carousel .swiper-pagination-bullet-active {
    background: var(--brand-red);
}

.elementor-widget-image-carousel .elementor-swiper-button {
    color: white;
    background: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   ELEMENTOR ICONS - USE THEME COLORS
   ========================================================================== */

.elementor-widget-icon .elementor-icon {
    color: var(--brand-red);
}

.elementor-widget-icon-box .elementor-icon {
    color: var(--brand-red);
}

/* ==========================================================================
   ELEMENTOR TABS/ACCORDION
   ========================================================================== */

.elementor-widget-tabs .elementor-tab-title {
    font-family: var(--font-family);
    font-weight: 600;
}

.elementor-widget-tabs .elementor-tab-title.elementor-active {
    color: var(--brand-red);
}

.elementor-widget-accordion .elementor-accordion-item {
    background: var(--brand-surface);
    border: none;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.elementor-widget-accordion .elementor-tab-title {
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.elementor-widget-accordion .elementor-tab-content {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .elementor-widget-accordion .elementor-accordion-item {
    background: #f5f5f5;
}

[data-theme="light"] .elementor-widget-accordion .elementor-tab-content {
    border-top-color: rgba(0, 0, 0, 0.1);
}