@layer components {
    @media screen and (max-width: 768px) {

        /* prevent background page from scrolling when mobile nav is open */
        body:has(header input:checked) {
            overflow: hidden;
        }
    }

    header:has(nav) {
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--color-lightgrey);
        background-color: var(--color-black);

        input[type=checkbox] {
            display: none;
        }

        nav {
            position: relative;

            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: var(--size-6);
            justify-content: space-between;
            align-items: center;

            padding: var(--size-2) var(--size-3);

            width: 100%;
            max-width: var(--size-lg, 1280px);
        }

        h1 {
            font-size: var(--font-size-2);
        }

        .cursor>svg:nth-child(2) {
            transition: 0.2s ease-in-out;
            rotate: 0deg;
            /* transform: rotate(0deg) translate(0, 0); */
            color: var(--color-white);
        }

        .menu-main {
            display: grid;
            grid-template-columns: 1fr auto;

            @media screen and (max-width: 768px) {
                grid-template-columns: 1fr;

                #user-menu {
                    padding-top: var(--size-3);
                    gap: var(--size-3);
                }
            }
        }

        .job-links {
            svg {
                display: none;
            }
        }

        /* Mobile */
        @media screen and (max-width: 768px) {
            .menu-header {
                display: flex;
                width: 100%;
                grid-column: span 2;
                justify-content: space-between;
                align-items: center;
                gap: var(--size-3);

                label {
                    width: 24px;
                }
            }

            .menu-main {
                display: none;

                .bosch-search {
                    position: fixed;
                    bottom: 20px;
                    left: 10px;
                    right: 10px;
                    animation: var(--animation-fade-out) reverse;
                    animation-duration: 0.9s;
                }
            }

            /* mobile nav is open */
            &:has(input:checked, .menu-main:focus-within) {
                position: fixed;
                top: 0;
                width: 100%;
                height: 100vh;
                height: 100dvmax;
                /* fixes mobile (safari) */
                z-index: 1;
                align-items: start;
                overflow: auto;

                .cursor>svg:nth-child(2) {
                    rotate: 45deg;
                    color: var(--color-white);
                }

                drop-menu {
                    border-radius: var(--radius-round);
                    animation: var(--animation-fade-out) reverse;
                    animation-duration: 0.4s;

                    menu {
                        display: grid;
                        position: unset;
                        padding: unset;
                        width: unset;
                        color: unset;
                        border: unset;
                        background: unset;

                        grid-template-columns: subgrid;

                        svg {
                            margin-right: var(--size-2);
                        }
                    }
                }

                .menu-main {
                    display: grid;
                    grid-column: span 2;
                    gap: 0;
                    animation: var(--animation-fade-out) reverse;
                    animation-duration: 0.6s;
                }
            }

            avatar-image {
                display: none;
            }

            :is(menu, drop-menu, .job-links) {
                display: grid;
                grid-template-columns: subgrid;
                gap: var(--size-2);
            }

            .job-links {
                svg {
                    display: block;
                    width: 20px;
                    height: 20px;
                    margin-right: var(--size-2);
                }

                a:after {
                    content: attr(title);
                }
            }

            menu:first-child {
                margin-bottom: var(--size-3);
                padding-block: var(--size-3);
                border-top: var(--border-size-1) solid var(--color-bordergrey);
                border-bottom: var(--border-size-1) solid var(--color-bordergrey);
            }

            menu {
                li {
                    padding-inline: var(--size-3);
                }
            }
        }

        :is(a, button) {
            display: flex;
            gap: var(--size-1);
            align-items: center;

            color: inherit;

            transition: color 150ms ease;

            &:hover {
                color: var(--color-accent);
            }
        }

        a {
            text-decoration: none;
        }

        button {
            padding: 0;
            font-size: inherit;
            color: inherit;
            cursor: pointer;
            border: none;
            background-color: transparent;
        }

        local-clock {
            display: none;
        }

        .admin-spacer {
            border-bottom: 1px solid var(--color-bordergrey);
        }

        /* Desktop */
        @media screen and (min-width: 768px) {
            nav {
                grid-auto-flow: column;
                grid-auto-columns: min-content auto;
                justify-content: normal;
            }

            nav div {
                display: grid;
                grid-auto-flow: column;
                grid-template-columns: max-content auto;
                grid-auto-columns: max-content;

                gap: var(--size-6);
                justify-content: stretch;
                align-items: center;
            }

            .menu-header {
                grid-template-columns: revert;

                >label {
                    display: none;
                }
            }

            h1 {
                display: none;
            }

            a:not(:has(img, svg)) {
                border-bottom: 1px solid transparent;

                &.current {
                    border-color: var(--color-accent);
                }
            }

            div>menu {
                display: grid;
                grid-auto-flow: column;
                gap: var(--size-4);
                justify-content: start;
                align-items: center;

                li {
                    display: flex;
                    gap: var(--size-3);
                }
            }

            div :is(local-clock, credit-button, > menu, drop-menu) {
                display: grid;
            }

            local-clock {
                min-width: 1em;
                grid-template-columns: 20px 1fr auto !important;
                gap: 5px;
                align-items: center;
                justify-content: center;
                padding: var(--size-1) var(--size-2);
                text-align: center;
                color: var(--color-white, currentColor);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                border-radius: 5px;
                background-color: var(--color-gunmetal, currentColor);
                justify-self: end;
            }

            input,
            button {
                padding: var(--size-1) var(--size-2);
            }

            /* hide the mobile menu toggle */
            [role="button"] {
                display: none;
            }

            avatar-image {
                display: grid;
            }
        }
    }
}