/**
 * pd_topbanner – pasek informacyjny / karuzela
 *
 * @author    presta.design
 * @copyright 2026 presta.design
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

.psoft-topbanner {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 1000;
    text-align: center;
    white-space: nowrap;
}

/* Miejsce na krzyżyk, żeby przewijany tekst nie wchodził pod przycisk. */
.psoft-topbanner--closable {
    box-sizing: border-box;
    padding-right: 34px;
}

.psoft-topbanner--sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* --- efekt: przewijanie (marquee) ------------------------------------ */

.psoft-topbanner__scroll {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.psoft-topbanner__track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 100%;
    animation: psoft-tb-scroll linear infinite;
}

.psoft-topbanner__item {
    display: inline-block;
    padding: 0 30px;
    white-space: nowrap;
}

.psoft-topbanner__item a {
    text-decoration: underline;
}

.psoft-topbanner__item a:hover {
    opacity: .8;
}

@keyframes psoft-tb-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.psoft-topbanner--pause-hover:hover .psoft-topbanner__track {
    animation-play-state: paused;
}

/* Tryb awaryjny: pasek przewijany z JS, gdy animacja CSS nie rusza
   (np. przeglądarka zgłasza ograniczenie animacji). Wyższa specyficzność
   niż reguła .psoft-topbanner__track, więc wyłącza animację bez !important. */
.psoft-topbanner--js-scroll .psoft-topbanner__track {
    animation: none;
}

/* --- efekt: karuzela wieloelementowa (kilka haseł naraz) ------------- */

.psoft-topbanner__carousel {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.psoft-topbanner__carousel-track {
    display: flex;
    align-items: center;
    height: 100%;
    /* Przesunięciem steruje JS, tu tylko zapowiedź dla kompozytora. */
    will-change: transform;
}

/* Kafle karuzeli: na szerokim ekranie po jednej czwartej paska, czyli najwyżej
   cztery naraz. To minimalna, a nie sztywna szerokość – hasło dłuższe niż
   ćwiartka rozpycha własny kafel i wtedy widać ich trzy, zamiast dostać ucięty
   tekst z wielokropkiem. Węższe ekrany schodzą po kolei do jednego kafla. */
.psoft-topbanner__carousel-track .psoft-topbanner__item {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 100%;
    padding: 0 .35rem;
}

@media (min-width: 576px) {
    .psoft-topbanner__carousel-track .psoft-topbanner__item {
        min-width: 50%;
    }
}

@media (min-width: 992px) {
    .psoft-topbanner__carousel-track .psoft-topbanner__item {
        min-width: 33.3333%;
    }
}

@media (min-width: 1200px) {
    .psoft-topbanner__carousel-track .psoft-topbanner__item {
        min-width: 25%;
    }
}

/* --- efekt: statyczny (pasek kontaktowy, bez ruchu) ------------------ */

.psoft-topbanner__static {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    /* Wąski ekran nie pomieści wszystkich haseł w jednym rzędzie. Zamiast je
       przycinać, pozwalamy przesunąć pasek palcem – zostaje jednorzędowy. */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.psoft-topbanner__static::-webkit-scrollbar {
    display: none;
}

/* Ciaśniej niż przy przewijaniu: tam odstęp 60 px rozdziela powtórzenia tej
   samej taśmy, tu wszystkie hasła stoją obok siebie na jednym ekranie. */
.psoft-topbanner__static .psoft-topbanner__item {
    flex: 0 0 auto;
    padding: 0 14px;
}

/* --- efekt: slider (przenikanie) ------------------------------------- */

.psoft-topbanner__slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.psoft-topbanner__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    pointer-events: none;
}

.psoft-topbanner__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.psoft-topbanner__slide a {
    text-decoration: underline;
}

.psoft-topbanner__slide a:hover {
    opacity: .8;
}

/* --- ikony Material Icons -------------------------------------------- */

.psoft-topbanner a,
.psoft-topbanner__item > .material-icons,
.psoft-topbanner__slide > .material-icons {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.psoft-topbanner__icon {
    font-size: 1.25em;
    line-height: 1;
    margin-right: 8px;
    vertical-align: middle;
}

.psoft-topbanner__label {
    vertical-align: middle;
}

/* --- przycisk zamknięcia --------------------------------------------- */

.psoft-topbanner__close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    opacity: .7;
    transition: opacity .2s;
}

.psoft-topbanner__close:hover {
    opacity: 1;
}

/* --- responsywność / dostępność -------------------------------------- */

@media (max-width: 480px) {
    .psoft-topbanner__item {
        padding: 0 15px;
    }
}

/* Zatrzymanie animacji przy systemowym ograniczeniu ruchu dotyczy wyłącznie
   pasków z włączoną opcją „Szanuj ustawienie ograniczonej animacji”.
   Bez tego pasek zamiera m.in. w Firefoksie, który zgłasza to ustawienie
   częściej niż inne przeglądarki (ustawienia animacji systemu, resistFingerprinting). */
@media (prefers-reduced-motion: reduce) {
    .psoft-topbanner--respect-motion .psoft-topbanner__track {
        animation: none;
    }

    .psoft-topbanner--respect-motion .psoft-topbanner__slide {
        transition: none;
    }
}