/* ==========================================================
   TASSEL CTA Button  v1.1
   Pure-CSS hover: white-outlined arrow -> expanded button
   ========================================================== */

.td-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none !important;
    overflow: hidden;
    max-width: var(--td-cta-size, 48px);
    height: var(--td-cta-size, 48px);
    background-color: var(--td-cta-bg, transparent);
    color: var(--td-cta-text, #fff) !important;
    border: 2px solid var(--td-cta-border, #fff);
    padding: 0 14px;
    font-size: var(--td-cta-fs, 16px);
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.3s ease;
    font-family: inherit;
    letter-spacing: 0.01em;
}

/* Expanded state */
.td-cta-btn:hover,
.td-cta-btn:focus-visible {
    max-width: var(--td-cta-expanded, 260px);
    color: var(--td-cta-text, #fff) !important;
    text-decoration: none !important;
}

/* Text label */
.td-cta-btn__text {
    opacity: 0;
    transform: translateX(8px);
    transition:
        opacity 0.3s ease 0.12s,
        transform 0.3s ease 0.12s;
    margin-right: 12px;
    font-family: inherit;
    pointer-events: none;
}

.td-cta-btn:hover .td-cta-btn__text,
.td-cta-btn:focus-visible .td-cta-btn__text {
    opacity: 1;
    transform: translateX(0);
}

/* Arrow */
.td-cta-btn__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2em;
    line-height: 1;
    transition: transform 0.3s ease;
}

.td-cta-btn:hover .td-cta-btn__arrow,
.td-cta-btn:focus-visible .td-cta-btn__arrow {
    transform: translateX(2px);
}

/* ---- Kadence overrides ---- */
.entry-content .td-cta-btn,
.kb-row-layout-wrap .td-cta-btn,
.kadence-column .td-cta-btn {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* ---- Editor preview ---- */
.td-cta-preview {
    padding: 20px;
    background: #3a4a5c;
    border-radius: 4px;
}
.td-cta-preview .td-cta-btn {
    max-width: none;
    pointer-events: none;
}
.td-cta-preview .td-cta-btn__text {
    opacity: 1;
    transform: none;
}