@charset "UTF-8";

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    /* width: 100%; */
}

/* //// */
/* CUSTOM PROPERTIES */
/* //// */

:root {
    --background-color:#02253b;
    --background-image: url("../images/background-image1.webp");

    --header-li-background-color: #012033;
    --header-li-text-color: white;

    --header-search-background-color: #02253B;
    --header-search-border-color: #346486;

    --header-line-under-a-color: white;

    --iconFilter: brightness(0) invert(1);

    --header-label-hover: #4e89aa;

    --gradient-begin-color: #01253b;
    --gradient-end-color: #013F50;

    --form-background-color: #0E4157;

    --text-color: white;
    --header-two-color: #4e89aa;

    --li-background-color: #346486;
    --li-background-color-active: #0B304C;
    --li-color-border: none;

    --button-border: white;
    --button-border-active: #02253B;
    --class-button-background-color-state1: #26B5DA;
    --class-button-background-color-state2: #02253B;
    --text-color-button: white;

    --input-background: #386072;
    --input-button: #02253B;
    --caret-color: white;
    --focus-color: #26B5DA;
}

:root[data-color-mode="christmas-mode"] { 
    --class-button-background-color-state1: #930000;
    --class-button-background-color-state2: #630101;
    --text-color-button: white;

    --focus-color: #930000;
}


:root[data-color-mode="light-mode"] {
    --background-color:#9db8c8;
    --background-image: url("../images/background-image1_light.webp");

    --header-li-background-color: #9db8c8;
    --header-li-text-color: #02253b;

    --header-search-background-color: #9db8c8;
    --header-search-border-color: #346486;

    --header-line-under-a-color: #02253b;

    --iconFilter: brightness(0);

    --header-label-hover: #b9cdd8;

    --gradient-begin-color: #9db8c8;
    --gradient-end-color: rgb(218, 229, 236);

    --form-background-color: #b9cdd8;

    --text-color: #02253b;
    --header-two-color: #073049;

    --li-background-color: #b9cdd8;
    --li-background-color-active: #c6e0ed;
    --li-color-text: #012033;
    /* --li-color-border: #02253B; */

    --button-border: #012033;
    --button-border-active: #02253B;
    --class-button-background-color-state1: #26B5DA;
    --class-button-background-color-state2: #02253B;
    --text-color-button: #02253b;

    --input-background: #c6e0ed;
    --input-button: #9db8c8;
    --caret-color: #02253b;
    --focus-color: #26B5DA;
}









html {
    width: 100%;
}

html.inBeeld,
html.inBeeld body{
    overflow: hidden;
}

body {
    width: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Avenir, Arial, Helvetica, sans-serif;
}






/* //// */
/* ALLES QUA HEADERS EN PARAGRAPHS */
/* //// */

h1, h2, h3 {
    text-align: center;
}

h1, h2, header p {
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

h1, h3 {
    font-size: 2em;
}

h2{
    color: var(--header-two-color);
    font-size: 1.2em;
    margin-bottom: 1em;
}

h3 {
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

p {
    /* font-size: 1.em; */
    margin-left: auto;
    margin-right: auto;
}

form {
    font-family: Avenir, Arial, Helvetica, sans-serif;
}

button, a {
    cursor:pointer;
}


img {
    width: 100%;
}




input:focus {
    outline: none !important;
}

/* :focus {
    border: none;
} */

:focus-visible {
    border: 2px solid var(--class-button-background-color-state1);
}

::placeholder {
    color: var(--text-color);
}


/* //// */
/* HEADER */
/* //// */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1em;
}

header > a:first-of-type {
    display: flex;
    align-items: center;
    width: 10em;
    margin-right: auto;
}

header > button {
    border: none;
}

header button .bar {
    width: 1.5em;
}

header button:first-of-type img{
    filter: var(--iconFilter);
    padding: .6em;
}

header > button:nth-of-type(2) .bar:first-of-type {
    margin-bottom: 1em;
}

header > button:nth-of-type(2) .bar:last-of-type {
    margin-top: 1em;
}

/* //// */
/* FORM IN HEADER */
/* //// */


header form {
    background-color: var(--header-search-background-color);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;

    position: absolute;
    /* inset: 0; */
    z-index: 10;

    transform: translateY(-20em);

    overflow: auto;

    left: 0;
    top: 0;
    right: 0;

    padding: 5em 1em 4em 1em;

    transition: 1s ease-in-out;
}

header form input[type="search"] {
    font-size: 2em;
    font-weight: bold;

    color: var(--text-color);
    background-color: var(--header-search-background-color);

    position: absolute;

    width: 90%;
    padding: 1em;

    border: none;
    border-bottom: .1em solid var(--header-search-border-color);
    /* padding-bottom: 1em; */
    
}

/* cancelt het kruisje om de tekst weg te halen */
header form input[type = 'search']::-webkit-search-cancel-button{
    -webkit-appearance: none;	 
}

header form button {
    border: none;
    left: calc(90% - 1.5em);
}


header form.inBeeld {
    transform: translateY(0);


    /* transition: 1s ease-in-out; */
}



/* //// */
/* NAV IN HEADER */
/* //// */

header nav {
    display:block;
    position: fixed;
    inset:0;
    z-index: 10;

    background-color: var(--header-li-background-color);
    color: var(--header-li-text-color);

    font-size: 2.2em;

    padding: 1em;

    translate: 100% 0;

    transition: 1s ease-in-out;

    overflow: auto;
}

header nav.inBeeld {
    translate: 0 0;
    /* transition: 1s ease-in-out; */
}

header nav ul {
    list-style: none;

    padding-bottom: 0.2em;
    /* font-size: 2.5em; */
}

header nav > ul:first-of-type {
    display: flex;
    flex-direction: column;
}

header nav li {
    padding-bottom: .3em;
}


header nav ul:first-of-type li a{
    position: relative;
    overflow: hidden;
    display:inline-block;
}

/* lijn onder de li's in nav als je hovert */
header nav ul:first-of-type li a::after {
    background-color: var(--header-line-under-a-color);
    content: "";
    width: 0;
    height: 2px;
    left: 0;
    bottom: 0;
    transition: width 0.35s ease 0s;
    position: absolute;
}
  
header nav ul:first-of-type li a:hover::after {
    width: 100%;
}

/* header nav ul a {
    color: var(--header-li-text-color);
} */

header nav a {
    text-decoration: none;
    color: var(--header-li-text-color);
}

header nav button {
    position: absolute;
    left: calc(90% - 1.5em);
    top: calc(7% - 1.5em);

    border: none;
}

header nav button .bar, header form button .bar {
    rotate: 45deg;
}

header nav button .bar:first-of-type, header form button .bar:first-of-type {
    rotate: -45deg;
}

header nav p {
    font-size: .5em;
    color: var(--header-two-color);

    margin-top: 1em;
}


/* de lijst onder programs */
header nav ul li:nth-of-type(2) > ul {
    max-height:0;
    width:100%;
	transition:1s;
	overflow:hidden; 

    display: flex;
    flex-direction: column;

    font-size: .5em;
} 

header nav ul li:nth-of-type(2) > ul.open {
    max-height: 10em;
}


/* tweede lijst met socials in nav */
header nav > ul:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}

/* header nav > ul:nth-of-type(2) li {
    display: inline-block;
} */

header nav > ul:nth-of-type(2) img {
    /* Maakt alle foto's eerst zwart en daarna wit */
    filter: var(--iconFilter);
    

    width: .6em;
    height: .6em;

    margin-right: .5em;
}





/* INPUTS */
header nav fieldset {
    margin:0;
    padding:0;
    
    display:flex;
    flex-wrap:wrap;
    gap:.5em;
    
    border:none;
    padding-top: 1em;

    overflow-x: visible;

    /* background-color: yellowgreen; */
  }
  
  header nav legend,
  header nav input {
    /* radio buttons en legend zijn er wel, */
    /* maar links ver buiten beeld :-) */
    position:absolute;
    left:-9999em;
    
    
  }
  
  /* LABEL */
header nav label {
    /* het label is de knop die je ziet */
    /* en waar je op kunt klikken */
    /* met 'for' zijn ze gekoppeld aan de radio buttons */
    /* width:2em; */
    height:2em;
    padding:.5em;
    
    display:grid;
    place-content:center;
    place-items:center;
    
    /* jouw kleurtjes en styling */
    gap:.25em;
    
    border-radius:.75rem;
    
    line-height:1em;
    font-size: .8em;

    border: .1em solid var(--button-border);

    transition: .5s;

}

header nav label:hover, header nav label:active {
    scale: 1.1;

    background-color: var(--header-label-hover);
}


header nav input:checked + label {
    background-color: var(--header-label-hover);
}















/* //// */
/* MAIN */
/* //// */

main section {
    padding-top: 4em;
    padding-bottom: 1em;
}

main section:first-of-type {
    text-align: center;

    /* background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); */
}

main section > p {
    width: 85%;
    line-height: 2em;
    padding-bottom: 3em;
}

main > section:first-of-type {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
}





.button {
    display: block;
    width:fit-content;
    margin-left: auto;
    margin-right: auto;

    border-radius: 5em;

    color: var(--text-color-button);
    border: 1px solid var(--class-button-background-color-state1);
    
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .8em;

    padding: .8em 1.2em .8em 1.2em;
    margin-top: 1em;
}

.button:hover, .button:active {
    background-color: var(--class-button-background-color-state1);
    transition: .5s;

    scale: 1.1;
}

.button:focus-visible {
    border: 4px solid var(--focus-color);
}

/* //// */
/* VIDEO OF FOTO'S STYLING */
/* //// */

button {
    background-color: transparent;
    border: 2px solid var(--button-border);
    border-radius: 50%;

    width: 3em;
    /* height: 3em; */

    display: inline-block;

    aspect-ratio: 1/1;

    text-align: center;
    text-decoration: none;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    /* cursor:pointer; */
}

main button:hover,  main button:active{
    border: 2px solid var(--button-border-active);
}

main button:hover .bar, main button:active .bar {
    background-color: var(--button-border-active)
}

.bar {
    position: absolute;
    width: 1em;
    height: .2em;

    background-color: var(--button-border);
}

main button .bar:first-of-type {
    rotate: 90deg;
}






iframe {
    width: 100%; 
    height: 20em;
    border: none;

    object-fit:cover;
}



/* //// */
/* FAQ */
/* //// */

.faq {
    width: 95%;
    margin-left: auto;  
    margin-right: auto;  
    list-style: none;
}

.faq li {
    background-color: var(--li-background-color);

    padding: 2em;
    margin-bottom: 2em;

    border-radius: 2em;
    border: 1px solid var(--li-color-border);

    display:flex;
	flex-wrap:wrap;
	
	transition:1s;
	
	overflow:hidden;

    position: relative;
}

.faq li.open {
    background-color:var(--li-background-color-active);
}

.faq h3 {
    font-size: 1.3em;
    font-weight: normal;
    text-align: left;
    padding-right: 3em;
    padding-left: 0;
}

.faq li div {
    max-height:0;
	width:100%;
	transition:1s;
	overflow:hidden;
}

.faq li.open div {
    max-height: 110em;
    color:var(--li-color-text);
}

.faq button {
    position: absolute;
    left: calc(90% - 1.5em);

}

/* Expres de kleur niet verandert als li open gaat naar donkerblauw, omdat het anders niet meer te lezen is */

.faq li.open button .bar:first-of-type {
    opacity: 0;
    transition: .5s;
}




/* //// */
/* LAATSTE SECTION */
/* //// */

main > section:last-of-type {
    background-color: var(--form-background-color);
    padding: 1em;

    text-align: center;
}

main > section:last-of-type h2 {
    color: var(--text-color);
    letter-spacing: normal;
    font-size: 2em;
    text-transform:inherit;

}

/* form {
    display: flex;
    flex-wrap:nowrap;
    justify-content: center;
} */

main > section:last-of-type form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

main > section:last-of-type input {
    border-radius: 5em;
    border: none;
    background-color: var(--input-background);
    color: var(--text-color);

    padding: .8em;
    margin: .5em;

    caret-color: var(--caret-color);
}

main > section:last-of-type input:first-of-type {
    width: 30%;
}

main > section:last-of-type input:nth-of-type(2){
    width: 60%;
}

main > section:last-of-type input:nth-of-type(3){
    width: 95%;
}

main > section:last-of-type input[type=submit] {
    display: block;
    width: 20em;
    margin: 1em auto 1em auto;
    padding: .8em;

    background-color: var(--input-button);

    cursor:pointer;
}

main > section:last-of-type input[type=submit]:hover {
    transition: .3s;
    scale: 1.1;
}




/* //// */
/* FOOTER */
/* //// */

footer {
    background-image: linear-gradient(var(--gradient-begin-color), var(--gradient-end-color) );
}

footer img {
    display:block;
    width: 30%;

    margin: 8em auto 1em auto;
}

footer p {
    text-align: center;
    font-size: .8em;

    padding: 5em;
}



@media (min-width:400px) {
    .faq {
        width: 85%;
    }
}