/*
 * Gradient Dual Heading Studio for Elementor - Frontend Styles
 * Complete responsive support for all devices
 */

/* ========================================
   BASE STYLES
   ======================================== */

.dual-heading-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    width: 100%;
}

/* Horizontal Layout */
.dual-heading-wrapper.horizontal {
    flex-direction: row;
}

/* Vertical Layout */
.dual-heading-wrapper.vertical {
    flex-direction: column;
}

/* Primary Heading */
.dual-heading-primary {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Secondary Heading */
.dual-heading-secondary {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Ensure gradient text works properly */
.dual-heading-primary[style*="background"],
.dual-heading-secondary[style*="background"] {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
    .dual-heading-primary[style*="background"],
    .dual-heading-secondary[style*="background"] {
        background: none !important;
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }
}

/* Divider */
.dual-heading-divider {
    display: inline-block;
    margin: 0 10px;
    line-height: 1;
}

/* ========================================
   RESPONSIVE - Allow full control on all devices
   ======================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .dual-heading-wrapper {
        width: 100%;
    }
    
    .dual-heading-primary,
    .dual-heading-secondary {
        max-width: 100%;
    }
}

/* Mobile Landscape (max-width: 768px) */
@media (max-width: 768px) {
    .dual-heading-wrapper {
        width: 100%;
    }
    
    /* Don't force vertical - let the user's choice control it */
    /* The layout-direction class from Elementor will handle this */
    
    .dual-heading-primary,
    .dual-heading-secondary {
        max-width: 100%;
    }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {
    .dual-heading-wrapper {
        width: 100%;
        padding: 5px 0;
    }
    
    /* Don't force vertical - let the user's choice control it */
    
    .dual-heading-primary,
    .dual-heading-secondary {
        max-width: 100%;
        word-wrap: break-word;
    }
}

/* Small Mobile (max-width: 320px) */
@media (max-width: 320px) {
    .dual-heading-wrapper {
        padding: 3px 0;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .dual-heading-wrapper {
        display: block !important;
        text-align: center !important;
    }
    
    .dual-heading-primary,
    .dual-heading-secondary {
        display: inline !important;
        margin: 0 5px !important;
    }
}