* {
    box-sizing: border-box;

}

:root {

    --h-color: black;
    --pcolor: #2d2d2d;
    --background-color: #FFC917;
    --section-color: antiquewhite;
    --stroke-color: black;
    --stroke-color-h1: transparent;
    --ns-yellow: #ffc000;
    --ns-blue: #003082;
    --ns-gray: #f5f5f5;
    --ns-gray-dark: #666;
    --ns-border: #ddd;
    --ns-white: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        --h-color: white;
        --pcolor: white;
        --background-color: #424242;
        --section-color: black;
        --stroke-color: white;
        --stroke-color-h1: white;
        --ns-yellow: #ffc000;
        --ns-blue: #003082;
        --ns-gray: #f5f5f5;
        --ns-gray-dark: #666;
        --ns-border: #ddd;
        --ns-white: white;
    }
}

/* bron: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
input {
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

/* header gedeelte */
header {
    background-color: var(--ns-white);
    padding: 1em;
    margin: 0;

    nav {
        ol {
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1em;
            padding: 0;

            li {
                a {
                    svg {
                        max-width: 6em;
                        height: auto;
                        fill: var(--ns-blue);
                        transition: fill 0.3s ease;

                        &:hover {
                            fill: var(--ns-yellow);
                        }
                    }
                }

                &:nth-of-type(2) {
                    button {
                        font-family: 'NS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                        color: var(--ns-blue);
                        border: none;
                        background: none;
                        font-size: 0.9em;
                    }
                }

                &:nth-of-type(3) {
                    button {
                        font-family: 'NS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                        color: var(--ns-blue);
                        border: none;
                        background: none;
                        font-size: 0.9em;
                        display: flex;
                        align-items: center;
                        gap: 3px;
                    }
                }
            }
        }
    }
}

fieldset {
    border: 0;
}

body {
    background-color: var(--background-color);
    font-family: 'NS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
}

main {
    margin: 0.5em;

    > div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1em;
        background-color: var(--ns-gray);
        margin: -0.5em;
        padding-left: 1em;

        svg {
            color: red;
        }
    }
}

h1 {
    font-family: 'NS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    color: var(--ns-blue);
    padding-top: 1em;
}

h2 {
    font-family: 'NS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    color: var(--ns-blue);
    font-size: 1em;
}

legend {
    font-family: 'NS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    color: var(--ns-blue);
    font-size: 1em;
}

p {
    font-family: 'NS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
    color: var(--pcolor);
}

.divVan1a,
.divVan1b,
.divVan1c,
.divVan1d,
.divVan2a {
    background-color: var(--ns-gray);
    margin-bottom: 1em;
    border-radius: 10px;
}

.legend1a,
.legend1b,
.legend1c,
.legend1d,
.legend2a {
    font-size: 1.5em;
    padding: 0.5em 0;
}

._1a {
    input {
        display: block;
        margin: 0.5em 0 1em 0;
        width: 100%;
        padding: 0.75rem;
        border-radius: 5px;
        border: 2px solid var(--ns-border);
    }

    h2 {
        margin-bottom: 2em;
    }
}

/* tweede stuk 1b */
._1b-1 {
    padding: 0;
    margin-top: 1em;
}

._1b-2,
._1b-3 {
    margin-top: 2em;
    padding: 0 0;
}

._1c-1,
._1c-2,
._1c-3 {
    margin-top: 1em;
    padding: 0 0;
}

._1d-2 {
    input {
        display: block;
        margin: 0.5em 0 1em 0;
        width: 100%;
        padding: 0.75rem;
        border-radius: 5px;
        border: 2px solid var(--ns-border);
        border-bottom: 4px solid var(--ns-border);

        
    &:focus {
            border: 2px solid var(--ns-blue);
            border-bottom: 4px solid var(--ns-blue);
            outline: none;
        }
    }

    legend {
        margin: 1em 0 1em 0;
    }
}

._1d-1,
._1d-2 {
    margin-top: 1em;
    padding: 0 0;
}

label:has(input[type="radio"]:focus-visible) {
    outline: 3px solid var(--ns-blue);
    outline-offset: 2px;
}

label {
    margin: 0.5em 0 0.5em 0;

    &:has(input[type="radio"]) {
        &:hover {
            border-color: var(--ns-blue);
        }

        display: flex;
        /* align-items: center; */
        padding: 1.5rem;
        border: 2px solid var(--ns-border);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:has(input[type="radio"]:checked) {
            border-color: var(--ns-blue);
            background-color: rgba(0, 48, 130, 0.04);
        }
    }

    &:has(input[type="file"]) {
        display: flex;
        align-items: center;
        margin-top: 1em;
        padding: 1rem;
        border: 2px solid var(--ns-border);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        width: fit-content;
        margin-left: auto;
        background-color: var(--ns-blue);
        color: white;
        font-size: 1em;

        &:hover {
            background-color: var(--ns-yellow);
        }
    }
}

input {
    
    &[type="radio"] {
        appearance: none;

    }

    &[type="file"] {
        display: none;
        justify-content: flex-end;
    }

    &[type="date"] {
        width: 50%;
    }

    &[type="text"] {
        border-bottom: 4px solid var(--ns-border);
    }

    &[type="date"] {
        border-bottom: 4px solid var(--ns-border);
    }

    &:user-invalid {
        border-bottom: 4px solid red;
    }

    &:user-valid {
        border-bottom: 4px solid oklch(0.7807 0.187 143.4);
    }

}

/* progressive disclosure part */
.hidden-fieldset {
    display: none;
}

.divVan1c,
.divVan1d {
    display: none;
}

/* progressive disclosure tussen de div */
.divVan1b {
    &:has(input[value="nee"]:checked) ~ .divVan1c {
        display: block;
    }
    &[type="date"] {
        width: 50%;
    }
}

.divVan1c {
    &:has(input[value="nee"]:checked) ~ .divVan1d {
        display: block;
    }
    &[type="date"] {
        width: 50%;
    }
}

/* progressive disclosure binnen de childeren van de div */
._1b-1 {
    &:has(input[value="ja"]:checked) ~ ._1b-2 {
        display: block;
    }
}

._1b-2 {
    &:has(input[value="ja"]:checked) ~ ._1b-3 {
        display: block;
    }
}

._1c-1 {
    &:has(input[value="ja"]:checked) ~ ._1c-2 {
        display: block;
    }
}

._1c-2 {
    &:has(input[value="ja"]:checked) ~ ._1c-3 {
        display: block;
    }
}

._1d-1 {
    &:has(input[value="ja"]:checked) ~ ._1d-2 {
        display: block;
    }
}

.divVan1b {
    &:has(input[name="1bEersteVraag"][value="nee"]:checked) + .divVan1c ._1c-1,
    &:has(input[name="1bTweedeVraag"][value="nee"]:checked) + .divVan1c ._1c-1,
    &:has(input[name="1bDerdeVraag"][value="nee"]:checked) + .divVan1c ._1c-1,
    &:has(input[name="1bDerdeVraag"][value="ja"]:checked) + .divVan1c,
    &:has(input[name="1bDerdeVraag"][value="ja"]:checked) + .divVan1c ._1c-1 {
        display: block;
    }
}

.divVan1c {
    &:has(input[name="children"][value="nee"]:checked) + .divVan1d ._1d-1,
    &:has(input[name="kindOverleden"][value="nee"]:checked) + .divVan1d ._1d-1,
    &:has(input[name="zelfKindOverleden"][value="nee"]:checked) + .divVan1d ._1d-1,
    &:has(input[name="zelfKindOverleden"][value="ja"]:checked) + .divVan1d,
    &:has(input[name="zelfKindOverleden"][value="ja"]:checked) + .divVan1d ._1d-1 {
        display: block;
    }
}

.nextButton {
    margin: 1em 0 1em 1em;
    padding: 1em 2em;
    font-size: 1em;
    color: white;
    background-color: var(--ns-blue);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin-left: auto;
}

._1a {
    input {
        &:focus {
            border: 2px solid var(--ns-blue);
            border-bottom: 4px solid var(--ns-blue);
            outline: none;
        }
    }
}

._1b-3 {
    > input {
        display: block;
        margin: 0.5em 0 1em 0;
        width: 100%;
        padding: 0.75rem;
        border-radius: 5px;
        border: 2px solid var(--ns-border);
        
        &[type="date"] {
        width: 50%;
        border-bottom: 4px solid var(--ns-border);
        }

        &:focus {
            border: 2px solid var(--ns-blue);
            border-bottom: 4px solid var(--ns-blue);
            outline: none;
        }
    }

    label {
        &:nth-of-type(3) {
            display: block;
            padding-top: 1em;
        }
    }
}

._2a-2 {
    > input {
        display: block;
        margin: 0.5em 0 1em 0;
        width: 100%;
        padding: 0.75rem;
        border-radius: 5px;
        border: 2px solid var(--ns-border);

        &[type="text"] {
        border-bottom: 4px solid var(--ns-border);
        }

        &[type="number"] {
        border-bottom: 4px solid var(--ns-border);
        }

        &:user-invalid {
        border-bottom: 4px solid red;
        }

        &:user-valid {
            border-bottom: 4px solid oklch(0.7807 0.187 143.4);
        }

        &:focus {
            border: 2px solid var(--ns-blue);
            border-bottom: 4px solid var(--ns-blue);
            outline: none;
        }
    }

    legend {
        padding: 1em 0 0.5em 0;
    }
}

._2a-2-1,
._2a-2-2 {
    padding: 0;

    legend {
        padding-top: 1em;
    }
}

.verkijgerToevoegenKnop {
    margin: 1em 0 1em 1em;
    padding: 0.5em 1em;
    font-size: 1em;
    color: white;
    background-color: var(--ns-blue);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Toon foutmelding als input niet geldig is ingevuld */
.error {
    color: red;
    font-size: 0.9em;
    margin-top: 0.25em;
    display: none;
}

input:user-invalid + .error {
    display: block;
}

@media (min-width: 768px) {
    header {
        padding: 1em 20vw;
    }

    main {
        h1,
        form {
            margin-left: 20vw;
            margin-right: 20vw;
        }

        > div {
            padding-left: 20vw;
        }
    }
}