/* styles.css */

/* VARIABELEN KLEUREN*/
:root {
    --bg-color: #89987c; /* Vervang door de standaard achtergrondkleur */
    --hover-bg-color: #819065; /* Standaard hover achtergrondkleur */
    --hypertext-color: #000000; /* Standaard hypertextkleur */

    --rnr-bg-color: #66B9C9; /* Achtergrondkleur voor rock-n-roll elementen */
    --rnr-hover-bg-color: #5AAFC6; /* Hover achtergrondkleur voor rock-n-roll */

    --char-bg-color: #800020; 
    --char-hover-bg-color: #780018; 
}

/* Hypertext reference */
a {
    color: var(--hypertext-color);
    text-decoration: underline;
}

/* OPSOMMINGEN */
ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding-left: 20px; /* Pas deze waarde aan naar wens voor de gewenste inspringing */
}

p {
    margin-bottom: 0;
    margin-top: 0;
}

h1, h2 {
    margin-bottom: 0;
}

h3 {
    margin-top: 0;
}

/* FONTS TOEVOEGEN */
@font-face {
    font-family: 'AvignonNF'; 
    src: url('fonts/AvignonNF.otf') format('opentype'),          url('fonts/AvignonNF.ttf') format('truetype'); 
}
@font-face {
    font-family: 'MetroRetroNF'; 
    src: url('fonts/MetroRetroNF.otf') format('opentype'),          url('fonts/MetroRetroNF.ttf') format('truetype'); 
}

body {
    font-family: sans-serif;
    word-wrap: break-word;
    max-width: 800px;
    margin: 0px auto; /* Centreert de inhoud op grotere schermen */
    padding: 5px; /* 0 padding boven en onder, 5px padding links en rechts */
}

header img {
    width: 100%;
    max-width: 800px;
    display: block;
    margin: 5px auto;
}

.avignon {
    font-family: 'AvignonNF', sans-serif; /* class avignon */
font-size: 24px; 
    /* Voeg andere stijlen toe voor de specifieke tekst */
}

.rock-n-roll h1, 
.rock-n-roll h2 {
    font-family: 'MetroRetroNF', sans-serif; 
    font-weight: normal;
    /* Voeg hier andere stijlen toe die je voor h1 en h2 wilt toepassen */
}

/* EVENT CARDS */
/* Stijlen voor de container van de kaarten */
.event-card-container {
    margin-right: -15px; /* Compenseert de marge van de laatste kaart in elke rij */
}

/* Standaard stijlen voor 'event-card', voor schermen smaller dan 800px */
.event-card {
    width: calc(100% - 20px); /* Neemt de volledige breedte in */
    /* Andere stijlen blijven ongewijzigd */
}

.event-card {
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
}

.event-card h3 {
    color: var(--bg-color);
    margin-bottom: 5px;
}

.rock-n-roll .event-card h3 {
    color: var(--rnr-bg-color);
}
.charleston .event-card h3 {
    color: var(--char-bg-color);
}

.event-card p {
    margin: 5px 0;
}

/* Clearfix oplossing */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* VARIABELEN MENU OPMAAK */
:root {
    --items: 6; /* Definieer een variabele voor het aantal menu-items */
    --marg: 2px; /* Aantal pixels margin right */
}

nav ul {
    padding: 0;
    margin: 5px 0; /* 5px marge aan de boven- en onderkant */
    list-style-type: none;
    overflow: hidden; /* Zorgt ervoor dat de floated li's correct worden weergegeven */
}

nav li {
    float: left; /* Laat de li's naast elkaar zweven */
    width: calc((100% - ((var(--items) - 1) * var(--marg))) / var(--items)); /* Correcte breedteberekening */
    box-sizing: border-box; /* Zorgt ervoor dat padding en border inbegrepen zijn in de breedte */
    padding: 0; /* Verwijder extra padding indien nodig */
    margin-right: var(--marg); /* Margin ruimte tussen de knoppen */
}

nav li:last-child {
    margin-right: 0; /* Verwijdert de marge van de laatste knop */
}

nav a {
    display: block;
    padding: 5px 0; /* Verticale padding */
    background-color: var(--bg-color); /* Achtergrondkleur van de knop */
    color: white; /* Tekstkleur */
    text-decoration: none;
    border-radius: 5px;
    text-align: center; /* Centreert de tekst */
}

nav a:hover, nav a:focus {
    background-color: var(--hover-bg-color); /* Achtergrondkleur bij hover/focus */
}

/* Aangepaste stijlen voor het navigatiemenu */
.rock-n-roll nav a {
    background-color: var(--rnr-bg-color); /* Nieuwe achtergrondkleur */
}

.rock-n-roll nav a:hover, .speciale-pagina a:focus {
    background-color: var(--rnr-hover-bg-color);/* Kleur voor hover/focus op de speciale pagina */;
}

.charleston nav a {
    background-color: var(--char-bg-color); /* Nieuwe achtergrondkleur */
}

.charleston nav a:hover, .speciale-pagina a:focus {
    background-color: var(--char-hover-bg-color);/* Kleur voor hover/focus op de speciale pagina */;
}

/* TABELLEN */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* FORMULIER */
/* Voeg een specifieke class toe aan uw formulier voor isolatie */
.form-modern {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    max-width: 770px;
    margin: 20px auto;
    box-sizing: border-box;
}

.form-modern label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-modern input[type="text"],
.form-modern input[type="email"],
.form-modern input[type="tel"],
.form-modern select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-modern input[type="submit"] {
    background-color: var(--bg-color);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.form-modern input[type="submit"]:hover {
    background-color: var(--hover-bg-color);
}

/* MEDIA QUERIES */
/* Media query voor schermen die minimaal 800px breed zijn */
@media (min-width: 830px) {
    .event-card {
        width: 373px; /* Breedte ingesteld op 400px */
        float: left; /* Zorgt ervoor dat de kaarten naast elkaar zweven */
        margin-right: 5px; /* Optioneel: ruimte tussen de kaarten */
    }
}

/* Kleine Pagina */
@media (max-width: 610px) {
    nav li {
        width: calc((100% - 2 * var(--marg)) / 3); /* Breedte van elk item is 50% minus 3px ruimte bij schermen kleiner dan 450px */
        margin-bottom: 2px; /* Voegt wat verticale ruimte toe tussen de rijen */
    }

    nav li:nth-child(3), nav li:last-child {
        margin-right: 0; /* Verwijdert marge aan de rechterkant van de tweede en de laatste knop */
    }
}

/* Responsiviteit */
@media (max-width: 400px) {
    .form-modern {
        width: 100%;
        padding: 15px;
    }
}

/* VIDEO */
.center-video {
    display: flex;
    justify-content: center;
}

/* FOOTER */
footer {
    background-color: var(--bg-color);
    /* Andere stijlen voor de footer */
}

.social-icon {
    width: 24px;
    height: 24px;
    margin-left: 10px;
    padding-top: 4px;
}

.rock-n-roll footer {
    background-color: var(--rnr-bg-color);
}

.charleston footer {
    background-color: var(--char-bg-color);
}

footer {
    display: flex;
    gap: 10px; /* afstand tussen iconen */
}