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

:root {
    --primary-color: #ffc917;
    --primary-color-dark: #f0be19;
    --secondary-color: #003082;
    --tertiary-color: #e6e6e9;
    --tertiary-color-dark: #ababab;
    --selected-color: #0063d3;
    --white: #fff;
    --black: #000;
    --text-color: #070721;
    --link-color: #0063d3;
    --warning-color: #e2103d;
    --good-color: #00a888;

    --font-family: 'Segoe UI', Verdana, sans-serif;

    --size-text-step: clamp(1.2em, 1em + 0.5vw, 1.4em);
    --size-text-legend: clamp(1.1em, 0.95em + 0.4vw, 1.2em);
    --size-text-label: clamp(0.9em, 0.85em + 0.3vw, 1em);

    /* Custom groottes voor verschillende maten van inputs, voor consistente styling */
    --input-width-tiny: 5em;
    --input-width-small: 8em;
    --input-width-medium: 16em;
    --input-width-big: 20em;
    --input-width-largge: 100%;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: var(--font-family);
    background: var(--primary-color);
    overflow-x: hidden;
}

#school-warning {
    background: var(--warning-color);
    color: white;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    padding: .2em;
    font-size: 1.3em;
}

h1 {
    padding: .8em 2em;
    background: var(--secondary-color);
    color: var(--white);
    width: 100%;
}

form {
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 2em;
    border-radius: 2em;
    position: relative;

    >fieldset>legend {
        font-weight: bold;
    }

    p {
        margin: 1em 0;
    };
}

#form-background {
    width: 100%;
    background: var(--primary-color);
    padding: 1.5em 0em 1.5em 0em;

}

fieldset {
    display: flex;
    flex-direction: column;
    border:none;

    fieldset {
        margin-top: 1.5em;
    }
}

/* Specifiek voor 1 situatie waar de margin lager moet zijn */
.will-dependent-fields {
    > fieldset >fieldset:first-of-type {
        margin-top: .5em;
    }
}

legend {
    font-size: var(--size-text-legend);
    color: var(--secondary-color);
}

label {
    font-size: var(--size-text-label);
    display: flex;
    flex-direction: column;
}

.tiny-input {
    width: var(--input-width-tiny);
}

.small-input {
    width: var(--input-width-small);
}

.medium-input {
    width: var(--input-width-medium);
}

.big-input {
    width: var(--input-width-big);
}

.large-input {
    width: var(--input-width-largge);
}

input:user-invalid {
    border: 2px solid var(--warning-color);
    border-radius: 4px;
}

input:user-valid {
    border: 2px solid var(--good-color);
    border-radius: 4px;
}

.input-name {
    display: flex;
    flex-direction: row;
    gap: 1em;
    flex-wrap: wrap;
    width: 100%;
}

.radio-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;

    label {
        text-align: center;
        max-width: 20%;
    }
}

/* Hulp van AI: prompt: how do I style a radio button so that the label is inside of the button? */
.radio-button {
    display: inline-block;
    padding: 0.6rem 1rem;
    border: 2px solid var(--tertiary-color);
    border-radius: 6px;
    min-width: 5em;
    width: 100%;
    margin: 0.5em 0.5em 0.5em 0;

    input {
        position: absolute;
        /* Alleen ontzichtbaar, zodat error melding nog op scherm staat en niet met display: none. Vasilis had hiermee geholpen */
        opacity:0;
    }

    /* hover voor normale radios */
    &:has(input:not(:disabled):hover) {
        border: 2px solid var(--selected-color);
        color: var(--secondary-color);
    }

    /* Hover voor disabled radios */
    &:has(input:disabled:hover) {
        border: 2px solid var(--tertiary-color-dark);
        color: var(--tertiary-color-dark);
        background: var(--tertiary-color);
        cursor: not-allowed;
    }

    &:has(input:focus){
        border: 2px dashed var(--selected-color);
        color: var(--secondary-color);
    }

    &:has(input:checked){
        border: 2px solid var(--selected-color);
        color: var(--secondary-color);
    }    
}

input:disabled:hover {
    border: 2px solid var(--tertiary-color-dark);
    color: var(--tertiary-color-dark);
    background: var(--tertiary-color);
    cursor: not-allowed;

}

input[type="text"], input[type="number"], input[type="date"] {
    padding: 0.5em;
    margin: 0.5em 0.5em 0.5em 0;
}

/* Selector geleerd van AI: prompt: How would I style the button of this file input. Give me the selector */ 
input[type="file"]::file-selector-button {
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    color: var(--secondary-color);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: bold;
    padding: 0.625rem 1.125rem;
    text-align: center;
    white-space: no-wrap;
    box-shadow: inset 0 -.125rem 0 var(--primary-color-dark);
    transition: box-shadow .15s ease-in-out;
}

input[type="file"]::file-selector-button:hover {
    box-shadow: inset 0 -3.125rem 0 var(--primary-color-dark);
}

hr {
    border: 2px solid var(--primary-color);
    width: clamp(50px, 50%, 20em);
    margin: 1em 0;
}

.required-warning {
    color: var(--secondary-color);
    font-size: 1em;
    font-style: italic;
}

/* Asteriks voor elke vraag die required is */
label:has(input:required) span::after,
fieldset:not(.step):has(input[type="radio"][required]) > legend::after,
fieldset:has(>input[type="date"][required]) legend::after,
fieldset:not(.step):not(:has(label)):has(input[required]) legend::after,
.required-warning::before {
  content: " *";
  color: red;
  font-weight: bold;
}

.step.inactive {
    display: none;
    
}

.step.active {
    display: block;
    height: 65vh;
    overflow-y: auto;
    /* Extra ruimte voor als er gescrolled moet worden dat inputs niet tegen buttons aankomen */
    padding-bottom: 1.5em;
}

#step-navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#paginator {
    color: var(--secondary-color);
}

#step-buttons {
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: flex-end;
}

/* Styling van de button: https://www.ns.nl/?utm_source=google&utm_medium=Paid_Search&utm_campaign=NSR-CORP-BR-corporate_C13090&utm_content=&utm_term=ns&utm_id=google_ads_16495705419&gad_source=1&gad_campaignid=16495705419&gbraid=0AAAAADPhMsdFM9X0aDbt-uVlAm0xCiJis&gclid=CjwKCAiAwNDMBhBfEiwAd7ti1JzSFy1babL4UMYozV751sv8AwSPa_cla5f79mxyneg3VEzVRzMM6RoC-mwQAvD_BwE */
#next-step-button,
#previous-step-button {
    background: var(--link-color);
    border: none;
    border-radius: 4px;
    color: var(--white);
    font-size: 1rem;
    padding: 0.625rem 1.125rem;
    text-align: center;
    white-space: no-wrap;
    box-shadow: inset 0 -.125rem 0 var(--secondary-color);
    transition: box-shadow .15s ease-in-out;
}

#next-step-button:hover,
#previous-step-button:hover {
    box-shadow: inset 0 -3.125rem 0 var(--secondary-color);
}

.previousBtn {
    display: none;
}

.previousBtn-active {
    display: block;
}


/* Pattern 1 = Onderdelen niet meer laten zien als er bepaalde keuze gemaakt is */
.married-dependent-fields,
.marriage-recorded-dependent-fields,
.children-dependent-fields,
.deceased-child-dependent-fields,
.will-dependent-fields,
.show-number-of-beneficiaries {
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* Weghalen wanneer "Nee" is geselecteerd*/
.step:has(input[name="married"][value="no"]:checked) .married-dependent-fields,
.step:has(input[name="marriage-recorded"][value="no"]:checked) .marriage-recorded-dependent-fields,
.step:has(input[name="had-children"][value="no"]:checked) .children-dependent-fields,
.step:has(input[name="child-deceased"][value="no"]:checked) .deceased-child-dependent-fields,
.step:has(input[name="had-will"][value="no"]:checked) .will-dependent-fields,
.step:has(input[name="are-beneficiaries"][value="no"]:checked) .show-number-of-beneficiaries {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}