/* =====================================================
   Artikel Ticker — artikel-ticker.css
   Tilpas frit herunder. Alle farver og størrelser
   er samlet øverst som CSS-variabler.
   ===================================================== */

.artikel-ticker {
    --ticker-bg:            #0d1f0f;       /* Baggrund – mørk grøn som billedet */
    --ticker-height:        44px;
    --ticker-font-size:     13px;
    --ticker-font-family:   'Arial Narrow', Arial, sans-serif;
    --ticker-text-color:    #ffffff;
    --ticker-title-color:   #e0e0e0;
    --ticker-sep-color:     #3a5c3e;
    --ticker-live-bg:       #c0392b;       /* Rød LIVE-badge */
    --ticker-live-dot:      #ff6b6b;
    --ticker-cat-color:     #6ddf6d;       /* Grøn kategoritekst */
    --ticker-speed:         30s;           /* Overskrives af inline style fra PHP */
    --ticker-gap:           40px;          /* Afstand mellem items */
}

/* Wrapper */
.artikel-ticker {
    display:         flex;
    align-items:     center;
    width:           100%;
    height:          var(--ticker-height);
    background:      var(--ticker-bg);
    overflow:        hidden;
    position:        relative;
    font-family:     var(--ticker-font-family);
    font-size:       var(--ticker-font-size);
    letter-spacing:  0.03em;
    text-transform:  uppercase;
    box-sizing:      border-box;
}

/* LIVE-badge */
.ticker__live {
    display:         flex;
    align-items:     center;
    gap:             6px;
    flex-shrink:     0;
    padding:         0 14px;
    height:          100%;
    background:      var(--ticker-live-bg);
    color:           #fff;
    font-weight:     700;
    font-size:       12px;
    letter-spacing:  0.1em;
    white-space:     nowrap;
    z-index:         2;
}

/* Pulserende prik */
.ticker__live-dot {
    width:            7px;
    height:           7px;
    border-radius:    50%;
    background:       var(--ticker-live-dot);
    animation:        ticker-pulse 1.2s ease-in-out infinite;
    flex-shrink:      0;
}

@keyframes ticker-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.8); }
}

/* Rullende spor */
.ticker__track-wrapper {
    flex:       1;
    overflow:   hidden;
    height:     100%;
    position:   relative;
}

.ticker__track {
    display:         flex;
    align-items:     center;
    height:          100%;
    white-space:     nowrap;
    will-change:     transform;
    animation-name:          ticker-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-duration sættes inline fra PHP */
}

/* Pause ved hover */
.artikel-ticker:hover .ticker__track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% fordi indholdet er duplikeret */
}

/* Enkelt artikel-item */
.ticker__item {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    padding:         0 var(--ticker-gap);
    text-decoration: none;
    color:           var(--ticker-text-color);
    cursor:          pointer;
    transition:      opacity 0.2s;
}

.ticker__item:hover {
    opacity: 0.75;
}

/* Kategori-label */
.ticker__category {
    color:       var(--ticker-cat-color);
    font-weight: 700;
    flex-shrink: 0;
}

/* Du kan farve specifikke kategorier via slug-klassen, f.eks.: */
/*
.ticker__category--sport   { color: #f0a500; }
.ticker__category--politik { color: #5db8ff; }
.ticker__category--kultur  { color: #ff7eb3; }
*/

/* Artiklens titel */
.ticker__title {
    color:       var(--ticker-title-color);
    font-weight: 400;
}

/* Adskiller-prik */
.ticker__separator {
    color:       var(--ticker-sep-color);
    flex-shrink: 0;
}