@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* =========================
   1. VARIABELEN (KLEUREN & LIJNEN)
   ========================= */
:root {
    /* --- Sidebar & Navigatie --- */
    --sidebar-bg: #05293d;   
    --sidebar-text: #FFFFFF; 
    
    /* --- Hoofdkleuren --- */
    --main-bg: #FFFFFF;      
    
    /* --- Kaarten & Elementen --- */
    --card-bg: #ffe29b;      
    --active-card-bg: #ffe29b; 
    
    /* --- Typografie --- */
    --heading-color: #05293d; 
    --text-color: #292d2d;    
    
    /* --- Accenten --- */
    --accent: #ffe29b;       
    
    /* --- Lijnen & Randen --- */
    --line-color: #cbd5e1; 
    --border: 1px solid rgba(0,0,0,0.1); 
}

/* =========================
   2. ALGEMENE STIJLEN
   ========================= */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--main-bg);
    color: var(--heading-color);
    display: flex; 
    min-height: 100vh;
}

section { margin-bottom: 60px; }

h2 { 
    color: var(--heading-color); 
    font-size: 1.8rem; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

h2 i { 
    color: var(--heading-color); 
    font-size: 1.5rem; 
}

/* =========================
   3. SIDEBAR (LINKS)
   ========================= */
.sidebar {
    width: 320px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 30px 40px 30px; 
    
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    z-index: 10;
}

.profile-img {
    width: 160px; 
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--accent); 
    display: block;
    margin: 0 auto 15px auto; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.profile-header { text-align: center; }
.profile-header h1 { font-size: 1.8rem; line-height: 1.1; margin-bottom: 5px; color: #fff; }

.role { color: var(--accent); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 15px; }

.tagline { 
    font-size: 0.85rem; 
    opacity: 0.8; 
    margin-bottom: 20px; 
}

/* --- CONTACT INFO --- */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px; 
    margin-bottom: 25px;
}

.contact-info .info-item {
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-size: 0.85rem; 
    
    background: rgba(255, 255, 255, 0.05); 
    padding: 8px 12px; 
    border-radius: 6px; 
    border: 1px solid transparent; 
    transition: background 0.3s ease; 
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none; 
}

.contact-info .info-item span {
    word-break: break-all;
}

.contact-info i { 
    color: var(--accent); 
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0; 
}

a.info-item:hover {
    background: rgba(255, 255, 255, 0.15); 
    cursor: pointer;
}

div.info-item {
    cursor: default;
}


/* --- Skills Section --- */
.skills-section { 
    margin-top: 10px; 
}

.skill-category {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    margin-bottom: 8px;
    margin-top: 15px;
    font-weight: 600;
}

.skills-section .skill-category:first-of-type { margin-top: 0; }

.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* AANPASSING: Iets groter gemaakt */
.skill-tags > span { 
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.3); 
    color: #fff;
    
    /* Iets meer padding en groter lettertype */
    padding: 6px 12px; 
    font-size: 0.85rem; 
    
    border-radius: 15px; 
    transition: all 0.3s ease;
    cursor: default;
}

.skill-tags > span:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* =========================
   4. MAIN CONTENT (RECHTS)
   ========================= */
.main-content {
    margin-left: 320px; 
    width: calc(100% - 320px);
    padding: 60px 80px 30px 55px;
}

.main-content > section > p { color: var(--heading-color); }

footer { 
    border-top: var(--border); 
    padding-top: 20px; 
    color: var(--heading-color); 
    opacity: 0.6; 
    font-size: 0.9rem; 
}

/* --- Introductie --- */
#intro h2 { margin-bottom: 10px; margin-top: 0; }
#intro p { max-width: 880px; line-height: 1.8; color: var(--heading-color); }
#intro { padding-bottom: 0px; margin-bottom: 30px; }

/* =========================
   5. TIJDLIJN STRUCTUUR
   ========================= */
.split-timeline { position: relative; }

/* De Verticale Grijze Lijn */
.split-timeline::before {
    content: '';
    position: absolute;
    left: 165px; 
    transform: translateX(-50%);
    top: 28px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--line-color) 80%, transparent 100%);
    z-index: 0;
}

.timeline-row { display: flex; gap: 0; position: relative; }

.timeline-time {
    flex: 0 0 165px; 
    text-align: left; 
    white-space: nowrap; 
    padding-right: 20px; 
    padding-top: 15px;
    position: relative;
}

/* De Bolletjes op de lijn */
.timeline-time::after {
    content: '';
    position: absolute;
    right: 0;
    transform: translateX(50%);
    top: 16px;
    width: 12px;
    height: 12px;
    background-color: var(--accent);
    border: 3px solid var(--main-bg); 
    border-radius: 50%;
    z-index: 2; 
}

.timeline-row:first-child .timeline-time::after {
    box-shadow: 0 0 0 2.2px var(--main-bg), 0 0 0 5px var(--accent);
}

.date-badge { 
    font-weight: 600; 
    color: var(--heading-color); 
    font-size: 0.9rem; 
    display: block; 
}

.timeline-content { 
    flex: 1; 
    padding-left: 33px; 
    padding-bottom: 20px; 
    padding-top: 2.5px;
}

/* =========================
   6. INTERACTIEVE KAARTEN
   ========================= */
.job-card {
    background: var(--card-bg);
    border: var(--border);
    padding: 15px 25px 20px 25px; 
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    z-index: 1; 
}

.job-card::before {
    content: ''; 
    position: absolute; 
    top: 12px;
    left: -10px; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid #e5cb8b; 
    transition: border-right-color 0.3s ease;
    z-index: 2; 
}

.job-card::after {
    content: ''; 
    position: absolute;
    top: 12px;
    left: -9px; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right: 10px solid var(--card-bg); 
    transition: border-right-color 0.3s ease;
    z-index: 3; 
}

.job-card:hover { transform: translateX(5px); border-color: var(--heading-color); }
.job-card:hover::before { border-right-color: var(--heading-color) !important; }

.job-card.active { border-color: var(--heading-color); background-color: var(--active-card-bg); }
.job-card.active::before { border-right-color: var(--heading-color) !important; }
.job-card.active::after { border-right-color: var(--active-card-bg); }

.job-header { display: flex; justify-content: space-between; align-items: center; }
.job-header h3 { margin: 0; font-size: 1.1rem; color: var(--heading-color); }
.company { color: var(--heading-color); font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }

.toggle-icon { color: var(--heading-color); transition: transform 0.3s ease; }
.job-card.active .toggle-icon { transform: rotate(180deg); }

.job-details {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    
    transition: 
        max-height 0.3s cubic-bezier(0, 1, 0, 1),
        opacity 0.3s ease,
        margin-top 0.3s ease,
        padding-top 0.3s ease,
        border-color 0.3s ease;
        
    font-size: 0.9rem;
    color: var(--text-color);
}

.job-card.active .job-details {
    max-height: 500px; 
    opacity: 1;
    margin-top: 15px;
    padding-top: 15px;
    border-top-color: rgba(0,0,0,0.1);

    transition: 
        max-height 0.3s ease-in-out,
        opacity 0.3s ease-in-out,
        margin-top 0.3s ease,
        padding-top 0.3s ease,
        border-color 0.3s ease;
}

.job-details ul { padding-left: 20px; margin: 0; }
.job-details li { margin-bottom: 5px; }

/* =========================
   7. CERTIFICATEN
   ========================= */
.cert-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.cert-item { 
    background: var(--card-bg); 
    border: var(--border); 
    color: var(--heading-color); 
    padding: 15px; 
    border-radius: 8px; 
    text-align: center; 
    font-weight: 500;
    transition: all 0.3s ease; 
    cursor: default; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px; 
}

.cert-item::after {
    /* Standaard: Nederlands */
    content: attr(data-year-nl);
    
    position: absolute;
    bottom: 8px; 
    left: 0;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0; 
    transform: translateY(10px); 
    transition: all 0.3s ease;
    color: var(--heading-color);
}

/* Als Engels aan staat, pak dan de Engelse tekst */
body.english-mode .cert-item::after {
    content: attr(data-year-en);
}

.cert-item:hover {
    transform: scale(1.03); 
    border-color: var(--heading-color);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    z-index: 2; 
    padding-bottom: 30px; 
}

/* Zorg ook dat de hover werkt */
.cert-item:hover::after { opacity: 0.7; transform: translateY(0); }

/* =========================
   8. RESPONSIVE DESIGN
   ========================= */
@media (max-width: 850px) {
    .split-timeline::before { display: none; }
    .timeline-row { flex-direction: column; }
    .timeline-time { 
        text-align: left; 
        padding-left: 20px; 
        padding-right: 0;
        margin-left: 10px;
        flex: auto; 
        white-space: normal; 
        border-left: 2px solid var(--line-color); 
    }
    .timeline-time::after { right: auto; left: 0; transform: translateX(-50%); }
    .cert-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* =========================
   9. SCROLL ANIMATIES (GLOBAL FIX)
   ========================= */

@keyframes fadeInUp {
    from { opacity: 0; filter: blur(2px); transform: translateY(50px); }
    to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* De Basis: Onzichtbaar */
.hidden {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(50px);
    /* BELANGRIJK: We halen de transition weg. 
       Dit zorgt ervoor dat als we de animatie resetten, hij direct terugspringt naar 'onsichtbaar'. */
}

/* De Actie: Invliegen */
.show {
    animation: fadeInUp 1s ease forwards;
}

/* --- Certificaten Specifiek --- */
/* Certificaten hebben ook een hover-effect nodig als ze er eenmaal zijn */
.cert-item.show {
    /* De animatie komt al van de .show class hierboven */
    
    /* We zetten de transition weer AAN voor de hover */
    transition: all 0.3s ease; 
}

/* Behoud vertragingen */
.cert-item:nth-child(2) { animation-delay: 0.1s; }
.cert-item:nth-child(3) { animation-delay: 0.2s; }
.cert-item:nth-child(4) { animation-delay: 0.3s; }
.cert-item:nth-child(5) { animation-delay: 0.4s; }
.cert-item:nth-child(6) { animation-delay: 0.5s; }
.cert-item:nth-child(7) { animation-delay: 0.6s; }

/* =========================
   10. TAAL SLIDER (AANGEPAST VOOR SKILLS SECTIE)
   ========================= */

.language-section {
    /* GEEN border en GEEN footer-marge meer */
    margin-top: 5px;       /* Klein beetje ruimte onder het kopje */
    padding-top: 0;        /* Geen extra witruimte */
    border-top: none;      /* Die streep halen we weg */
    
    display: flex;
    align-items: center;
    justify-content: flex-start; /* BELANGRIJK: Links uitlijnen (net als de tekst) */
    gap: 12px;
    
    /* Zorg dat hij mooi in lijn staat met de skills erboven */
    padding-left: 2px; 
}

/* De tekst labels (NL / EN) */
.lang-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sidebar-text);
    opacity: 0.7; /* Iets subtieler */
    transition: opacity 0.3s;
}

/* Het label van de actieve taal maken we feller, de andere vager */
.language-section:not(:has(input:checked)) .lang-label:first-child { opacity: 1; color: #fff; } /* NL is aan */
.language-section:has(input:checked) .lang-label:last-child { opacity: 1; color: #fff; }       /* EN is aan */


/* --- De Switch Knop (Iets compacter en strakker) --- */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Achtergrondkleur als hij UIT (NL) staat: Donkerder voor contrast */
    background-color: rgba(255, 255, 255, 0.2); 
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Kleur als hij AAN (EN) staat: Jouw accentkleur */
input:checked + .slider { background-color: var(--accent); }

/* Schuif het bolletje naar rechts */
input:checked + .slider:before { transform: translateX(20px); }

/* --- Wissel Mechanisme (Blijft hetzelfde) --- */
.lang-en { display: none; }
body.english-mode .lang-nl { display: none !important; }
body.english-mode div.lang-en { display: block !important; }
body.english-mode span.lang-en { display: inline !important; }