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

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

.dual-heading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Controlled dynamically by alignment control */
    justify-content: center;
    position: relative;
    width: 100%;
}

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

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

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

/* Primary and Secondary Headings */
.dual-heading-primary {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    filter: drop-shadow(
        var(--gdhse-p-ds-h, 0px) 
        var(--gdhse-p-ds-v, 0px) 
        var(--gdhse-p-ds-b, 0px) 
        var(--gdhse-p-ds-color, transparent)
    );
}

.dual-heading-secondary {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    filter: drop-shadow(
        var(--gdhse-s-ds-h, 0px) 
        var(--gdhse-s-ds-v, 0px) 
        var(--gdhse-s-ds-b, 0px) 
        var(--gdhse-s-ds-color, transparent)
    );
}

.dual-heading-tertiary {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    filter: drop-shadow(
        var(--gdhse-h3-ds-h, 0px) 
        var(--gdhse-h3-ds-v, 0px) 
        var(--gdhse-h3-ds-b, 0px) 
        var(--gdhse-h3-ds-color, transparent)
    );
}

.dual-heading-quaternary {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    filter: drop-shadow(
        var(--gdhse-h4-ds-h, 0px) 
        var(--gdhse-h4-ds-v, 0px) 
        var(--gdhse-h4-ds-b, 0px) 
        var(--gdhse-h4-ds-color, transparent)
    );
}

.dual-heading-quinary {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    filter: drop-shadow(
        var(--gdhse-h5-ds-h, 0px) 
        var(--gdhse-h5-ds-v, 0px) 
        var(--gdhse-h5-ds-b, 0px) 
        var(--gdhse-h5-ds-color, transparent)
    );
}

/* Gradient Classes using CSS Variables injected from Elementor Selectors */
.dual-heading-primary.has-gradient {
    background: linear-gradient(
        var(--gdhse-primary-angle, 45deg),
        var(--gdhse-primary-start, #FF512F),
        var(--gdhse-primary-end, #DD2475)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dual-heading-secondary.has-gradient {
    background: linear-gradient(var(--gdhse-secondary-angle, 45deg), var(--gdhse-secondary-start, #11998E), var(--gdhse-secondary-end, #38EF7D));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dual-heading-tertiary.has-gradient {
    background: linear-gradient(var(--gdhse-tertiary-angle, 45deg), var(--gdhse-tertiary-start, #34e89e), var(--gdhse-tertiary-end, #0f3443));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dual-heading-quaternary.has-gradient {
    background: linear-gradient(var(--gdhse-quaternary-angle, 45deg), var(--gdhse-quaternary-start, #8A2387), var(--gdhse-quaternary-end, #E94057));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dual-heading-quinary.has-gradient {
    background: linear-gradient(var(--gdhse-quinary-angle, 45deg), var(--gdhse-quinary-start, #00C9FF), var(--gdhse-quinary-end, #92FE9D));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* Divider Styles */
.dual-heading-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dual-heading-divider.divider-type-line {
    background-color: #cccccc;
    border-radius: 99px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

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

@media (max-width: 768px) {
    .dual-heading-wrapper,
    .dual-heading-content-wrapper {
        width: 100%;
    }
    
    .dual-heading-primary,
    .dual-heading-secondary {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .dual-heading-wrapper {
        padding: 5px 0;
    }
    
    .dual-heading-primary,
    .dual-heading-secondary {
        word-wrap: break-word;
    }
}

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

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

@media print {
    .dual-heading-wrapper,
    .dual-heading-content-wrapper {
        display: block !important;
        text-align: center !important;
    }
    
    .dual-heading-primary,
    .dual-heading-secondary {
        display: inline !important;
        margin: 0 5px !important;
    }
}
/* Icon Divider Layout */
.dual-heading-divider.divider-type-icon {
    display: flex;
    align-items: center;
    width: 100%;
}

.dual-heading-divider.divider-type-icon .divider-line {
    flex-grow: 1;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #cccccc;
}

.dual-heading-divider.divider-type-icon.icon-align-left .divider-line-left {
    display: none;
}

.dual-heading-divider.divider-type-icon.icon-align-right .divider-line-right {
    display: none;
}