/* -------- ---- -------- */
/* -------- Text -------- */

h1 {
    font-size: 2.4rem;
}

h2 {
    padding-top: var(--large-gap);
    padding-right: var(--large-gap);
    /*padding-left: var(--pill-gap);*/
    padding-bottom: var(--pill-gap);
    font-size: 2.4rem;
    font-weight: 700;
}

h3 {
    padding-top: var(--large-gap);
    font-size: 1.8rem;
    font-weight: 700;
}

p {
}

legend {
    font-size: 1rem;
    font-weight: 700;
}

/* -------- - -------- */
/* -------- a -------- */

/* Remove blue color + underline for links in all states */
a,
a:link,
a:visited,
a:hover,
a:active {
    color: inherit; /* no blue */
    text-decoration: none; /* no underline */
}

a {
    border-style: none;
    height: var(--btn-h);
    border-radius: calc(var(--btn-h) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-a{
    display: inline;
    text-decoration: underline !important;
    height: auto;
}

/* -------- ------ -------- */
/* -------- Button -------- */

@property --btn-primary-inner-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

button {
    border-style: none;
    height: var(--btn-h);
    padding: 0 calc(var(--btn-h) / 2);
    border-radius: calc(var(--btn-h) / 2);
    display: flex;
    align-items:center;
    justify-content:center;
}

.btn-primary {
    padding: 0 calc(var(--btn-h) / 2);
    --btn-primary-inner-color: #ffffff; /* starting fill */
    /* Paint 2 backgrounds: one inside padding area and one underneath the border */
    background: linear-gradient(var(--btn-primary-inner-color), var(--btn-primary-inner-color)) padding-box, linear-gradient(35deg,var(--primary-color-2) 15%, var(--primary-color-3) 100%) border-box;
    /* background under border becomes visible when border is transparent*/
    border: 4px solid transparent;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    color: var(--text-color);
    font-weight: 700;
    /*Transition*/
    background-size: 200% 200%; /* make gradient larger for smooth movement */
    transition: 0.2s linear, --btn-primary-inner-color 0.2s ease;
}

    .btn-primary:hover {
        background-position: 100% 0;
        --btn-primary-inner-color: var(--gray-bg);
    }

    .btn-primary:active {
        --btn-primary-inner-color: #d1d1d1;
    }


.btn-secondary {
    padding: 0 calc(var(--btn-h) / 2);
    --btn-primary-inner-color: #ffffff; /* starting fill */
    /* Paint 2 backgrounds: one inside padding area and one underneath the border */
    background: linear-gradient(var(--btn-primary-inner-color), var(--btn-primary-inner-color)) padding-box, linear-gradient(35deg,var(--text-color) 15%, var(--gray-bg) 100%) border-box;
    /* background under border becomes visible when border is transparent*/
    border: 4px solid transparent;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    color: var(--text-color);
    font-weight: 700;
    /*Transition*/
    background-size: 200% 200%; /* make gradient larger for smooth movement */
    transition: 0.2s linear, --btn-primary-inner-color 0.2s ease;
}

    .btn-secondary:hover {
        background-position: 50% 0;
        --btn-primary-inner-color: var(--gray-bg);
    }

    .btn-secondary:active {
        --btn-primary-inner-color: #d1d1d1;
    }


.btn-danger {
    padding: 0 calc(var(--btn-h) / 2);
    --btn-primary-inner-color: #ffffff; /* starting fill */
    /* Paint 2 backgrounds: one inside padding area and one underneath the border */
    background: linear-gradient(var(--btn-primary-inner-color), var(--btn-primary-inner-color)) padding-box, linear-gradient(35deg,red 15%, darkred 100%) border-box;
    /* background under border becomes visible when border is transparent*/
    border: 4px solid transparent;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    color: var(--text-color);
    font-weight: 700;
    /*Transition*/
    background-size: 200% 200%; /* make gradient larger for smooth movement */
    transition: 0.2s linear, --btn-primary-inner-color 0.2s ease;
}

    .btn-danger:hover {
        background-position: 50% 0;
        --btn-primary-inner-color: var(--gray-bg);
    }

    .btn-danger:active {
        --btn-primary-inner-color: #d1d1d1;
    }

.btn-text {
    height: auto;
    padding: 0;
    display: block;
    background-color: transparent;
    border-radius: 0;
    color: var(--text-color);
    text-decoration: underline;
}

    .btn-text::after {
        content: ">";
        text-decoration: none;
        display: inline-block; /* breaks inheritance of text-decoration */
        margin-left: 0.4rem;
    }

    .btn-text.active {
        text-decoration: none;
    }


/* -------- ----- -------- */
/* -------- Input -------- */

input, select, .btn-input {
    height: var(--input-h);
    background-color: #fff;
    border-radius: 16px;
    border: none;
    display: block;
    width: 100%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    margin: var(--pill-gap) 0;
    padding: 0 var(--pill-gap);
}

    input:hover, select:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
    }

    /* keyboard focus (accessible) */
    input:focus-visible, select:focus-visible {
        outline: 2px solid var(--primary-color-2);
        outline-offset: 3px;
    }

    input[type=checkbox] {
        /* remove native styles, keep it a real checkbox for a11y */
        appearance: none;
        -webkit-appearance: none;
        height: var(--input-h);
        background-color: #fff;
        border-radius: 16px;
        border: none;
        display: grid;
        width: var(--input-h);
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
        place-items: center;
        position: relative;
        outline: none; /* for own focus ring */
    }

        /* small inner square (unchecked) */
        input[type=checkbox]::before {
            content: "";
            inline-size: calc(var(--input-h) / 2);
            block-size: calc(var(--input-h) / 2);
            border-radius: 8px;
            border: 1px solid var(--text-color); /* thin black border */
            background: transparent;
            box-sizing: border-box;
            transition: background-color .1s ease, border-color .1s ease, transform .1s ease;
        }

        input[type=checkbox]:checked::before {
            background: var(--text-color);
        }

        input[type=checkbox]:hover {
            box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
        }

        input[type=checkbox]:active::before {
            transform: scale(.8);
        }

        /* keyboard focus (accessible) */
        input[type=checkbox]:focus-visible {
            outline: 2px solid var(--primary-color-2);
            outline-offset: 3px;
        }

        input[type=checkbox]:disabled::before {
            background: var(--dark-gray-bg);
            border: 1px solid var(--dark-gray-bg);
        }

    input[type="file"] {
        padding-left:0;
    }

        input[type="file"]::file-selector-button,
        input[type="file"]::-webkit-file-upload-button {
            color: var(--text-color);
            height: 100%;
            border: none;
            cursor: pointer;
            transition: background 0.2s;
            padding: 0 var(--pill-gap);
        }


textarea {
    background-color: #fff;
    border-radius: 16px;
    border: none;
    display: block;
    width: 100%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    margin: var(--pill-gap) 0;
    padding: var(--pill-gap);
}

    textarea:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
    }

    /* keyboard focus (accessible) */
    textarea:focus-visible {
        outline: 2px solid var(--primary-color-2);
        outline-offset: 3px;
    }

label {
    margin-top: calc(var(--pill-gap) * 2);
    font-weight: 700;
}