/* ============================================================================
   SaaS listing intake form
   ----------------------------------------------------------------------------
   The two-step form that replaced the Tally embed on
   /list-your-sustainability-saas-with-us/. Rendered by
   inc/saas-listing-form.php; behaviour in assets/js/saas-listing-form.js.

   Built on the primitives in global.css - .gfi-cta, .gfi-field, .gfi-label -
   so only the step chrome, the pill multi-select and the decorative backdrop
   are defined here.

   Headings and paragraphs carry !important because global.css claims the bare
   h1-h6 and p selectors with !important of its own, and a class rule whose
   subject is one of those elements loses without it.
   ========================================================================= */

/* ============================================================================
   Screen 1 of 4 - Figma 348:11573
   ----------------------------------------------------------------------------
   Two columns as drawn: the pitch and trust band left, the name/email card
   right. This is a screen in the flow, not a header above the form - only one
   of the four screens is ever visible.
   ========================================================================= */

.gfi-saas-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: var(--gfi-space-9);
    width: 100%;
    max-width: var(--gfi-container-max);
    margin-inline: auto;
}

.gfi-saas-intro__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gfi-space-2);
    max-width: 640px;
}

.gfi-saas-intro__title {
    margin: 0 !important;
    color: var(--gfi-color-contrast-03) !important;
    font-family: var(--gfi-font-heading) !important;
    font-size: var(--gfi-font-h1) !important;
    font-weight: var(--gfi-fw-bold) !important;
    line-height: var(--gfi-lh-h1) !important;
    letter-spacing: var(--gfi-ls-heading) !important;
    text-align: left;
}

/* The frame draws this in accent-700 and the form screens in accent-500. Two
   different teals across one flow read as a bug, so both use the role token. */
.gfi-saas-intro__title-accent {
    color: var(--gfi-color-brand-accent);
}

.gfi-saas-intro__lede {
    margin: 0 !important;
    max-width: 480px;
    color: var(--gfi-color-text-muted) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-m) !important;
    font-weight: var(--gfi-fw-regular) !important;
    line-height: var(--gfi-lh-body-m) !important;
}

/* --- Trust band ----------------------------------------------------------- */

.gfi-saas-intro__brands {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
    margin-top: var(--gfi-space-6);
}

.gfi-saas-intro__brands-label {
    margin: 0 !important;
    color: var(--gfi-color-text-muted) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-caption) !important;
    font-weight: var(--gfi-fw-bold) !important;
    line-height: var(--gfi-lh-caption) !important;
    letter-spacing: var(--gfi-ls-eyebrow-m) !important;
    text-transform: uppercase;
}

.gfi-saas-intro__brands-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gfi-space-5);
}

.gfi-saas-intro__brands-row img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* --- The card ------------------------------------------------------------- */

.gfi-saas-intro__card {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
    padding: var(--gfi-space-4);
    border: 1px solid var(--gfi-color-border-soft);
    border-radius: var(--gfi-radius-lg);
    background: var(--gfi-color-surface);
    box-shadow: var(--gfi-shadow-lg);
}

@media (max-width: 1024px) {
    .gfi-saas-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gfi-space-6);
        max-width: 560px;
    }

    .gfi-saas-intro__copy {
        align-items: center;
        text-align: center;
    }

    .gfi-saas-intro__title {
        text-align: center !important;
    }

    .gfi-saas-intro__brands-row {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .gfi-saas-intro__brands {
        margin-top: var(--gfi-space-4);
    }

    .gfi-saas-intro__brands-row {
        gap: var(--gfi-space-3);
    }

    .gfi-saas-intro__brands-row img {
        width: 56px;
        height: 56px;
    }

    .gfi-saas-intro__card {
        padding: var(--gfi-space-3);
    }
}


/* ============================================================================
   The flow
   ========================================================================= */

.gfi-saas-form {
    position: relative;
    /* The node graphic has to paint past this section's own box: the section
       sits inside Elementor's boxed container, and `overflow: hidden` trimmed
       the graphic at that content edge, which showed as a hard vertical line
       with white gutters beyond it.

       `clip-path` frees it horizontally while still trimming it at the
       section's top and bottom, exactly as the frame does. `100vw` + negative
       margins is the more common full-bleed trick and is deliberately not used:
       100vw includes the classic scrollbar on Windows, so it overhangs the
       viewport and adds a horizontal scrollbar - the same reasoning as
       curated-job-collections.css. */
    clip-path: inset(0 -100vmax);
    padding-block: var(--gfi-space-6);
    background: var(--gfi-color-surface);
}

/* --- Decorative backdrop --------------------------------------------------
   The teal node graphic from the Figma frames, mirrored on the left. Purely
   decorative: empty alt, aria-hidden, and never a hit target. Dropped below
   1024px, where it would crowd the single column instead of framing it. */

.gfi-saas-form__backdrop {
    position: absolute;
    z-index: 0;
    opacity: 0.68;
    pointer-events: none;
    user-select: none;
    height: auto;
}

/* Sized and placed from the frame's own geometry, in viewport units so the
   graphic keeps its proportions at every width.

   In the 1440-wide frame the left copy is 893 wide starting at x -447, and the
   right copy is 757 wide starting at x 1034 - that is 62vw and 53vw. The
   percentages are of this section, which Elementor's kit caps at 1140 on
   desktop (post-1007.css), so at 1440 the left copy's inner edge lands at 446
   and the right copy starts at 1034: the frame's own numbers. Below that the
   vw widths keep both bleeding off the edge instead of pulling inward.

   The image's intrinsic 1885x1659 is the 1.136 ratio the frame draws, so
   `height: auto` reproduces its height without stating it. */

.gfi-saas-form__backdrop--left {
    top: -40px;
    left: calc(26% - 62vw);
    width: 62vw;
    transform: scaleX(-1);
}

.gfi-saas-form__backdrop--right {
    top: 80px;
    left: 77.5%;
    width: 53vw;
}

/* Figma draws the intro screen on plain white; the graphic only frames the
   three question screens. The script keeps this class in step with the screen
   on show. */
.gfi-saas-form.is-intro .gfi-saas-form__backdrop {
    display: none;
}

@media (max-width: 1024px) {
    .gfi-saas-form__backdrop {
        display: none;
    }
}

/* --- Step frame ----------------------------------------------------------- */

.gfi-saas-form__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--gfi-container-max);
    margin-inline: auto;
    padding-inline: var(--gfi-container-pad);
}

/* The three question screens are a narrow centred column. The intro screen
   overrides this to take the full container for its two columns. */
.gfi-saas-form__step {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-4);
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.gfi-saas-form__step--intro {
    max-width: none;
}

.gfi-saas-form__step[hidden] {
    display: none;
}

.gfi-saas-form__eyebrow {
    margin: 0 !important;
    color: var(--gfi-color-brand-accent) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-eyebrow-m) !important;
    font-weight: var(--gfi-fw-medium) !important;
    line-height: var(--gfi-lh-eyebrow-m) !important;
    letter-spacing: var(--gfi-ls-eyebrow-m) !important;
    text-align: center;
    text-transform: uppercase;
}

/* The eyebrow and the heading read as one unit, so they sit a single grid step
   apart rather than taking the step's own 4x gap. */
.gfi-saas-form__eyebrow + .gfi-saas-form__title {
    margin-top: calc(var(--gfi-space-4) * -1 + var(--gfi-space-1)) !important;
}

/* H2 rather than the frame's 56px, so it sits below the hero's <h1> instead of
   competing with it. The frames drew these as separate full screens; stacking
   them on one page is what makes the step heading the smaller of the two. */
.gfi-saas-form__title {
    margin: 0 !important;
    color: var(--gfi-color-contrast-03) !important;
    font-family: var(--gfi-font-heading) !important;
    font-size: var(--gfi-font-h2) !important;
    font-weight: var(--gfi-fw-bold) !important;
    line-height: var(--gfi-lh-h2) !important;
    letter-spacing: var(--gfi-ls-heading) !important;
    text-align: center;
}

.gfi-saas-form__title-accent {
    color: var(--gfi-color-brand-accent);
}

.gfi-saas-form__subtitle {
    margin: 0 !important;
    color: var(--gfi-color-text-muted) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-l) !important;
    font-weight: var(--gfi-fw-regular) !important;
    line-height: var(--gfi-lh-body-l) !important;
    text-align: center;
}

.gfi-saas-form__title + .gfi-saas-form__subtitle {
    margin-top: calc(var(--gfi-space-4) * -1 + var(--gfi-space-2)) !important;
}

/* --- Text fields ---------------------------------------------------------- */

.gfi-saas-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
}

.gfi-saas-form__field {
    display: flex;
    flex-direction: column;
}

.gfi-saas-form__field-label {
    color: var(--gfi-color-text-soft) !important;
}

/* Every question the Tally form asked was required and showed an asterisk.
   Colour alone never carries the meaning - the asterisk is the signal, and a
   visually-hidden "(required)" follows it for screen readers. */
.gfi-saas-form__required {
    color: var(--gfi-color-error);
}

.gfi-saas-form__optional {
    color: var(--gfi-color-text-soft);
    font-weight: var(--gfi-fw-regular);
}

.gfi-saas-form__input--textarea {
    min-height: 128px;
    padding-block: var(--gfi-space-2);
    resize: vertical;
}

/* --- Question block ------------------------------------------------------- */

.gfi-saas-form__question {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-2);
}

.gfi-saas-form__question-legend {
    display: flex;
    flex-direction: column;
    gap: var(--gfi-space-0-5);
}

.gfi-saas-form__question-label {
    color: var(--gfi-color-contrast-02);
    font-family: var(--gfi-font-heading);
    font-size: var(--gfi-font-h6);
    font-weight: var(--gfi-fw-bold);
    line-height: var(--gfi-lh-h6);
    letter-spacing: var(--gfi-ls-heading-sm);
}

.gfi-saas-form__question-hint {
    color: var(--gfi-color-text-soft);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-s);
    font-weight: var(--gfi-fw-medium);
    line-height: var(--gfi-lh-body-s);
}

/* --- Pill multi-select ---------------------------------------------------- */

.gfi-saas-form__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gfi-space-1);
}

.gfi-saas-form__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--gfi-space-1) var(--gfi-space-2);
    border: 1px solid var(--gfi-color-border);
    border-radius: var(--gfi-radius-pill);
    background: var(--gfi-color-surface);
    cursor: pointer;
    transition: border-color var(--gfi-duration-base) var(--gfi-ease),
                background var(--gfi-duration-base) var(--gfi-ease);
}

.gfi-saas-form__chip:hover {
    border-color: var(--gfi-color-brand);
}

/* The checkbox itself is hidden with the shared .gfi-visually-hidden primitive
   in the markup, so it stays in the accessibility tree and keeps the label
   clickable while the pill around it is what gets painted. */

.gfi-saas-form__chip-text {
    color: var(--gfi-color-contrast-02);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    font-weight: var(--gfi-fw-regular);
    line-height: var(--gfi-lh-button);
}

.gfi-saas-form__chip-input:checked ~ .gfi-saas-form__chip-text {
    color: var(--gfi-color-brand-accent);
    font-weight: var(--gfi-fw-medium);
}

/* The script mirrors the checked state onto the label as .is-selected, so the
   pill still fills in on a browser without :has(). */
.gfi-saas-form__chip.is-selected,
.gfi-saas-form__chip:has(.gfi-saas-form__chip-input:checked) {
    border-color: var(--gfi-color-brand-accent);
    background: var(--gfi-color-surface-accent);
}

.gfi-saas-form__chip:has(.gfi-saas-form__chip-input:focus-visible) {
    outline: 2px solid var(--gfi-color-focus-ring);
    outline-offset: 2px;
}

/* --- Dropdown ------------------------------------------------------------- */

.gfi-saas-form__select-wrap {
    position: relative;
}

.gfi-saas-form__select {
    /* Room for the caret, which is painted as a background image because a
       native <select> cannot hold a child element. */
    padding-right: var(--gfi-space-5);
    background-image: url("../images/saas-listing/caret-down.svg");
    background-repeat: no-repeat;
    background-position: right var(--gfi-space-2) center;
    background-size: 16px 16px;
    appearance: none;
    cursor: pointer;
}

/* --- "Other" free text ---------------------------------------------------- */

.gfi-saas-form__other {
    display: flex;
    flex-direction: column;
}

.gfi-saas-form__other[hidden] {
    display: none;
}

/* --- Validation ----------------------------------------------------------- */

.gfi-saas-form__error {
    margin: var(--gfi-space-0-5) 0 0 !important;
    color: var(--gfi-color-error) !important;
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-body-s) !important;
    font-weight: var(--gfi-fw-regular) !important;
    line-height: var(--gfi-lh-body-s) !important;
}

.gfi-saas-form__error[hidden] {
    display: none;
}

.gfi-saas-form__error--form {
    text-align: center;
}

.gfi-saas-form__input.is-invalid,
.gfi-saas-form__select.is-invalid {
    border-color: var(--gfi-color-error);
}

/* --- Actions -------------------------------------------------------------- */

.gfi-saas-form__actions {
    display: flex;
    justify-content: center;
    gap: var(--gfi-space-2);
}

/* The intro card's Continue button spans the card, as drawn. */
.gfi-saas-form__actions--block {
    margin-top: var(--gfi-space-1);
}

.gfi-saas-form__actions--block .gfi-cta {
    width: 100%;
}

.gfi-saas-form__next img {
    display: block;
    flex: 0 0 auto;
}

.gfi-saas-form__next[aria-busy="true"] img {
    visibility: hidden;
}

/* --- Confirmation --------------------------------------------------------- */

.gfi-saas-form__step--done {
    align-items: center;
    padding-block: var(--gfi-space-8);
    text-align: center;
}

/* --- Honeypot -------------------------------------------------------------
   Taken out of flow rather than display:none, because some bots skip fields
   that are outright hidden. */

.gfi-saas-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
    .gfi-saas-form {
        padding-block: var(--gfi-space-4);
    }

    .gfi-saas-form__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}