/**
 * Gradient Text Element Styles
 * Frontend CSS for gradient text effect
 */

.gradient-text-element {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    max-width: 100%;
}

/* Ensure gradient displays properly */
.gradient-text-element {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Support for older browsers */
@supports not (background-clip: text) {
    .gradient-text-element {
        background: none !important;
        -webkit-text-fill-color: initial;
        color: #333;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gradient-text-element {
        font-size: calc(var(--font-size, 48px) * 0.7) !important;
    }
}

@media (max-width: 480px) {
    .gradient-text-element {
        font-size: calc(var(--font-size, 48px) * 0.5) !important;
    }
}

/* WPBakery editor compatibility */
.vc_element .gradient-text-element {
    pointer-events: auto;
}

/* Ensure text is selectable in editor */
.vc_inline-editor .gradient-text-element {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}