/* 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. Inputs use an 8px radius
   here — the contact-form module's inputs use 6px, so this isn't shared
   with that module's style.css. */

.open-sollicitatie-form .gform_wrapper {
    width: 100%;
}

.open-sollicitatie-form .gform_required_legend {
    display: none;
}

.open-sollicitatie-form .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.open-sollicitatie-form .gfield,
.open-sollicitatie-form .gfield--width-half {
    grid-column: span 2;
}

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

@media (max-width: 1023px) {
    .open-sollicitatie-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, unevenly narrowing whichever
       fields land in the real 1fr column. Every field must claim just the
       one column that exists. */
    .open-sollicitatie-form .gfield,
    .open-sollicitatie-form .gfield--width-half {
        grid-column: span 1;
    }
}

.open-sollicitatie-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;
}

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

/* "Contact mij via ..." — same [data-dropdown] custom-dropdown pattern as
   job-listing's filters / job-alert's Sector field (see this module's
   script.js), not a native <select>, so its open panel can carry the
   design's rounded/shadowed panel and cream-light hover — a native
   <select>'s panel can't be restyled that way. */
.open-sollicitatie-form__dropdown-toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032B36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px;
}

.open-sollicitatie-form .ginput_container textarea {
    height: 140px;
    padding: 24px;
    resize: vertical;
}

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

/* File upload — a native <input type="file">'s button text and "no file
   chosen" wording are the browser's own (Dutch/English depending on
   locale) and can't be overridden with CSS alone. script.js hides the
   native input and inserts a real <label for="..."> (still opens the
   native file picker with no JS needed for that part) plus a filename
   span it keeps in sync on change — full control over both texts. */
.open-sollicitatie-form .ginput_container_fileupload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: auto;
    min-height: 60px;
    padding: 12px 24px 12px 12px;
    border-radius: 8px;
    background: #FFFFFF;
}

.open-sollicitatie-form input[type="file"] {
    display: none;
}

/* GF's own "Accepted file types: ..." rules text — a flex row with the
   input made this overlap "No file chosen" and overflow the field's
   rounded border once it had to wrap on narrow screens. Stacking it below
   the input as its own line, allowed to wrap, fixes both. */
.open-sollicitatie-form .gform_fileupload_rules {
    display: block;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #032B36;
    opacity: 0.7;
    white-space: normal;
}

.open-sollicitatie-form__file-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.open-sollicitatie-form__file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    background: #032B36;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.open-sollicitatie-form__file-label:hover {
    background: #D4A24C;
}

.open-sollicitatie-form__file-name {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 16px;
    color: #032B36;
}

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

.open-sollicitatie-form .validation_message--hidden-on-empty:empty {
    display: none;
}

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

/* Consent checkbox — GF renders a plain <input type="checkbox">; restyled
   as a round indicator (a circle, not a square), same design as
   job-application-form/cv-builder's consent checkboxes. The border stays
   transparent at rest so the gold hover ring doesn't shift the box size. */
.open-sollicitatie-form .ginput_container_consent {
    display: flex;
    align-items: center;
    gap: 12px;
}

.open-sollicitatie-form .ginput_container_consent 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);
}

.open-sollicitatie-form .ginput_container_consent input[type="checkbox"]:hover {
    border-color: #D4A24C;
}

.open-sollicitatie-form .ginput_container_consent input[type="checkbox"]:checked {
    background: #D4A24C;
}

.open-sollicitatie-form .gfield_consent_label {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 16px;
    color: #032B36;
    cursor: pointer;
}

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

.open-sollicitatie-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);
}

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

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