/* Component: cta-talk — Let's Talk + mail
   Liquid hover via SVG goo filter (Lucas Bebber / CSS-Tricks pattern):
   always-on blur+threshold on blobs; they stay apart at rest, then
   overlap on hover so the goo neck fills and they fuse flush. */

.df-cta-talk__filter {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none
}

.df-cta-talk {
    --df-cta-talk-accent: var(--df-color-accent, #a107c0);
    --df-cta-talk-bg: #fff;
    --df-cta-talk-text: var(--df-cta-talk-accent);
    --df-cta-talk-icon: var(--df-cta-talk-accent);
    --df-cta-talk-gap: 20px;
    --df-cta-talk-merge: 24px;
    --df-cta-talk-ease: cubic-bezier(.34, 1.45, .48, 1);
    --df-cta-talk-duration: .7s;
    display: inline-grid;
    grid-template-columns: minmax(0, max-content);
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    justify-items: stretch;
    overflow: visible;
    text-decoration: none;
    color: inherit
}

.df-cta-talk__liquid,
.df-cta-talk__face {
    display: flex;
    align-items: center;
    gap: var(--df-cta-talk-gap);
    grid-area: 1 / 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0
}

.df-cta-talk__liquid {
    z-index: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: var(--df-cta-talk-goo);
    pointer-events: none
}

.df-cta-talk__face {
    z-index: 1
}

.df-cta-talk__btn {
    font-family: var(--df-font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .01em;
    white-space: normal;
    overflow-wrap: break-word
}

.df-cta-talk__blob {
    background: var(--df-cta-talk-bg);
    transition:
        transform var(--df-cta-talk-duration) var(--df-cta-talk-ease),
        border-radius var(--df-cta-talk-duration) var(--df-cta-talk-ease)
}

/* Empty blob — sized by face layer via shared grid; no duplicate anchor text */
.df-cta-talk__blob--btn {
    display: block;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    min-height: 3.25rem;
    border-radius: 999px
}

.df-cta-talk__blob--mail {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%
}

.df-cta-talk__btn,
.df-cta-talk__mail {
    transition: transform var(--df-cta-talk-duration) var(--df-cta-talk-ease)
}

.df-cta-talk__btn {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 3.25rem;
    padding: .85rem 2.15rem;
    color: var(--df-cta-talk-text);
    text-align: center
}

.df-cta-talk__mail {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    color: var(--df-cta-talk-icon)
}

.df-cta-talk__mail i,
.df-cta-talk__mail svg {
    color: inherit;
    fill: currentColor;
    font-size: 1.35rem;
    width: 1.35rem;
    height: 1.35rem;
    line-height: 1
}

/* Button stays put; mail slides left into it for the liquid merge */
.df-cta-talk:hover .df-cta-talk__blob--mail,
.df-cta-talk:focus-visible .df-cta-talk__blob--mail,
.df-cta-talk:hover .df-cta-talk__mail,
.df-cta-talk:focus-visible .df-cta-talk__mail {
    transform: translateX(calc((var(--df-cta-talk-gap) + var(--df-cta-talk-merge)) * -1))
}

.df-cta-talk:hover .df-cta-talk__blob--btn,
.df-cta-talk:focus-visible .df-cta-talk__blob--btn {
    border-radius: 999px 1.1rem 1.1rem 999px
}

.df-cta-talk:hover .df-cta-talk__blob--mail,
.df-cta-talk:focus-visible .df-cta-talk__blob--mail {
    border-radius: 1.1rem 50% 50% 1.1rem
}

.df-cta-talk__mail-icon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    color: inherit;
    fill: currentColor
}

.df-cta-talk__mail-icon path {
    fill: none;
    stroke: currentColor
}

.df-cta-talk__mail-icon .df-cta-talk__mail-dot,
.df-cta-talk__mail-icon circle {
    fill: currentColor;
    stroke: none
}

.elementor-widget-dreamfarm-morphing-button,
.elementor-widget-dreamfarm-morphing-button > .elementor-widget-container {
    max-width: 100%;
    min-width: 0;
    overflow: visible
}

@media (max-width: 767px) {
    .df-cta-talk__btn {
        padding-inline: 1.35rem;
        font-size: .9375rem
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-cta-talk__liquid {
        filter: none
    }

    .df-cta-talk:hover .df-cta-talk__blob--mail,
    .df-cta-talk:focus-visible .df-cta-talk__blob--mail,
    .df-cta-talk:hover .df-cta-talk__mail,
    .df-cta-talk:focus-visible .df-cta-talk__mail {
        transform: none;
        border-radius: inherit
    }

    .df-cta-talk:hover .df-cta-talk__blob--btn,
    .df-cta-talk:focus-visible .df-cta-talk__blob--btn {
        border-radius: 999px
    }

    .df-cta-talk:hover .df-cta-talk__blob--mail,
    .df-cta-talk:focus-visible .df-cta-talk__blob--mail {
        border-radius: 50%
    }

    .df-cta-talk__blob,
    .df-cta-talk__btn,
    .df-cta-talk__mail {
        transition: none
    }
}

.df-cta-talk:focus-visible {
    outline: 2px solid var(--df-cta-talk-accent);
    outline-offset: 4px;
    border-radius: 999px
}