@layer reset, base, theme;


/* ---------------------------------------------------------
   Reset
--------------------------------------------------------- */

@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        text-size-adjust: 100%;
    }

    body,
    h1,
    h2,
    h3,
    p,
    ul {
        margin: 0;
    }

    ul {
        padding: 0;
        list-style: none;
    }

    img {
        display: block;
        max-width: 100%;
    }

}


/* ---------------------------------------------------------
   Base
--------------------------------------------------------- */

@layer base {

    body {
        min-height: 100vh;
        font-family:
            Arial,
            Helvetica,
            sans-serif;
    }

    a {
        color: inherit;
    }

    .skip-link {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: -100vw;

        &:focus {
            inset-inline-start: 1rem;
            z-index: 100;
        }
    }

}


/* ---------------------------------------------------------
   Classic Kampfgurke Theme
--------------------------------------------------------- */

@layer theme {

    [data-theme="classic"] {

        --color-background: #ccc;
        --color-page: #fff;

        --color-text: #666;
        --color-heading: #666;

        /* --color-blue: #6fa2d1; */
        --color-blue: #4780b3;
        --color-blue-dark: #1684d3;
        --color-blue-light: #a5bdd1;

        /* --color-green: #79c800; */
        --color-green: #67a705;

        /* --color-toolbar: #aaa; */
        --color-toolbar: #767676;

        --content-width: 1080px;
        --sidebar-width: 260px;

        --gap: 36px;

        background: var(--color-background);
        color: var(--color-text);


        /* -------------------------------------------------
           Page shell
        ------------------------------------------------- */

        body {
            padding-block: 40px;
        }


        .site {
            width: min(
                calc(100% - 40px),
                var(--content-width)
            );

            margin-inline: auto;
            padding: 12px;

            background: var(--color-page);
        }


        /* -------------------------------------------------
           Header
        ------------------------------------------------- */

        .site-header {
            margin-block-end: 20px;
        }


        .site-brand {
            position: relative;

            display: flex;
            min-height: 150px;

            align-items: center;
            justify-content: center;

            text-decoration: none;

            background:
                var(--color-green)
                url("/assets/img/gurkenlogo.jpg")
                center / cover
                no-repeat;

            overflow: hidden;


            .site-brand__title,
            .site-brand__tagline {
                position: absolute;

                width: 1px;
                height: 1px;

                overflow: hidden;
                clip-path: inset(50%);

                white-space: nowrap;
            }
        }


        .site-toolbar {
            display: grid;
            grid-template-columns: 290px 1fr;

            min-height: 38px;

            background: var(--color-toolbar);
            color: #ddd;

            font-size: 16px;


            > * {
                display: flex;
                align-items: center;

                padding-inline: 12px;
            }


            .site-toolbar__newsletter {
                border-inline-end: 1px solid #eee;

                a {
                    color: #fff;
                    font-weight: 700;
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }


        /* -------------------------------------------------
           Main layout
        ------------------------------------------------- */

        .site-layout {
            display: grid;

            grid-template-columns:
                var(--sidebar-width)
                minmax(0, 1fr);

            gap: var(--gap);

            align-items: start;
        }


        /* -------------------------------------------------
           Sidebar
        ------------------------------------------------- */

        .site-sidebar {
            background: var(--color-blue);
        }


        .main-nav {
            padding: 60px 22px 26px;


            .main-nav__list {
                display: grid;
                gap: 12px;
            }


            a {
                color: #fff;

                font-size: 16px;
                font-weight: 700;

                text-decoration: none;


                &:hover,
                &:focus-visible {
                    text-decoration: underline;
                }
            }
        }


        .sidebar-panel {
            min-height: 28px;

            border-block-start: 2px solid #fff;
            background: var(--color-blue-light);


            span {
                position: absolute;

                width: 1px;
                height: 1px;

                overflow: hidden;
                clip-path: inset(50%);
            }
        }


        /* -------------------------------------------------
           Main content
        ------------------------------------------------- */

        .site-main {
            min-width: 0;
            padding-inline-end: 72px;
            padding-block-end: 30px;
        }


        .page {
            font-size: 20px;
            line-height: 1.48;


            a {
                color: var(--color-green);
                text-decoration: none;


                &:hover {
                    text-decoration: underline;
                }
            }
        }


        .page-header {
            margin-block-end: 26px;


            h1 {
                margin-block-end: 12px;

                color: var(--color-heading);

                font-size: 30px;
                line-height: 1.15;
            }


            .page-intro {
                max-width: 720px;
            }
        }


        /* -------------------------------------------------
           Content sections
        ------------------------------------------------- */

        .content-section {
            margin-block: 28px;


            > * + * {
                margin-block-start: 12px;
            }


            .section-label {
                color: var(--color-blue-dark);

                font-size: 16px;
                font-weight: 700;

                text-transform: uppercase;
            }


            h2 {
                font-size: 21px;
            }


            &.news {
                padding: 8px;

                border-block:
                    2px dashed #9a9386;

                background: #f5f1e9;


                header {
                    > * + * {
                        margin-block-start: 8px;
                    }
                }
            }
        }


        /* -------------------------------------------------
   Jokes
------------------------------------------------- */

.jokes {

    .jokes__header {
        margin-block-end: 34px;

        h1 {
            color: var(--color-heading);

            font-size: 30px;
            line-height: 1.15;
        }
    }


    .jokes__list {
        display: grid;
        gap: 26px;
    }


    .joke {
        position: relative;

        padding-inline-start: 26px;


        &::before {
            content: "";

            position: absolute;
            inset-block-start: 0.35em;
            inset-inline-start: 0;

            width: 14px;
            height: 10px;

            border: 2px solid #bbb;
            border-radius: 4px;

            background: #fff;
        }


        &::after {
            content: "";

            position: absolute;
            inset-block-start: calc(0.35em + 8px);
            inset-inline-start: 4px;

            width: 5px;
            height: 5px;

            border-inline-start: 2px solid #bbb;

            transform: skew(-30deg);
        }
    }


    .joke__text {
        font-size: 20px;
        line-height: 1.5;
    }


    /* ---------------------------------------------
       Pagination
    --------------------------------------------- */

    .pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        gap: 6px;

        margin-block-start: 30px;

        font-size: 18px;
        font-weight: 700;


        &::before {
            content: "Seite:";

            margin-inline-end: 4px;

            color: var(--color-text);
        }


        a {
            display: inline-flex;

            min-width: 28px;
            min-height: 28px;

            align-items: center;
            justify-content: center;

            padding-inline: 5px;

            color: var(--color-green);

            text-decoration: none;

            border-radius: 3px;


            &:hover,
            &:focus-visible {
                background: color-mix(
                    in srgb,
                    var(--color-green) 12%,
                    transparent
                );
            }


            &[aria-current="page"] {
                color: var(--color-text);

                pointer-events: none;
            }
        }
    }
}


        /* -------------------------------------------------
           Footer
        ------------------------------------------------- */

        .site-footer {
            margin-block-start: 0;

            padding: 12px 18px;

            background: var(--color-blue);
            color: #fff;
        }


        .footer-nav {
            display: flex;

            justify-content: flex-end;
            align-items: center;

            gap: 22px;


            a {
                color: inherit;

                font-size: 16px;
                font-weight: 700;

                text-decoration: none;
                text-transform: uppercase;


                &:hover {
                    text-decoration: underline;
                }
            }
        }


        /* -------------------------------------------------
           Responsive
        ------------------------------------------------- */

        @media (width < 800px) {

            body {
                padding-block: 0;
            }


            .site {
                width: 100%;
                padding: 0;
            }


            .site-layout {
                grid-template-columns: 1fr;
                gap: 0;
            }


            .site-sidebar {
                order: 2;
            }


            .site-main {
                padding: 24px;
            }


            .main-nav {
                padding: 20px;


                .main-nav__list {
                    display: flex;
                    flex-wrap: wrap;

                    gap: 8px 20px;
                }
            }


            .site-toolbar {
                grid-template-columns: 1fr;


                .site-toolbar__newsletter {
                    border: 0;
                }
            }


            .site-brand {
                min-height: 110px;
            }


            .footer-nav {
                justify-content: center;
                flex-wrap: wrap;
            }
        }

    }

}