/* Ticker (Piratenhits) - overrides / safety rails
   - app.js is single owner
   - ticker wisselt met fade (geen vertical scroll), dus nooit 2 regels half zichtbaar
*/

#ticker{ margin:12px 0 14px; }
#ticker[hidden]{ display:none !important; }

/* zorg dat overlays uit staan (die kunnen randen 'doorzichtig' maken) */
#ticker.ticker::before,
#ticker.ticker::after{ display:none !important; }

/* inner blijft door site.css op vaste hoogte */
#ticker .ticker-inner{ overflow:hidden; }

/* geen transform animatie meer */
#tickerTrack{
  transform: none !important;
  transition: none !important;
}

/* 1 regel fade */
#tickerTrack .ticker-item{
  width: 100%;
  justify-content: center;
  padding: 0 14px;
  box-sizing: border-box;
  line-height: var(--ticker-row-h, 44px);
  opacity: 1;
  transition: opacity 180ms ease;
}
#tickerTrack .ticker-item.is-out{ opacity: 0; }
#tickerTrack .ticker-item.is-in{ opacity: 1; }

/* ======================================================
   2-regel ticker layout (vaste hoogte, geen halve regels)
   ====================================================== */

#tickerOuter{
  overflow: hidden;
  height: 52px;           /* 2 regels x 26px */
}

#tickerTrack{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 1 regel */
#tickerTrack .ticker-line{
  display:block;
  height:26px;
  line-height:26px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  padding:0 14px;
  box-sizing:border-box;
}

/* fade states (JS toggelt deze classes) */
#tickerTrack.ticker-fade-out{ opacity: 0; transition: opacity .25s ease; }
#tickerTrack.ticker-fade-in { opacity: 1; transition: opacity .25s ease; }

/* eventuele oude “fade overlays” uitzetten */
#ticker.ticker::before,
#ticker.ticker::after{
  display: none !important;
}

/* Mobiel: iets kleiner zodat er meer past */
@media (max-width: 600px){

  #tickerOuter{
    height: 44px;
  }

  #tickerTrack .ticker-line{
    line-height: 22px;
    height: 22px;
    font-size: 12px;
    padding: 0 8px;
  }
}

@media (max-width: 430px){
  #tickerTrack .ticker-line{
    font-size: 11px;
    padding: 0 6px;
  }
}