@font-face {
    font-family: 'nstype';
    src: url('../fonts/nssans-regular.woff2') format('woff2');
}

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    font-family: 'nstype', Arial, Helvetica, sans-serif;
}

:root {
    color-scheme: light;
    --white-bg:light-dark(#ffffff, #111d2d);
    --white-bg-print:light-dark(#ffffffea, #111d2dc0);
    --grey-bg:light-dark(#f4f4f887, #142236);
    --print-button:light-dark(#003082, #0063d3);
    --print-button-hover:light-dark(#0063d3, #003082);
    --ns-yellow:light-dark(#ffc917, #c1970e);
    --ns-yellow-hover: #e7b81d;
    --invalid-input: light-dark(#9b2929, #ea3131);
    --ns-blue-text:light-dark(#003082, #f1f1f1);
    --ns-blue-link:#0063d3;
    --ns-green-progress: #00a888;
    --ns-darkpurple-infotext: light-dark(#503fa7, #a39bc9);
    --ns-darkpurple-infohover: #7e69e3;
    --ns-darkpurple-bg-border:light-dark(#7163b738, #7163b7bc);
    --ns-darkpurple-bg: light-dark(#c0b9e433, #4f467bbb);
    --ns-darkpurple-bg-bigscreen: light-dark(#efecff, #7e72c471);
    --ns-lightpurple-info: #f5f3fe;
    --ns-lightpurple-infoborder:#dcd6fb;
    --boxshadow: light-dark(#e6e6e6, #111e32);
    
    &:has(#theme:checked) {
        color-scheme: dark;
    }
}

/* ************************************************

header and footer styling 'v'

************************************************ */

header input[type="checkbox"] {
    display: none;
}

body {
    background-color: var(--grey-bg);
    color: var(--ns-blue-text);
    overflow-x: clip;
}

main {
    display: flex;
    justify-content: center;
}

header, footer {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    h1 {
        font-size: 2em;
        padding: 0;
        margin: .5em 0 0 0;

        @media (max-width: 500px) {
            font-size: 1.8em;
        }
    }

    p {
        font-size: 0.8em;
        padding: 0;
        margin: 1em 0 .2em 0;
    }
}

header {
    box-shadow: 0px 3px 3px var(--boxshadow);
    background-color: var(--white-bg);
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 6em;
}

.nsster {
    position: absolute;
    width: 3em;
    top: 1.5em;
    right: 1em;
    transition: 200ms;


    @media (max-width: 700px) {
        width: 2.5em;
    }

    @media (max-width: 500px) {
        width: 2em;
        transition: 200ms;
        top: 3em;
    }
}

.nsster:hover {
    transform: rotate(20deg);
}


.nslogohead {
    position: absolute;
    left: 1em;
    top: 1em;;
    display: block;
    width: 5em;
    height: auto;
    margin-top: 1em;


    @media (max-width: 700px) {
        width: 3em;
        transition: 200ms;
        top: 1.5em;
    }

    @media (max-width: 500px) {
        width: 2em;
        transition: 200ms;
        top: 3em;
    }
}

footer {
    padding: 1em;
    box-shadow: 0px -3px 3px var(--boxshadow);
    background-color: var(--white-bg);
}

footer img {
    width: 10em;
    position: absolute;
    right: -20em;
    transition: 2s;

    @media (max-width: 500px) {
        display: none;
    }
}

footer:hover img {
    transform: translateX(-200em);
}

.nslogo {
    width: 4em;
    color: var(--ns-blue-text);
    transition: 200ms;

    @media (max-width: 500px) {
        width: 2.3em;

    }
}

footer a:hover .nslogo {
    color: var(--ns-yellow);
}


/* ************************************************

form styling 'v'

************************************************ */

form {
    margin-bottom: 1em;
    width: 100%;
    max-width: 40em;
}


fieldset {
    border: none;
    padding: 0;
    margin: .5em;
    
}

/* First legend on page */
form > fieldset > legend {
padding: 0;
font-size: 1.3em;
padding: 0.5em 0 1em 1em;
text-shadow: 
    0.3px 0 currentColor,
    -0.3px 0 currentColor;

    @media (max-width: 500px) {
        font-size: 1.2em;
    }
}


fieldset > fieldset{
    display: grid;
    gap: 0.75rem;
    padding: 1em;
    background-color: var(--white-bg);
    border: none;
    border-radius: 10px;
    margin-bottom: 2em;

    legend {
        font-size: 1.1em;
        padding-bottom: .5em;
        border-bottom: 3px solid var(--ns-yellow);
        border-bottom-right-radius: 3px;
        text-shadow: 
            0.3px 0 inherit,
            -0.3px 0 inherit;

            @media (max-width: 500px) {
                font-size: 1em;
            }
    }
}

label {
    cursor: pointer;
}

label:has(input[type="text"], input[type="number"], input[type="date"], label:has(datalist)) {
    margin-bottom: .5em;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    @media (max-width: 500px) {
        font-size: .9em;
    }
}

.verplicht {
    font-size: .7em;
}

/* *****************************************************************

Styling for radio buttons in labels + CSS validation 'v'

******************************************************************** */

input[type="text"]:not(.voornaam), input[type="number"], label:has(datalist) input {
    text-transform: capitalize;
}

input[type="text"], input[type="number"], input[type="date"], label:has(datalist) input {
    appearance: none;
    width: min(100%, 44em);
    height: 3em;
    background-color: var(--white-bg);
    border: 1px solid rgb(160, 160, 160);
    border-radius: 5px;
    margin-top: .25em;
    color: var(--ns-blue-text);


        &:focus {
            outline: none;
            border-color: var(--ns-yellow);
            box-shadow: 0 0 0 2px var(--ns-yellow);
            transition: 200ms;
        }

        &:user-valid{
            border-color: var(--ns-green-progress);
            box-shadow: 0 0 0 2px var(--ns-green-progress);
            transition: 200ms;
        }

        &:user-invalid{
            border-color: var(--invalid-input);
            box-shadow: 0 0 0 2px var(--invalid-input);
            transition: 200ms;
        }

        @media (max-width: 500px) {
            height: 2.3em;
        }
}

.voornaam, input[type="date"] {
    text-transform: uppercase;

}

/* *****************************************************************

Specific styling for radio buttons in labels + CSS validation 'v'

******************************************************************** */
.radioselect {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid #a0a0a0;
    border-radius: 0.5rem;
    cursor: pointer;
    position: relative;

        &:hover {
            border: 2px solid var(--ns-yellow);
            border-color: var(--ns-yellow);
        }

        @media (max-width: 500px) {
            font-size: 0.9em;
        }
}

.radioselect input[type="radio"] {
    appearance: none;
    position: absolute;
}

.radioselect:has(input:checked) {
    border-color: var(--ns-yellow);
    border: 2px solid var(--ns-yellow);
}

.radioselect:has(input:user-invalid) {
    border: 2px solid var(--invalid-input);
    border-color: var(--invalid-input);
}

.radioselect:has(input:user-valid:checked) {
    border: 2px solid var(--ns-green-progress);
    border-color: var(--ns-green-progress);
}

.radioflex {
    display: flex;
    gap: .5em;
    align-items: center;
}

fieldset:has(input[type="radio"]) {
    position: relative;
}

fieldset:has(input[type="radio"]) legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ************************************************

Extra information in details element 'v'

************************************************ */

fieldset:has(input[type="radio"]) details.help summary {
    position: absolute;
    top: 1em;
    right: 1em;
    list-style: none;
    font-size: 0.9rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background-color: var(--ns-darkpurple-infotext);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover {
        background-color: var(--ns-darkpurple-infohover);
        transition: 200ms;
    }

}

fieldset:has(input[type="radio"]) details.help p {
    margin-top: 0.5rem;
}

.help summary::before {
    content: "?";
}

.help summary {
    list-style: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5rem;
    cursor: pointer;
    display: inline-block;
    padding: 0;
}

details span {
    text-shadow: 
    0.3px 0 inherit,
    -0.3px 0 inherit;
}

.help p {
    font-size: .9em;
    color: var(--ns-darkpurple-infotext);
    margin: 1em;
    padding: 1em;
    background-color: var(--ns-darkpurple-bg);
    border: 1px solid var(--ns-darkpurple-bg-border);
    border-radius: 10px;

    @media (min-width: 1280px) {
        background-color: var(--ns-darkpurple-bg-bigscreen);
        width: 20em;
        position: absolute;
        top: -2em;
        right: -23em;
    }
}

details[open] summary {
    background-color: var(--ns-green-progress);
    transform: translateY(10px);

    @media (min-width: 1280px) {
        transform: translateY(0px);
    }
}

details[open] summary::before {
    content: "×";
}

/* ************************************************

CSS validation message 'v'

************************************************ */


/* https://codepen.io/3hos15/pen/PwGGGRM  code uit workshop van Victor zelf over getypt*/
.error {
    color: #ef6565;
    display: none;
    font-size: .8em;
    margin-top: .3em;
}

label:has(input:user-invalid) .error {
    display:block;
}

div:has(input:user-invalid) .error {
    display: block;
}

/* ******************************

Button styling 'v'

********************************* */


button[type="submit"], .terugform, .print{
    background-color: var(--ns-yellow);
    color: var(--ns-blue-text);
    border: none;
    width: fit-content;
    border-radius: 10px;
    padding: 0.75em 1.5em;
    margin-bottom: 1.5em;
    font-size: 1em;
    cursor: pointer;
    font-weight: 600;

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

        @media (max-width: 500px) {
            width: 100%;
            padding: 0.75em;
        }
}




/* ************************************************

prog disclosure

************************************************ */

/* Geinspireerd door code van Jean-Carlos */
#overledene-getrouwd:has(input[value="nee"]:checked) ~ #overledene-akte,
#overledene-getrouwd:has(input[value="nee"]:checked) ~ #overledene-verrekenbeding,
#overledene-getrouwd:has(input[value="nee"]:checked) ~ #partnerschapsvoorwaarden {
    display: none;
}

#overledene-akte:has(input[value="nee"]:checked) ~ #overledene-verrekenbeding,
#overledene-akte:has(input[value="nee"]:checked) ~ #partnerschapsvoorwaarden {
    display: none;
}

#overledene-kinderen:has(input[value="nee"]:checked) ~ #kinderen-overleden,
#overledene-kinderen:has(input[value="nee"]:checked) ~ #kinderen-kind {
    display: none;
}

#overledene-testament:has(input[value="nee"]:checked) ~ #datum-testament,
#overledene-testament:has(input[value="nee"]:checked) ~ #gegevens-notaris {
    display: none;
}


/* ************************************************

SUMMARY PAGE

************************************************ */


.samenvatting {

    main {
        display: flex;
        justify-content: center;
    }


    #summary {
        margin-bottom: 1em;
        max-width: 40em;
        padding: em;
    }
    section {
        margin-top: 1em;
        margin-bottom: 2em;
        background-color: var(--white-bg);
        padding: .5em;
        border-radius: 20px;
    }
    h2 {
        font-size: 1.5em;
        padding: 0;
        margin: .5em 0 0 0;

        @media (max-width: 500px) {
            font-size: 1.3em;
        }
    }

    p {
        margin: 0.5em 0;
    }


    @media print {
        * {
            margin: 0;
            padding: 0;
        }
    
        body > * {
            display: none;
        }
    
        section {
            background-color: var(--white-bg-print);
        }

        #summaryContent, #summaryContent * {
            display: block;
        }
    
        a, button {
            display: none;
        }
    
        #summaryContent {
            background-image: url("../images/nstrein.png");
            background-repeat: repeat;
            background-size: 4em 2em;
            padding: 1.25em;
        }
    }
}


.terugform {
    text-decoration: none;
}

.print {
    background-color: var(--print-button);
    color: white;
}

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