/* MARK: ROOT
*/
:root{
    /* Color variables */
    --colorFlatTextContent: rgb(37,36,40);
    --colorFlatTextSubtle: rgb(115,116,122);
    --colorTextGrayedOut: rgb(115,116,122);
    --colorEmphasisTextContent: rgb(22,55,124);

    --buttonColor: rgb(37,99,202);
    --buttonHover: rgb(28, 69, 155);
    --buttonClick: rgb(22, 55, 124);
    --buttonText: rgb(255, 255, 255);

    --colorAccent: rgb(247, 200, 71);
    --borderColor: rgb(228, 229, 232);
    --checkMarkColor: 	rgb(91, 220, 123);

    --backgroundColorPrimary: rgb(255, 255, 255);
    --backgroundColorSecondary: rgb(228, 229, 232);

    --fontSizePageTitle: 3em;
    --fontSizePrimary: 2.5em;
    --fontSizeSecondary: 1.5em;
    --fontSizeTertiary: 1.25em;
}

/* ============================
MARK: Basic page and biggest sections styling
===============================*/

body {
    background-color: var(--backGroundColorPrimary);
    margin: 0 0 4em 0;
    background-color: var(--backgroundColorSecondary);
}

* {
    font-family: Arial, Helvetica, sans-serif;
}


/* ============================
MARK: Font styling
===============================*/
h1 {
    color: var(--colorEmphasisTextContent);
    margin: 0;
}

legend {
    color: var(--colorEmphasisTextContent);
    font-size: var(--fontSizePrimary);
}

fieldset fieldset legend{
        font-size: var(--fontSizeSecondary);
}


/* ============================
MARK: page regions styling
===============================*/
/* Header */
header{
    margin-bottom: 3em;
    padding: 2em 1em;
    box-shadow: 0px 0px 25px rgb(0 0 0 / 0.2);

    background-color: var(--backgroundColorPrimary);
    position: sticky;
    top: 0;
    max-width: 100%;
    z-index: 500;
}

/* Main */
main{
    margin: 0 10dvw;
}

@media (max-width: 600px) {
    main{
        margin: 0 1em;
    }
}

/* footer */

footer > div {
    height: 1em;
    position: fixed;
    bottom: 0;
    background-color: var(--buttonHover);

    animation: progressBar linear;
    animation-timeline: scroll();
}

@keyframes progressBar {
    0% {
        width: 0%;
    }
    100%{
        width: 100%;
    }
}

/* ============================
MARK: extra's
===============================*/
hr{
    margin: 2em 0;
    width: 100px;
    height: 5px;
    background-color: var(--colorAccent);
    border: none;
}

.warning {
    background-color: red;
    color: white;
    padding: 0.75em;
    position: fixed;
    right: 0;
    top: 0;
    border-bottom-left-radius: 1em;
    width: fit-content;
    font-size: 0.75em;
    z-index: 1000;
}

.warning p {
    margin: 0;
}

/* ============================
MARK: main sections
===============================*/
/* general */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* direct child layer */
form > div {
    position: relative;
    background-color: var(--backgroundColorPrimary);
    border-radius: 1em;

    padding: 1em;
    padding-right: 3em;

    margin: 3em 0;

}

fieldset:has(>label input[type=radio]) legend,
label:not(:has(input[type="radio"])){
    font-size: 1.25em;
}

label {
    color: var(--colorEmphasisTextContent);
}


/* ============================
MARK: Validation 
============================ */
form > div::after{
    content: "✓";

    position: absolute;
    right: 0;
    top: 0;

    display: block;
    width: 1.5em;
    aspect-ratio: 1/1;
    font-size: 1.5em;
    margin: 0.5em;
    border-radius: 10em;

    display: grid;
    place-items: center;
    
    background-color: var(--checkMarkColor);
    color: white;

    scale: 0;
    transition: 0.25s;
}

form > :has(>fieldset){
    outline-width: 0px;
    outline-color: var(--checkMarkColor);
}

form > :has(>fieldset:valid){
    outline-width: 7px;
    outline-style: solid;
    transition: 0.5s;
    transition-timing-function: cubic-bezier(.39,2,.46,.68);
}

form > div:has(>fieldset:valid)::after{
    scale: 1;
    transition: 0.5s;
    transition-timing-function: cubic-bezier(.39,2,.46,.68);
}

form:invalid{
    button[type=submit]{
        background-color: rgb(150, 150, 150);
    }
}

/* error messages */

.errorMessage p {
    margin: 0;
    margin-top: 4px;
    color: red;
    font-size: 0.75em;
    display: none;
}

label:has(input:user-invalid:not(:placeholder-shown):not([type="date"])) .errorMessage p:nth-of-type(2){
    display: block;
}

label:has(input:user-invalid:placeholder-shown) .errorMessage p:nth-of-type(1),
label:has(input:user-invalid[type="date"]) .errorMessage p:nth-of-type(1){
    display: block;
}

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

fieldset:has(>label input[type="radio"]:user-invalid)::after{
    content: "!";
    font-size: 2em;
    color: red;
    font-weight: bolder;
    position: absolute;
    right: 0;
    top: 0;
}

/* 2nd generation child layer */
    /* spacing */
fieldset fieldset:has(input[type="radio"]),
fieldset label:has(input:not([type="radio"])) {
    margin-bottom: 2.5em;
}
.nameField {
    margin-bottom: 2em;
}
input {
    margin-top: 0.5em;
}

fieldset fieldset legend {
    margin-bottom: 0.5em;
}

body main .nameField label{
    margin-bottom: 0.5em;
}


/* ============================
MARK: labels & inputs
===============================*/

/* labels */
fieldset label{
    display: block;
    color: var(--colorEmphasisTextContent);
}

/* interactives */

button{
    border: 0;
    font-size: var(--fontSizeTertiary);
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: var(--buttonColor);
    color: var(--buttonText);
}

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

button:active{
    background-color: var(--buttonClick);
}

form > button:first-of-type{
    background-color: white;
    box-shadow: inset 0 0 0 4px var(--buttonColor);
    color: var(--buttonColor);
}

form > button:first-of-type:hover{
    background-color: var(--buttonHover);
    color: white;
    box-shadow: none;
}

label input[type="text"], label input[type="date"], label input[type="number"]{
    display: block;
    padding: 0.5em;
    border-radius: 0.5em;
    border-width: 1.5px;
    border-color: var(--borderColor);
    border-style: solid;
    height: 1em;

    appearance: none;
}

input[type=file]{
    display: block;
    margin-top: 0.5em;
}

input[type="file"]::file-selector-button{
    font-size: 0.75em;
}

/* name fields styling
*/

.nameField {
    display: flex;
    flex-wrap: wrap;
}

.nameField label {
    margin-right: 1em;
}

.nameField label:nth-of-type(-n + 2) input{
    width: 4em
}

/* ============================
MARK: functions
===============================*/

/* progressive question */

.targetProgressiveQuestionHide {
    display: none;
}

.progressiveQuestionHide:has(
  label:nth-of-type(1) input:checked
) ~ .targetProgressiveQuestionHide {
    display: inline;
}

.targetProgressiveQuestionGreyed {
    color: rgb(200, 200, 200);
    pointer-events: none;

    legend {
        color: rgb(200, 200, 200);
        pointer-events: none;
    }
    input{
        color: rgb(200, 200, 200);
        color: inherit;
        opacity: 30%;
    }
    label{
        color: rgb(200, 200, 200);
    }
}

.progressiveQuestionGreyed:has(
  label:nth-of-type(1) input:checked
) ~ .targetProgressiveQuestionGreyed{
    color: var(--colorFlatTextContent);
    pointer-events: all;

    > fieldset:first-of-type > legend {
        color: var(--colorEmphasisTextContent);
    }
    > fieldset > label {
        color: var(--colorEmphasisTextContent);
    }
    > fieldset > div > label {
        color: var(--colorEmphasisTextContent);
    }
    > fieldset input, > label input, > .nameField input {
         opacity: 100%;
         color: black;   
    }
    > label{
        color: var(--colorEmphasisTextContent);
    }
    .nameField label{
        color: var(--colorEmphasisTextContent);
    }
}

/* verkrijger card */

.verkrijger {
    position: relative;
    background-color: var(--colorAccent);

    border-radius: 1em;

    margin: 1em;
    margin-left: 2em;
    padding: 1em;
}

.verkrijger > button {
    position: absolute;
    right: 0;
    top: 0;

    width: 2em;
    aspect-ratio: 1/1;

    margin: 0.75em;
    padding: 0;

    background-color: transparent;
    &::before,
    &::after {
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 4px;
        background-color: var(--buttonColor);
    }

    &::before { rotate: -45deg; }
    &::after  { rotate:  45deg; }
}