/* ============================================================
   System sezonów - selektor sezonu + baner archiwalny
   KS Perła Węgrów
   ============================================================ */

/* ---------- Selektor sezonu (dyskretny) ---------- */
.season-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 999px;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}

.season-switcher__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d4af37;
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
}

.season-switcher__label i {
    font-size: 0.9em;
}

.season-switcher__control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.season-switcher__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: 2px 22px 2px 6px;
    cursor: pointer;
    outline: none;
}

.season-switcher__select option {
    color: #1a2332;
    background: #fff;
}

.season-switcher__chevron {
    position: absolute;
    right: 4px;
    pointer-events: none;
    color: #d4af37;
    font-size: 0.7rem;
}

/* Wariant na jasnym tle (gdy selektor poza ciemnym hero) */
.season-switcher--light {
    background: #f4f6fa;
    border-color: rgba(26, 76, 139, 0.25);
}
.season-switcher--light .season-switcher__label {
    color: #1a4c8b;
}
.season-switcher--light .season-switcher__select {
    color: #1a2332;
}
.season-switcher--light .season-switcher__chevron {
    color: #1a4c8b;
}

/* ---------- Baner archiwalny (wyraźny, sticky) ---------- */
.archive-banner {
    position: sticky;
    top: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.45);
    border-bottom: 3px solid #92400e;
    /* Płynne zjechanie banera pod nav po kliknięciu przycisku menu. */
    transition: top 0.28s ease;
}

/* Po przewinięciu pasek nav przykleja się na górze, a baner (wyższy z-index) ma go
   zasłaniać w PEŁNI. min-height bierze grow-only maksimum wysokości nagłówka (--nav-h-max,
   ustawia JS), a nie chwilową --nav-h. Dzięki temu, gdy nagłówek animuje wysokość przy
   zmianie stanu .scrolled (scroll w górę/dół), baner pozostaje pełnej wysokości i spod jego
   dołu nie wystaje skrawek menu w żadnej klatce - nawet gdy przewijanie ustanie w trakcie
   animacji. max() dokłada zabezpieczenie, gdyby chwilowa wysokość przerosła zapamiętane max. */
header.scrolled ~ .archive-banner {
    min-height: max(var(--nav-h, 92px), var(--nav-h-max, 92px));
}

/* Odsłonięcie nav na żądanie: baner zjeżdża dokładnie pod pasek nav i schodzi pod
   niego z-indexem, żeby menu było na wierzchu i klikalne. */
body.archive-nav-open .archive-banner {
    top: var(--nav-h, 92px);
    z-index: 900;
}

.archive-banner__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.archive-banner__icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    color: #fff7ed;
    animation: archive-pulse 1.8s ease-in-out infinite;
}

@keyframes archive-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.85; }
}

.archive-banner__text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.archive-banner__text strong {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.archive-banner__text span {
    font-size: 0.88rem;
    opacity: 0.95;
}

.archive-banner__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.archive-banner__back:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #b45309;
    transform: translateX(-2px);
}

/* Dark mode: globalna reguła linków ([data-theme="dark"] :where(a)) nadawała przyciskowi
   powrotu jasnoniebieski kolor, który zlewał się z pomarańczowym tłem. Baner jest
   pomarańczowy w obu motywach, więc przycisk ma zostać biały. */
[data-theme="dark"] .archive-banner__back { color: #fff; }
[data-theme="dark"] .archive-banner__back:hover { color: #b45309; }

/* Przycisk odsłaniający menu - widoczny dopiero, gdy baner faktycznie zakrywa nav
   (czyli po przewinięciu). Bez przewinięcia nav jest nad banerem i przycisk zbędny. */
.archive-banner__menu {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
header.scrolled ~ .archive-banner .archive-banner__menu { display: inline-flex; }
.archive-banner__menu:hover { background: rgba(255, 255, 255, 0.95); color: #b45309; }
.archive-banner__menu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ikona przycisku zależy od stanu: hamburger, gdy baner zakrywa nav; strzałka w górę,
   gdy nav jest odsłonięty (kolejne kliknięcie zwinie baner do góry i znów zakryje menu).
   Selektory schodzą przez .archive-banner__menu, żeby przebić regułę Font Awesome
   (.fas { display: inline-block }) o tej samej, pojedynczej specyficzności. */
.archive-banner__menu .archive-banner__menu-ico--close { display: none; }
body.archive-nav-open .archive-banner__menu .archive-banner__menu-ico--open { display: none; }
body.archive-nav-open .archive-banner__menu .archive-banner__menu-ico--close { display: inline-block; }

@media (max-width: 768px) {
    .archive-banner__inner {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 10px;
    }
    .archive-banner__icon {
        font-size: 1.3rem;
    }
    .archive-banner__text strong {
        font-size: 0.94rem;
    }
    .archive-banner__back {
        width: 100%;
        justify-content: center;
        /* Przycisk powrotu ląduje pełną szerokością w drugim wierszu, a ☰ zostaje
           obok tekstu w pierwszym (order mniejszy niż powrót). */
        order: 1;
    }
}