header {
    background-color: #000000cb;
    backdrop-filter: blur(50px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-block: 0.25rem;
    z-index: 10;

    display: flex;
    justify-content: space-between;
    align-content: center;

    padding-inline: var(--spacing-s);

    transition: all var(--animation-duration);

    img {
        width: 5rem;
    }

    ul {
        display: none;
    }

    a {
        @media (any-pointer: fine) {
            &:hover {
                color: var(--color-accent);
            }
        }
    }

    >button {
        background-color: transparent;
        border: none;
        display: flex;
        justify-items: end;
        align-items: center;


        @media (any-pointer: fine) {
            cursor: pointer;
        }

        form {
            color: var(--color-secondary);
            display: flex;

            label {
                display: flex;
                align-content: center;
                gap: calc(var(--spacing-s) / 2);
                
                @media (any-pointer: fine) {
                    &:hover {
                        cursor: pointer;
                        scale: 1.02;
                    }
                }
            }

        }

        svg {
            transition: all var(--animation-duration);
            transform-origin: center;
        }
    }

    @media (width > 900px) {
        padding-block: var(--spacing-s);

        ul {
            display: flex;
            list-style: none;
            gap: calc(var(--spacing-m) * 2);
            align-items: center;

            a {
                &::after {
                    all: unset;
                }
            }
        }

        >button {
            display: none;
        }
    }

    &.menu-open {
        position: fixed;
        inset: 0 var(--spacing-m) 0 0;
        padding-inline: var(--spacing-s);


        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: min-content 1fr;
        row-gap: calc(var(--spacing-m) * 2);

        transition: all var(--animation-duration);

        img {
            visibility: hidden;
        }

        button {
            grid-column: 2/3;
            grid-row: 1/2;

            justify-self: end;

            label {
                display: flex;
                align-items: center;
            }

            svg {
                width: 1.2rem;
                height: 1.2rem;
                transition: all var(--animation-duration);
                transform-origin: center;
                overflow: visible;

                path {
                    d: path("M6.575 7.975L1.675 12.875C1.49167 13.0583 1.25833 13.15 0.975 13.15C0.691667 13.15 0.458333 13.0583 0.275 12.875C0.0916663 12.6917 0 12.4583 0 12.175C0 11.8917 0.0916663 11.6583 0.275 11.475L5.175 6.575L0.275 1.675C0.0916663 1.49167 0 1.25833 0 0.975C0 0.691667 0.0916663 0.458333 0.275 0.275C0.458333 0.0916663 0.691667 0 0.975 0C1.25833 0 1.49167 0.0916663 1.675 0.275L6.575 5.175L11.475 0.275C11.6583 0.0916663 11.8917 0 12.175 0C12.4583 0 12.6917 0.0916663 12.875 0.275C13.0583 0.458333 13.15 0.691667 13.15 0.975C13.15 1.25833 13.0583 1.49167 12.875 1.675L7.975 6.575L12.875 11.475C13.0583 11.6583 13.15 11.8917 13.15 12.175C13.15 12.4583 13.0583 12.6917 12.875 12.875C12.6917 13.0583 12.4583 13.15 12.175 13.15C11.8917 13.15 11.6583 13.0583 11.475 12.875L6.575 7.975Z");
                }
            }
        }

        ul {
            grid-column: span 2;

            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing-m) * 2);

            list-style: none;

            li {

                a {
                    text-align: center;

                    &::after {
                        all: unset;
                    }
                }
            }

        }
    }
}

main {
    @media (width > 900px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

section.hero {
    height: 100vh;
    background-image: url(../assets/images/heroBG.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-block: calc(var(--spacing-m) * 3) var(--spacing-m);

    display: grid;
    grid-template-rows: 1fr min-content min-content;
    row-gap: var(--spacing-m);

    h2 {
        max-width: 20rem;
        display: none;

        @media (width > 900px) {
            display: block;
        }
    }

    ul {
        list-style: none;

        display: flex;
        flex-direction: column;
        gap: var(--spacing-s);
    }

    @media (width > 900px) {
        background-position: top;
        grid-template-columns: repeat(3, 1fr);
        grid-column: span 2;
        background-image: url(../assets/images/embassyHeroBG.png);

        h1 {
            align-self: flex-end;
            grid-column: span 2;
        }

        h2 {
            grid-column: span 2;
        }

        ul {
            flex-direction: row;
            justify-content: space-between;
            grid-row: 3/4;
            grid-column: 1 /-1;
        }
    }
}

section.exhibition {
    background-image: url(../assets/images/exchibitionBG.png);
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;

    padding-block: var(--spacing-m);
    display: grid;
    grid-template-rows: min-content 1fr repeat(3, min-content);
    row-gap: var(--spacing-s);

    p {
        max-width: 20rem;
    }

    @media (width > 900px) {
        height: 50vh;
        transition: all var(--animation-duration);

        @media (any-pointer: fine) {
            &:hover {
                transition: all var(--animation-duration);
                background-position: 48% 48%;
            }
        }
    }
}

section.plan-your-visit {
    background-image: url(../assets/images/insideMuseum.png);
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding-block: var(--spacing-m);


    article {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-s);
    }

    [popover] {
        position: fixed;
        top: var(--spacing-m);
        width: 95%;
        padding: var(--border-radius-m);
        justify-self: center;

        border: 0;
        border-radius: var(--border-radius-m);
        background-color: #000000cb;
        backdrop-filter: blur(50px);

        transition:
            opacity var(--animation-duration) ease-out,
            height var(--animation-duration) allow-discrete,
            scale var(--animation-duration) ease,
            display var(--animation-duration) allow-discrete;
        opacity: 0;
        height: 0;
        transform-origin: top;

        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, min-content);
        row-gap: var(--spacing-m);

        overflow-y: hidden;

        @media (width > 900px) {
            top: calc(var(--spacing-m) * 2.5);
        }

        &::backdrop {
            backdrop-filter: blur(50px);
        }

        p {
            grid-column: span 2;
        }

        .close-popover-button {
            padding: 0;
            margin: 0;
            justify-self: end;
            position: unset;
            background-color: transparent;
            border: none;

            svg {
                transition: all var(--animation-duration);

                @media (any-pointer: fine) {
                    &:hover {
                        transform: rotate(0.5turn) scale(1.2);
                    }
                }
            }
        }



        div.checkout-progressbar {
            grid-column: span 3;

            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: min-content min-content;

            progress {
                grid-column: span 3;
                width: 100%;
                appearance: none;

                &::-webkit-progress-bar {
                    background-color: var(--color-inactive);
                    height: 0.5rem;
                    border-radius: var(--border-radius-s);
                }

                &::-webkit-progress-value {
                    background-color: var(--color-accent);
                    border-radius: var(--border-radius-s);
                }
            }

            .active-form-p {
                color: var(--color-accent);
            }

            p:nth-of-type(1) {
                grid-column: 1/2;
                color: var(--color-accent);
            }

            p:nth-of-type(2) {
                grid-column: 2/3;
            }

            p:nth-of-type(3) {
                grid-column: 3/4;
            }
        }

        article.ticket {
            grid-column: 1 / -1;

            form {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-m);

                @media (width > 900px) {
                    width: 40%;
                }
                color: var(--color-secondary);
                grid-column: 1 / -1;

                label {
                    display: grid;
                    grid-template-columns: 7rem 1fr 4rem;
                    align-items: center;

                    input {
                        width: 5rem;
                        background-color: transparent;
                        border: transparent;
                        border-bottom: 1px solid var(--color-inactive);
                        color: var(--color-secondary);
                        text-align: center;
                        justify-self: center;
                        padding-left: 1rem;

                        &::placeholder {
                            color: rgb(165, 165, 165);
                        }
                    }

                    span:nth-of-type(2) {
                        text-align: end;
                    }
                }

                button {
                    align-self: end;

                    width: max-content;
                    padding: var(--spacing-s);
                    border-radius: var(--border-radius-s);
                    background-color: var(--color-secondary);
                    border: 0;
                    color: var(--color-primary);
                    font-size: var(--font-size-s);

                    @media (any-pointer: fine) {
                        &:hover {
                            background-color: var(--color-primary);
                            color: var(--color-secondary);
                            cursor: pointer;
                        }
                    }
                }

            }
        }
    }

    [popover]:popover-open {
        opacity: 1;
        height: 90%;
        display: grid;

        @starting-style {
            opacity: 0;
            height: 0;
        }
    }

    >button.plan-visit-button {
        @media (width > 900px) {
            visibility: hidden;
        }
    }

    @media (width > 900px) {
        height: 50vh;
        transition: all var(--animation-duration);

        @media (any-pointer: fine) {
            &:hover {
                transition: all var(--animation-duration);
                background-position: 48% 48%;
            }
        }
    }
}


section.about {
    padding-inline: unset;

    @media (width > 900px) {
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    article {
        padding: calc(var(--spacing-m) * 2) var(--spacing-s);

        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: darken;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        p {
            max-width: 40ch;
            padding-block: var(--spacing-m);
        }

        &:nth-of-type(1) {
            background-image: url(../assets/images/overDeLocatieBG.png);
        }

        &:nth-of-type(2) {
            background-image: url(../assets/images/onlineCatBG.png);
        }

        &:nth-of-type(3) {
            background-image: url(../assets/images/guidedTourBG.png);
        }
    }
}


footer {
    padding: var(--spacing-m) var(--spacing-s);

    p {
        max-width: 35ch;
        padding-block: var(--spacing-m);
    }

    form {
        padding-bottom: calc(var(--spacing-m) * 3);

        input {
            background-color: transparent;
            border: transparent;
            border-bottom: 1px solid var(--color-secondary);
            padding: 10px;
            color: var(--color-secondary);
            font-size: var(--font-size-s);

            &::placeholder {
                color: rgb(165, 165, 165);
            }
        }
    }

    article {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);

        @media (width > 900px) {
            grid-template-columns: repeat(3, 1fr);
        }

        li {
            list-style: none;
        }

        ul:nth-of-type(1) {
            grid-column: 1/2;
            grid-row: 1/-1;

            li {
                padding-block: var(--spacing-s);

                a {

                    @media (any-pointer: fine) {
                        &:hover {
                            color: var(--color-accent);
                        }
                    }

                    &::after {
                        all: unset;
                    }
                }

            }
        }

        ul:nth-of-type(2) {
            grid-column: 2/3;
            grid-row: 2/3;
            align-self: end;

            @media (width > 900px) {
                grid-column: 3/4;
            }

            li {
                &:nth-of-type(1) {
                    margin-bottom: var(--spacing-m);
                }

                &:nth-of-type(3) {
                    margin-bottom: var(--spacing-s);
                }
            }
        }
    }

}