/* =========================================================
   Christian News Ticker — ticker.css
   Pure CSS scrolling — no heavy libraries.
   ========================================================= */

/* ── Bar wrapper ─────────────────────────────────────────── */
#cnt-bar {
    position: relative;
    z-index: 99999;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 36px;
    background: var(--cnt-bg, #1a2744);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 13px;
    letter-spacing: .02em;
    border-bottom: 2px solid var(--cnt-accent, #c8a951);
}

/* ── Label badge ─────────────────────────────────────────── */
.cnt-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px 0 14px;
    background: var(--cnt-accent, #c8a951);
    color: #1a2744;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    padding-right: 22px;
    user-select: none;
}

.cnt-label-cross {
    font-size: 14px;
    line-height: 1;
    opacity: .9;
}

/* ── Scrolling track ─────────────────────────────────────── */
.cnt-track-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Fade edges for a polished look */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.cnt-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* Width: items are inline, animation shifts by 50% (one set) */
    animation: cnt-scroll linear infinite;
    /* Duration computed in JS based on total width & speed setting */
}

/* Paused when user hovers */
#cnt-bar:hover .cnt-track,
#cnt-bar:focus-within .cnt-track {
    animation-play-state: paused;
}

@keyframes cnt-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Individual items ────────────────────────────────────── */
.cnt-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cnt-text, #f0f0f0);
    text-decoration: none;
    padding: 0 28px 0 8px;
    line-height: 36px;
    transition: color .2s ease;
    cursor: pointer;
}

.cnt-item:hover {
    color: var(--cnt-accent, #c8a951);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Separator between items */
.cnt-item::after {
    content: '|';
    padding-left: 28px;
    opacity: .3;
    font-weight: 300;
    text-decoration: none !important;
    display: inline-block;
}

/* ── Cross icon before each headline ─────────────────────── */
.cnt-cross {
    color: var(--cnt-accent, #c8a951);
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    opacity: .85;
    text-decoration: none !important;
}

/* ── Accessibility: reduce motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cnt-track {
        animation: none;
        overflow-x: auto;
    }
}

/* ── Responsive: shrink label on small screens ───────────── */
@media (max-width: 600px) {
    .cnt-label {
        font-size: 9px;
        padding: 0 18px 0 10px;
        letter-spacing: .08em;
    }
    #cnt-bar {
        font-size: 12px;
    }
}