/* This file prints inline ahead of style.css, so the first layer it names fixes
   the page's layer order. Pin Tailwind's order here: naming `components` first
   would rank it below `base`, and preflight's `* { padding: 0 }` would then
   strip every button and component style on the page. */
@layer gravity-forms-theme, properties, theme, base, components, utilities;

/* Opt-in fix for the form column's height.

   Same `h-full` (height:100%) cause as the Back & Forth and two-column text
   blocks: when the copy column is shorter than the embedded Gravity Form, the
   percentage height does not collapse and the form overflows the navy panel.
   Add `media-auto-height` to the block instance to let the row size to the
   form. Opt-in, so pages already signed off keep their current rendering.
   Not in bhs-styles.css: that file is in Tailwind's `components` layer and
   loses to `.h-full` in `utilities`. */
.media-auto-height .container > div {
    height: auto;
}

/* Opt-in tighter field rhythm.

   Gravity Forms fields are spaced twice over: `.gform_fields` is a grid with
   `row-gap: 40px` and every `.gfield` also carries `margin-bottom: 32px`, so
   the real gap is 72px. That is sitewide (live /contact/ measures the same) and
   only becomes obvious on a long form — the 9-field Abbreviated Application
   Form runs 1,593px with ~678px of that dead space. Dropping the margin leaves
   the grid gap to do the spacing on its own. Opt-in via `form-compact` so
   existing forms keep the rhythm they were signed off with.

   The margin override must sit inside `@layer gravity-forms-theme`. Gravity
   Forms declares it `!important` inside that layer, and for `!important`
   declarations the cascade reverses: earlier layers beat later ones and
   UNLAYERED important declarations rank lowest of all. An unlayered
   `margin-bottom: 0 !important` here silently loses, at any specificity. */
@layer gravity-forms-theme {
    .form-compact .gfield {
        margin-bottom: 0 !important;
    }
}

.form-compact .gform_fields {
    row-gap: 24px;
}

/* Navy-panel overrides for forms built for the white Application Data Sheet
   layout (its `inline-fileds`, `unit-choices` and `custom-comment` classes and
   the navy-bordered custom checkboxes all vanish on bg-primary).

   The `!important` rules they override live in Tailwind's `components` layer,
   so these must sit in that same layer to win on specificity. */
@layer components {
    .back-forth-contact .gform_wrapper .gfield_checkbox .gfield-choice-input + label {
        color: var(--color-white) !important;
        font-size: 18px !important;
    }

    /* The theme hides the real checkbox with display:none, which removes it from
       the tab order. Keep it focusable but invisible over the drawn box. */
    .back-forth-contact .gform_wrapper .gfield_checkbox input[type="checkbox"] {
        display: block !important;
    }

    .back-forth-contact .inline-fileds .gfield_label.gform-field-label {
        font-size: 18px !important;
        min-width: 0 !important;
    }

    .back-forth-contact .inline-fileds.gfield_visibility_visible {
        gap: 8px 12px !important;
    }

    .back-forth-contact .gform-theme--framework .gfield--type-choice .gfield_checkbox {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
}

/* Comments is a hidden-label textarea with no placeholder; show the label.
   GF hides it with `!important` in its own layer (see form-compact above). */
@layer gravity-forms-theme {
    .back-forth-contact .custom-comment.hidden_label .gfield_label {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 0 8px !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
    }

    .back-forth-contact .custom-comment textarea {
        border: 1px solid rgb(255 255 255 / 0.6) !important;
        padding: 12px !important;
    }
}

.back-forth-contact .gchoice {
    position: relative;
    display: block;
    margin-right: 20px;
}

.back-forth-contact .gform_wrapper .gfield_checkbox input[type="checkbox"] {
    position: absolute;
    inset: 0 auto auto 0;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 0;
    opacity: 0;
}

.back-forth-contact .gform_wrapper .gfield_checkbox .gfield-choice-input + label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.back-forth-contact .gfield_checkbox input[type="checkbox"] + label::before {
    border-color: rgb(255 255 255 / 0.75);
}

.back-forth-contact .gfield_checkbox input[type="checkbox"]:checked + label::before {
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
}

.back-forth-contact .gfield_checkbox input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* Label above the input instead of beside it; the side-by-side layout
   squeezed the input to ~30px in a half-width column. */
.back-forth-contact .inline-fileds {
    flex-wrap: wrap;
}

.back-forth-contact .inline-fileds .gfield_label {
    flex-basis: 100%;
}

.back-forth-contact .inline-fileds .ginput_container {
    flex: 1;
}

.back-forth-contact .inline-fileds .gfield_description {
    padding: 0 0 12px;
    font-size: 16px;
    color: rgb(255 255 255 / 0.75);
}

.back-forth-contact .unit-choices {
    align-self: end;
    padding-bottom: 8px;
}

.back-forth-contact .gfield--type-html p {
    margin: 0;
}

.back-forth-contact .gfield--type-html strong {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.75);
}

@media (min-width: 1024px) {
    .back-forth-contact .inline-fileds.gfield--width-third,
    .back-forth-contact .unit-choices.gfield--width-two-thirds {
        grid-column: span 6;
    }
}

/* The Application Form's "Contact Information" heading and rule are navy
   (`text-primary`, `bg-primary`) for the white page, which makes them invisible
   here and leaves a blank band above the first field. The theme sizes h2
   with `!important` in the components layer, so the size override has to
   sit in that layer too. */
.back-forth-contact .gfield--type-html .text-primary {
    color: var(--color-white);
}

@layer components {
    .back-forth-contact .gfield--type-html h2.text-primary {
        font-size: 24px !important;
    }
}

.back-forth-contact .gfield--type-html .bg-primary {
    background-color: rgb(255 255 255 / 0.3);
}

/* Opt-in stacked layout for long forms.

   The copy column and the form column split the navy panel evenly, so a long
   form like the Application Form (GF 4) is squeezed to ~300px and runs over
   1,800px tall, with the heading vertically centred halfway down beside it.
   Add `form-stacked` to the block instance to put the copy above a
   full-width form on desktop too. */
@media (min-width: 1024px) {
    .form-stacked .container > .bg-primary > div {
        flex-direction: column;
        align-items: stretch;
        row-gap: 2em;
    }

    .form-stacked .container > .bg-primary > div > div {
        flex: none;
        width: 100%;
    }
}

/* Optional small print under the form (the `footnote` field). Kept off
   `style-disc` so its navy link colour never lands on the navy panel. The
   theme's `p` size is not `!important`, so an unlayered rule is enough. */
.back-forth-contact .contact-footnote {
    margin-top: 24px;
    color: var(--color-white);
}

/* Small-print size, one step under the 16px body copy. */
.back-forth-contact .contact-footnote p {
    font-size: 14px;
    line-height: 1.5;
}

.back-forth-contact .contact-footnote a {
    color: var(--color-white);
    text-decoration: underline;
    font-weight: 700;
}

.back-forth-contact .contact-footnote a:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Light layout (layout = light, contact-light.php).

   Heading and intro sit on the section background, the form and fine print in
   a white bordered box. The root has no `back-forth-contact` and the form
   wrapper no `.contact-form`, so none of the navy-panel skin above (or the
   dark GF skin in base.css) applies. The section heading, intro copy, padding
   and gray background come from the shared landing rules in bhs-styles.css.
   --------------------------------------------------------------------------- */
.contact-light__intro {
    max-width: 760px;
    margin-bottom: 32px;
}

/* Left-aligned on purpose: live stops the box 84px short of the heading rule. */
.contact-light__box {
    background: #fff;
    border: 1px solid var(--landing-rule, #ddd);
    padding: 40px 44px;
    max-width: 920px;
}

@media (max-width: 720px) {
    .contact-light__box {
        padding: 28px 22px;
    }
}

.contact-light__fineprint {
    margin-top: 18px;
}

.contact-light__fineprint p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--landing-muted, #6b6b6b);
}

.contact-light__fineprint a {
    color: var(--color-primary);
    text-decoration: underline;
}

.contact-light__fineprint a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Orbital reads these, so most of the skin needs no specificity fight. GF
   prints the per-form values in an inline style keyed on the wrapper id, which
   outranks this selector, hence `!important` on the ones it also sets. */
.contact-light .gform_wrapper.gform-theme {
    --gf-radius: 0 !important;
    --gf-ctrl-radius: 0;
    --gf-ctrl-border-color: #8a8a8a !important;
    --gf-ctrl-border-color-focus: var(--color-primary);
    --gf-ctrl-bg-color: #fff;
    --gf-ctrl-bg-color-focus: #fff;
    --gf-ctrl-color: #333;
    --gf-ctrl-color-focus: #333;
    --gf-ctrl-font-size: 16px;
    --gf-ctrl-padding-x: 14px;
    --gf-ctrl-shadow: none;
    --gf-ctrl-outline-color-focus: var(--color-primary);
    --gf-ctrl-outline-width-focus: 2px;
    --gf-ctrl-label-color-primary: var(--color-primary) !important;
    --gf-ctrl-label-color-secondary: #333 !important;
    --gf-ctrl-desc-color: var(--landing-muted, #6b6b6b);
    --gf-ctrl-desc-font-size: 13px;
    --gf-ctrl-btn-bg-color-primary: var(--landing-green-fill, #137a58);
    --gf-ctrl-btn-bg-color-hover-primary: var(--landing-green-hover, #0f6247);
    --gf-ctrl-btn-color-primary: #fff;
    --gf-ctrl-btn-border-width-primary: 0;
    --gf-ctrl-btn-radius: 0;
    --gf-ctrl-btn-letter-spacing: 0.03em;
    --gf-ctrl-btn-line-height: 1;
    --gf-ctrl-btn-text-transform: uppercase;
    color: #333;
}

/* Beats the theme's white, bottom-border-only inputs (components layer,
   normal declarations) and Orbital's own control rules. */
.contact-light .gform_wrapper.gform-theme input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.contact-light .gform_wrapper.gform-theme select,
.contact-light .gform_wrapper.gform-theme textarea {
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    /* Darker than live's #ddd: a control's edge needs 3:1 on white (WCAG 1.4.11). */
    border: 1px solid #8a8a8a;
    border-radius: 0;
    padding: 12px 14px;
    width: 100%;
    box-shadow: none;
}

.contact-light .gform_wrapper.gform-theme input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
.contact-light .gform_wrapper.gform-theme select:focus,
.contact-light .gform_wrapper.gform-theme textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
    outline: 0;
}

/* Orbital fixes the control height, so vertical padding would clip the
   selected option; the height alone centres it. */
.contact-light .gform_wrapper.gform-theme select {
    padding-block: 0;
}

.contact-light .gform_wrapper.gform-theme input::placeholder,
.contact-light .gform_wrapper.gform-theme textarea::placeholder {
    color: #767676;
    opacity: 1;
}

/* `.gfield` lifts this over GF's `textarea.medium { min-block-size: 12rem }`. */
.contact-light .gform_wrapper.gform-theme .gfield textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-light .gform_wrapper.gform-theme .gfield_label,
.contact-light .gform_wrapper.gform-theme legend.gfield_label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.43;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.contact-light .gform_wrapper.gform-theme .gfield_description,
.contact-light .gform_wrapper.gform-theme .ginput_counter {
    font-size: 13px;
    color: var(--landing-muted, #6b6b6b);
}

/* Checkbox, radio and consent labels, plus HTML fields: the theme paints
   these white for the navy panel. */
.contact-light .gform_wrapper.gform-theme .gchoice label,
.contact-light .gform_wrapper.gform-theme .gfield-choice-input + label,
.contact-light .gform_wrapper.gform-theme .gfield_consent_label,
.contact-light .gform_wrapper.gform-theme .gfield--type-html,
.contact-light .gform_wrapper.gform-theme .gfield--type-html label {
    color: #333;
}

.contact-light .gform_wrapper.gform-theme .gsection {
    border-bottom: 0;
    border-top: 1px dashed var(--landing-rule, #ddd);
    padding-top: 18px;
}

/* Size is W1's layered rule (it has to beat the theme's h3 !important). */
.contact-light .gform_wrapper.gform-theme .gsection_title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--landing-muted, #6b6b6b);
    margin: 0;
}

.contact-light .gform_wrapper.gform-theme .gform_footer {
    justify-content: flex-start;
    padding-top: 22px;
}

.contact-light .gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.contact-light .gform_wrapper.gform-theme .gform_validation_errors > h2 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contact-light .gform_wrapper.gform-theme .gform_validation_errors {
    background: #fff3f3;
    border: 1px solid #d9534f;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 18px;
}

.contact-light .gform_confirmation_message {
    background: rgb(27 158 117 / 0.08);
    border-left: 4px solid var(--landing-green, #1b9e75);
    padding: 20px 24px;
    font-size: 16px;
    color: #333;
}

.contact-light .gform_confirmation_message a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Declarations that GF or the theme (components layer) make `!important`.
   For `!important` the first layer wins, so this pinned-first layer beats
   both, whatever their specificity (same pattern as form-compact above). */
@layer gravity-forms-theme {
    .contact-light .gform_wrapper .gfield_required,
    .contact-light .gform_wrapper .gfield_required span {
        color: var(--landing-green-fill, #137a58) !important;
    }

    .contact-light .gform_wrapper .gform_button.button {
        background-color: var(--landing-green-fill, #137a58) !important;
        color: #fff !important;
        padding: 13px 26px !important;
    }

    .contact-light .gform_wrapper .gform_validation_errors > h2 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: #b03735 !important;
    }
}

@media (hover: hover) {
    @layer gravity-forms-theme {
        .contact-light .gform_wrapper .gform_button.button:hover {
            background-color: var(--landing-green-hover, #0f6247) !important;
            color: #fff !important;
        }
    }
}