/* ==========================================
   MOTYW JESIENNY
========================================== */

/* DODANO: jesienne tło strony oraz punkt odniesienia
   dla dekoracji pozycjonowanych absolutnie. */
body.theme-autumn {
    position: relative;
    overflow-x: clip;
    background: #f4e3c7;
}

/* ==========================================
   MENU
========================================== */

/* DODANO: jesienna kolorystyka menu. */
body.theme-autumn .main-nav-spichlerz {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: linear-gradient(
        180deg,
        #8d4a0c 0%,
        #623006 100%
    );
}

/* ==========================================
   GŁÓWNY UKŁAD
========================================== */

/* DODANO: jasne tło środkowej kolumny. */
body.theme-autumn .center-column {
    background: #fffaf2;
    border: 1px solid #d6a15b;
}

/* DODANO: boczne kolumny w kolorze jesiennego papieru. */
body.theme-autumn .left-column,
body.theme-autumn .right-column {
    background: #f3dfc0;
    border-color: #ce9142;
}

/* ==========================================
   BOCZNE BOXY
========================================== */

/* DODANO: wspólny wygląd boxów po lewej i prawej stronie. */
body.theme-autumn .sidebar.left .sidebar-box,
body.theme-autumn .sidebar-right .sidebar-box {
    background: #fff7e9;
    border-left: 4px solid #d66f16;
    box-shadow: 0 2px 8px rgba(122, 61, 5, 0.12);
}

/* ==========================================
   ARTYKUŁY
========================================== */

/* DODANO: jesienne obramowanie kart artykułów. */
body.theme-autumn .article-card {
    border-color: #d6a15b;
}

/* ==========================================
   PRZYCISKI
========================================== */

/* DODANO: jesienne przyciski wyszukiwarki i paginacji. */
body.theme-autumn .search-form button,
body.theme-autumn .pagination .page-link {
    background: #7a3d05;
}

body.theme-autumn .search-form button:hover,
body.theme-autumn .pagination .page-link:hover {
    background: #a65a0a;
}

/* ==========================================
   WARSTWA DEKORACJI
========================================== */

/* DODANO: motyw jesienny jawnie włącza dekoracje.
   W głównym style.css są one domyślnie ukryte. */
body.theme-autumn .seasonal-decorations {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    /*
     * WAŻNE:
     * visible zapobiega obcinaniu liści oraz dyni
     * wystających poza obszar warstwy dekoracyjnej.
     */
    overflow: visible;

    pointer-events: none;
    z-index: 30;
}

/* DODANO: wspólne ustawienia wszystkich jesiennych grafik. */
body.theme-autumn .autumn-decoration {
    position: absolute;
    display: block;

    max-width: none;
    height: auto;

    pointer-events: none;
    user-select: none;

    z-index: 40;

    filter: drop-shadow(
        0 8px 12px rgba(85, 40, 5, 0.25)
    );
}

/* ==========================================
   LIŚCIE — LEWA STRONA
========================================== */

/* DODANO: górny liść po lewej stronie. */
body.theme-autumn .autumn-leaf-left-top {
    top: 410px;
    left: calc(50% - 760px);

    width: 82px;

    transform: rotate(-28deg);
}

/* DODANO: dolny liść po lewej stronie. */
body.theme-autumn .autumn-leaf-left-middle {
    top: 640px;
    left: calc(50% - 735px);

    width: 68px;

    transform: rotate(38deg);
}

/* ==========================================
   LIŚCIE — PRAWA STRONA
========================================== */

/* DODANO: górny liść po prawej stronie. */
body.theme-autumn .autumn-leaf-right-top {
    top: 445px;
    right: calc(50% - 755px);

    width: 78px;

    transform: rotate(28deg);
}

/* DODANO: dolny liść po prawej stronie. */
body.theme-autumn .autumn-leaf-right-middle {
    top: 710px;
    right: calc(50% - 735px);

    width: 64px;

    transform: rotate(-36deg) scaleX(-1);
}

/* ==========================================
   DYNIE — NAD STOPKĄ
========================================== */

/* DODANO: dekoracja dyni po lewej stronie. */
body.theme-autumn .autumn-bottom-left {
    left: calc(50% - 660px);
    bottom: 260px;

    width: 300px;
}

/* DODANO: dekoracja dyni po prawej stronie. */
body.theme-autumn .autumn-bottom-right {
    right: calc(50% - 660px);
    bottom: 260px;

    width: 300px;

    transform: scaleX(-1);
}

/* ==========================================
   KOLEJNOŚĆ WARSTW
========================================== */

/* DODANO: główne elementy strony znajdują się nad tłem,
   ale poniżej dekoracji sezonowych. */
body.theme-autumn .banner-spichlerz,
body.theme-autumn .layout,
body.theme-autumn .site-footer {
    position: relative;
    z-index: 20;
}

/*
 * Menu ma osobny z-index 1000,
 * dlatego pozostaje nad dekoracjami podczas przewijania.
 */

/* ==========================================
   STOPKA
========================================== */

/* DODANO: szerokość stopki zgodna z layoutem strony. */
body.theme-autumn .site-footer {
    width: calc(100% - 20px);
    max-width: 1200px;

    margin: 40px auto 20px;

    padding-left: 24px;
    padding-right: 24px;

    box-sizing: border-box;
}

/* ==========================================
   EKRANY DO 1500 PX
========================================== */

@media (max-width: 1500px) {

    /* DODANO: liście przesunięte bliżej krawędzi ekranu. */
    body.theme-autumn .autumn-leaf-left-top {
        left: 12px;
    }

    body.theme-autumn .autumn-leaf-left-middle {
        left: 28px;
    }

    body.theme-autumn .autumn-leaf-right-top {
        right: 12px;
    }

    body.theme-autumn .autumn-leaf-right-middle {
        right: 26px;
    }

    /* DODANO: mniejsze dynie na średnich ekranach. */
    body.theme-autumn .autumn-bottom-left,
    body.theme-autumn .autumn-bottom-right {
        width: 280px;
    }
}

/* ==========================================
   EKRANY DO 1250 PX
========================================== */

@media (max-width: 1250px) {

    /* DODANO: mniejsze liście na węższych ekranach. */
    body.theme-autumn .autumn-leaf-left-top {
        left: 8px;
        width: 58px;
    }

    body.theme-autumn .autumn-leaf-left-middle {
        left: 16px;
        width: 48px;
    }

    body.theme-autumn .autumn-leaf-right-top {
        right: 8px;
        width: 56px;
    }

    body.theme-autumn .autumn-leaf-right-middle {
        right: 16px;
        width: 46px;
    }
}

/* ==========================================
   EKRANY DO 1100 PX
========================================== */

@media (max-width: 1100px) {

    /* DODANO: dynie znikają, zanim zaczną zasłaniać treść. */
    body.theme-autumn .autumn-bottom-left,
    body.theme-autumn .autumn-bottom-right {
        display: none;
    }
}

/* ==========================================
   TELEFONY
========================================== */

@media (max-width: 700px) {

    /* DODANO: wszystkie dekoracje znikają na telefonach. */
    body.theme-autumn .autumn-decoration {
        display: none;
    }
}