header {
    h1,
    p {
        display: flex;
        justify-content: center;
    }

    p {
        padding-bottom: 1rem;
    }
    a:hover {
        border: none;
        padding: 0;
    }
}

nav {
    z-index: 2;

    ul {
        padding: var(--xs) 2rem;
        background-color: var(--accent-color-one);
        border-radius: var(--border-radius);

        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;

        li {
            justify-self: center;

            a {
                color: var(--background-colour);
            }
        }

        @media (width > 30em) {
            display: flex;
            justify-content: space-between;
        }
    }
}

@supports (animation-timeline: scroll()) {
    nav {
        container-type: scroll-state;
        position: sticky;
        top: 0;
    }

    ul {
        @container scroll-state(stuck:top) {
            display: block;
            background-color: var(--background-colour);
        }
    }

}

section.over-ons {
    margin: 0 auto;
    /* PHOTO SELECTOR */
    div {
        display: grid;
        width: 100%;
        gap: var(--sm);
        padding-bottom: var(--md);

        >img {
            position: relative;
            grid-row-start: 1;
            grid-column-start: 1;
            width: 100%;
            height: 20em;
            object-fit: cover;

            display: block;
            border-radius: 10rem 10rem 0 0;
        }
    }
    div:has([value="foto-1"]:checked) #foto-1,
    div:has([value="foto-2"]:checked) #foto-2,
    div:has([value="foto-3"]:checked) #foto-3,
    div:has([value="foto-4"]:checked) #foto-4 {
        z-index: 1;
    }
    form {
        display: flex;
        gap: var(--sm);

        label {
            display: block;
            position: relative;

            height: 5rem;
            flex-grow: 1;
        }

        input {
            position: absolute;
            appearance: none;
            inset: 0;
            opacity: 1;
            margin: 0;
            outline: none;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: var(--border-radius);

            opacity: .5;
        }
    }
    form label:has( :checked) img {
        opacity: 1;
    }


    @media (width > 38rem) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content 1fr;
        column-gap: var(--sm);

        p {
            grid-column: 1;
            grid-row: 2;
        }
        div {
            grid-row: 1/3;
        }
    }
    @media (width > 60rem) {
        column-gap: 3rem;
        max-width: 75%;
        justify-self: center;
    }
}

.image-container {
    display: flex;
    overflow-x: scroll;
    gap: var(--sm);
    padding-top: 3rem;

    &::-webkit-scrollbar {
        display: none;
    }

    img {
        height: 20vh;
        width: 35vw;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

    @media (width > 38rem) {
        display: none;
    }
}

section.ons-aanbod {
    margin: 0 auto;

    p {
        padding-bottom: var(--md);
    }
    button {
        margin-bottom: 1.5rem;
    }
    
    details {
        border-top: 1px solid var(--accent-color-one);
    }
    details:last-child {
        border-bottom: 1px solid var(--accent-color-one);
    }

    summary {
        display: flex;
        justify-content: space-between;
        padding: var(--xs);
        color: var(--accent-color-one);
    }

    summary::marker {
        content: "";
    }
    summary::after {
        content: "+";
    }
    details[open] summary::after {
        content: "-";
    }

    @media (width > 60rem) {
        max-width: 75%;
        justify-self: center;
    }

    dialog {
        width: 85vw;
        height: 70vh;
        background-color: var(--background-colour);
        border:  1px solid var(--accent-color-one);
        border-radius: var(--border-radius);
        padding: var(--sm);

        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        p {
            padding-bottom: var(--sm);
        }
        button {
            width: min-content;
        }

        .scroll-dialog {
            display: flex;
            overflow-x: scroll;
            gap: var(--sm);
            padding-bottom: var(--sm);
        }
            ::-webkit-scrollbar {
                display: none;
            }
            img {
                height: 45vh;
                border-radius: var(--border-radius);
            }
    }
    dialog::backdrop {
        background-color: var(--accent-color-one);
        opacity: .3;
    }
}

section.content {
    margin: 0 auto;

    p {
        padding-bottom: var(--md);
    }
    .photo-collage {
        display: grid;
        gap: var(--sm);
        padding-bottom: 5rem;

        img {
           object-fit: cover;
           width: 100%;
           height: 100%;

           border-radius: var(--border-radius);
        }

        @media (width > 30rem) {
            img {
                height: 12rem;
            }
            grid-template-columns: 1fr 1fr;
            gap: var(--md);
            justify-self: center;
        }

        @media (width > 44rem) {
            img {
                height: 12rem;
            }

            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: var(--md);
            justify-self: center;
        }
    }

    @media (width > 60rem) {
        max-width: 75%;
        justify-self: center;
    }
}

footer {
    border-top: 1px solid black;

    h2 {
        padding: 0 0 0 0;
    }
    h3 {
        padding: var(--sm) 0 var(--xs);
    }
    .phone {
        display: flex;
        flex-direction: column;
    }
    img {
        border: none;
        height: 30vh;
        align-self: center;
    }
    a {
        font-size: clamp(1.25em, 3vw, 1.5em)
    }
    a:hover {
        text-decoration: underline;
        border: none;
        padding: 0;
    }


    @media (width > 1000px) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        justify-items: center;

        h2 {
            grid-row: 1;
            grid-column: 1/4;
        }
        h3 {
            grid-row: 2;
        }
        h3:nth-of-type(1), p {
            grid-column: 1/2;
        }
        h3:nth-of-type(2), 
        .phone  {
            grid-column: 2/3;
        }
        .phone {
            grid-row: 3;
        }
        h3:nth-of-type(3) {
            grid-column: 3/4;
        }        
    }
}

.background-flowers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* voorkomt dat bloemen klikken blokkeren */
    overflow: hidden;
    z-index: -1; /* achter je content */

    .flower {
        position: absolute;
        opacity: 0.3;
        transition: opacity 0.3s ease;
        border: none;
        height: 40vh;
    }


    .flower1 {
        top: 60vh;
        left: -15vw;
        /* rotate: 40deg; */
    }

    .flower2 {
        transform: rotateY(180deg);
        right: 10vw;
        top: 85vh;
    }

    .flower3 {
        top: 40vh;
        right: -15vw;
        rotate: -40deg;
    }
    .flower4 {
        top: -22vh;
        rotate: 120deg;
        left: -5vw;
        transform: rotateY(165deg);
    }

    @media (max-width: 60rem) {
        display: none;
    }
}