/* ==========================================================================
   Sezonni infolista nad hlavickou - sablona Apollo (prodejrostlin.cz)
   HTML zije v adminu (Kod v paticce webu), JS ji presune nad hlavicku.
   Apollo ma 1rem = 10px, proto jsou vsechny rozmery zamerne v px.
   ========================================================================== */

/* Skryta, dokud ji JS neprestehuje do .overall-wrapper.
   Zabranuje probliknuti nestylovaneho textu na konci stranky. */
.prSeasonBar { display: none; }

.overall-wrapper > .prSeasonBar {
    display: block;
    width: 100%;
    background: #1a5c38;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
}

/* Vnitrni layout - vycentrovany, stejna max sirka jako Apollo xl container.
   position:relative kvuli absolutne umistenemu krizku. */
.prSeasonBar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    max-width: 1418px;
    margin: 0 auto;
    padding: 11px 15px;
    text-align: center;
}

.prSeasonBar__text { margin: 0; }

/* Hlavni sdeleni - zustava videt i na mobilu */
.prSeasonBar__headline { font-weight: 700; }

/* Doplnujici veta - na mobilu se skryva, aby lista zabrala jen jeden radek */
.prSeasonBar__detail { font-weight: 400; }

.prSeasonBar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 5px 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease;
}

.prSeasonBar__btn:hover,
.prSeasonBar__btn:focus {
    background: rgba(255, 255, 255, .18);
    border-color: #fff;
}

/* Krizek - na desktopu ukotveny vpravo, aby nerozhazoval vycentrovany text */
.prSeasonBar__close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.prSeasonBar__close:hover,
.prSeasonBar__close:focus { background: rgba(255, 255, 255, .18); }

/* Barevne varianty - klientka prepina atributem data-sezona v adminu.
   Hodnoty jsou zamerne cesky, protoze je edituje netechnicky uzivatel. */
.overall-wrapper > .prSeasonBar[data-sezona="jaro"]   { background: #1a5c38; }
.overall-wrapper > .prSeasonBar[data-sezona="podzim"] { background: #7b5233; }
.overall-wrapper > .prSeasonBar[data-sezona="konec"]  { background: #4a4a4a; }

/* Mobil (<=767px): Apollo fixuje .top-navigation-bar (z-index 7) i #header (z-index 6)
   k hornimu okraji, takze lista musi byt fixed taky. Odsazeni dopocita seasonbar.js. */
@media (max-width: 767px) {
    .overall-wrapper > .prSeasonBar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 8;
    }

    .prSeasonBar__inner {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 7px 12px;
        font-size: 13px;
        gap: 10px;
        text-align: left;
    }

    /* Na uzkem displeji by druha veta listu roztahla na tri radky */
    .prSeasonBar__detail { display: none; }

    .prSeasonBar__btn {
        padding: 4px 12px;
        font-size: 13px;
    }

    /* Na mobilu je lista jednoradkova, krizek proto radeji jako bezny flex prvek */
    .prSeasonBar__close {
        position: static;
        transform: none;
        width: 22px;
        height: 22px;
        font-size: 20px;
    }
}