/*==========================================================tijdelijk========================================================================*/
footer img {
    width: 300px;
}

/*==========================================================Overall==========================================================================*/
* {
    margin: 0;
    padding: 0;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
    /*Color light theme*/
    --color-darkblue: #0D3951;
    --color-lightblue: #6FB1A3;
    --color-creme: #D8C4AA;
    --color-black: #2A2A2A;
    --color-white: #FFFFFF;
    --color-transparant: #01010132;
    --color-transparant-checked:#ebdac4cb;

/*==========================================================Typography=======================================================================*/
    @font-face {
        font-family: 'Vremenagrotesk';
        src: url(fonts\vremenagrotesk-webfont.woff2) format('woff2');
    }

    
    /*font family*/
    --fontfamily-legend:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fontfamily-h1:'Vremenagrotesk', Tahoma, Geneva, Verdana, sans-serif;
    --fontfamily-h2:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fontfamily-h3:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fontfamily-h4:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fontfamily-p:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    
    /*font weight*/
    --fontweight-legend: 600;
    --fontweight-filterb: 400;
    --fontweight-h1:600;
    --fontweight-h2:600;
    --fontweight-h3:600;
    --fontweight-h4:200;

    /*font style*/
    --fontstyle-legend: italic;
    --fontstyle-h2: italic;

    /*font size*/
    --fontsize-tags: 1rem;
    --fontsize-button: 1rem;
    --fontsize-paragraph: 1rem;
    --fontsize-labels: 1.375rem;
    --fontsize-filterb: 1rem;
    --fontsize-legend: 1.2rem;
    --fontsize-h1: 2rem;
    --fontsize-h2: 1rem;
    --fontsize-h3: 1.2rem;
    --fontsize-h4: 1.3rem;

    @media (min-width: 320) {
        
    }

    @media (min-width: 600) {
        
    }

    /*Radius*/
    --radius-card: 2rem;
    --radius-tg: 0.63rem;
    --radius-lb: 0.63rem;
    --radius-cardimg: 35px 35px 0px 0px;
    --radius-cardtext: 0px 0px 35px 35px;
    --radius-button: 0.5rem;

    /*Shadows*/
    --shadow-card: 0px 20px 26px rgba(54, 53, 53, 0.16);
    --shadow-buttom: 0px 5px 10px rgba(54, 53, 53, 0.16);
    --shadow-inner: 30px 30px 30px rgba(54. 53, 53, 0.75) ;
    --shadow-filter: 0px 20px 26px rgba(54, 53, 53, 0.16);
    
    /*Borders*/
    --border-tg: solid var(--color-black) 0.3rem;
    --border-label: solid var(--color-black) 0.4rem;
    --border-button: solid var(--color-black) 0.6rem;

    
    /*Proberen*/
    --logo-height: 3rem;
    --padding: 0.1rem 0.5rem 0.1rem 0.5rem;

    /*Color dark theme (maakt dit echt zo veel verschil / vorige keer niet zichtbaar in darktheme maar lost dit het op / even onderaan vanwegen kleurtje)*/
    @media (prefers-color-scheme: dark){
        --color-darkblue: #1E4D68;
        --color-lightblue: #A0D8CD;
        --color-creme: #F3E4D2;
        --color-black: #0A0A0A;
        --color-white: #F5F5F5;
    }
}
/*==========================================================Cursor=========================================================================*/
/*==========================================================Header=========================================================================*/

header{
    display: flex;
    justify-content: center;
    top: 1rem;
    position: relative;

    img{
        height: var(--logo-height);
    }
    nav{
       ul{
        background-color: var(--color-white);
        width: 20vw;
        list-style: none;
            li{ 
                &:first-child{
                    position: absolute;
                    z-index: 5;
                    top: -0.5rem;
                    left: 0.5rem;
                }
                &:nth-last-child(-n+3) {
                    position: absolute;
                    rotate: -90deg;
                    display: none;
                    left: 0;
                }

                a{
                text-decoration: none;  
                color: var(--color-black);
                
                }
            }
        } 
    }
     
    &::before, /*😎 & nesting https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector*/
    &::after{
        content: "";
        flex: 1; /*https://developer.mozilla.org/en-US/docs/Web/CSS/flex*/
        height: 0.09rem;
        background-color: var(--color-black);
        margin-top: calc(var(--logo-height)/2);
    }

    @media (min-width:600px) {
      /*nieuwe styling voor header*/  
    }
}
/*==========================================================Hero===========================================================================*/
.hero-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 3rem;
    h1{
        margin-bottom: 1rem;
        font-size: var(--fontsize-h1);
        font-family: var(--fontfamily-h1);
        font-weight: var(--fontweight-h1);
    }
    p{
        font-size: var(--fontsize-paragraph);
        font-family: var(--fontfamily-p);
        @media (min-width:600px) {
            max-width: 450px;
            margin: auto;
        }
    }
    
}
/*==========================================================Filter=========================================================================*/
.filter-section{ 
    width: 100%;
    max-width: 87vw;
    box-shadow: var(--shadow-filter);
    margin: auto;
    padding: 1rem;
    border-radius: 10px 10px 0px 0px;
    text-align: right;

    h2{
        font-size: var(--fontsize-h2);
        font-weight: var(--fontweight-h2);
        font-style: var(--fontstyle-h2);
        border: solid black 0.1rem;
        border-radius: 10px;
        width: fit-content;
        padding: var(--padding);
    }

    button{
        font-size: var(--fontsize-filterb);
        font-weight: var(--fontweight-filterb);
        background: none;
        border: none;
    }

    hr{
        height: 0.02rem;
        background-color: var(--color-black);
    }

    fieldset{
        text-align: left;
        all: unset;
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem;
        legend{
            font-family: var(--fontfamily-legend);
            font-size: var(--fontsize-legend);
            font-weight: var(--fontweight-legend);
            font-style: var(--fontstyle-legend);
            margin-bottom: 0.2rem;
            margin-top: 0.5rem;
        }
        input{ /*https://developer.mozilla.org/en-US/docs/Web/CSS/:checked*/
            display: none;
            &:checked + label{
                background-color: var(--color-transparant-checked);
                &::after{
                    content: "⨂";
                    opacity: 1;
                    background-color: white;
                    height: 0.7rem;
                    width: 0.7rem;
                    border-radius: 50%;
                    margin-left: 0.2rem;
                    margin-top: 0.25rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
        label{
            border: 0.1rem solid black;
            border-radius: var(--radius-tg);
            padding: var(--padding);
            display: flex;

            &::after{
                content:"";
                opacity: 0;
                
            }

            &[for="concept"]::before{content: "💡";}
            &[for="experiment"]::before{content: "🧪";}
            &[for="methode"]::before{content: "📐";}
            &[for="transparency"]::before{content: "👁️";}
            &[for="actionable"]::before{content: "✋";}
            &[for="legible"]::before{content: "📄";}
            &[for="relatable"]::before{content: "❤️";}
            &[for="contestable"]::before{content: "⚖️";}
            &[for="evaluating"]::before{content: "🔍";}
            &[for="deployment"]::before{content: "🚀";}
            &[for="articulating"]::before{content: "💬";}
            &[for="making"]::before{content: "🛠️";}
        }
        
    }
}
/*==========================================================Main===========================================================================*/

.concept-section{
    display: grid;
    margin-top: 2rem;
    gap: 1.5rem;
    padding: 0 1rem;

    @media (min-width:400px) {
        
    }

    article{
        border: 35px;
        position: relative;
        width: 100%;
        img{
            border-radius: var(--radius-cardimg);
            width: 100%;
        }

        ul{
            position: absolute;
            top: 1rem;
            left: 1rem;
            z-index: 10;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            opacity: 0;

            

            li{
                color: var(--color-white);
                background-color: var(--color-transparant);
                border: solid black 0.1rem;
                border-radius: var(--radius-lb);
                backdrop-filter: blur(0.2rem);

                display: flex;
                padding: var(--padding);

                &.evaluating::before{content:"🔍";}
                &.transparency::before{content:"👁️";}
                &.concept::before{content:"💡";}
                &.deployment::before{content:"🚀";}
                &.actionable::before{content:"✋";}
                &.legible::before{content:"📄";}
                &.exeriment::before{content:"🧪";}
                &.articulating::before{content:"💬";}
                &.relatable::before{content:"❤️";}
                &.methode::before{content:"📐";}
                &.making::before{content:"🛠️";}
                &.contestable::before{content:"⚖️";}
            }
            
            @media (min-width:600px) {
                opacity:1;
            }
        }

        .article-text{
            border-radius: var(--radius-cardtext);
            box-shadow: var(--shadow-card);
            padding: 1rem;
            h3{
                font-family: var(--fontfamily-h3);
                font-size: var(--fontsize-h3);
            }
            p{
                font-family: var(--fontfamily-p);
                font-size: var(--fontsize-paragraph);
                margin-top: 0.7rem;
                margin-bottom: 1rem;
            }
            a{
                padding: var(--padding);
                border-radius: var(--radius-button);
                box-shadow: var(--shadow-buttom);
                text-decoration: none;
                font-family: var(--fontfamily-p);
                font-size: var(--fontsize-button);
            }
            
            a:first-of-type{
                background-color: var(--color-black);
                color: var(--color-white);
            }
            a:last-of-type{
                background-color: var(--color-white);
                color: var(--color-black);
            } 
        }
        
    }
    button{
        border-radius: var(--radius-button);
        font-size: var(--fontsize-button);
        font-weight: var(--fontweight-filterb);
        box-shadow: var(--shadow-buttom);
        background: none;
        border: none;
        width: 12rem;
        margin: auto;
    }
}

/*==========================================================Footer=========================================================================*/
footer{
    margin-top: 2rem;
    display: grid;
    gap: 2rem;
   
    hr{
        width: 100%;
        max-width: 80vw; 
        margin: auto;
        background-color: var(--color-black);
        
    } 

    h4{
        font-family: var(--fontfamily-h4);
    }

    .community-section{
        form{
            label{}
            input:first-of-type{}
            input:last-of-type{}
        }
    }
    .link-section{
        nav{
        ul{li{a{}}}
        }
    }

    .contact-section{
        address{
        a{}
        }
    }

    .lower-footer{
        ul{}
        li{
            a{
                img{}
            }
        }
    }
}

/*==========================================================Comunity section===============================================================*/

/*==========================================================Link section===================================================================*/

/*==========================================================Contact section================================================================*/

/*==========================================================Lower footer Partners==========================================================*/