/*
 * Layerly Forms — the KIT stylesheet. LAYERLY-FORMS-PLAN.md §11, Phase 2.
 *
 * WHAT THIS IS FOR. assets/layerly-forms.css carries the form component's rules, and every one of
 * them is written against the layerly-base theme's tokens (--space-md, --color-text, --radius-md
 * …). On a site running our theme those tokens exist and the form looks like the site. On an
 * Elementor site they do not exist at all, and an undefined custom property does not fall back to
 * anything sensible — `gap: var(--form-gap)` where --form-gap resolved from a missing --space-md
 * is invalid at computed-value time, so the gap silently becomes zero. On top of that the
 * `.field*` primitives live in the THEME, not in the plugin, so the inputs arrive with no rules at
 * all. That is the second half of premortem hazard H6: "no styling source".
 *
 * So this file is the token layer AND the field primitives for a site that has neither. It is
 * enqueued ONLY where layerly_site_engine() says 'foreign' — a Layerly-theme site never loads it
 * and is bit-for-bit unaffected — and every rule is scoped under `.layerly-form-host`, the wrapper
 * the Elementor widget and the [layerly_form] shortcode put around the form. Nothing here can
 * reach a client's own markup.
 *
 * HOW IT INHERITS. Elementor writes its kit's global colours and fonts as custom properties on
 * the body (`.elementor-kit-<id>`, see core/kits/documents/kit.php::get_css_wrapper_selector),
 * named --e-global-color-{primary,secondary,text,accent} and
 * --e-global-typography-{primary,secondary,text,accent}-font-family. Our form sits inside the
 * body, so it can read them. Every single one is used with a fallback chain that ends at
 * `inherit` or `currentColor`, so a site with no Elementor kit — or a kit that never defined that
 * slot — gets the surrounding page's own colour and type rather than a Layerly-looking default.
 * Sizes are `em`-relative for the same reason: the form takes the host's scale instead of
 * imposing ours.
 *
 * The two things that cannot be derived are spacing and radius: an Elementor kit exposes no
 * global scale for either. Those are declared here as this surface's own tokens (the token layer
 * is the one place raw values are allowed to live, S10) and are overridable per widget through
 * the Style tab, which writes --lf-* straight onto the element.
 */

.layerly-form-host {
    /* ── Derived from the host. Each chain ends at the surrounding page. ── */
    --lf-text: var(--e-global-color-text, currentColor);
    --lf-heading: var(--e-global-color-secondary, var(--e-global-color-text, currentColor));
    --lf-accent: var(--e-global-color-accent, var(--e-global-color-primary, currentColor));
    --lf-font: var(--e-global-typography-text-font-family, inherit);
    --lf-font-label: var(--e-global-typography-secondary-font-family, var(--e-global-typography-text-font-family, inherit));

    /* ── This surface's own scale. No kit equivalent exists to derive from. ── */
    --lf-gap: 1rem;
    --lf-gap-sm: .5rem;
    --lf-gap-xs: .35rem;
    --lf-pad: .75rem .9rem;
    --lf-radius: 6px;
    --lf-border-width: 1px;
    --lf-cols: 2;

    /* ── Composed. Overridden per widget by the Style tab, which writes these names. ── */
    --lf-label: var(--lf-heading);
    --lf-field-fg: var(--lf-text);
    /* Transparent on purpose: an input with no background of its own sits correctly on a light
     * section and on a dark one, which a guessed surface colour cannot do. */
    --lf-field-bg: transparent;
    --lf-field-border: color-mix(in srgb, currentColor 25%, transparent);
    --lf-focus: var(--lf-accent);
    --lf-error: #b3261e;
    --lf-success: #1a7f37;

    /* THE BUTTON'S COLOUR IS THE ONE PLACE `currentColor` IS NOT A SAFE FALLBACK, and it took
     * rendering the form on a page with no kit to see it: --lf-accent ends at currentColor, so
     * `background: var(--lf-accent)` on a button whose text is white resolves to white on white
     * and the send button disappears. A form nobody can see the button of is worse than an
     * unstyled one.
     *
     * So this chain deliberately has NO final fallback. On a site with an Elementor kit it is a
     * colour and the button is filled with it. On a site with no kit at all it is the
     * guaranteed-invalid value, which makes every declaration that reads it invalid at
     * computed-value time — and the .form__submit rule below is written in two halves so that
     * when those drop out, an outlined button drawn in the page's own text colour is what
     * remains. Legible on white, on cream, on near-black; never white on white. */
    --lf-btn-bg: var(--e-global-color-accent, var(--e-global-color-primary));
    --lf-btn-fg: #fff;

    font-family: var(--lf-font);
    color: var(--lf-text);
}

/* ── The component knobs assets/layerly-forms.css declares against THEME tokens, re-pointed at
 *    the derived ones. Higher specificity (0,2,0) than that file's bare `.form`, and this sheet
 *    is enqueued with `layerly-forms` as a dependency so it also loads after it. ── */
.layerly-form-host .form {
    --form-gap: var(--lf-gap);
    --form-cols: var(--lf-cols);
    --field-bg: var(--lf-field-bg);
    --field-fg: var(--lf-field-fg);
    --field-border: var(--lf-field-border);
    --field-radius: var(--lf-radius);
    --field-pad: var(--lf-pad);
    --field-focus: var(--lf-focus);
    --label-color: var(--lf-label);
    /* Read directly by .form__status in the base sheet. */
    --space-sm: var(--lf-gap-sm);
    --text-sm: .875em;
    --color-error: var(--lf-error);
    --color-success: var(--lf-success);
}

/* ── The field primitives. These live in layerly-base-theme/style.css, which a foreign site does
 *    not have, so they are restated here — same declarations, reading the same knob names, so a
 *    field renders identically whichever stylesheet is in play. ── */
.layerly-form-host .field--full { grid-column: 1 / -1; }
.layerly-form-host .field { display: flex; flex-direction: column; gap: var(--lf-gap-xs); }
.layerly-form-host .field__label {
    font-family: var(--lf-font-label);
    font-size: .875em;
    font-weight: 500;
    color: var(--lf-label);
}
.layerly-form-host .field__req { color: var(--lf-error); }
.layerly-form-host .field__input {
    width: 100%; box-sizing: border-box;
    background: var(--lf-field-bg); color: var(--lf-field-fg);
    border: var(--lf-border-width) solid var(--lf-field-border);
    border-radius: var(--lf-radius);
    padding: var(--lf-pad);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.layerly-form-host .field__input::placeholder { color: currentColor; opacity: .55; }
.layerly-form-host .field__input:focus-visible {
    outline: none;
    border-color: var(--lf-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-focus) 25%, transparent);
}
.layerly-form-host .field__textarea { resize: vertical; min-height: 120px; }
.layerly-form-host .field--checkbox .field__check {
    display: flex; flex-direction: row; align-items: center; gap: var(--lf-gap-sm); cursor: pointer;
}
.layerly-form-host .field__checkbox { width: 18px; height: 18px; accent-color: var(--lf-focus); }
.layerly-form-host .field__check-label { font-size: .875em; color: var(--lf-text); }

/* ── The submit button. `.btn .btn--primary` are layerly-base classes and mean nothing here, so
 *    the rule is written against .form__submit, which the renderer always emits. ── */
.layerly-form-host .form__submit {
    display: inline-block;
    cursor: pointer;
    border-radius: var(--lf-radius);
    padding: var(--lf-pad);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    transition: opacity .15s;
    /* The state a site with no kit colour keeps: outlined, in whatever colour the page's own
     * text is. See --lf-btn-bg above for why this is the floor rather than a guessed fill. */
    background: transparent;
    color: inherit;
    border: 2px solid currentColor;
}
/* And the filled state, for a site that HAS a kit colour. All three read --lf-btn-bg, so on a
 * site without one all three are invalid at computed-value time together and the rule above
 * stands — there is no half-applied state where the fill lands but the text colour does not.
 * The color-mix is what puts `color` on that same chain: 100% of --lf-btn-fg mixed with 0% of
 * --lf-btn-bg is exactly --lf-btn-fg, and is invalid whenever --lf-btn-bg is. */
.layerly-form-host .form__submit {
    background: var(--lf-btn-bg);
    border-color: var(--lf-btn-bg);
    color: color-mix(in srgb, var(--lf-btn-fg) 100%, var(--lf-btn-bg) 0%);
}
.layerly-form-host .form__submit:hover { opacity: .88; }
.layerly-form-host .form__submit:focus-visible {
    outline: 2px solid var(--lf-focus);
    outline-offset: 2px;
}
.layerly-form-host .form__submit[disabled] { opacity: .6; cursor: default; }

/* The status line is the only thing a visitor sees after pressing send, so it must be legible
 * before the base sheet's own rule is considered — it reads --space-sm/--text-sm, re-declared
 * above. Colour is restated here because `.form__status.is-error` (0,2,0) would otherwise tie
 * with this sheet's own scoped rule and win by document order from whichever loaded last. */
.layerly-form-host .form__status { font-size: .875em; }
.layerly-form-host .form__status.is-error { color: var(--lf-error); }
.layerly-form-host .form__status.is-success { color: var(--lf-success); }

/* An editor-only note. Never rendered on the front end — layerly_form_markup() returns an empty
 * string when a site's forms are switched off, and only the widget's edit-mode branch emits
 * this, so a client who has paused their forms sees why the box is empty instead of a blank. */
.layerly-form-host .layerly-form-notice {
    padding: var(--lf-pad);
    border: 1px dashed var(--lf-field-border);
    border-radius: var(--lf-radius);
    font-size: .875em;
    color: var(--lf-text);
    opacity: .8;
}

@media (max-width: 600px) {
    .layerly-form-host .form { --form-cols: 1; }
}