/* Algemene instellingen (mobile-first) */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    height: 100vh;
    text-align: center; /* Zorgt ervoor dat de inhoud gecentreerd is */
    padding-top: 50px; /* Zorgt voor ruimte bovenaan */
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Logo */
.logo {
    position: absolute; /* Zorg dat het logo in het midden staat */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9; /* Logo staat boven andere elementen */
}

.logo-img {
    height: 40px; /* Pas de grootte van het logo aan */
    width: auto;
}

/* Header styling */
.header {
    background-color: #FFB400;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 20px;
    z-index: 1000;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.titelHome {
    padding-top: 80px;
}

/* Hamburger menu (zichtbaar op mobiel) */
.hamburger-menu {
    display: block;
    z-index: 10;
}

/* Hamburger icoon */
.menu-icon {
    font-size: 30px;
    background: none;
    border: none;
    color: black;
    cursor: pointer;
    z-index: 11;
}

/* Navigatiemenu (standaard verborgen op mobiel) */
.nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    background-color: #FFB400;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 9;
    padding-top: 60px;
}

/* Toon het menu als actief */
.nav-menu.active {
    display: block;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu ul li {
    padding: 15px;
    text-align: left; /* Links uitlijnen */
    padding-left: 20px; /* Extra ruimte voor visueel effect */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Duidelijke scheiding tussen items */
}

.nav-menu ul li a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

.nav-menu ul li a:hover {
    background-color: #FF6F00;
    padding-left: 30px; /* Kleine beweging bij hover */
}

/* Titel bovenaan - aantrekkelijker en leesbaarder */
h1 {
    font-family: 'Poppins', sans-serif;
    color: #FFB400;
    font-size: 35px;
    font-weight: 600;
    margin-top: 30px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 2px;
}

/* Tekst onder de titel (uitleg) */
p {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 30px;
    text-align: center;
}

/* Interesses grid (mobiel-first) */
.interest-grid {
    display: grid;
    grid-template-columns: 1fr; /* Begin met 1 kolom voor mobiel */
    gap: 20px; /* Ruimte tussen de items */
    justify-items: center;
    margin-bottom: 30px;
}

/* Styling van elke interesse */
.interest-item {
    text-align: center;
}

label {
    display: block;
    font-size: 16px;
    margin: 5px 0;
}

input[type="checkbox"] {
    margin-right: 10px;
}

/* Tekstballon styling voor Sammy’s pagina */
.text-ballon {
    display: inline-block;
    background-color: #FFFBF0;
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    position: relative;
    max-width: 320px;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Pijlpunt van de tekstballon */
.text-ballon::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #FFFBF0 transparent transparent transparent;
}

/* Sammy afbeelding styling */
.sammy-image {
    max-width: 90%; /* Zorg ervoor dat de afbeelding goed schaalt op mobiel */
    height: auto;
    margin: 30px 0;
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
    animation: bounceIn 2s ease-out; /* Animatie toevoegen */
}

/* Animatie voor Sammy-afbeelding */
@keyframes bounceIn {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    60% {
        transform: translateY(30px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
    }
}

/* Knop styling voor de Sammy pagina */
.button-container .button {
    background-color: #FFB400;
    border-radius: 30px;
    color: black;
    font-size: 20px;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    margin-top: 30px;
}

/* Specifieke styling voor knoppen in de container */
.button-container .button {
    display: inline-block;
    width: auto; /* Laat de knoppen hun natuurlijke breedte gebruiken */
    margin: 10px; /* Ruimte tussen de knoppen */
}


/* Knoppencontainer voor opslaan en annuleren */
.button-container {
    display: block; /* Zorgt ervoor dat de knoppen in een blok worden geplaatst */
    text-align: center; /* Centreert de knoppen */
    margin-top: 20px; /* Voeg wat ruimte toe boven de knoppen */
}

/* Hover-effect voor de knop */
.button:hover {
    background-color: #FF6F00;
}


/* Algemene knoppenstijl voor alle knoppen */
.button, button {
    background-color: #FFB400; /* Gele achtergrondkleur */
    border-radius: 30px;
    color: black;
    font-size: 20px;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

/* Hover-effect voor alle knoppen (overrulen van blauwe hoverkleur) */
.button:hover, button:hover {
    background-color: #FF6F00; /* Donkerder geel bij hover */
}

/* Voor de uitgeschakelde knop (disabled) */
.button:disabled {
    background-color: #FFB400;
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none; /* Zorgt ervoor dat de knop niet klikbaar is */
}



/* Styling voor het aantal geselecteerde interesses */
#selected-count {
    text-align: center;
    font-size: 18px;
    color: #333;
}


/* Zorg ervoor dat de knop op beide pagina's consistent is */
.button:hover:not(:disabled) {
    background-color: #FF6F00;
    color: black;
}

#gegevensBlok{
    display: block;
}


/* Algemene stijl voor het formulier */
form {
    display: flex;
    justify-self: center;
    flex-direction: column;
    width: 100%;
    max-width: 90vw; /* Behoud maximale breedte */
    padding: 20px; /* Binnenruimte rondom inhoud */
    background-color: #f9f9f9; /* Zachte achtergrondkleur */
    border-radius: 10px; /* Rondhoeken voor een moderne uitstraling */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
    text-align: left; /* Linkeruitlijning van tekst in het formulier */
}

/* Zorg dat elk invoerveld onder het label komt */
.input-group label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    width:200px;
    text-align: left;
}

.input-group input,
.input-group select {
    width: 100%; /* Laat het veld de volledige breedte gebruiken */
    font-size: 16px;
    border: 1px solid #ccc; /* Rand rond invoerveld */
    border-radius: 5px; /* Maak hoeken afgerond */
}

/* Voeg wat ruimte tussen de vragen toe */
.input-group {
    margin-bottom: 20px; /* Ruimte tussen invoergroepen */
}


#andersBalkje input {
    max-width: 45%;
}

.interest-item {
    width: 40%;
    text-align: left;
    
}
#andersBalkje {
    display: flex;
    width: 84%;
    text-align: center;
    
}

.interest-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

/* Mobile-first styling */
.main-links {
  display: block; /* Default: één kolom per rij */
  padding-top: 4rem;
  margin-bottom: 4rem;
}

.main-links .columns img {
  width: 100%; /* Zorg dat de afbeelding de kolombreedte volgt */
  height: auto;
  border: 5px solid #f0f0f0; /* Een mooie rand rond de afbeelding */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Een subtiel 3D-effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animatie bij hover */
  border-radius: 10px; /* Afgeronde hoeken */
}

/* Zorg dat de afbeelding en titel niet worden verplaatst bij hover */
.main-links .columns {
  position: relative; /* Belangrijk voor de absolute positionering van de titel */
  overflow: hidden; /* Zorgt ervoor dat inhoud binnen de kolom blijft */
}

.main-links img {
  width: 100%; /* Zorg dat de afbeeldingen responsief zijn */
  height: auto;
}

/* Titel-box styling */
.main-links .title-box {
  position: absolute; /* Plaatst de titel binnen de afbeelding */
  bottom: 10%; /* Plaatst de titel dichter bij de onderkant van de afbeelding */
  left: 50%;
  transform: translateX(-50%); /* Horizontaal centreren */
  background: rgba(255, 255, 255, 0.8); /* Subtiele achtergrond voor de tekst */
  padding: 0.5rem 1rem;
  border-radius: 5px; /* Optioneel: afgeronde hoeken */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtiele schaduw om de titel */
  text-align: center;
  z-index: 2; /* Zorg ervoor dat de titel bovenop de afbeelding staat */
}

.main-links .title-box-title {
  margin-bottom: 0;
}

/* Hover-effect blijft alleen op de afbeelding */
.main-links .title-box:hover {
  transform: translateX(-50%); /* De titel blijft op zijn plek */
  color: #227479; /* Optioneel: verander de tekstkleur bij hover */
}

.main-links img:hover {
  transform: scale(1.05); /* Vergroot de afbeelding iets bij hover */
  transition: transform 0.3s ease; /* Alleen de afbeelding beweegt */
}


/* Profielfoto */
.profile-photo {
    text-align: center;
    margin: 2rem 0;
}

.profile-photo img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid #ff9800;
    display: inline-block;
}

.profile-content {
    padding-top: 80px;
}

/* Interesses */
.interests {
    margin: 1.5rem 1rem;
    text-align: center;
}

.interests h2 {
    color: #ff9800;
    margin-bottom: 1rem;
}

.interest-tags {
    display: inline-block; /* Zet alles netjes in het midden */
    text-align: left;
}

.tag {
    display: inline-block;
    background-color: #ff9800;
    color: white;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* Volgende Afspraak */
.next-appointment {
    margin: 2rem 1rem;
    text-align: center;
}

.next-appointment h2 {
    color: #ff9800;
    margin-bottom: 1rem;
}

.appointment {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    background-color: white;
    width: 90%; /* 90% breedte op mobiel */
    max-width: 600px; /* Maximale breedte */
    margin: 0 auto; /* Centraal uitlijnen */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.appointment-date {
    display: inline-block;
    text-align: center;
    margin-right: 1rem;
}

.appointment-date .date {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ff9800;
}

.appointment-date .month {
    text-transform: uppercase;
    color: #555;
}

.appointment-details {
    display: inline-block;
    text-align: left;
}

.appointment-details p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

/* Aantal dagen bewogen */
.days-moved {
    margin: 2rem 1rem;
    text-align: center;
}

.days-moved h2 {
    color: #ff9800;
    margin-bottom: 1rem;
}

.streak-box {
    display: inline-block; /* Zet alles in een nette blok */
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1rem;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%; /* Past goed op mobiel */
    max-width: 600px; /* Maximale breedte */
    margin: 0 auto; /* Centraal uitlijnen */
}

.streak-info {
    display: inline-block; /* Streak-tekst */
    vertical-align: middle;
    text-align: center;
    margin-right: 1rem;
}

.streak-count {
    font-size: 2rem;
    font-weight: bold;
    color: #ff9800;
}

.streak-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}

.streak-icon {
    display: inline-block; /* Vuurtje naast tekst */
    vertical-align: middle;
}

.streak-icon img {
    width: 40px;
    height: 40px;
}


/* Algemene styling voor de footer */
.footer {
    background-color: #FFB400; /* Oranje achtergrond */
    color: black;
    padding: 2rem 1rem;
    font-family: Arial, sans-serif;
    text-align: center; /* Standaard centreren op mobiel */
}

.footer-content {
    display: inline-block; /* Zorg dat inhoud netjes onder elkaar komt op mobiel */
    width: 100%; /* Gebruik de volledige breedte */
}

.footer-section {
    margin-bottom: 1rem;
}

.footer a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.footer a:hover {
    text-decoration: underline;
}


/* Responsive design voor desktop-schermen */
@media (min-width: 512px) {

    /* Titel wordt groter op grotere schermen */
    h1 {
        font-size: 50px; /* Vergroot de tekst voor grotere schermen */
    }

    /* Interesses grid - 3 kolommen voor schermen breder dan 512px */
    .interest-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolommen op grotere schermen */
    }

    /* Sammy afbeelding kan iets groter op grotere schermen */
    .sammy-image {
        max-width: 80%;
    }

    /* Tekst wordt iets groter op grotere schermen */
    p {
        font-size: 18px;
    }

    /* Invoervelden worden breder (en niet meer 100% op grotere schermen) */
    .input-group input,
    .input-group select {
        width: 80%;
    }

    /* Sammy’s pagina styling voor desktop */
    .text-ballon {
        font-size: 18px;
        max-width: 500px;
    }

    /* Knop styling voor grotere schermen */
    .button-container .button {
        width: auto;
    }

    .button-container .button:hover {
        background-color: #FF6F00;
    }
    
.hamburger-menu {
        display: none; /* Verberg hamburger-menu op desktop */
    }

    .nav-menu {
        display: flex; /* Toon horizontale navigatie */
        position: static;
        background: none;
        box-shadow: none;
        width: auto;
        height: auto;
    }

    .nav-menu ul {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
    }

    .nav-menu ul li {
        padding: 0;
        border: none; /* Geen scheidingslijnen op desktop */
    }

    .nav-menu ul li a {
        font-size: 18px;
        padding: 0;
    }

    .nav-menu ul li a:hover {
        background: none;
        color: #333;
    }
    
      .logo {
        position: static; /* Logo links uitlijnen */
        transform: none;
        margin-right: auto; /* Zorg dat logo links blijft */
    }
    
    
   .main-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolommen naast elkaar */
    gap: 1rem; /* Ruimte tussen de kolommen */
  }
    
    
   .appointment, .streak-box {
        width: 60%; /* Gebruik 60% van de containerbreedte */
        margin: 0 auto 2rem; /* Centraal uitlijnen met marge onder */
    }

    .appointment-date, .streak-info {
        display: inline-block; /* Zorg ervoor dat tekst en icoon naast elkaar blijven */
        vertical-align: middle;
    }

    .appointment-details, .streak-icon {
        display: inline-block;
        vertical-align: middle;
        text-align: left; /* Tekst links uitlijnen */
    }

    .appointment-date .date {
        font-size: 2rem; /* Grotere datum voor desktop */
    }

    .streak-count {
        font-size: 2.5rem; /* Grotere tekst voor desktop */
    }

    .streak-icon img {
        width: 50px; /* Groter vuurtje op desktop */
        height: 50px;
    }
    
    
  .footer-content {
        text-align: left; /* Links uitlijnen op desktop */
    }

    .footer-section {
        display: inline-block; /* Secties naast elkaar op desktop */
        width: 30%; /* Elk neemt ongeveer 30% van de breedte */
        vertical-align: top; /* Uitlijnen aan de bovenkant */
        margin-bottom: 0; /* Geen extra ruimte onder secties op desktop */
    }

    .footer-left {
        text-align: left; /* Linkersectie uitgelijnd naar links */
    }

    .footer-center {
        text-align: center; /* Middensectie gecentreerd */
    }

    .footer-right {
        text-align: right; /* Rechtersectie uitgelijnd naar rechts */
    }