/**
 * TypeRoll – Vertical Text Scroller for Divi 5
 * v1.3.0
 */

.tr-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22em;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.tr-prefix {
    white-space: nowrap;
    display: inline-block;
}

/* Window is sized by JS */
.tr-roll-window {
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: bottom;
}

/*
 * Phrases: visible in HTML so JS can measure them,
 * but JS immediately moves them off-screen and animates them in one by one.
 * Do NOT set display:none or opacity:0 here — that breaks JS measurement.
 */
.tr-roll-phrase {
    display: block;
    white-space: nowrap;
}

/* Optional cursor */
.tr-has-cursor .tr-roll-window::after {
    content: '';
    display: block;
    position: absolute;
    right: -4px;
    bottom: 8%;
    width: 3px;
    height: 80%;
    background: currentColor;
    animation: tr-blink 1s step-end infinite;
}
@keyframes tr-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tr-roll-phrase { transition: none !important; }
    .tr-has-cursor .tr-roll-window::after { animation: none; }
}
@media screen and (max-width: 480px) {
    .tr-heading { flex-direction: column; align-items: flex-start; }
}