/*
 * Defaults for the floating-mode trigger button.
 *
 * Lives in `@layer components` so it shares a layer with theme-level plugin
 * styles. Inside one layer the cascade is decided by specificity, so any
 * normal class selector in your theme (e.g. `.gform_wrapper.gravity-theme
 * .gform_button`) overrides us trivially — our `:where()` is 0,0,0.
 *
 * Picking this layer (instead of an isolated one) buys us protection against
 * `@layer base` browser resets in Tailwind v4 / Roots stacks: in the order
 * `theme, base, components, utilities`, components outranks base, so resets
 * can no longer strip our padding/border/color before the form renders.
 *
 * Each property is wired through a three-step var fallback chain:
 *
 *   1. `--cap-captcha-<prop>` — our public API; override to skin the button
 *   2. `--gf-ctrl-btn-<prop>` — Gravity Forms 2.5 Orbital theme tokens
 *   3. a hard-coded sensible default
 *
 * The trigger renders as a neutral / secondary button on purpose: it pairs
 * with the form's own primary submit so the visual hierarchy stays correct
 * (one primary CTA, not two). Override via `--cap-captcha-bg/-color` if your
 * project needs the trigger to look like the primary action.
 *
 * CSS Nesting is a Baseline 2023 feature — supported in every evergreen
 * browser by the time WP 6.5 (our minimum) shipped, so we use it freely.
 */

/*
 * Pre-declare the canonical Tailwind v4 / Roots layer order. If the host site
 * already declared an order, its first declaration wins and this is a no-op.
 */
@layer theme, base, components, utilities;

@layer components {
    :where(.cap-captcha-floating-trigger) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;

        padding:
            var(--cap-captcha-padding-y, var(--gf-ctrl-btn-padding-y, 0.6em))
            var(--cap-captcha-padding-x, var(--gf-ctrl-btn-padding-x, 1.2em));

        border: var(--cap-captcha-border, 1px solid var(--gf-ctrl-border-color, currentColor));
        border-radius: var(--cap-captcha-radius, var(--gf-ctrl-btn-radius, var(--gf-radius, 0.25em)));

        background-color: var(--cap-captcha-bg, transparent);
        color: var(--cap-captcha-color, inherit);

        font-family: var(--cap-captcha-font-family, var(--gf-ctrl-btn-font-family, inherit));
        font-size: var(--cap-captcha-font-size, var(--gf-ctrl-btn-font-size, inherit));
        line-height: var(--cap-captcha-line-height, var(--gf-ctrl-btn-line-height, 1.2));

        box-shadow: var(--cap-captcha-shadow, none);

        cursor: pointer;
        text-decoration: none;
        transition: var(
            --cap-captcha-transition,
            var(--gf-transition-ctrl, background-color 120ms ease, color 120ms ease, border-color 120ms ease)
        );

        &:hover,
        &:focus-visible {
            background-color: var(--cap-captcha-bg-hover, color-mix(in srgb, currentColor 8%, transparent));
            color: var(--cap-captcha-color-hover, inherit);
            border-color: var(--cap-captcha-border-color-hover, var(--gf-ctrl-border-color-hover, currentColor));
        }

        &:focus-visible {
            outline: 2px solid var(--cap-captcha-focus-ring, var(--gf-color-primary, currentColor));
            outline-offset: 2px;
        }

        &[disabled] {
            opacity: 0.6;
            cursor: default;
            pointer-events: none;
        }

        /*
         * After solve, cap-widget.floating sets data-cap-progress="done" on
         * the trigger and our floating-autosubmit helper submits the form
         * ~80ms later. Hide the trigger immediately so the user doesn't see
         * a "completed" button flicker before the page navigates.
         */
        &[data-cap-progress="done"] {
            display: none;
        }
    }

    /*
     * Gravity Forms Orbital presets for <cap-widget>.
     *
     * The widget renders in a shadow root and reads its look from `--cap-*`
     * custom properties, which inherit through the shadow boundary. Orbital
     * keeps the look of every form control in `--gf-*` tokens on the form
     * wrapper, including the colours and radius picked in the block editor's
     * form styles, which Gravity Forms prints inline on that same wrapper.
     * Mapping one onto the other makes the CAPTCHA look like the fields
     * around it without any theme CSS.
     *
     * Set on the wrapper, not on `cap-widget`: a declaration on the element
     * itself would beat anything a theme sets on an ancestor, regardless of
     * layer or specificity. Here a theme overrides by setting `--cap-*` on
     * `cap-widget`, on `.cap-captcha`, or on the wrapper with any class
     * selector. Only `:root` no longer reaches, because this is closer.
     *
     * The legacy Gravity Forms theme has no `--gf-*` tokens and no
     * `.gform-theme--framework` class, so nothing here applies to it.
     */
    :where(.gform-theme--framework) {
        /*
         * Orbital ships `--gf-font-family-base: initial`, so its fields end up
         * with an invalid font-family and inherit the page font. `0` does the
         * same for the widget: it is not a valid font-family, so the shadow
         * root falls back to inheriting from the host instead of using the
         * widget's system stack. `inherit` would not work here, a CSS-wide
         * keyword in a custom property applies to the property itself.
         */
        --cap-font: var(--gf-font-family-base, 0);
        --cap-color: var(--gf-ctrl-color);
        --cap-background: var(--gf-ctrl-bg-color);
        --cap-border-color: var(--gf-ctrl-border-color);
        --cap-border-radius: var(--gf-ctrl-radius);
        --cap-widget-height: var(--gf-ctrl-size);
        --cap-widget-padding: var(--gf-ctrl-padding-x);
        --cap-checkbox-size: var(--gf-ctrl-choice-size);
        --cap-checkbox-border: var(--gf-ctrl-border-width) var(--gf-ctrl-border-style) var(--gf-ctrl-border-color);
        --cap-checkbox-border-radius: var(--gf-ctrl-checkbox-check-radius);
        --cap-checkbox-background: var(--gf-ctrl-bg-color);
        --cap-focus-ring: var(--gf-ctrl-outline-color-focus);
        --cap-spinner-color: var(--gf-color-primary);
        --cap-spinner-background-color: var(--gf-ctrl-border-color);
        --cap-invalid-border-color: var(--gf-ctrl-border-color-error);
    }

}

/*
 * wp-login.php context.
 *
 * Deliberately UNLAYERED so we can beat WP's own unlayered `.wp-core-ui
 * .button` rules — anything inside `@layer components` loses to them
 * regardless of specificity. We also use `body.login` (instead of plain
 * `.login`) to lift our selector to specificity 0,2,1, edging out
 * `.wp-core-ui .button` at 0,2,0.
 */
/*
 * wp-login.php stacks its form controls with no gap of their own, so a widget
 * followed by the submit button sits flush against it. Only when something
 * follows — the last element gets its spacing from the form itself.
 *
 * `:where(.login)` keeps this at 0,2,0 so a theme can override it with a plain
 * class; nothing in WP core sets a margin on `.cap-captcha`, so we don't need
 * the `body.login` weight the rules below rely on.
 */
:where(.login) .cap-captcha:not(:last-child) {
    margin-block-end: 1rem;
}

body.login .cap-captcha--floating {
    clear: both;
    margin: 1em 0;
    text-align: center;
}

body.login .cap-captcha-floating-trigger {
  float: none;
  width: 100%;
}

/*
 * Done state. cap-widget.floating sets data-cap-progress="done" on the
 * trigger after solve; we hide it immediately so the user doesn't see a
 * "completed but unclickable" button while the autosubmit (~80ms) fires.
 * Must be unlayered + specific enough to outrank `.wp-core-ui .button`
 * (0,2,0); the attribute selector lifts us to 0,2,2.
 */
body.login .cap-captcha-floating-trigger[data-cap-progress="done"] {
    display: none;
}