/**
 * Styling for the consent-loaded Marketo forms — Contact Us + Subscribe pages.
 *
 * The theme's Marketo styling in _global.scss is nested under
 * `.site-iron-main-generic .mktoForm`, but that wrapper class is NOT present on
 * the Contact Us page, so those rules never apply here — notably the custom
 * select dropdown-arrow positioning, which then falls into normal flow and drops
 * below the field. Re-apply the arrow positioning scoped to `.site-mf-forms`
 * (the decoration wrapper, which IS present), mirroring the theme's own rule
 * (_global.scss ~line 978). Loaded only on Contact Us (see functions.php).
 */
.site-mf-forms .e-mf-formfield.e-mf-select {
    position: relative;
    /* Carry the select's spacing on the wrapper (see below). */
    margin-bottom: 25px;
}

/* The Marketo <select> is float:left with a 25px bottom margin. The float
   collapses this wrapper to zero height, and the margin (once contained) inflates
   it — both break the arrow's vertical centering (top:50%). Un-float the select
   so the wrapper takes its height, and move the spacing to the wrapper so the
   wrapper height equals the select exactly. Field rhythm is preserved. */
.site-mf-forms .e-mf-formfield.e-mf-select select {
    float: none !important;
    /* !important required: the theme sets margin-bottom:25px !important on form
       fields (_forms.scss), matching that convention here. */
    margin-bottom: 0 !important;
}

.site-mf-forms .e-mf-formfield.e-mf-select .e-select-drop-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.site-mf-forms .e-mf-formfield.e-mf-select .e-select-drop-arrow svg {
    display: block;
}

/* Row alignment. The theme lays the form out as flex with 50% rows, but that
   rule is in the same missing `.site-iron-main-generic` scope, so Marketo's
   default inline-block rows apply instead — and inline-block aligns on the
   BASELINE. A row containing a <select> has a different baseline than one with
   an <input>, so paired rows drift vertically (measured: 41px). Align to the
   top, which is what the theme's flex layout produces. */
.site-mf-forms .mktoForm > .mktoFormRow {
    vertical-align: top !important;
}

/* Checkbox list: two columns, as the theme intends (_global.scss ~991) — also
   lost with the missing scope, leaving one long single column. */
.site-mf-forms .mktoCheckboxList {
    display: flex;
    flex-wrap: wrap;
}

.site-mf-forms .mktoCheckboxList .e-mf-checkbox {
    display: flex;
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.site-mf-forms .mktoCheckboxList .e-mf-checkbox label,
.site-mf-forms .mktoCheckboxList .e-mf-checkbox input[type="checkbox"] {
    float: none !important;
    display: block !important;
    width: auto !important;
    cursor: pointer;
}

/* Single column on small screens, matching the theme's 640px breakpoint. */
@media (max-width: 640px) {
    .site-mf-forms .mktoCheckboxList .e-mf-checkbox {
        flex: 0 0 100%;
        max-width: 100%;
    }
}