/* style.css */

/* Importeer de Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Stel Inter in als de standaard font voor de body */
body {
    font-family: 'Inter', sans-serif;
    background-color: #000000; /* Zwarte achtergrond */
    color: #ffffff; /* Witte tekst */
    overflow-x: hidden; /* Voorkom horizontale scrollbalken */
}

/* Algemene stijlen voor secties */
section {
    padding-top: 5rem; /* Ruimte boven elke sectie */
    padding-bottom: 5rem; /* Ruimte onder elke sectie */
    /* De container binnen de sectie krijgt nu de achtergrond en padding */
}

/* Achtergrond voor donkere secties */
.bg-dark {
    background-color: #1a1a1a !important; /* Donkergrijs voor secties */
}

/* Achtergrond voor secundaire elementen (bijv. skill-kaarten) */
.bg-secondary {
    background-color: #333333 !important; /* Nog een tint donkerder grijs */
}

/* Aangepaste cyaan kleur voor accenten */
.text-cyan-400 {
    color: #06B6D4 !important; /* Cyaan tekstkleur */
}

.border-cyan-500 {
    border-color: #06B6D4 !important; /* Cyaan randkleur */
}

.bg-cyan {
    background-color: #06B6D4 !important; /* Cyaan achtergrondkleur */
}

.btn-cyan {
    background-color: #06B6D4;
    border-color: #06B6D4;
    color: #ffffff;
    transition: all 0.3s ease-in-out; /* Smooth transition for hover */
}

.btn-cyan:hover {
    background-color: #059cb8; /* Iets donkerder cyaan bij hover */
    border-color: #059cb8;
    color: #ffffff;
    transform: translateY(-3px); /* Lichte opwaartse beweging bij hover */
    box-shadow: 0 8px 15px rgba(6, 182, 212, 0.4); /* Subtiele schaduw bij hover */
}

/* Hero Header specifieke stijlen */
.hero-header {
    min-height: 100vh; /* Volledige viewport hoogte */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px; /* Ruimte voor de vaste navigatiebalk */
}

.hero-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); /* Donkere overlay */
    z-index: 1;
}

.hero-header .container {
    z-index: 2;
}

.profile-image-container {
    width: 160px; /* Grotere profielfoto */
    height: 160px;
    overflow: hidden;
    border: 5px solid #06B6D4; /* Cyaan rand */
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); /* Lichtgevende schaduw */
}

.profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Navigatiebalk stijlen */
.navbar {
    background-color: #1a1a1a !important; /* Donkergrijs voor navigatie */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Subtiele schaduw */
}

.navbar-brand, .nav-link {
    color: #ffffff !important; /* Witte tekst voor links */
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}

.navbar-brand:hover, .nav-link:hover {
    color: #06B6D4 !important; /* Cyaan bij hover */
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Maak de focus-outline van de navbar-toggler dunner */
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(6, 182, 212, 0.5); /* Dikkte van de focus-ring aangepast */
    outline: 0; /* Verwijder standaard outline */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%286, 182, 212, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Hover-effect voor algemene elementen */
.hover-effect {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hover-effect:hover {
    transform: translateY(-5px); /* Lichte opwaartse beweging bij hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Duidelijkere schaduw */
}

/* Progress bars */
.progress {
    height: 0.8rem; /* Dikkere progress bars */
    background-color: #333333; /* Donkerdere achtergrond voor de bar */
    border-radius: 0.5rem;
}

.progress-bar {
    background-color: #06B6D4; /* Cyaan kleur voor de voortgang */
    border-radius: 0.5rem;
    transition: width 0.6s ease; /* Smooth animatie */
}

/* Voettekst navigatie */
.footer-nav .nav-link {
    padding: 0.25rem 0.5rem;
}

/* Ionicons */
ion-icon {
    vertical-align: middle;
}

/* Parallax effect */
.parallax-bg {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Stijl voor de knoppen in de Hero sectie en de verzendknoppen in het contactformulier */
.hero-btn,
#submitButtonNL,
#submitButtonEN {
    padding: 0.5rem 1.5rem; /* Verticaal 0.5rem, horizontaal 1.5rem */
    font-size: 1rem; /* Standaard font-size voor consistentie */
    line-height: 1.5; /* Standaard line-height */
    width: 200px; /* Een vaste breedte die past bij "Neem Contact Op" */
    display: flex; /* Gebruik flexbox voor centrering van tekst */
    justify-content: center; /* Centreer de tekst horizontaal */
    align-items: center; /* Centreer de tekst verticaal */
    white-space: nowrap; /* Voorkom dat tekst over meerdere regels loopt */
    box-sizing: border-box; /* Zorg dat padding en border in de breedte worden meegenomen */
}

/* Stijl voor de taalwisselknop in de navigatie */
#language-toggle-desktop,
#language-toggle-mobile {
    /* Gebruik dezelfde verticale padding en font-size als andere knoppen */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    /* Behoud de oorspronkelijke breedte die door de inhoud wordt bepaald */
    width: auto;
    /* Horizontale padding om de tekst een beetje ruimte te geven */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    display: flex; /* Gebruik flexbox voor centrering van tekst */
    justify-content: center; /* Centreer de tekst horizontaal */
    align-items: center; /* Centreer de tekst verticaal */
    white-space: nowrap; /* Voorkom dat tekst over meerdere regels loopt */
    box-sizing: border-box; /* Zorg dat padding en border in de breedte worden meegenomen */
}


/* Responsive aanpassingen */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #1a1a1a;
        margin-top: 1rem;
        border-radius: 0.5rem;
        padding: 1rem;
    }
    .navbar-nav { /* Target the ul directly */
        width: 100%; /* Ensure it takes full width of its parent */
        display: flex; /* Make it a flex container */
        flex-direction: column; /* Stack items vertically */
        /* Verwijder align-items: flex-end hier, we aligneren de tekst binnen de link */
        padding-left: 0; /* Remove default ul padding */
    }
    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
        width: 100%; /* Maak nav-item 100% breed */
    }
    .navbar-nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
        display: block; /* Ensure it takes full width of its parent nav-item */
        text-align: right !important; /* Forceer de tekst naar rechts uit te lijnen */
    }
    .hero-header {
        padding-top: 100px; /* Meer padding voor mobiel */
    }

    /* Mobiele footer navigatie links cyaan */
    .footer-nav .list-unstyled li a {
        color: #06B6D4 !important;
    }
}

/* Custom classes for language toggle */
.nl-content {
    /* Standaard zichtbaar voor NL */
}

.en-content {
    display: none; /* Standaard verborgen voor EN */
}

/* Wanneer de taal Engels is, toon .en-content en verberg .nl-content */
html[lang="en"] .nl-content {
    display: none !important;
}

html[lang="en"] .en-content {
    display: block !important;
}