/*
    Microsite Umbraco Forms parity styles.

    Microsite pages (e.g. /vision/have-your-say) use MicrositeMaster + the microsite theme, whose form CSS is
    class-based (.form-control / .control-label, the Kentico markup) and so does NOT catch the Umbraco Forms
    default-theme markup (.umbraco-forms-field / .text / .umbraco-forms-label / <button class="btn primary">).
    Without this file the migrated form falls back to generic styling (thin grey inputs, a raw browser submit
    button, wrong label weight) and looks nothing like the live site.

    This restores the live microsite form look, measured from belfastcityairport.com/vision/have-your-say:
      - inputs/selects/textareas: white, 2px solid brand teal, square corners, 10px padding
      - labels: brand teal, bold (700), ~1.08rem
      - submit: brand teal block, white, Bebas Neue, uppercase, square
      - checkbox/radio options: native controls with the green accent, inline labels
    The forms render with the Umbraco Forms default theme (DisableDefaultStylesheet = true), so everything is
    targeted inside the .form-general wrapper the form block adds.
*/

/* ---- Hidden fields (honeypot + conditional-logic hides) ----
   The default theme hides `.umbraco-forms-hidden` with display:none !important; with the default stylesheet disabled
   that rule is gone, so the anti-spam honeypot shows as a stray text field below the form. Restore it. */
.form-general .umbraco-forms-hidden {
    display: none !important;
}

/* ---- Labels (field captions) ---- */
.form-general .umbraco-forms-label {
    display: inline-block;
    color: rgb(1, 69, 80);
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 0.4rem;
}

/* reCAPTCHA / fields with no caption must not leave an empty label gap. */
.form-general .umbraco-forms-label:empty,
.form-general .umbraco-forms-label.umbraco-forms-hidden {
    display: none;
}

/* ---- Vertical spacing between fields (live .form-field rhythm) ---- */
.form-general .umbraco-forms-field {
    margin-bottom: 1.5rem;
}

/* ---- Text inputs, selects, textareas (not checkboxes/radios/buttons) ---- */
.form-general input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.form-general .text,
.form-general select,
.form-general textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    color: rgb(1, 69, 80);
    border: 2px solid rgb(1, 69, 80);
    border-radius: 0;
    padding: 10px;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.form-general textarea {
    min-height: 140px;
}

.form-general input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
.form-general select:focus,
.form-general textarea:focus {
    outline: none;
    border-color: rgb(1, 69, 80);
    box-shadow: inset 0 0 0 1px rgb(1, 69, 80);
}

/* ---- Checkbox / radio option lists: native controls, green accent, inline labels ---- */
.form-general input[type=checkbox],
.form-general input[type=radio] {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    accent-color: rgb(50, 115, 95);
    vertical-align: middle;
}

/* Option labels sit next to their control and are not bold like the field caption. */
.form-general .umbraco-forms-field-wrapper label {
    font-weight: 400;
    color: rgb(1, 69, 80);
    display: inline-block;
    margin-bottom: 0.4rem;
}

/* ---- Submit (live: brand teal, Bebas Neue, uppercase, square) ---- */
.form-general input[type=submit],
.form-general button[type=submit],
.form-general .btn.primary {
    display: inline-block;
    background-color: rgb(1, 69, 80);
    color: #fff;
    border: 2px solid rgb(1, 69, 80);
    border-radius: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.365rem;
    font-weight: 400;
    letter-spacing: 0.96px;
    line-height: 1;
    text-transform: uppercase;
    padding: 1.12rem 2rem 0.85rem;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: 0.3s ease-out;
}

.form-general input[type=submit]:hover,
.form-general button[type=submit]:hover,
.form-general .btn.primary:hover {
    background-color: rgb(231, 146, 173);
    border-color: rgb(231, 146, 173);
    color: rgb(1, 69, 80);
}

/* ---- Columns (safety for any multi-section microsite form) ---- */
.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;
    flex: 0 0 100%;
    max-width: 100%;
}

@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%; }
}