/* ===================================================================
   GRAVITY FORMS skin — the dark-surface form.

   The request form is a Gravity Forms embed (2026-08-21), so its markup
   is GF's and cannot be changed from here. This file makes that markup
   render as the house form component: the same `.field` / `.field-label`
   / `.field-input` treatment global.html has, on the same tokens, so the
   embedded form is indistinguishable from the hand-built one it replaced.

   ⚠️ It assumes a DARK surround, because that is the only place a form
   appears in this design — the `--ink` inset box in `.request`. A form on
   a light band would need a modifier; there isn't one yet because there
   is no such form.

   ⚠️⚠️ THE WRAPPER MUST CARRY `gform-theme__disable`. That is Gravity
   Forms' own opt-out hook, and without it this skin cannot work — not
   because of a specificity race it loses narrowly, but because GF's
   reset sheet does this:

       .gform-theme--framework :where(:not(html):not(iframe)… )
           { all: unset; display: revert }

   `all: unset` on every descendant, at (0,1,0) — the same specificity as
   `.btn` — and loaded after vendor.css, so it simply wins. Measured with
   it live: the submit button lost its height (54px → 38px), its
   background (`--primary` → GF's #204CE5), its uppercase and its 5px
   corner notch, all at once. No amount of depth on THIS file would have
   saved `.btn`, because `.btn` is not this file.

   Every rule in GF's reset and framework sheets is wrapped in
   `:where(:not(.gform-theme__disable):not(.gform-theme__disable *) …)`,
   so one class on the wrapper switches all ~558KB of it off for this form
   and leaves the cascade to us. It is per-form, needs no WordPress
   setting, and behaves identically here and on the real site — which is
   why it is preferred over Forms → Settings → "Output Default CSS: No"
   or the `gform_disable_css` filter, both of which also work.

   With GF's CSS disabled, its four <link> tags are fetching ~558KB from
   another domain to do nothing. They are kept on this page so that what
   is verified here is what WordPress will actually serve; on a purely
   static build they can go.

   Load order still matters for the rest: this file comes after the
   section sheets and after GF's own, before request-modal.css.

   The pasted markup also carries an inline <style> block of `--gf-*`
   custom properties, scoped to `#gform_wrapper_1`. Nothing here reads
   them and without GF's CSS nothing else does either, so it renders
   nothing. It is left in place because it is what WordPress outputs.

   THE ONE TRAP, inherited from request.css, which documents it:
   `--dark-surface` resolves to `#0C0C0C` in the live vendor.css — the
   same value as `--ink`, which is this box's own background. A field
   painted `--dark-surface` is therefore invisible here. The mix below
   lands on #161616, the value CLAUDE.md §2 documents for
   `--dark-surface`, so it is the intended colour rather than a new one.
   =================================================================== */

/* ---- the wrapper fills its column, and GF's own heading comes off ---- */
.gform_wrapper {
    width: 100%;
}

/* GF prints its own <h2 class="gform_title"> with the form's name, which
   here is a second "Request an Invite" directly under the section's own
   h2. Two identical headings is worse than none, and the section already
   names itself, so this comes out of the page and out of the
   accessibility tree together. */
.gform_wrapper .gform_heading {
    display: none;
}

.gform_wrapper form {
    display: flex;
    flex-direction: column;
    gap: var(--sp30);
}

/* ---- the field grid ----
   GF marks each field's width with a class rather than laying it out, so
   the grid is ours: two columns, `--g20` between the halves (the measured
   gap between the two half-width fields, §5.5) and `--sp45` between rows
   (the measured form-row gap, §5.4).

   The DEFAULT is full width and `--width-half` opts into one column, not
   the other way round — so a width class this file has never heard of
   (`--width-third`, `--width-quarter`) lands on a full row rather than
   collapsing to a sliver. */
.gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g20);
    row-gap: var(--sp30);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gform_wrapper .gform_fields .gfield {
    /* grid-column: 1 / -1; */
    /* the .field component: label over input, 10px apart */
    display: flex;
    flex-direction: column;
    gap: var(--sp10);
    min-width: 0;
}

.gform_wrapper .gform_fields .gfield--width-half {
    /* grid-column: span 1; */
}

/* ---- labels: the .field-label treatment ---- */
.gform_wrapper .gform_fields .gfield_label {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--f18);
    font-weight: var(--fw-body);
    line-height: var(--lhTight);
    color: var(--muted-invert);
}

.gform_wrapper .gform_fields .gfield_required {
    margin-left: 4px;
    color: var(--primary);
}

/* GF hides labels it considers decorative by moving them off-screen; keep
   that behaviour rather than dragging them back into view. */
.gform_wrapper .gform_fields .gfield_label.gform-field-label--type-sub,
.gform_wrapper .gform_fields .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- controls: the .field-input treatment ---- */
.gform_wrapper .gform_fields .ginput_container {
    display: block;
    margin: 0;
}

.gform_wrapper .gform_fields input[type="text"],
.gform_wrapper .gform_fields input[type="email"],
.gform_wrapper .gform_fields input[type="tel"],
.gform_wrapper .gform_fields input[type="url"],
.gform_wrapper .gform_fields input[type="number"],
.gform_wrapper .gform_fields input[type="password"],
.gform_wrapper .gform_fields select,
.gform_wrapper .gform_fields textarea {
    width: 100%;
    height: var(--field-h);
    padding-inline: var(--sp20);
    /* see THE ONE TRAP in the header */
    background: #252525;
    border: 0;
    border-radius: var(--r-none);
    font-family: var(--font-body);
    font-size: var(--f20);
    font-weight: var(--fw-body);
    color: var(--white);
    transition: var(--transition);

    &::placeholder { color: var(--muted-invert-soft); }
    &:hover { background: color-mix(in srgb, var(--white) 7%, var(--ink)); }
    &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
}

/* a textarea is the one control that is not one line tall */
.gform_wrapper .gform_fields textarea {
    height: auto;
    min-height: calc(var(--field-h) * 2);
    padding-block: var(--sp20);
    line-height: var(--bodyLh);
    resize: vertical;
}

/* ---- an HTML field is running copy, not a control ---- */
.gform_wrapper .gform_fields .gfield--type-html {
    font-size: var(--f18);
    line-height: var(--bodyLh);
    color: var(--muted-invert);
}

/* ---- description / validation ---- */
.gform_wrapper .gform_fields .gfield_description {
    font-size: var(--f18);
    line-height: var(--bodyLh);
    color: var(--muted-invert-soft);
}

.gform_wrapper .gform_fields .gfield_validation_message,
.gform_wrapper .gform_fields .validation_message {
    font-size: var(--f18);
    line-height: var(--bodyLh);
    color: var(--primary);
}

.gform_wrapper .gform_validation_errors {
    margin-bottom: var(--sp25);
    padding: var(--sp20);
    background: color-mix(in srgb, var(--white) 4%, var(--ink));
    font-size: var(--f18);
    color: var(--text-invert);
}

.gform_wrapper .gform_confirmation_message {
    font-size: var(--f20);
    line-height: var(--bodyLh);
    color: var(--text-invert);
}

/* ---- the submit button ----
   ⚠️ The RIGHT fix is to give GF's submit button the house classes rather
   than restyle it: `btn btn-primary btn-block` in the form's Button CSS
   class field (Gravity Forms → the submit button → Appearance → Custom
   CSS Class). That gets the real component — including the 5px corner
   notch and the pixel-fill hover btn-pixel.js attaches to every `.btn`
   (§4.2) — with nothing duplicated here.

   `:not(.btn)` is what keeps the two from fighting: with the classes
   present, `.btn` styles the button and this block is inert; without
   them, this is the fallback so the button is never left unstyled. The
   fallback deliberately omits the notch and the hover fill — duplicating
   that polygon is exactly what the classes exist to avoid. */
.gform_wrapper .gform_footer {
    display: flex;
    margin: 0;
    padding: 0;
}

.gform_wrapper .gform_footer button:not(.btn),
.gform_wrapper .gform_footer input[type="submit"]:not(.btn) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: var(--btn-h) !important;
    padding-inline: var(--sp30) !important;
    background: var(--primary);
    border: 0 !important;
    border-radius: var(--r-none);
    font-family: var(--font-body) !important;
    font-size: var(--f18) !important;
    font-weight: var(--fw-label) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    clip-path: polygon(var(--notch-sm) 0, calc(100% - var(--notch-sm)) 0, calc(100% - var(--notch-sm)) var(--notch-sm), 100% var(--notch-sm), 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, var(--notch-sm) 100%, var(--notch-sm) calc(100% - var(--notch-sm)), 0 calc(100% - var(--notch-sm)), 0 var(--notch-sm), var(--notch-sm) var(--notch-sm));

    &:hover { background: var(--primary-dark); 
        --n: var(--notch-sm);
        --n2: calc(var(--n) * 2);
        clip-path: polygon(var(--n2) 0, calc(100% - var(--n2)) 0, calc(100% - var(--n2)) var(--n), calc(100% - var(--n)) var(--n), calc(100% - var(--n)) var(--n2), 100% var(--n2), 100% calc(100% - var(--n2)), calc(100% - var(--n)) calc(100% - var(--n2)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n2)) calc(100% - var(--n)), calc(100% - var(--n2)) 100%, var(--n2) 100%, var(--n2) calc(100% - var(--n)), var(--n) calc(100% - var(--n)), var(--n) calc(100% - var(--n2)), 0 calc(100% - var(--n2)), 0 var(--n2), var(--n) var(--n2), var(--n) var(--n), var(--n2) var(--n));
    }
    &:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
}

/* .btn-block is width:100%, but the flex footer still has to let it fill */
.gform_wrapper .gform_footer .btn { flex: 1 1 auto; }

/* GF's spinner sits next to the button while it submits */
.gform_wrapper .gform_ajax_spinner {
    margin-left: var(--sp15);
}

/* ===================================================================
   responsive
   =================================================================== */
@media (max-width: 575.98px) {
    /* the two half-width fields stack, exactly as the hand-built
       .request__row did at this breakpoint */
    .gform_wrapper .gform_fields {
        grid-template-columns: 1fr;
    }

    .gform_wrapper .gform_fields .gfield--width-half {
        grid-column: 1 / -1;
    }
}
