/* 1. VARIABELEN (Jouw Palet) */
:root {
    --blue1: #7C83FB;
    --blue2: #7CB6FB;
    --blue3: #7C9CFB;
    --blue4: #8E7CFB;
    --blue5: #A87CFB;
    --blue6: #472f75;
    --blue7: #afd6fe; 
    --blue8: #264473; 
    --blue9: #e1e8f4; 
    --silver: #C0C0C0;
    --text: #333;
    --hover: #ffffff;
    --dark-bg: #1c1c24; /* Donkere achtergrondkleur */
    --light-text: #f0f0f5; /* Lichte tekstkleur */
    --accent-color: var(--blue1); /* Hoofd accentkleur voor links/actief */
    --accent-hover: var(--blue2); /* Lichtere accentkleur voor hover */
    --card-bg: #2a2a35; /* Kleur voor de kaart-achtergrond */
    --lila: #c5d5ff;
    --green: #215356;
    --font: 'Poppins', sans-serif;
    --shadow-color: rgba(0, 0, 0, 0.4);
}

body {
  margin: 0;
   font-family: var(--font);
}

/* Navigatiebalk */

.navbar {
    display: flex;
    /* Verdeel de ruimte tussen Links, Logo en Rechts */
    justify-content: space-between; 
    align-items: center;
    background-color: var(--blue9);
    padding: 0.5rem 2rem; /* Grotere padding aan de zijkanten */
    top: 0;
    z-index: 2000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Navigatie Links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem; 
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--blue8);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: block; /* Zorgt voor het volledige klikgebied */
}

.nav-links a:hover {
    background-color: var(--hover);
    color: var(--blue6);
    border: 2px solid var(--blue6);
}

/* Logo en Zoekbalk */
.logo-wrapper {
    flex-shrink: 0; /* Voorkom dat het logo krimpt */
}

.logo-img {
    max-height: 120px;
    height: auto;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    margin: 0; /* Verwijder de onnodige marge */
}

.logo-img:hover {
    transform: scale(1.0) translateY(-5px);
}

/* Rechterkant - Groepering Zoek, Home, Cart */
.right-side-icons {
    display: flex;
    align-items: center;
    gap: 1.5rem; 
}

/* Zoekbalk Wrapper */
.search-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid var(--blue7);
    border-radius: 25px;
    padding: 5px 10px;
    background-color: var(--hover);
    width: fit-content;
    box-shadow: 0 0 8px rgba(var(--blue4), 0.3);
}

.search-bar {
    border: none;
    outline: none;
    font-size: 16px;
    padding: 10px;
    width: 200px;
    background-color: transparent;
}

.search-button {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--blue8);
    transition: color 0.3s;
}

.search-button:hover .search-icon {
    color: var(--blue4); 
}

/* Home en Cart Iconen */
.home-icon img,
.cart-icon img {
    height: 45px;
    display: block;
    transition: transform 0.3s ease;
}

.home-icon img:hover,
.cart-icon img:hover {
    transform: scale(1.1);
}

/* Submenu's */
.submenu-container {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    background-color: var(--blue9);
    border: 1px solid var(--blue7);
    padding: 1rem 0; /* Verticale padding, horizontale padding door li */
    list-style: none;
    margin: 0;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    border-radius: 5px;
}

.submenu li {
    margin: 0;
}

.submenu a {
    text-decoration: none;
    color: var(--blue8);
    font-weight: normal;
    padding: 0.5rem 1.5rem; /* Zorgt voor het klikgebied binnen de lijst */
}

.nav-item:hover .submenu {
    display: block;
}

/* Sub-Submenu Styling (Webshop) */
/* Vereist dat de <li> van de hoofditems in het submenu ook position: relative; krijgt */
.submenu li {
    position: relative; 
}

.sub-submenu {
    display: none;
    position: absolute;
    left: 100%; /* Plaats het rechts naast het hoofditem */
    top: 0;
    background-color: var(--blue7); /* Andere achtergrondkleur voor onderscheid */
    border: 1px solid var(--blue6);
    padding: 0.5rem 0;
    list-style: none;
    min-width: 150px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.submenu li:hover .sub-submenu {
    display: block;
}

.sub-submenu a {
    color: var(--blue8);
}

.sub-submenu a:hover {
    background-color: var(--lila);
}


/* 2. BASIS STYLING */
body {
    font-family: var(--font);
    background-color: var(--lila);
    color: var(--light-text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}


a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-hover);
}

/* 3. LAY-OUT CONTAINER (Flexbox voor 3 kolommen) */
.page-container {
    display: flex;
    justify-content: center; /* Centreer het hoofdblok */
    width: 100%;
    max-width: 1400px; /* Max breedte voor de hele pagina */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* 4. ADVERTENTIE PANEEL (Links en Rechts) */
.ad-panel {
    width: 200px; /* Vaste breedte voor advertentiepanelen */
    margin: 0 20px;
    padding: 20px;
    border-radius: 12px;
    background-color: var(--blue9);
    color: var(--light-text);
    text-align: center;
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: transform 0.3s, box-shadow 0.3s;
    display: none; /* Standaard verbergen op kleine schermen */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Styling voor de afbeelding in de advertentiepanelen */
.ad-image {
    width: 100%; /* Zorgt dat de afbeelding de volledige breedte van het paneel (200px) vult */
    max-height: 150px; /* Bepaalt een maximale hoogte, zodat de ad niet te lang wordt (pas dit aan) */
    object-fit: cover; /* Zorgt ervoor dat de afbeelding de ruimte vult zonder vervorming */
    border-radius: 8px; /* Past bij de afgeronde hoeken van het ad-paneel */
    margin-bottom: 10px; /* Ruimte onder de afbeelding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Een subtiele schaduw */
}

.ad-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--blue6);
}

.ad-label {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--silver);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ad-panel h3 {
    margin-top: 0;
    color: var(--green);
}

.ad-button {
    background-color: var(--green);
    color: var(--hover);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.2s;
}

.ad-button:hover {
    background-color: var(--blue5);
}

/* Toon de advertenties op grotere schermen */
@media (min-width: 1024px) {
    .ad-panel {
        display: flex;
    }
}

/* 5. GOOGLE SEARCH HOOFDBLOK */
.google-search-block {
    flex-grow: 1; /* Neemt de resterende ruimte in */
    max-width: 700px; /* Maximale breedte van de 'zoekpagina' */
    background-color: var(--blue9);
    border: 1px solid var(--blue6);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 30px var(--blue8); /* Subtiele gloed */
}

/* 6. SEARCH HEADER */
.search-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Logo Imitatie (gekleurde letters) */
.logo-placeholder {
    font-size: 28px;
    font-weight: 700;
    margin-right: 20px;
    white-space: nowrap;
}

.logo-part.blue { color: var(--blue1); }
.logo-part.red { color: #EA4335; } /* Rood van Google */
.logo-part.yellow { color: #FBBC05; } /* Geel van Google */
.logo-part.green { color: #34A853; } /* Groen van Google */

/* Zoekbalk Styling */
.search-bar-container {
    display: flex;
    flex-grow: 1;
    border: 1px solid var(--blue6);
    border-radius: 25px;
    padding: 10px 15px;
    background-color: var(--card-bg);
    box-shadow: inset 0 1px 3px var(--shadow-color);
}

#search-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: var(--light-text);
    font-size: 16px;
    outline: none;
    padding: 0 10px;
}

.search-icon, .mic-icon {
    cursor: pointer;
    color: var(--blue8);
    margin-left: 10px;
    font-size: 1.1em;
    transition: color 0.2s;
}

.search-icon:hover, .mic-icon:hover {
    color: var(--accent-hover);
}

.profile-placeholder {
    width: 30px;
    height: 30px;
    margin-left: 20px;
    border-radius: 50%;
    background-color: var(--blue8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Je zou hier een echte profielafbeelding kunnen gebruiken */
    display: block; /* Verberg de placeholder image, tenzij je er een hebt */
}

/* 7. SEARCH NAVIGATIE BALK */
.search-nav {
    margin-top: 10px;
}

.search-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.search-nav li {
    margin-right: 20px;
    padding: 0 5px;
    cursor: pointer;
    position: relative;
}

.search-nav li a {
    color: var(--silver);
    padding-bottom: 5px;
    display: block;
}

/* Actieve link (blauw onderstrepen) */
.search-nav li.active a {
    color: var(--accent-color);
    font-weight: 600;
}

.search-nav li.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--accent-color);
}

.separator {
    border: 0;
    height: 1px;
    background: var(--blue6);
    margin: 15px 0 20px 0;
}

/* 8. RESULTATEN EN CONTENT */
.search-results-content {
    padding-left: 10px; /* Kleine inspringing voor de resultaten */
}

.search-stats {
    font-size: 0.85em;
    color: var(--silver);
    margin-bottom: 25px;
}

.result-card {
    background-color: var(--blue9);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.result-card h2 {
    color: var(--accent-color);
    font-size: 1.5em;
    margin-top: 0;
}

.result-card p {
    color: var(--blue8); 
}

.url-source {
    font-size: 0.9em;
    color: var(--green);
    margin-top: -10px;
    margin-bottom: 15px;
}

/* Afbeelding Placeholder Styling */
.image-placeholder-container {
    margin: 20px 0;
    padding: 10px;
    border: 1px dashed var(--blue6);
    border-radius: 8px;
    background-color: var(--blue9);
}

.image-caption {
    font-size: 0.8em;
    color: var(--silver);
    text-align: center;
    margin: 5px 0 0 0;
}

.content-placeholder-container {
    margin: 20px 0;
    padding: 10px;
    border: 1px dashed var(--blue6);
    border-radius: 8px;
    background-color: var(--blue9);
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

/* --- Stijlen voor de Video Galerij (content-videos) --- */

.video-grid {
    display: grid;
    /* Creëer responsieve kolommen (minimaal 300px breed) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; /* Ruimte tussen de video's */
    margin-top: 20px;
}

/* Pas de result-card binnen het grid aan */
.video-item.result-card {
    padding: 0; /* Verwijder padding zodat de video de randen raakt */
    overflow: hidden; /* Belangrijk voor afgeronde hoeken */
}

/* Zorg dat de titel en bron nog wel padding hebben */
.video-item h2, .video-item .video-source {
    padding: 0 15px; 
}

.video-source {
    font-size: 0.9em;
    color: var(--silver); 
    margin-bottom: 10px;
}

/* Responsieve Video Wrapper - Zorgt dat de video schaalt! */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Dit is de 16:9 ratio (hoogte / breedte) */
    height: 0;
    overflow: hidden;
    margin-top: 10px;
    background-color: black; /* Zorgt voor een zwarte achtergrond tijdens het laden */
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Zorg dat de video onder de link (z-index: 10) ligt */
    border: 0;
}

/* Stijl de video-link-overlay */
.video-link-overlay {
    position: absolute; /* CRUCIAAL: Absolute positionering */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Zorgt dat de link de volledige 16:9 ruimte vult */
    z-index: 10; /* CRUCIAAL: Zorgt dat deze laag BOVEN de video ligt */
    display: flex; /* Zorgt dat het afspeel-icoontje (::after) netjes in het midden staat */
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    /* Verwijder de "display: block;" regel die je eerder had, omdat position:absolute al voldoende is */
}

/* Optioneel: Maak een afspeelknop icoon in het midden */
.video-link-overlay::after {
    content: "▶"; /* Het driehoekje */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    pointer-events: none; /* Zorgt ervoor dat de muisklik door de pijl heen gaat naar de <a> tag */
}


/* Styling voor het hover-effect op de video-items */
.video-item.result-card {
    /* Toevoegen van een animatie-overgang voor vloeiende beweging */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    
    /* Zorgt ervoor dat de schaduw goed wordt weergegeven */
    will-change: transform, box-shadow; 
}

/* Wanneer de muis over het video-vakje gaat */
.video-item.result-card:hover {
    /* Laat het vakje een heel klein beetje omhoog bewegen */
    transform: translateY(-5px);
    
    /* Geef het een duidelijkere schaduw (optioneel, maar maakt het effect af) */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
}

/* Responsiviteit */
@media (max-width: 600px) {
    .search-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .logo-placeholder {
        margin-bottom: 10px;
    }

    .search-bar-container {
        width: 100%;
        margin-bottom: 10px;
    }

    .profile-placeholder {
        display: none; 
    }

    .search-nav ul {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .search-nav li {
        margin-right: 10px;
    }
}

ul.song-list li {
    margin-bottom: 10px;
}

.song-list a {
    color: var(--blue6); /* Spotify Green */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.song-list a:hover {
    color: var(--green);
    text-decoration: underline;
}

.promo-text {
    margin-top: 30px;
    padding: 15px;
    background-color: #ecf0f1;
    border-left: 5px solid var(--blue8);
}

.webshop-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: var(--blue2); 
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.webshop-link:hover {
    background-color: var(--green);
}

/* Stijl voor de opvallende SBD Call-to-Action link */
.sbd-link {
    color: var(--blue4); 
    text-decoration: underline; 
    
    font-weight: bold;
    transition: color 0.3s ease;
}

/* De stijl wanneer de gebruiker eroverheen gaat */
.sbd-link:hover {
    color: var(--blue5); 
    text-decoration: none; 
}

/* --- Stijlen voor de Afbeeldingen Galerij (content-images) --- */

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 15px; 
    margin-top: 20px;
}

.image-item {
    display: block;
    overflow: hidden; 
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
    transition: transform 0.2s ease;
}

.image-item:hover {
    transform: scale(1.03); 
    box-shadow: 0 6px 15px var(--blue6);
}

.image-item img {
    width: 100%;
    height: 150px; 
    object-fit: cover; 
    display: block;
}

/* Aanpassing voor kleinere schermen (optioneel) */
@media (max-width: 600px) {
    .image-grid {
        /* Op mobiel slechts 2 kolommen */
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* ------------------------------------------------ */
/* 4. FOOTER STYLING */
/* ------------------------------------------------ */

footer {
    text-align: center;
    padding: 2rem 0;
    background-color: var(--blue9);
    color: var(--blue8);
    margin-top: 40px;
    width: 100%;
    font-size: 0.9em;
}

footer p {
    margin: 5px 0;
}

/* Styling voor Social Media iconen in de footer */
footer img {
    height: 40px;
    width: 40px;
    margin: 0 10px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

footer a:hover img {
    transform: scale(1.1);
}