html{
    scroll-behavior: smooth;
}

body{
    background-color: var(--primary-background-color);
    cursor: auto;
}

/* MARK: header  */
header{
    display: flex;
    justify-content: space-between;
    padding: .5rem 1.5rem;

    a:first-of-type{
        width: 3.75rem;
    }

    div.header-items-wrapper{
        display: flex;
        justify-content: space-between;
        gap: 1.5rem;
        align-items: center;

        a{
            display: none;
            width: 18px;

            @media (min-width:64rem){
                display: block;
            }
        }

        details{
            display: none;

            summary{
                display: flex;
                align-items: center;
                gap: .25rem;
                cursor: pointer;

                &::marker{
                    content: '';
                }

                svg{
                    width: 12px;
                    transition: transform .2s ease;
                }
            }

            &[open] summary svg{
                transform: rotate(180deg);
            }

            @media (min-width:64rem){
                display: block;
            }
        }

        button{
            display: none;

            @media (min-width:64rem){
                display: block;
            }
        }

        a.menu-wrapper{
            display: grid;
            justify-items: center;
            align-content: center;
            gap: .2rem;
            width: auto;

            svg{
                width: 100%;
                justify-self: stretch;
            }
        }
    }
    @media (min-width:64rem){
        padding: 1.5rem 1.5rem;
    }
}

/* MARK: main  */
main{
    picture.main-image{
        display: block;
        background: url(/assets/images/background-flower.svg);
        background-color: var(--darker-background-color);
        padding-bottom: 2.5rem;
        background-size: 7rem;

        img{
            width: 100%;
            height: auto;
            background-color: var(--secondary-background-color);
        }
    }
}

/* MARK: information-section */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

section.information-section{
    display: grid;

    .period{
        font-family: gentium, serif;
        font-size: var(--heading-big);
        font-weight: 700;
    }

    h1{
        font-size: var(--heading-big);
        line-height: 1.2;
    }

    .creator{
        font-size: var(--paragraph-big);
    }

    button{
        margin-block: 1rem;
    }

    .object-type{
        font-family: gentium, serif;
        font-size: var(--heading-medium);
        font-weight: 700;
    }

    details{
        margin-block: 1rem;

        summary{
            display: flex;
            align-items: center;
            gap: .25rem;
            cursor: pointer;
            color: var(--secondary-text-color);
            background-color: var(--secondary-background-color);
            border: 2px solid var(--secondary-background-color);
            transition: .2s ease;
            width: fit-content;
            padding: .5rem 1.5rem;

            &::before{
                content: 'Meer';
            }

            &::marker{
                content: '';
            }

            svg{
                width: 1rem;

                line{
                    stroke: var(--secondary-text-color);
                }

                line:first-child{
                    transform-origin: center;
                    transition: transform .2s ease;
                }
            }

            &:hover{
                color: var(--primary-text-color);
                background-color: unset;

                svg line{
                    stroke: var(--primary-text-color);
                }
            }
        }

        &[open] summary{
            &::before{
                content: 'Minder';
            }

            svg{
                line:first-child{
                    transform: rotate(90deg);
                }
            }

        }

        h2{
            padding-top: 1rem;
        }

        div p{
            font-family: gentium, serif;
            font-size: var(--heading-medium);
            font-weight: 700;
            line-height: 1.2;

            &:nth-of-type(2n) {
                padding-bottom: .5rem;
            }
        }
    }

    .displayed{
        padding-block: 1rem;
        display: flex;
        gap: 1rem;
        align-items: center;

        span{
            content: '';
            display: block;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background-color: grey;
            animation: breathe 2s ease-in-out infinite;
        }

        .on-display{
            background-color: green;
        }

        .not-on-display{
            background-color: red;
        }
    }

    .content-blocks{
        p{
            margin-bottom: 1rem;
            text-wrap: pretty;
        }
    }

    @media (min-width: 64rem){
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;

        .period,
        h1,
        .creator,
        button,
        .object-type,
        h2.small-heading,
        details{
            grid-column: 1;
        }

        .displayed{
            grid-column: 2;
            grid-row: 1;
        }

        .content-blocks{
            grid-column: 2;
            grid-row-start: 2;
            grid-row-end: 9;
        }
    }
}

/* hr */
hr{
    display: block;
    background: url(/assets/images/background-flower.svg);
    background-color: var(--darker-background-color);
    padding-bottom: 2.5rem;
    background-size: 7rem;
    border: none;
}


/* MARK: timeline partial */
section.timeline{
    height: fit-content;
    display: grid;
    grid-template-rows: auto auto 1fr;
    background-color: var(--darker-background-color);
    max-width: 80rem;
    justify-self: center;
    width: 100%;

    nav{
        width: 100%;

        ol{
            display: grid;

            li{
                a{
                    font-family: gentium, serif;
                    font-weight: 700;
                    font-size: var(--heading-big);
                    opacity: .5;
                    
                    span{
                        padding-inline-start: .5rem;

                        @media (min-width: 64rem){
                            display: block;
                        }
                    }

                    &:before{
                        content: '';
                        display: inline-block;
                        width: 1rem;
                        height: 1rem;
                        border: 2px solid var(--primary-accent-color);
                        border-radius: 50%;
                        opacity: 0.5;
                        margin-inline: .5rem;
                    }
                }

                &:hover a{
                    opacity: 1;
                }
            }
        }
    }

    .timeline-information{
        display: block;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        height: fit-content;
        border-bottom: 2px solid var(--secondary-background-color);

        &:target{
            opacity: 1;
            pointer-events: auto;
            position: relative;
            transition: opacity .5s ease;
        }

        h3{
            padding: .5rem 1rem;

            @media (min-width: 64rem){
                border-inline-start: 2px solid var(--primary-accent-color);
            }
        }

        img{
            width: auto;
            height: 100%;
            max-height: 20rem;
            aspect-ratio: 1/1;
            position: relative;
            transform: translateX(-50%);
            left: 50%;
            padding-top: 1rem;
            padding-inline: 1rem;
        }

        h4, p{
            padding: .3rem 1rem;
        }

        .year-range{
            font-family: gentium, serif;
            font-weight: bold;
            color: var(--primary-accent-color);
        }

        &::before{
            content: '';
            display: block;
            height: 95%;
            width: 2px;
            background-color: var(--primary-accent-color);
            opacity: .5;
            position: absolute;

            @media (min-width: 64rem){
                display: none;
            }
        }

        @media (min-width: 64rem){
            border: none;
        }
    }

    .timeline-information-mobile{
        @media (min-width: 64rem){
            display: none;
        }
    }

    /* Show first section when no target is active */
    &:not(:has(.timeline-information:target)) ol li:first-child .timeline-information{
        opacity: 1;
        pointer-events: auto;
        position: relative;
    }

    .forward-quiz{
        display: flex;
        width: 100%;
        padding: 1rem;
        justify-content: space-between;
        align-items: center;

        p{
            color: var(--primary-accent-color);
        }

        a::after{
            content: '→';
            padding-inline-start: .5rem;
        }
    }

    .timeline-information-destkop{
        display: none;
        padding: 0;

        @media (min-width: 64rem){
            display: block;
            grid-area: section;
        }
    }

    @media (min-width: 64rem){
        grid-template-columns: 19rem 1fr;
        grid-template-areas: 
        'title   title'
        'nav     section'
        'forward forward';
        column-gap: 1rem;

        h2{
            grid-area: title;
        }

        nav{
            grid-area: nav;
        }

        .forward-quiz{
            grid-area: forward;
            border-top: 2px solid var(--secondary-background-color);
        }
    }    
}

/* MARK: quiz cards */
@keyframes loading-sweep {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

section.quiz{
    ul.quiz-list{
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 25rem;

        display: flex;
        anchor-name: --carousel;

        li.quiz-list-items{
            flex-shrink: 0;
            width: 70%;
            list-style: none;
            display: flex;
            scroll-snap-align: center;
            transform: translateX(50%);

            &:last-of-type{
                margin-right: 50%;
            }

            &:first-of-type{
                article{
                    nav{
                        flex-direction: row-reverse;
                    }
                }
            }

            article{
                background-color: var(--secondary-background-color);
                color: var(--secondary-text-color);
                padding: .5rem;
                height: fit-content;

                ul.answer-list{
                    display: flex;
                    flex-direction: column;
                    gap: .3rem;

                    li{
                        background-color: var(--primary-accent-color);
                        padding: .3rem;

                        &:hover{
                            background-color: #ffd323;
                        }

                        button{
                            background: none;
                            border: none;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                        }

                        &.right-answer{
                            background-color: green;
                            color: var(--primary-text-color);

                            .answer-option{
                                display: none;
                            }

                            .answer-feedback{
                                display: block;
                                color: var(--primary-text-color);
                            }
                        }

                        &.wrong-answer{
                            background-color: red;
                            color: var(--primary-text-color);
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;
                            align-items: center;

                            p{
                                color: var(--primary-text-color);
                            }

                            a{
                                align-self: center;
                                text-decoration: underline;
                            }

                            .answer-option{
                                display: none;
                            }

                            .answer-feedback{
                                display: block;
                            }
                        }

                        .answer-feedback{
                            display: none;
                        }

                        &.is-loading{
                            background-image: linear-gradient(
                                90deg,
                                transparent 0%,
                                rgba(0, 0, 0, 0.2) 80%,
                                transparent 100%
                            );
                            background-size: 200% 100%;
                            animation: loading-sweep 1s ease-in-out infinite;
                        }
                    }

                    &:has(.right-answer, .wrong-answer) li:not(.right-answer):not(.wrong-answer){
                        display: none;
                    }

                    @media (min-width: 64rem){
                        flex-direction: row;
                        gap: 1rem;

                        li{
                            flex: 1;
                        }

                        button{
                            padding: 1rem;

                            span{
                                font-size: var(--paragraph-big);
                            }
                        }
                    }
                }

                @media (min-width: 64rem){
                    font-size: var(--heading-medium);
                    padding: 1rem 2rem;
                    display: flex;
                    flex-direction: column;
                    gap: 2rem;
                }

                .quiz-navigation{
                    display: grid;
                    grid-template-columns: 1fr auto 1fr;
                    align-items: center;
                    padding-block-start: .3rem;

                    .quiz-counter{
                        grid-column: 2;
                        text-align: center;
                    }

                    a.previous-link{
                        grid-column: 1;
                        justify-self: start;
                    }

                    a.next-link{
                        grid-column: 3;
                        justify-self: end;
                    }

                    a{
                        padding-inline: .1rem;
                        border: none;
                        background: none;
                        color: var(--secondary-text-color);
                        display: block;
                        position: relative;
                    }

                    /* https://css-irl.info/animating-underlines/ */
                    a::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 0.1em;
                        background-color: black;
                        opacity: 0;
                        transition: opacity 300ms, transform 300ms;
                    }

                    a:hover::after,
                    a:focus::after {
                        opacity: 1;
                    }

                    /* Slide in */
                    a.next-link {
                        overflow: hidden;
                    }

                    a.next-link::after {
                        opacity: 1;
                        transform: translate3d(-100%, 0, 0);
                    }

                    a.next-link:hover::after,
                    a.next-link:focus::after{
                        transform: translate3d(0, 0, 0);
                    }

                    /* Slide in */
                    a.previous-link {
                        overflow: hidden;
                    }

                    a.previous-link::after {
                        opacity: 1;
                        transform: translate3d(100%, 0, 0);
                    }

                    a.previous-link:hover::after,
                    a.previous-link:focus::after{
                        transform: translate3d(0, 0, 0);
                    }  
                }
            }

            h3, p, span, button{
                color: var(--secondary-text-color);
                text-align: center;
                appearance: none;
            }

            button:hover{
                cursor: pointer;
            }
        }
    }
}

/* tussen main en footer  */
.breaker{
    display: block;
    background: url(/assets/images/diagonal_stripe_pattern_v5.svg);
    padding-bottom: 2.5rem;
    background-size: 13.5rem;
    border: none;
}

/* MARK: contact footer  */

section.contact{
    display: grid;
    gap: 3rem;

    section{
        padding: 0;
    }

    .logo-contact{
        width: 183px;
        height: 161px;
    }

    h3{
        font-weight: 400;
    }

    h4{
        font-weight: 700;
        padding-top: 1rem;
    }

    h3, h4{
        font-family: inter, sans-serif;
        font-size: 1rem;
    }

    a:first-of-type{
        text-decoration: underline;
    }

    ul{
        display: flex;
        gap: 1rem;
        padding-top: 1rem;

        li{
            width: 40px;
            height: 40px;

            background-color: var(--secondary-background-color);
            border-radius: 50%;

            a{
                color: var(--secondary-text-color);
                padding: .5rem;
                display: flex;
            }
        }
    }

    form{
        input{
            appearance: none;
            border: none;
            border-bottom: 1px solid var(--primary-text-color);
            background: none;
            color: var(--primary-text-color);
        }
    }

    button{
        margin-top: 1rem;
    }

    @media(min-width:64rem){
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* MARK: footer footer  */
section.footer{
    background-color: var(--footer-background-color);
    display: grid;
    gap: 3rem;
    padding-top: 3rem;

    ul{
        display: flex;
        gap: 1rem;
    }

    ul:first-of-type{
        flex-direction: column;

        li{
            a:hover{
                text-decoration: underline;
            }  
        }

        @media(min-width: 64rem){
            flex-direction: row;
        }
    }

    ul:nth-of-type(2){
        width: 100%;
        align-items: center;
    }

    @media(min-width:64rem){
        grid-template-columns: 1fr 1fr;
    }
}