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

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

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

/* ── Header (Title + Description) ────────────────────────── */

.ittw-header {
    margin-bottom: 12px;                 /* default; overridden by Elementor controls */
}

.ittw-title {
    margin:      0 0 4px;                /* default; overridden by Elementor controls */
    line-height: 1.3;
    color:       #111111;
}

.ittw-description {
    margin:      0;
    line-height: 1.5;
    color:       #666666;
}

/* ── 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;
    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;
}

/* ── Repeating unit (two identical units make the loop seamless) ─── */
/* The track holds two of these. Each unit carries the item spacing as
   `gap` plus an equal `padding-inline-end`, so the units butt together
   with even spacing and translateX(-50%) lands unit B exactly where
   unit A started — no gap, no jump. */
.ittw-unit {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    gap:                60px;           /* default; overridden by Gap control */
    padding-inline-end: 60px;           /* default; overridden by Gap control */
}

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

.ittw-item {
    display:     inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor:      default;
    transition:  opacity 0.2s ease;
}

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

/* ── Content block: holds the image + the text group ─────── */
/* Default is a column (image on top, text below); direction,
   alignment and gaps are overridden by Elementor controls.   */
.ittw-item__content {
    display:         inline-flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             8px;                /* image ↔ text gap; overridden by Elementor */
    flex-shrink:     0;
}

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

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

.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 group: the stacked text lines ──────────────────── */

.ittw-item__text-group {
    display:         inline-flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             2px;                /* default; overridden by Elementor */
    line-height:     1.3;
}

.ittw-item__description {
    display:     block;
    line-height: 1.4;
    font-size:   12px;
    color:       #666666;
    white-space: nowrap;
}

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

.ittw-item__text {
    display:     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;
}