/*
    Table of content
    1. GRAVITY FORMS
        1.1 Velden
        1.2 Akkoord
        1.3 Knop
        1.4 Validatie en bevestiging
        1.5 reCAPTCHA
    RESIZE
*/

/* 1. GRAVITY FORMS */
/* standaard-CSS van Gravity Forms staat uit (functions.php 2.5); alles hier. Het formulier staat op een blauwe kaart */

/* 1.1 Velden */
.gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gform_wrapper .gfield {
    grid-column: span 12;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gform_wrapper .gfield--width-half {
    grid-column: span 6;
}

/* labels staan verborgen (placeholder in het veld), maar blijven voor schermlezers */
.gform_wrapper .hidden_label > .gfield_label,
.gform_wrapper .hidden_label > legend.gfield_label,
.gform_wrapper .gfield_required,
.gform_wrapper .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
    display: block;
    width: 100%;
    height: 4.6rem;
    padding: 0 2rem;
    border: 1px solid var(--color-white);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-white);
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--color-black);
    transition: border-color .3s;
}

.gform_wrapper textarea {
    height: 20rem;
    padding: 1.2rem 2rem;
    resize: vertical;
}

/* veldgrootte uit Gravity Forms (Klein/Middel/Groot) bepaalt de hoogte van een tekstvak; Middel = design */
.gform_wrapper textarea.small {
    height: 10rem;
}

.gform_wrapper textarea.large {
    height: 30rem;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--color-grey);
    opacity: 1;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
    outline: 0;
    border-color: var(--color-black);
}

/* 1.2 Akkoord */
.gform_wrapper .gfield--type-consent {
    margin-top: 1.2rem;
}

.gform_wrapper .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.gform_wrapper .ginput_container_consent input {
    flex-shrink: 0;
    display: grid;
    place-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0;
    border: 1px solid var(--color-white);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-white);
    cursor: pointer;
    appearance: none;
}

.gform_wrapper .ginput_container_consent input::before {
    content: '';
    width: 1.2rem;
    height: .7rem;
    border-left: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    transform: translateY(-.2rem) rotate(-45deg);
    opacity: 0;
    transition: opacity .2s;
}

.gform_wrapper .ginput_container_consent input:checked::before {
    opacity: 1;
}

.gform_wrapper .ginput_container_consent label {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--color-black);
    cursor: pointer;
}

/* 1.3 Knop: zelfde stijl als .btn.dark */
.gform_wrapper .gform_footer {
    margin-top: 1.3rem;
}

.gform_wrapper .gform_button {
    padding: 1rem 2.2rem;
    border: 1px solid var(--color-black);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-black);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-white);
    cursor: pointer;
    transition: .3s;
}

.gform_wrapper .gform_button:hover {
    border-color: color-mix(in srgb, var(--color-white) 12%, black);
    background-color: color-mix(in srgb, var(--color-white) 12%, black);
}

/* 1.4 Validatie en bevestiging */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error .ginput_container_consent input {
    border-color: var(--color-red);
}

.gform_wrapper .gfield_validation_message {
    margin-top: .4rem;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--color-white);
}

.gform_wrapper .gform_validation_errors {
    margin: 0 0 1.6rem;
    font-size: 1.5rem;
    color: var(--color-white);
}

.gform_wrapper .gform_validation_errors h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.5;
    color: inherit;
}

.gform_confirmation_message {
    font-size: 1.8rem;
    color: var(--color-white);
}

.gform_wrapper .gform_required_legend,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_description:empty {
    display: none;
}

/* 1.5 reCAPTCHA */
/* badge onzichtbaar (werkt wel); klikken gaat er dan ook doorheen */
.grecaptcha-badge {
    opacity: 0;
    pointer-events: none;
}

/* RESIZE */
@media (max-width: 767px) {
    .gform_wrapper .gform_fields {
        gap: .7rem;
    }

    .gform_wrapper .gfield--width-half {
        grid-column: span 12;
    }

    .gform_wrapper input[type="text"],
    .gform_wrapper input[type="email"],
    .gform_wrapper input[type="tel"],
    .gform_wrapper textarea {
        height: 4.2rem;
        padding: 0 1.5rem;
        font-size: 1.4rem;
    }

    .gform_wrapper textarea {
        height: 12rem;
        padding: 1rem 1.5rem;
    }

    .gform_wrapper textarea.small {
        height: 8rem;
    }

    .gform_wrapper textarea.large {
        height: 18rem;
    }

    .gform_wrapper .ginput_container_consent label {
        font-size: 1.4rem;
    }

    .gform_wrapper .gform_footer {
        margin-top: 2rem;
    }

    .gform_wrapper .gform_button {
        width: 100%;
        padding: .8rem 2.2rem;
        font-size: 1.5rem;
        line-height: 1.7;
    }
}