/* Gradient Text for Elementor - Frontend Styles */

.gte-content {
    line-height: 1.7;
}

/* FIX: gradient spans must inherit font-size from parent so
   Elementor's responsive CSS (desktop/tablet/mobile) works correctly.
   Do NOT set a fixed font-size here — let Elementor's generated CSS control it. */
.gte-gradient {
    background: linear-gradient(
        var(--gte-angle, 90deg),
        var(--gte-from, #f953c6),
        var(--gte-to,   #b91d73)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;

    /* FIX: inherit every typographic property from parent so
       Elementor responsive controls (font-size, line-height, weight…)
       pass through to gradient spans automatically */
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: inherit;
    text-decoration: inherit;

    /* Allow copy-paste */
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

/* Visible selection highlight when copying */
.gte-gradient::selection {
    -webkit-text-fill-color: #fff;
    background: var(--gte-from, #f953c6);
}
.gte-gradient *::selection {
    -webkit-text-fill-color: #fff;
    background: var(--gte-from, #f953c6);
}

/* Animated variant */
.gte-gradient.gte-animated {
    background: linear-gradient(
        var(--gte-angle, 90deg),
        var(--gte-from, #f953c6),
        var(--gte-to,   #b91d73),
        var(--gte-from, #f953c6)
    );
    background-size: 200% auto;
    animation: gte_flow 3s linear infinite;
}

@keyframes gte_flow {
    0%   { background-position: 0%   center; }
    100% { background-position: 200% center; }
}