/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

:root {
    --spacing-base-small: 2.4rem;
    --spacing-base-medium: 3.8rem;
    --spacing-base-large: 5.4rem;
    --spacing-base-extra-large: 7.1rem;

    --dynamic-spacing-inline-start: var(--spacing-base-small);
    --dynamic-spacing-inline-end: var(--spacing-base-small);
}

@media (min-width: 500px) {
    :root {
        --dynamic-spacing-inline-start: var(--spacing-base-large);
        --dynamic-spacing-inline-end: var(--spacing-base-medium);
    }
}

body {
    color: var(--color-text);
    background-color: var(--color-background);
}

.dark {
    color: #fff;
    background-color: #000;
}

@supports (display: grid) {
    .layout {
        display: grid;
        grid-template-rows: 4.2rem auto;
        align-items: end;
        transition: all 0.4s cubic-bezier(0.87, 0, 0.13, 1);
    }

    .layout.without-animation {
        transition: none;
    }

    .is-resizing .toggle-switch:checked + .layout .navigation {
        align-self: start;
    }

    .toggle-switch:checked + .layout {
        grid-template-rows: var(--navigation-spread, min-content) auto;
    }

    .layout.with-collapsed-content {
        transition-delay: 0.2s;
    }

    .toggle-switch:checked + .layout.with-collapsed-content {
        grid-template-rows: var(--navigation-spread, min-content) 0;
    }

    @media (min-height: 700px) and (min-width: 500px) {
        .toggle-switch:checked + .layout,
        .layout {
            display: grid;
            grid-template-columns: 5.4rem auto;
            grid-template-rows: auto auto;
            min-height: 100vh;
            background-image: linear-gradient(
                to right,
                var(--color-kensington-blue) 0,
                var(--color-kensington-blue) 5.4rem,
                transparent 5.4rem
            );
            transition: none;
        }

        @supports (grid-template-rows: min-content) {
            .toggle-switch:checked + .layout,
            .layout {
                grid-template-rows: auto min-content;
            }
        }

        @media (min-width: 1400px) {
            .layout:not(.is-collapsed) {
                grid-template-columns: 31rem auto !important;
            }
        }

        .layout .navigation {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
        }

        .layout .content {
            grid-column: 2 / 3;
            grid-row: 1;
        }

        .layout .footer {
            grid-column: 2 / 3;
            grid-row: 2;
        }
    }
}