/*
    Umbraco Forms parity styles.

    The migrated forms render with the Umbraco Forms "default" theme, whose stylesheet is disabled
    (FormsMigrationTask sets DisableDefaultStylesheet = true) because the site styles form controls by
    element inside `.form-general` (see main.css `.form-general input/select/textarea/label`). That already
    matches the live Kentico look for fonts, colours, borders and the submit button.

    Two things the element-level rules don't cover, which this file restores so the migrated forms match the
    live site (belfastcityairport.com/Contact-Us and /Lost-Property):

      1. Labels. The default theme wraps every field in a <fieldset>, so the lower, lighter
         `.form-general fieldset label` rule (0.86em / 400) wins over the intended `.form-general label`
         (1.1rem / 500). Re-assert the live label style on `.umbraco-forms-label`.

      2. Column layout. The live Contact Us form is a Foundation grid (First Name | Surname, etc.). The
         default theme emits `.row-fluid` + `.umbraco-forms-container.col-md-{width}` and relies on its own
         (disabled) stylesheet for the columns, so without this they stack full width. The widths come from
         the form structure the migration builds from the Kentico `builderLayout`.
*/

/*
    0. Hidden fields. The default theme hides `.umbraco-forms-hidden` with `display:none !important` — it covers the
    anti-spam honeypot field and any field umbracoforms.js hides via conditional logic. With the default stylesheet
    disabled this rule is gone, so the honeypot shows as a stray text field below the form. Restore it.
*/
.form-general .umbraco-forms-hidden {
    display: none !important;
}

/* 1. Labels — match the live `.control-label` (1.1rem / 500 / brand teal). */
.form-general .umbraco-forms-label {
    display: inline-block;
    color: rgb(1, 69, 80);
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

/* A field with no caption (reCAPTCHA, consent checkbox, privacy rich-text) must not leave an empty label gap. */
.form-general .umbraco-forms-label:empty,
.form-general .umbraco-forms-label.umbraco-forms-hidden {
    display: none;
}

/*
    Consent checkbox alignment. The checkbox and reCAPTCHA fields have an empty caption, but Umbraco still renders a
    `.umbraco-forms-label` containing whitespace — which `:empty` does NOT match, so it stays an inline-block and its
    line-height adds a ~24px blank line that pushes the checkbox well below the adjacent privacy text. Hide those blank
    labels and nudge the checkbox down 8px so it lines up with the first line of the privacy text, matching live.
*/
.form-general .umbraco-forms-field.checkbox > .umbraco-forms-label {
    display: none;
}

.form-general .umbraco-forms-field.checkbox input[type=checkbox] {
    margin-top: 8px;
    vertical-align: baseline;
}

/*
    The privacy-consent line is a FormColumnTitle rich-text field. On live it renders at the content paragraph size
    (18.4px, line-height 1.6) — not the 16px form-field default — so it wraps to two lines beside the checkbox. Match it.
*/
.form-general .umbraco-forms-field.richtext,
.form-general .umbraco-forms-field.richtext p {
    font-size: 1.15rem;
    line-height: 1.6;
}

/* 2. Columns — reproduce the Foundation grid the live form uses. */
.form-general .umbraco-forms-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.form-general .row-fluid {
    display: flex;
    flex-wrap: wrap;
    /* Foundation grid-padding-x on this site uses a 30px gutter (15px each side), matching the live form. */
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
}

.form-general .umbraco-forms-container {
    box-sizing: border-box;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    /* Mobile-first: one column until the medium breakpoint, like Foundation's `cell`. */
    flex: 0 0 100%;
    max-width: 100%;
}

/* Foundation's medium breakpoint (640px). col-md-N maps N/12 of the row. */
@media screen and (min-width: 640px) {
    .form-general .umbraco-forms-container.col-md-1 {
        flex-basis: 8.3333%;
        max-width: 8.3333%;
    }

    .form-general .umbraco-forms-container.col-md-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .form-general .umbraco-forms-container.col-md-11 {
        flex-basis: 91.6667%;
        max-width: 91.6667%;
    }

    .form-general .umbraco-forms-container.col-md-12 {
        flex-basis: 100%;
        max-width: 100%;
    }
}