*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

@font-face{ 
    font-family:'Roboto Medium';
    src: url('../fonts/roboto-medium.woff2') format('woff2');
}

/* --------------------------------------------------------------------------------- MARK: ALGEMEEN 
*/

:root{
    /* Achtergronden */
    --color-background: #ffffff;
    --form-background: #e6e6e9;
    --ns-yellow: #ffc710;
    --color-background-input: #ffffff;

    /* Content */
    --color-content-default: #1f2937;
    --color-content-default-inverse: #ffffff;
    --color-content-emphasis: #003082;
    --color-content-subtle: rgba(0, 0, 0, 0.5);

    /* Validatie */
    --color-content-info: #0052cc;
    --color-content-success: #2e7d5b;
    --color-content-error: #d90429;

    /* Borders & inputs */
    --color-border-input: #d1d5db;
    --help-text: #6B7280;
}

body{
    background-color: var(--form-background);

    font-family: 'Roboto Regular', sans-serif;
    line-height: 1.5;
}

header{
    color: var(--color-content-error);
    background-color: var(--ns-yellow);

    display: flex;
    justify-content: center;

    padding-top: 0.7em;

    top: 0;
    height: clamp(180px, 30vh, 320px);
    width: 100%;

    position: absolute;
    z-index: -1;
}

main section:first-of-type{
    margin-bottom: 1em;
}

fieldset{
    display: flex;
    flex-direction: column;
}

button{
    margin: 1em auto;
    padding: 0.2em 0.5em;
}

button:hover{
    opacity: 0.9;
}

button:focus-visible{
    outline: 3px solid var(--color-content-emphasis);
    outline-offset: 3px;
}

h1{
    color: var(--color-content-emphasis);   
    font-family: 'Roboto Medium', sans-serif;
    font-size: clamp(1.375em, 1.125em + 0.8333vi, 1.75em);
    padding-top: 0.5em;
}

legend{
    font-size: clamp(1.125em, 1.0417em + 0.2778vi, 1.25em);
    color: var(--color-content-info);
    margin-bottom: 0.2em;
}

input,
select,
textarea{
    color: var(--color-content-info);
    font-size: 1em;
    line-height: 1.4;
    width: 100%;
}

main section p{
    color: var(--color-content-info);
    font-size: 1em;
}

button{
    background-color: var(--color-content-emphasis);
    color: var(--color-background);

    border-radius: 6px;

    padding: clamp(0.8em, 1.5vw, 1.2em) clamp(1.5em, 3vw, 2.5em);

    display: block;
    margin: 2em auto;
}

main{
    background-color: var(--color-background);
    border-radius: 6px;

    z-index: 1;

    width: min(90%, 700px);
    margin: 3em auto;
    padding: clamp(1em, 2vw, 2em);
}

/* --------------------------------------------------------------------------------- MARK: FORMULIEREN 
*/

input[type="text"],
input[type="date"],
input[type="file"],
input[type="e-mail"],
input[type="tel"]{
    color: var(--color-content-subtle);
    font-size: 16px;
    background-color: var(--color-background-input);

    border: 1px solid var(--color-border-input);
    border-radius: 6px;

    padding: 16px;
}

input[type="file"]{
    margin-top: 1em;
}

fieldset{
    border: none;
}

label{
    display: flex;
    flex-direction: column;

    margin-bottom: 12px;
}

/* Radio buttons */
.radio{
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.radio input[type="radio"]{
    -webkit-appearance: none;
    appearance: none;
    
    /* Bron: Hier heeft Vasilis me mee geholpen in plaats van display:none, 
    Anders werkte met tab heen en weer gaan niet */
    position: absolute;
    left: -100000em;
}

.radio > label{
    background-color: var(--color-background-input);
    color: var(--color-content-default);

    display: block;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid var(--color-border-input);
    cursor: pointer;

    transition: all 0.15s ease;
}

.radio > label:hover{
    border-color: var(--color-content-emphasis);
    background-color: var(--form-background);
}

.radio > label:has(input:checked){
    border-color: var(--color-content-emphasis);
    background-color: var(--color-content-emphasis);
    color: var(--color-content-default-inverse);
}

.radio > label:has(input:focus-visible){
    outline: 3px solid var(--color-content-emphasis);
    outline-offset: 2px;
}

.legend-titel{
    color: var(--color-content-emphasis);   
    font-family: 'Roboto Medium', sans-serif;
    font-size: clamp(1.125em, 1.125em + 0.8333vi, 1.75em);

    border-bottom: solid 1px var(--ns-yellow);
}

/* --------------------------------------------------------------------------------- MARK: VALIDATIE & FEEDBACK 
*/

input.error{
    border-color: var(--color-content-error);
}

input.success{
    border-color: var(--color-content-success);
}

.error-message{
    display: none;
    color: var(--color-content-error);
    font-size: 0.95em;

    margin-top: 0.2em;
}

.help-text{
    color: var(--help-text);
    font-size: 0.8em;

    margin-top: 0.2em;
}

label{
    position: relative;
}

label input{
    padding-right: 2em;
    position: relative;
}

.checkmark,
.error-icon{
    position: absolute;
    right: 0.7em;
    top: 50%;

    display: none;
}

/* Ook een 2 omdat hij bij bsn niet goed styled door de hulptekst */
.checkmark2,
.error-icon2{
    position: absolute;
    right: 0.7em;
    top: 40%;

    display: none;
}

.checkmark,
.checkmark2{
    color: var(--color-content-success);
}

.error-icon,
.error-icon2{
    color: var(--color-content-error);
    font-weight: bold;
}

/* :placeholder-shown = true wanneer het inputveld leeg is en de placeholder zichtbaar is */
input:valid:not(:placeholder-shown) ~ .checkmark,
input:valid:not(:placeholder-shown) ~ .checkmark2{
    display: block;
}

input:invalid:not(:placeholder-shown) ~ .error-icon,
input:invalid:not(:placeholder-shown) ~ .error-icon2{
    display: flex;
}

/* Toon foutmelding wanneer input ongeldig is en niet leeg */
/* Bron: MDN Web Docs – :invalid + :placeholder-shown */
input:invalid:not(:placeholder-shown) ~ .error-message{
    display: block;
}

input:focus-visible{
    outline: 2px solid var(--color-content-emphasis);
    outline-offset: 2px;
}

/* Formulier versturen */
body.submitted main{
    opacity: 0.4;
    filter: blur(2px);
    pointer-events: none;
}

body.submitted::after{
    content: "Het formulier is succesvol verstuurd";
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;

    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn{
    to{
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------------- MARK: OPENKLAPPEN & TRANSITIE 
*/

/* --------------- Standaard vragen ------------*/
.klaptopen{
    display: none;
}

fieldset:has(input[value="ja"]:checked) + .klaptopen{
    display: block;
}

.volgende-vraag{
    view-transition-name: volgende-vraag;
}

::view-transition-old(volgende-vraag){
    animation: 0.25s ease-out both move-out-tekst;
}

::view-transition-new(volgende-vraag){
    animation: 0.35s ease-in both move-in-tekst;
}

@keyframes move-out-tekst{

    from{
        opacity: 1;
    }

    to{
        opacity: 0;
    }
}

@keyframes move-in-tekst{

    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }

}

/* --------------- Adres in NL of Buitenland ------------*/
.adres > fieldset:nth-of-type(2),
.adres > fieldset:nth-of-type(3){
    display: none;
}

fieldset:has(input[value="nederland"]:checked) + fieldset{
    display: block;
}

fieldset:has(input[value="buitenland"]:checked) + fieldset + fieldset{
    display: block;
}

#adres-nederland{
    view-transition-name: adres-nederland;
}

#adres-buitenland{
    view-transition-name: adres-buitenland;
}

@keyframes move-out{

    from{
        transform: translateY(0%);
        opacity: 0;
    }

    to{
        transform: translateY(-100%);
        opacity: 1;
    }
}

@keyframes move-in{

    from{
        transform: translateY(100%);
        opacity: 1;
    }

    to{
        transform: translateY(0%);
        opacity: 0;
    }

}

::view-transition-old(adres-nederland),
::view-transition-old(adres-buitenland){
    animation: 0.4s ease-in both move-out;
}

::view-transition-new(adres-nederland),
::view-transition-new(adres-buitenland){
    animation: 0.4s ease-out both move-in;
}

/* --------------- BSN of RSIN kiezen ------------*/
.bsn,
.becon,
.protocol{
    display: none;
}

fieldset:has(input[value="bsn"]:checked) .bsn,
fieldset:has(input[value="becon"]:checked) .becon,
fieldset:has(input[value="protocol"]:checked) .protocol{
    display: block;
}