/* Gravity Forms' generated markup can't take Tailwind classes directly, and
   its own theme CSS is disabled site-wide (includes/hooks/enqueue.php) — so
   the form is restyled here from scratch, per the CLAUDE.md CSS-only
   exception for GF-rendered HTML. Labels stay in the DOM for accessibility
   but are visually hidden; the placeholder text carries the visible label
   text + required asterisk, matching the design. */

.contact-form .gform_wrapper {
    width: 100%;
}

.contact-form .gform_required_legend {
    display: none;
}

.contact-form .gform_fields {
    display: grid;
    /* minmax(0, 1fr), not plain 1fr — a bare 1fr track still has an implicit
       auto minimum, so a long placeholder like "Telefoonnummer" was pulling
       its whole column wider than "Voornaam"/"E-mailadres"'s, even though
       both are nominally 1fr. minmax(0, 1fr) makes both columns actually
       equal regardless of each field's content length. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-form .gfield {
    grid-column: span 2;
}

.contact-form .gfield--width-half {
    grid-column: span 1;
}

@media (max-width: 1023px) {
    .contact-form .gform_fields {
        grid-template-columns: 1fr;
    }

    /* .gfield's base rule (span 2) still applies here otherwise — with only
       one explicit column, a span-2 request makes the grid auto-create a
       second, content-sized implicit column, which is exactly what was
       making Voornaam/E-mailadres narrower than Achternaam/Telefoonnummer
       on mobile. Every field must claim just the one column that exists. */
    .contact-form .gfield,
    .contact-form .gfield--width-half {
        grid-column: span 1;
    }
}

.contact-form .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-form .ginput_container input[type="text"],
.contact-form .ginput_container input[type="email"],
.contact-form .ginput_container input[type="tel"],
.contact-form .ginput_container textarea {
    width: 100%;
    height: 60px;
    padding: 0 24px;
    border: none;
    border-radius: 6px;
    background: #FFFFFF;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 16px;
    color: #032B36;
}

.contact-form .ginput_container textarea {
    height: 180px;
    padding: 19px 24px;
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #032B36;
    opacity: 1;
}

.contact-form .gfield_error input,
.contact-form .gfield_error textarea {
    outline: 2px solid #B3261E;
}

/* Privacy consent — a plain cosmetic checkbox matching the design's white
   circle (see the field comment in seed-gravity-forms.php for why it isn't
   the real reCAPTCHA field type; GF's own required-checkbox validation
   still applies). Same hover/checked treatment as
   job-application-form/cv-builder's consent checkboxes. */
.contact-form .gfield_checkbox {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-form .gchoice {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-form .gfield-choice-input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    box-sizing: border-box;
    border: 1.5px solid transparent;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form .gfield-choice-input[type="checkbox"]:hover {
    border-color: #D4A24C;
}

.contact-form .gfield-choice-input[type="checkbox"]:checked {
    background: #D4A24C;
}

.contact-form .gform-field-label--type-inline {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 16px;
    color: #032B36;
    cursor: pointer;
}

.contact-form .gfield_description.validation_message,
.contact-form .validation_message {
    margin-top: 6px;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 14px;
    color: #B3261E;
}

.contact-form .gform_footer {
    margin: 24px 0 0;
    padding: 0;
}

.contact-form .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 8px 24px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #D4A24C;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form .gform_button:hover {
    background: #FFFFFF;
    border-color: #032B36;
    color: #032B36;
}

.contact-form .gform_confirmation_message {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 18px;
    color: #032B36;
}