/*
 * Brug tussen WPForms en de overgenomen Drupal-opmaak.
 *
 * Het contactformulier van de oude site was een Drupal-webform. Dat is na de
 * migratie vervangen door WPForms (formulier 10). De inputs/labels erven de
 * legacy-opmaak via de element-selectors in legacy.css; hieronder alleen wat
 * WPForms zelf anders doet: eigen marges, breedtes en de knop.
 */

.glx-legacy .wpforms-container,
.glx-legacy .wpforms-container-full {
    margin: 0;
    max-width: none;
}

/* WPForms zet de velden in een eigen container; die is de flex-rij. */
.glx-legacy .wpforms-form .wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* Antispam-veld van WPForms mag nooit ruimte innemen. */
.glx-legacy .wpforms-form .wpforms-field-hp,
.glx-legacy .wpforms-form .wpforms-field[style*="display:none"],
.glx-legacy .wpforms-form .wpforms-field[style*="display: none"] {
    display: none !important;
}

/*
 * De rij-afstand van de oude webform. Daar had elke `.js-form-item` 18px boven
 * en onder (gemeten op de Drupal-site), bovenop de 30px ondermarge die de
 * inputs uit legacy.css krijgen: samen 66px tussen een input en het volgende
 * label. WPForms zet zijn velden op `margin:0`, dus zonder deze regel is dat
 * 30px en staat het formulier 36px per rij te dicht op elkaar.
 */
.glx-legacy .wpforms-form .wpforms-field {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
    margin: 18px 0;
}

/* Voornaam / Achternaam / Email / Telefoon staan twee per rij, zoals op de oude site. */
.glx-legacy .wpforms-form .wpforms-field.glx-half {
    flex: 0 0 50%;
    max-width: 50%;
}

.glx-legacy .wpforms-form .wpforms-field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #969798;
    font-weight: 700;
    text-transform: uppercase;
}

.glx-legacy .wpforms-form .wpforms-required-label {
    color: #ee0000;
}

.glx-legacy .wpforms-form input[type="text"],
.glx-legacy .wpforms-form input[type="email"],
.glx-legacy .wpforms-form input[type="tel"],
.glx-legacy .wpforms-form textarea {
    max-width: none;
}

.glx-legacy .wpforms-form textarea {
    height: 225px;
}

.glx-legacy .wpforms-form .wpforms-field-description {
    font-size: 14px;
    color: #969798;
    margin: -20px 0 20px;
}

.glx-legacy .wpforms-form .wpforms-error,
.glx-legacy .wpforms-form label.wpforms-error {
    color: #de533a;
    font-size: 14px;
    margin: -22px 0 18px;
    display: block;
    text-transform: none;
}

.glx-legacy .wpforms-form .wpforms-submit-container {
    padding: 0;
    text-align: center;
}

/*
 * De verstuurknop, één op één de doos van de oude webform: legacy.css regel 899
 * (`button, input[type=submit], .btn`) plus regel 1147
 * (`.home-webform .submit-btn .webform-button--submit`), die hem oranje maakt en
 * blok maakt met 10px lucht.
 *
 * Twee dingen die legacy.css hier zelf niet goed krijgt, want de oude webform
 * verstuurde met `<input type="submit">` en WPForms met `<button>`:
 *
 *  - `min-width`. Regel 899 zet 230px, regel 903 zet hem voor
 *    `input[type=submit]` en `.btn` weer op auto — maar níet voor `button`
 *    (daar staat alleen `#colorbox button`). Een `<button>` bleef dus op 230px
 *    hangen, 82px breder dan de oude knop.
 *  - de ruimte. Op de oude site was dat `21px 40px`, wat met een 14px-regel een
 *    knop van 160x59 geeft. Dit bestand zette hier eerder `15px 45px` en
 *    `font-weight:700`, en dat maakte er 230x47 van.
 *
 * `font-weight:normal` staat er om dezelfde reden: LatoHeavy ís de vette snit,
 * dus 700 erbovenop laat de browser hem nog eens synthetisch verzwaren.
 */
.glx-legacy .wpforms-form button[type="submit"] {
    display: block;
    min-width: auto;
    margin: 10px auto;
    padding: 21px 40px;
    background: #fab926;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'LatoHeavy', 'Lato', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.glx-legacy .wpforms-form button[type="submit"]:hover {
    background: #C8D200;
}

.glx-legacy .wpforms-confirmation-container-full {
    margin: 0 0 40px;
    padding: 24px 26px;
    background: #f9f9f9;
    border-left: 4px solid #c8d200;
}

.glx-legacy .wpforms-confirmation-container-full p:last-child {
    margin-bottom: 0;
}

/* WPForms geeft velden een eigen breedte-klasse; die willen we hier niet. */
.glx-legacy .wpforms-form .wpforms-field-medium,
.glx-legacy .wpforms-form .wpforms-field-large,
.glx-legacy .wpforms-form input.wpforms-field-medium,
.glx-legacy .wpforms-form input.wpforms-field-large,
.glx-legacy .wpforms-form textarea.wpforms-field-medium,
.glx-legacy .wpforms-form textarea.wpforms-field-large {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    .glx-legacy .wpforms-form .wpforms-field.glx-half {
        flex: 0 0 100%;
        max-width: 100%;
    }
}