/*
Theme Name: Lab Zero Child Theme - Starten
Description: Specific styles for the starten page.
*/

/* ADV FORM BLOCK STARTEN */
/* De hoofdcontainer van de opties */
/* De hoofdcontainer voor 2 kolommen */
.mijn-grid-formulier .kb-radio-check-item {
    gap: 20px !important; 
    column-gap: 20px !important;
    row-gap: 20px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* Verwijder de standaard Kadence margin die de grid verstoort */
.mijn-grid-formulier .kb-radio-check-item > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* De styling van de blokken zelf */
.mijn-grid-formulier .kb-radio-check-item,
.mijn-grid-formulier .kb-checkbox-check-item {
    display: grid !important;
    gap: 20px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* 2. Verwijder standaard margins van de omhullende div's */
.mijn-grid-formulier .kb-radio-check-item > div,
.mijn-grid-formulier .kb-checkbox-check-item > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. De styling van de blokken (Labels) */
.mijn-grid-formulier label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* HOOGTE: Verlaagd naar ongeveer 40% (was 120px-140px, nu ~55px) */
    min-height: 55px !important; 
    width: 100% !important;
    
    /* Randen en achtergrond */
    border: 1px solid #fbbf23 !important;
    border-radius: 4px !important;
    background-color: #FCFBF7 !important;
    
    /* PADDING: Minder padding top/bottom */
    padding: 10px 15px !important; 
    cursor: pointer;
    transition: all 0.25s ease;
    box-sizing: border-box !important;

    /* JOUW H6 SPECIFICATIES */
    color: #003466 !important;
    font-family: "Clash Display", sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 0.95rem + 0.23vw, 1.125rem) !important;
    line-height: 1.2 !important;
    text-wrap: balance !important;
    margin: 0 !important;
}

/* TARGET DE VRAAG BOVEN DE BLOKKEN */
.mijn-grid-formulier .kb-adv-form-label, 
.mijn-grid-formulier legend {
    display: block !important;
    color: #003466 !important;
    font-family: "Clash Display", sans-serif !important;
    font-weight: 600 !important;
	/* Gebruik flexbox om de tekst te positioneren */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Dwingt tekst naar de bodem */
    font-size: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem) !important;
    line-height: 1.2 !important;
    text-wrap: balance !important;
	/* HOOGTE: 3 line-heights (3 * 1.2 = 3.6em) */
    min-height: 2.4em !important;
    margin-bottom: 20px !important; /* De afstand naar de blokken */
    margin-top: 15px !important;
    text-transform: none !important;
}

/* Zorg dat de container van het label geen extra padding heeft die de top-align verpest */
.mijn-grid-formulier .kb-adv-form-label-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 4. Verstop de standaard inputs (zowel radio als checkbox) */
.mijn-grid-formulier input[type="radio"],
.mijn-grid-formulier input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 5. HOVER status voor beide */
.mijn-grid-formulier label:hover {
    background-color: #fbbf23 !important;
}

/* 6. ACTIEVE/GESELECTEERDE status voor beide */
.mijn-grid-formulier input:checked + label {
    background-color: #fbbf23 !important;
    border-color: #fbbf23 !important;
}


/* STARTEN - De basisstijl van de voortgangsbalk */
/* =========================================
   1. CONTAINER & UITLIJNING (LEAN & CLEAN)
   ========================================= */
/* Standaard block-layout neemt van nature 100% breedte in */
.dynamische-progress {
    display: block !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

/* Forceer de Kadence elementen naar 100% breedte */
.dynamische-progress .wp-block-kadence-progress-bar,
.dynamische-progress .kt-progress-bar-container,
.dynamische-progress svg {
    display: block !important;
    width: 100% !important;
}

/* =========================================
   2. VERWIJDER ORIGINELE KADENCE TEKSTEN
   ========================================= */
/* Dit doodt gegarandeerd alle dubbele teksten en percentages van Kadence zelf */
.dynamische-progress .kb-progress-label-wrap {
    display: none !important;
}

/* =========================================
   3. JOUW EIGEN TEKST (GECENTREERD)
   ========================================= */
.dynamische-progress::before {
    display: block !important;
    text-align: center !important; /* Centreert de tekst simpel en effectief */
    font-family: "Clash Display", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #003466 !important;
    margin-bottom: 10px !important;
    transition: all 500ms ease-out !important;
    content: "Voortgang 10%"; /* Startwaarde */
}

/* =========================================
   4. SVG KLEUREN & ANIMATIE
   ========================================= */
.dynamische-progress svg path:nth-child(1) { stroke: #FCFBF7 !important; } /* Achtergrond */
.dynamische-progress svg path:nth-child(2) { 
    stroke: #fbbf23 !important; /* Voortgangskleur */
    transition: stroke-dashoffset 500ms ease-out !important; 
}

/* =========================================
   5. DE LOGICA (TEKST & BALK SYNCHROON)
   ========================================= */
/* Stap 1: 40% */
body:has(.stap-1 input:checked) .dynamische-progress::before { content: "Voortgang 40%"; }
body:has(.stap-1 input:checked) .dynamische-progress svg path:nth-child(2) { stroke-dashoffset: 60 !important; }

/* Stap 2: 70% */
body:has(.stap-2 input:checked) .dynamische-progress::before { content: "Voortgang 70%"; }
body:has(.stap-2 input:checked) .dynamische-progress svg path:nth-child(2) { stroke-dashoffset: 30 !important; }

/* Stap 3: 100% */
body:has(.stap-3 input:checked) .dynamische-progress::before { content: "Voortgang 100%"; }
body:has(.stap-3 input:checked) .dynamische-progress svg path:nth-child(2) { stroke-dashoffset: 0 !important; }

/* 1. STYLING VOOR DE LABELS (DE VRAGEN) */
.kb-adv-form-label {
    font-family: "Satoshi", sans-serif !important;
    color: #003466 !important;
    font-weight: 600 !important; /* Bold voor leesbaarheid */
    font-size: 1.1rem !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* 2. STYLING VOOR DE INPUT VELDEN (TEKST, EMAIL, TEL) */
.kb-field.kb-text-field,
.kb-field.kb-email-field,
.kb-field.kb-tel-field, 
.kb-field.kb-number-field {
    font-family: "Satoshi", sans-serif !important;
    background-color: transparent !important; /* Of een kleur naar keuze */
    color: #003466 !important; /* Kleur van de ingetypte tekst */
    border: 1px solid #003466 !important;
    padding: 12px 15px !important;
    border-radius: 4px !important;
}

/* 3. STYLING VOOR DE PLACEHOLDERS (DE HULPTEKST) */
.kb-field::placeholder {
    font-family: "Satoshi", sans-serif !important;
    color: #003466 !important;
    opacity: 0.6 !important; /* Iets lichter voor contrast */
}

.naam-kennen::before {
    /* De tekstinhoud */
    content: "Laten we elkaar leren kennen";
    pointer-events: none;
    
    /* Display & Uitlijning */
    display: block;
    text-align: center;
    
    /* Jouw H2 Specificaties */
    font-family: "Clash Display", sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(2rem, 1.45rem + 2.73vw, 3.5rem) !important;
    line-height: var(--lh-tight, 1.1) !important; /* Gebruikt je variabele, fallback naar 1.1 */
    
    /* Tekst gedrag */
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: anywhere;
    
    /* Spatiëring */
    margin-bottom: 0.6em;
    color: #003466; /* De kleur die we eerder voor je labels gebruikten */
}

/* We zetten de animatie direct op de velden */
.kb-adv-form-field, 
.kb-adv-form-submit {
    /* De animatie start zodra het element 'ge-rendered' wordt (dus bij display: block) */
    animation: slideUpFadeIn 500ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
    
    /* Zorg dat ze onzichtbaar starten VOORDAT de animatie begint */
    opacity: 0;
}

/* De definitie van de beweging */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Uitzondering voor stap 1: we willen niet dat die animeert als de pagina laadt */
.stap-1 {
    animation: none !important;
    opacity: 1 !important;
}