/* ═══════════════════════════════════════
   MP Marquee — assets/css/marquee.css
   Loop infinito pure CSS, zero JS
   ═══════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes mp-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes mp-marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ── Wrapper: nasconde l'overflow laterale ── */
.mp-marquee {
    width: 100%;
    overflow: hidden;
    display: flex;           /* centra verticalmente il track */
    align-items: center;
}

/* ── Track: larghezza auto, contiene i due inner (A + B) ──
   La larghezza reale del track è sum(A + B) = 200% del contenuto.
   La transazione si sposta del 50% (= 1 inner) per il loop.
*/
.mp-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;

    /* Animazione – speed e name vengono impostate inline dal PHP */
    animation-duration:        var(--mp-marquee-speed, 20s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state:      running;
    will-change:               transform;
}

/* Pausa su hover */
.mp-marquee--pause-hover:hover .mp-marquee-track {
    animation-play-state: paused;
}

/* ── Inner: un set completo di item (duplicato × 2 per il loop) ── */
.mp-marquee-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* ── Singolo item ── */
.mp-marquee-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 var(--mp-marquee-gap, 60px);

    /* Font base — sovrascrivibile da Elementor Typography */
    font-size:   clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    color:       currentColor;
}

/* ── Classi pari/dispari ──────────────────────────────────
   Queste classi sono intenzionalmente vuote nel CSS del plugin:
   vengono usate come hook per la personalizzazione nel CSS
   del tema o nei Custom CSS di Elementor.

   Esempio d'uso nel tema:
   .mp-marquee-item--odd  { color: #fff; }
   .mp-marquee-item--even { color: transparent; -webkit-text-stroke: 2px #fff; }
   ─────────────────────────────────────────────────────── */
.mp-marquee-item--odd  {}
.mp-marquee-item--even {}

/* ── Separatore ── */
.mp-marquee-sep {
    display:     inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size:   1em;    /* eredita dal contesto, sovrascrivibile */
    line-height: 1;
    /* Il padding è già gestito dal gap dell'item precedente */
    margin-left: calc(var(--mp-marquee-gap, 60px) * -0.5);
    margin-right: calc(var(--mp-marquee-gap, 60px) * -0.5);
}

/* ── Accessibilità: riduce il moto se preferito dall'OS ── */
@media (prefers-reduced-motion: reduce) {
    .mp-marquee-track {
        animation-play-state: paused;
    }
}