/********************* CSS File created by KRISTOF VERSPILLE - Firstthings.be 
Base colors: #A7D4F5 - #222221
*/
body { background:#A7D4F5; font-family: "Roboto", sans-serif; margin: 0; }
.taalkeuze {  min-height: 100vh; display: flex; flex-direction: column; background:white; }

header { width: 100%; padding: 20px; box-sizing: border-box; text-align: right; }

.content-container {
        flex-grow: 1; 
        display: flex;
        flex-direction: column; /* Stapel logo en tekst */
        justify-content: center; /* **VERTICAAL centreren van de inhoud** */
        align-items: center; /* **HORIZONTAAL centreren van de inhoud** */
        padding: 20px;
        text-align: center; }

.logo-container { margin-bottom: 25px; }

.logo { 
    /* Desktop standaard (600px) behouden, maar op grote schermen beperken */
    max-width: 600px;
    width: 100%; /* Zorgt dat het logo de volledige breedte van de parent kan innemen */
    height: auto; 
    display: block; 
}

.ondertekst {max-width: 600px; line-height: 1.6;color: #555; }

.google-form-wrapper iframe { width:100%; min-height:1200px; }


h1 { font-size: 34px; color:white; font-weight:200; margin-bottom:28px; }
p { color:white; font-size:18px; line-height:24px; }

#Footerline { color:white; margin-top:35px; font-size:14px; text-align:center; }
#Footerline a { color:white; }













/* LOADING ANIMATION BY FT */
.dynamische-zin { margin: 20px 0 40px; min-height: 30px; color:#222221; }
#dynamische-tekst {
    border-right: 2px solid red; /* Simulatie van de knipperende cursor */
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: #A7D4F5; }
}



/* ----------------------------------------------------------------
   STIJL VOOR DE 3D KNOP (A TAGS)
   ---------------------------------------------------------------- */

/* -- Uniforme CSS Variabelen voor de Kleuren -- */
/* Het donkere blauw als basis voor de 3D schaduw */
.knop {
    --COLOR: #A7D4F5;          /* Primair Blauw (Licht) */
    --SHADOW: #75b3d6;         /* Donkerder Blauw voor de schaduw (gebaseerd op het lichtblauwe) */
    --BORDER: #75b3d6;         /* Randkleur */
    color: white;              /* Standaard tekstkleur is nu wit */
}

/* ----------------------------------------------------------------
   ALGEMENE KNOP STIJL
   ---------------------------------------------------------------- */
.taal-knoppen {
    /* Zorg voor wat ruimte onder de typemachine-tekst */
    margin-top: 40px; 
}

.knop {
    /* Converteert de A tag naar een blok-achtig element */
    display: inline-block; 
    text-decoration: none; /* Verwijdert de standaard onderstreping van de link */
    
    /* Afmetingen & Uiterlijk */
    padding: 0;
    margin: 0 15px; /* Ruimte tussen de knoppen */
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 700;
    
    /* 3D-schaduw instellen */
    border-radius: 6px;
    background-color: var(--COLOR);
    box-shadow: 0 0.5rem 0 0 var(--SHADOW); /* De 'dikke' 3D schaduw */
    
    /* Transitie instellen voor de klik/hover */
    transition: 
        background-color 0.2s, 
        box-shadow 0.2s, 
        transform 0.2s;
}

/* De span om de tekst op te tillen */
.knop-tekst {
    display: block;
    padding: 10px 24px;
    border: 2px solid var(--BORDER);
    border-radius: 6px;
    color: white; /* Tekstkleur is wit zoals gevraagd */
}

/* ----------------------------------------------------------------
   INTERACTIE (HOVER & ACTIEF/KLIK)
   ---------------------------------------------------------------- */

/* 1. HOVER effect: De knop komt omhoog (TRANSFORM: translateY negatief) */
.knop:hover {
    background-color: var(--COLOR);
    box-shadow: 0 0.65rem 0 0 var(--SHADOW); /* Schaduw wordt dieper */
    transform: translateY(-0.2rem);         /* Knop komt iets omhoog */
}

/* 2. ACTIEF/KLIK effect: De knop drukt naar beneden (standaard en gewenst effect) */
.knop:active {
    background-color: var(--COLOR);
    box-shadow: 0 0.1rem 0 0 var(--SHADOW);  /* Schaduw wordt klein */
    transform: translateY(0.4rem);          /* Knop zakt in */
}



@media (max-width: 768px) {
    /* STIJLEN DIE GELDEN VOOR SCHERMEN KLEINER DAN OF GELIJK AAN 768px (tablets en smartphones) */

    /* Logo aanpassen: nu maximaal 90% van de viewport breedte */
    .logo-container {
        width: 90%; /* Zorgt voor marge aan de zijkanten */
    }
    .logo {
        max-width: 100%; /* Zorgt ervoor dat het logo nooit breder is dan 90% van de viewport */
    }

    /* Tekst aanpassen: kleiner maken voor mobiel */
    .dynamische-zin {
        font-size: 1.0em; /* Iets kleiner dan de desktopgrootte (was 1.2em in het eerdere advies) */
    }

    /* Knoppen aanpassen: minder marge/padding om ze op de lijn te houden */
    .knop {
        margin: 0 5px; /* Minder horizontale ruimte tussen de knoppen */
        font-size: 1.0rem; /* Iets kleinere lettergrootte */
        box-shadow: 0 0.4rem 0 0 var(--SHADOW); /* Iets kleinere 3D-diepte op mobiel */
    }
    
    .knop-tekst {
        padding: 8px 18px; /* Minder padding op de knoppen */
    }
    
    /* Zorg dat de knoppen goed reageren op de kleinere maten */
    .knop:hover {
        box-shadow: 0 0.5rem 0 0 var(--SHADOW);
        transform: translateY(-0.15rem); /* Iets minder beweging bij hover */
    }

    .knop:active {
        transform: translateY(0.3rem);
    }
}








/* ----------------------------------------------------------------
   HEADER EN SECUNDAIR TAALMENU
   ---------------------------------------------------------------- */

.main-header {
    width: 100%;
    padding: 15px 0;
}

.header-content-wrapper {
    max-width: 90%; /* Blijft binnen de maximale breedte */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* Duw logo naar links en menu naar rechts */
    align-items: center;
}

.logo-header-container {
    height: 140px; /* Vaste hoogte voor de header */
}

.logo-header {
    height: 100%; /* Maakt het logo responsief in de header */
    width: auto;
    display: block;
}

/* ----------------------------------------------------------------
   COMPACT TAALMENU (Gebruikt bestaande .knop stijlen)
   ---------------------------------------------------------------- */

.taal-menu-secundair .knop {
    /* Maak de knop compacter */
    margin: 0 5px; 
    font-size: 0.9rem;
    padding: 0;
}

.taal-menu-secundair .knop-tekst {
    padding: 5px 10px;
}

/* Visuele feedback voor de actieve taal (huidige pagina) */
.taal-menu-secundair .knop.active {
    cursor: default;
    opacity: 1; /* Actieve knop is volledig zichtbaar */
    background-color: var(--SHADOW); /* Gebruik de donkere kleur als indicator */
    box-shadow: none; /* Geen 3D-effect nodig op de actieve knop */
    transform: translateY(0);
}

.taal-menu-secundair .knop.active .knop-tekst {
    color: white; 
}

/* Voorkom hover op de actieve knop */
.taal-menu-secundair .knop.active:hover {
    box-shadow: none;
    transform: none;
}

/* ----------------------------------------------------------------
   CONTENT EN FORMULIER CENTRERING
   ---------------------------------------------------------------- */

.content-wrapper {
    max-width: 900px; 
    margin: 40px auto; /* Ruimte boven/onder en horizontaal centreren */
    padding: 0 20px;
}

.google-form-wrapper {
    margin-top: 30px;
    /* Zorgt ervoor dat de iframe binnen de wrapper past */
    overflow: hidden; 
}

.google-form-wrapper iframe {
    /* Zorgt dat de iframe op mobiel goed schaalt */
    max-width: 100%;
}

/* ----------------------------------------------------------------
   MOBIELE STIJLEN (Aanvulling op je bestaande @media query)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .header-content-wrapper {
        flex-direction: column; /* Stapel logo en taalmenu op elkaar */
        text-align: center;
    }
    .logo-header-container {
        margin-bottom: 10px;
    }
}