/* ============================================================
   Image + Text Ticker Widget — Frontend Styles
   Version: 1.0.0
   ============================================================ */

/* ── Keyframe Animations ─────────────────────────────────── */

@keyframes ittw-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Ticker Wrapper ──────────────────────────────────────── */

.ittw-ticker {
    display:       flex;
    align-items:   center;
    overflow:      hidden;
    width:         100%;
    position:      relative;
    height:        60px;                 /* default; overridden by Elementor controls */
    background:    #ffffff;
    box-sizing:    border-box;
    /* Prevent text selection during scroll */
    -webkit-user-select: none;
    -moz-user-select:    none;
    user-select:         none;
}

/* Fade edges */
.ittw-ticker::before,
.ittw-ticker::after {
    content:    '';
    position:   absolute;
    top:        0;
    width:      60px;
    height:     100%;
    z-index:    2;
    pointer-events: none;
}
.ittw-ticker::before {
    left:       0;
    background: linear-gradient(to right, var(--ittw-bg, #ffffff), transparent);
}
.ittw-ticker::after {
    right:      0;
    background: linear-gradient(to left,  var(--ittw-bg, #ffffff), transparent);
}

/* Disable fade if user sets transparent background */
.ittw-ticker[style*="background"]:not([style*="background-color: rgba(0"]):not([style*="background: rgba(0"]) {
    /* The inline CSS variable trick won't work for all cases; keep it simple */
}

/* ── Track (the scrolling row) ───────────────────────────── */

.ittw-track {
    display:         flex;
    align-items:     center;
    flex-shrink:     0;
    white-space:     nowrap;
    gap:             60px;               /* default; overridden by Elementor gap control */
    width:           max-content;
    animation:       ittw-scroll linear infinite;
    animation-duration: 30s;            /* overridden per widget via inline style */
    will-change:     transform;
}

/* ── Paused state (JS toggles this on the wrapper) ──────── */

.ittw-ticker.is-paused .ittw-track,
.ittw-ticker[data-pause="yes"]:hover .ittw-track {
    animation-play-state: paused;
}

/* ── Clone set (aria-hidden duplicate for seamless loop) ─── */

.ittw-clone-set {
    display:     contents; /* renders children directly into the flex track */
}

/* ── Individual Item ─────────────────────────────────────── */

.ittw-item {
    display:     inline-flex;
    align-items: center;
    gap:         8px;                   /* image ↔ text gap; overridden by Elementor */
    flex-shrink: 0;
    cursor:      default;
    transition:  opacity 0.2s ease;
}

.ittw-item a.ittw-item__link {
    display:         inline-flex;
    align-items:     inherit;
    gap:             inherit;
    text-decoration: none;
    color:           inherit;
    cursor:          pointer;
}

/* ── Image ───────────────────────────────────────────────── */

.ittw-item__image {
    display:     inline-flex;
    flex-shrink: 0;
    line-height: 1;
}

.ittw-item__image img {
    display:    block;
    width:      32px;                   /* default; overridden by Elementor */
    height:     32px;                   /* default; overridden by Elementor */
    object-fit: cover;
    border-radius: 4px;
    /* Prevent img from triggering layout shifts */
    vertical-align: middle;
}

/* ── Text ────────────────────────────────────────────────── */

.ittw-item__text {
    display:     inline-block;
    line-height: 1.4;
    font-size:   14px;
    color:       #333333;
    white-space: nowrap;
}

.ittw-item__text a {
    color:           inherit;
    text-decoration: none;
}

/* ── Separator ───────────────────────────────────────────── */

.ittw-separator {
    display:     inline-block;
    flex-shrink: 0;
    line-height: 1;
    color:       #999999;
    font-size:   16px;
    pointer-events: none;
}

/* ── Accessibility — reduce motion ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ittw-track {
        animation-duration: 120s !important; /* slow it way down, but keep it moving */
    }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {
    .ittw-ticker::before,
    .ittw-ticker::after {
        width: 30px; /* narrower fade on mobile */
    }

    .ittw-item__image img {
        width:  24px;
        height: 24px;
    }

    .ittw-item__text {
        font-size: 12px;
    }
}

/* ── Elementor Editor — disable animation in edit mode ───── */

.elementor-editor-active .ittw-track {
    animation-play-state: paused;
}