/* ═══════════════════════════════════════════════
   PayForm WP — Sponsor Ticker Public Styles
   Brand: #1a3d2e (green), #d4a853 (gold), #faf8f3 (cream), #ebd9a8 (light gold)
   Loaded only on pages that use [pfwp_sponsor_ticker].
   @since 2.6.13
   ═══════════════════════════════════════════════ */

/* ─── Wrapper ─────────────────────────────────── */
/* Background is set inline by PHP if non-transparent, else transparent (inherits). */
.pfwp-sponsor-ticker {
    padding: 32px 0 28px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ─── Eyebrow text ────────────────────────────── */
/* Default color for cream/white parent sections; PHP overrides inline for dark backgrounds. */
.pfwp-sponsor-ticker-eyebrow {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #8a6914;
    text-transform: uppercase;
    margin: 0 0 18px;
    font-family: inherit;
}

/* ─── The scrolling rail ──────────────────────── */
.pfwp-sponsor-ticker-rail {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Fade out logos at the edges so they appear/disappear smoothly. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.pfwp-sponsor-ticker-track {
    display: flex;
    gap: 36px;
    width: max-content;
    align-items: center;
    animation: pfwpSponsorTickerScroll 38s linear infinite;
    /* will-change boosts smoothness on GPUs. */
    will-change: transform;
}

/* Pause on hover anywhere in the rail. */
.pfwp-sponsor-ticker-rail:hover .pfwp-sponsor-ticker-track {
    animation-play-state: paused;
}

@keyframes pfwpSponsorTickerScroll {
    0%   { transform: translateX(0); }
    /* -50% because the track contains two identical copies of the sponsor list. */
    100% { transform: translateX(-50%); }
}

/* ─── Individual items ────────────────────────── */
.pfwp-sponsor-ticker-item {
    flex-shrink: 0;
    height: 72px;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    text-decoration: none;
    color: #1a3d2e;
    transition: color 0.2s ease, transform 0.2s ease;
    text-align: center;
    line-height: 1.2;
    /* Reset link styling. */
    border: none;
    background: transparent;
    box-shadow: none;
}

.pfwp-sponsor-ticker-item:hover,
.pfwp-sponsor-ticker-item:focus-visible {
    color: #d4a853;
    transform: scale(1.04);
    outline: none;
}

/* Logo image inside an item. Tighter max-height than the item to give vertical padding. */
.pfwp-sponsor-ticker-logo {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Fallback (no logo) — italic company name. */
.pfwp-sponsor-ticker-item-fallback .pfwp-sponsor-ticker-fallback {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    color: #1a3d2e;
    white-space: nowrap;
}

.pfwp-sponsor-ticker-item-fallback:hover .pfwp-sponsor-ticker-fallback,
.pfwp-sponsor-ticker-item-fallback:focus-visible .pfwp-sponsor-ticker-fallback {
    color: #d4a853;
}

/* ─── Mobile adjustments ──────────────────────── */
@media (max-width: 640px) {
    .pfwp-sponsor-ticker {
        padding: 24px 0 22px;
    }
    .pfwp-sponsor-ticker-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
        padding: 0 16px;
        margin-bottom: 14px;
    }
    .pfwp-sponsor-ticker-track {
        gap: 28px;
        /* Slightly faster loop on mobile since fewer items fit on screen. */
        animation-duration: 32s;
    }
    .pfwp-sponsor-ticker-item {
        height: 56px;
        min-width: 140px;
        padding: 4px 12px;
    }
    .pfwp-sponsor-ticker-logo {
        max-height: 44px;
    }
    .pfwp-sponsor-ticker-item-fallback .pfwp-sponsor-ticker-fallback {
        font-size: 14px;
    }
}

/* ─── Accessibility: pause for reduced-motion users ─── */
@media (prefers-reduced-motion: reduce) {
    .pfwp-sponsor-ticker-track {
        animation: none;
        /* Center the track and let it wrap naturally instead of scrolling. */
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
    .pfwp-sponsor-ticker-rail {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ── "Your logo here" placeholders (2.20.3) ──────────────────────────
   Round, quiet, and clearly not a real sponsor. They share the item box so
   they sit on the same baseline as logos as the rail fills in for real. */
.pfwp-sponsor-ticker-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pfwp-sponsor-ticker-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 10px;
    border: 1.5px dashed currentColor;
    opacity: .42;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .25s ease, transform .25s ease;
}
.pfwp-sponsor-ticker-item-placeholder:hover .pfwp-sponsor-ticker-placeholder,
.pfwp-sponsor-ticker-item-placeholder:focus-visible .pfwp-sponsor-ticker-placeholder {
    opacity: .85;
    transform: scale(1.04);
}
@media (max-width: 600px) {
    .pfwp-sponsor-ticker-placeholder { width: 84px; height: 84px; font-size: 11px; }
}

/* ── DARK-PAGE SCHEME (2.99.65) ─────────────────────────────────────────────
   scheme="dark" on the shortcode. The rules above are tuned for the cream
   outdoor pages: the placeholder is a dashed ring in currentColor at .42
   opacity, which on a near-black indoor page is invisible. Measured on
   #07090E before and after.

   APPENDED, and scoped to the modifier class only — a ticker without
   scheme="dark" renders byte-identically to 2.99.64. */
.pfwp-sponsor-ticker--dark .pfwp-sponsor-ticker-placeholder {
    color: #E6EDF6;
    opacity: .55;
    border-style: solid;
    border-color: rgba(255, 255, 255, .28);
}
.pfwp-sponsor-ticker--dark .pfwp-sponsor-ticker-item-placeholder:hover .pfwp-sponsor-ticker-placeholder,
.pfwp-sponsor-ticker--dark .pfwp-sponsor-ticker-item-placeholder:focus-visible .pfwp-sponsor-ticker-placeholder {
    opacity: .9;
    border-color: rgba(255, 255, 255, .5);
}