/* BASIS INSTELLINGEN */
* {
    box-sizing: border-box; /* makkelijk rekenen */
}

body {
    font-family: 'Segoe UI'; /* leuk lettertype */
    margin: 0; /* geen standaard marge */
    padding: 20px; /* ruimte rond alles */
    background-image: url("afbeeldingen/achtergrond.jpg"); /* plaatje achtergrond */
    background-size: cover; /* vult scherm */
    background-position: center; /* in midden */
    color: #1b1b1b; /* tekst donkergrijs */
}

/* WITTE CONTENT BOX */
.container {
    max-width: 900px; /* niet te breed */
    margin: 30px auto; /* in midden + beetje ruimte */
    background-color: white; /* wit vak */
    padding: 30px; /* binnenruimte */
    border-radius: 16px; /* ronde hoeken */
    box-shadow: 0 10px 25px rgba(0,0,0,0.25); /* schaduwtje */
}

/* NAVBAR */
.navbar {
    display: flex; /* alles naast elkaar */
    justify-content: center; /* in midden */
    gap: 12px; /* beetje ruimte tussen */
    background-color: #0d3b66; /* donkerblauw */
    padding: 12px; /* binnenruimte */
    border-radius: 16px; /* ronde hoeken */
}

.navbar a {
    color: white; /* tekst wit */
    text-decoration: none; /* geen streep */
    padding: 12px 22px; /* binnenruimte */
    border-radius: 12px; /* ronde hoeken */
    font-weight: bold; /* vet */
    transition: 0.3s; /* hover soepel */
}

.navbar a:hover {
    background-color: #bdd7ee; /* lichtblauw bij hover */
    color: black; /* tekst zwart */
    transform: translateY(-2px); /* beetje omhoog */
}

/* KOPPEN EN TEKST */
h1 {
    color: #0d3b66; /* blauwe hoofdtitel */
    text-align: center; /* in midden */
    margin-bottom: 10px; /* beetje ruimte onder */
}

h2 {
    color: #0d3b66; /* blauwe subtitel */
    margin-top: 25px; /* beetje ruimte boven */
}

p {
    background-color: #f5f5f5; /* licht vakje */
    padding: 14px; /* binnenruimte */
    border-radius: 10px; /* ronde hoeken */
    margin: 12px 0; /* beetje ruimte */
    line-height: 1.6; /* niet te dicht op elkaar */
}

/* FORMULIER */
form {
    margin-top: 25px; /* beetje ruimte boven */
    padding: 20px; /* binnenruimte */
    background-color: #f9f9f9; /* licht vak */
    border-radius: 14px; /* ronde hoeken */
}

label {
    font-weight: bold; /* vetgedrukt */
    display: block; /* boven input */
    margin-top: 15px; /* beetje ruimte */
}

input,
textarea,
select {
    width: 100%; /* hele breedte */
    padding: 12px; /* binnenruimte */
    margin-top: 6px; /* beetje ruimte boven */
    border-radius: 10px; /* ronde hoeken */
    border: 1px solid #ccc; /* randje grijs */
    font-size: 14px; /* tekst grootte */
    transition: 0.2s; /* hover/focus effect */
}

input:focus,
textarea:focus,
select:focus {
    outline: none; /* geen blauwe rand */
    border-color: #0d3b66; /* blauw bij focus */
    box-shadow: 0 0 6px rgba(13,59,102,0.3); /* schaduwtje bij focus */
}

textarea {
    min-height: 120px; /* groter vakje */
    resize: vertical; /* alleen omhoog/omlaag */
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 6px; /* beetje ruimte naast knop */
}

/* LOGO LIJST */
ol {
    display: flex; /* naast elkaar */
    justify-content: center; /* in midden */
    gap: 25px; /* beetje ruimte */
    padding: 0; /* geen padding */
}

ol li {
    list-style: none; /* geen nummers of bullets */
}

/* LOGO'S VIERKANT */
.logo-link img {
    width: 100px;  /* breedte */
    height: 100px; /* hoogte */
    object-fit: cover; /* past netjes */
    filter: grayscale(100%); /* zwart-wit */
    transition: 0.3s; /* hover soepel */
    border-radius: 12px; /* ronde hoeken */
}

.logo-link img:hover {
    filter: grayscale(0%); /* kleur terug */
    transform: scale(1.15); /* iets groter */
}

/* KNOPPEN */
button {
    margin-top: 20px; /* beetje ruimte boven */
    width: 100%; /* volle breedte */
    padding: 14px; /* binnenruimte */
    border: none; /* geen rand */
    border-radius: 12px; /* ronde hoeken */
    background: linear-gradient(135deg, #0d3b66, #145da0); /* blauw gradient */
    color: white; /* tekst wit */
    font-weight: bold; /* vet */
    font-size: 15px; /* grootte */
    cursor: pointer; /* cursor verandert */
    transition: 0.3s; /* hover soepel */
}

button:hover {
    transform: translateY(-2px); /* beetje omhoog */
    background: linear-gradient(135deg, #145da0, #0d3b66); /* andere kleur */
}

button:active {
    transform: scale(0.97); /* ingedrukt effect */
}

/* LINKS */
a {
    color: #145da0; /* blauwe tekst */
    font-weight: bold; /* vet */
    text-decoration: none; /* geen streep */
    transition: 0.2s; /* hover soepel */
}

a:hover {
    text-decoration: underline; /* streep bij hover */
}

.link-button {
    display: inline-block; /* als knop */
    margin-top: 15px; /* beetje ruimte */
    padding: 12px 20px; /* binnenruimte */
    background-color: #0d3b66; /* donkerblauw */
    color: white; /* tekst wit */
    border-radius: 10px; /* ronde hoeken */
    transition: 0.3s; /* hover soepel */
}

.link-button:hover {
    background-color: #bdd7ee; /* lichtblauw */
    color: black; /* tekst zwart */
    transform: translateY(-2px); /* beetje omhoog */
}

/* LIJSTJES FILMS */
.film-lijst {
    background-color: #f5f5f5; /* zelfde als p */
    padding: 15px 25px; /* binnenruimte */
    border-radius: 10px; /* ronde hoeken */
    margin: 15px auto; /* beetje ruimte + gecentreerd */
    max-width: 800px; /* niet te breed */
    text-align: center; /* gecentreerd */
}

.film-lijst li {
    margin: 8px 0; /* beetje ruimte tussen items */
}

/* FOOTER */
body {
    min-height: 100vh; /* altijd schermhoogte */
    display: flex; /* alles onder elkaar */
    flex-direction: column; /* verticaal */
}

footer {
  text-align: center; /* in midden */
  color: #1b1b1b; /* tekst donker */
  margin-top: 20px; /* beetje ruimte boven */
}