/**
 * FormLayer — form presentation fixes.
 *
 * FormLayer is a separate plugin, and its forms are styled per page through
 * Elementor container Custom CSS. That block is duplicated on every page that
 * has a form, so any fix has to be applied five times and a new form would
 * need it again. These rules are global instead — one source of truth for
 * every form, present and future.
 *
 * SPECIFICITY. The per-page rules look like
 *     :is(.elementor-element-XXXXXXXX, [data-id="XXXXXXXX"]) .formlayer-part
 * which is TWO classes, and the page's <style> is printed *after* this
 * stylesheet (it rides `wp_head` at priority 10; enqueued stylesheets print at
 * 8). So a tie would go to the page. Every rule below therefore uses THREE
 * classes — wrapper → form → part — to win on specificity rather than on
 * order. That keeps `!important` out of it, which matters because the page CSS
 * already uses it in places and a war of `!important` is unwinnable.
 *
 * BREAKPOINTS mirror the page CSS (480px), because a rule here at a higher
 * specificity beats the page's own media-query rules too — so anything the
 * page adjusts on mobile has to be adjusted here as well.
 */

/* ------------------------------------------------------------------
   1. Choice lists — checkbox and radio options must not span the form.
   The per-page CSS turns each option into a white "choice card", which is
   right, but the card stretched to the full field width: six near-empty bars
   a thousand pixels long. Cap it at a comfortable reading width. The cards
   stay a uniform size so the list reads as a set rather than as ragged rows.
   `max-width` (not `width`) so it still shrinks inside a phone-width card.
   ------------------------------------------------------------------ */
.formlayer-form-wrapper .formlayer-form .formlayer-option-label {
  max-width: 22rem;
}

/* ------------------------------------------------------------------
   2. Submit button icon — match the rest of the site.
   The page drew its arrow with the typographic character U+2192 as text.
   That is a different shape from the arrow every other button on the site
   uses, and because it sits on a text baseline it never truly centred in the
   circular badge. The site draws this arrow with the Happy Icons glyph
   `hm-arrow-right` (\e90f), so use the same glyph here. The font is already
   loaded on every page that has a form (the buttons depend on it).

   SPECIFICITY — this rule has to beat the PAGE, not just FormLayer.
   Every form page carries its own copy of this badge, generated into
   `uploads/elementor/css/post-<id>.css`, e.g. on /contact-us/:

       .elementor-130 .elementor-element.elementor-element-16c49b0
         .formlayer-submit-btn::after { content: "\2192"; font-size: 19px; ... }

   Four classes plus one pseudo-element = (0,4,1), and it sets BOTH `content`
   and `font-size`. (The same declaration also exists in our plugin's atomic
   block as `:is(.elementor-element-<id>, [data-id="<id>"]) .formlayer-submit-btn::after`,
   which is only (0,2,1) — so calibrating against the atomic copy is exactly how
   this rule came to be written one class too low. See G82/G89 and rule 3.)
   This file prints BEFORE that page CSS (enqueued sheets ride
   `wp_head` at 8, the page block at 10), so a tie loses. A three-class
   selector here — which is what this rule used to be — is (0,3,1) and loses
   outright. That is why the arrow was still U+2192 on all six form pages even
   though this rule looked correct: measured on the live pages, the computed
   `content` was U+2192 and the ONLY declaration this rule actually won was
   `font-family`. The wrong font then rendered the wrong glyph, which is also
   what made the badge look off-centre.

   So the rule now carries five class-level tokens — `.formlayer-submit-wrap`
   (every FormLayer button sits in one) plus `[type="submit"]` (FormLayer always
   emits `<button type="submit">`, and the page CSS keys on the same token) —
   and the `:not(footer *)` exclusion, giving (0,5,2) and winning on the class
   column. The exclusion is what keeps the footer's newsletter bar (rule 5) out
   of this: its button is a `[type="submit"]` too, and without the exclusion
   this rule would repaint that bar.

   `:not()` takes a COMPOUND argument, which needs a 2021-or-later engine
   (Chrome 88, Firefox 84). An older engine drops this whole rule, and the
   badge then falls back to the page's own U+2192 badge — the pre-1.6.0 look,
   not to nothing.

   Geometry is restated here rather than inherited, so this file is the single
   source of truth for the badge on every form, present and future: a 42px
   circle carrying a 22px glyph (~52%, matching the site's own 32px/17px
   `soapkits-pill` badge), centred with flex rather than on a text baseline.

   The glyph needs no nudge. Measured in the loaded font, the Happy Icons
   \e90f ink box centres itself (dy 0.0px, dx -0.5px), while U+2192 sits 3px
   BELOW centre and its ink is only 7px tall against this glyph's 16px — which
   is the whole of the user-visible complaint. font-weight is deliberately left
   alone — the page sets 700 and the pill buttons inherit 700 too, so the two
   arrows keep the same (synthetic-bold) weight.
   ------------------------------------------------------------------ */
.formlayer-form-wrapper .formlayer-form .formlayer-submit-wrap .formlayer-submit-btn[type="submit"]:not(footer *)::after,
.formlayer-form-wrapper .formlayer-form .formlayer-submit-btn[type="submit"]:not(footer *)::after {
  font-family: "Happy Icons";
  content: "\e90f";
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: #FFA94D;
  border-radius: 50%;
}

/* ------------------------------------------------------------------
   3. Submit button padding, in rem.
   Same values the page used in px — 11px / 30px — expressed as rem so the
   button scales with the root font size like the rest of the design system.

   ⚠️ MEASURED 2026-10-11 — THIS RULE DOES NOT APPLY, and has not since it was
   written. The computed padding is the page's `11px 11px 11px 30px`, not the
   12.375px / 33.75px this rule's rem maths gives at this site's 18px root; and
   injecting `padding: 77px` at this rule's exact selector and specificity
   leaves the computed padding unchanged. So `(0,4,1)` loses here.

   WHY THE OLD COMMENT WAS WRONG. It quoted the page's selectors as
       :is(...) .formlayer-submit-btn                      → (0,2,0)
       :is(...) button[type="submit"].formlayer-submit-btn → (0,3,1)
   Those are the ATOMIC block's. But `soapkit_custom_css` is printed TWICE — once
   by our plugin's atomic block, and once by Elementor itself into
   `uploads/elementor/css/post-<id>.css` using the FULL element chain (G82/G89).
   The second copy of the SAME declaration is two class-level tokens higher:

       .elementor-134 .elementor-element.elementor-element-4ce6c86
         .formlayer-submit-btn                              → (0,4,0)
       .elementor-134 .elementor-element.elementor-element-4ce6c86
         button[type="submit"].formlayer-submit-btn          → (0,5,1)

   And it is a selector LIST whose BOTH halves match FormLayer's
   `<button type="submit">`, so the effective specificity is the HIGHER one,
   (0,5,1) — which beats this rule's (0,4,1). Calibrating against the atomic copy
   is what made this rule (and rule 2) look correct while doing nothing.

   LEFT AS-IS ON PURPOSE. Raising it would move every form's button padding from
   the page's 11/30px to 12.375/33.75px — a visible design change that is out of
   scope for the 1.9.5 arrow fix. Note it needs SIX class-level tokens, not five:
   unlike the `::after` rule in rule 2 there is no pseudo-element to supply the
   extra element-level token. The shape that would win is
       .formlayer-form-wrapper .formlayer-form .formlayer-submit-wrap
         button.formlayer-submit-btn[type="submit"]:not(footer *)   → (0,5,2)
   Decide about that change before "fixing" this comment. The plain selector is
   kept alongside purely as a fallback for a form without the wrapper.

   `:not(footer *)` — the footer newsletter button is a DIFFERENT component
   and must not be caught here. See rule 5.

   That `:not()` takes a COMPOUND argument, which needs a 2021-or-later
   engine (complex selectors in `:not()` — Chrome 88, Firefox 84; Safari
   has had it longer). An older engine drops this rule outright, and the pill
   buttons then keep the page's own `11px 11px 11px 30px` — which, as measured
   above, is exactly what happens today anyway.
   ------------------------------------------------------------------ */
.formlayer-form-wrapper .formlayer-form .formlayer-submit-wrap .formlayer-submit-btn:not(footer *),
.formlayer-form-wrapper .formlayer-form .formlayer-submit-btn:not(footer *) {
  padding: 0.6875rem 0.6875rem 0.6875rem 1.875rem; /* 11px 11px 11px 30px */
}

@media (max-width: 480px) {
  .formlayer-form-wrapper .formlayer-form .formlayer-submit-wrap .formlayer-submit-btn:not(footer *),
  .formlayer-form-wrapper .formlayer-form .formlayer-submit-btn:not(footer *) {
    padding: 0.625rem 0.625rem 0.625rem 1.375rem; /* 10px 10px 10px 22px */
  }

  /* The badge shrinks to 36px on a narrow phone, so the glyph has to come down
     with it or it crowds the circle. Restated at rule 2's own (0,5,2), because
     rule 2 now outranks the page's `@media (max-width: 480px)` badge rule
     (0,4,1) as well — so every value the page shrinks on mobile has to be
     shrunk here too, or the desktop 42px circle would ride down into phone
     layouts. 19px inside a 36px badge is the same ~53% ratio as the desktop
     22px inside 42px. */
  .formlayer-form-wrapper .formlayer-form .formlayer-submit-wrap .formlayer-submit-btn[type="submit"]:not(footer *)::after,
  .formlayer-form-wrapper .formlayer-form .formlayer-submit-btn[type="submit"]:not(footer *)::after {
    font-size: 19px;
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------------
   4. Field borders — one width, on every form.
   The page forms drew their fields at 2px but the footer form sharing the
   same pages drew its field at 1px, so the two read as different components.
   Measured on /crop-production-partners/: the nine main-form fields were
   `2px rgb(106,131,117)` while the footer field was `1px rgb(114,117,114)`.
   (contact-us was the odd one out the other way — its main form was already
   1px — so "consistent" was never true across pages either.)

   Normalise the WIDTH to 1px and leave each context's colour and radius
   alone. That is deliberate: the footer form sits on a dark background and
   genuinely needs a lighter border colour, and contact-us uses a warm tone
   from its own palette. Unifying the colour would repaint four forms to fix
   a width problem.

   `border-width`, NOT the `border` shorthand — the shorthand would also
   reset `border-style` and `border-color`, flattening every form's border to
   one colour. Each page's `:focus` rule sets only `border-color`, so the 1px
   width carries through to the focus state as well.

   SPECIFICITY: the page's field rule is
       :is(…) .formlayer-form input[type="text"]   → (0,3,1)
   so a three-class selector would lose here exactly as it did for the button
   padding (G47). Naming `.formlayer-field-wrap` — which every field sits in —
   takes this to (0,4,0), and the element-qualified forms to (0,4,1). All 10
   fields across the five pages carry `.formlayer-input`, so the first
   selector alone covers them; the rest are for a field that does not.

   Scope note: the checkbox/radio inputs inside the choice cards have no
   class and are NOT matched, and the `.formlayer-option-label` cards keep
   their own 2px border — they are cards, not fields.
   ------------------------------------------------------------------ */
.formlayer-form-wrapper .formlayer-form .formlayer-field-wrap .formlayer-input,
.formlayer-form-wrapper .formlayer-form .formlayer-field-wrap input.formlayer-input,
.formlayer-form-wrapper .formlayer-form .formlayer-field-wrap textarea.formlayer-input,
.formlayer-form-wrapper .formlayer-form .formlayer-field-wrap select.formlayer-input {
  border-width: 1px;
}

/* ------------------------------------------------------------------
   5. Footer newsletter button — a different component, not a pill.
   Rules 2 and 3 are written for the *pill* submit buttons on the form
   pages: a 42px circular arrow badge sits on the right, cleared by an
   asymmetric 30px left / 11px right padding, and the glyph is sized to
   that 42px badge.

   The footer's submit is not a pill. It is a full-width bar the page
   styles end to end:

       .formlayer-form .formlayer-submit-btn {
         width: 100% !important; height: 44px; padding: 0 10px;
         border: 0; border-radius: 8px; font-size: 14px; ...
       }

   Rules 2 and 3 outrank that (the page's selector is (0,3,0), ours is
   (0,4,0)), so applying them to the bar did two visibly wrong things —
   both measured on the live page before this rule existed:

     * the asymmetric padding pushed the label + arrow 10.5px right of
       the button's centre, because the asymmetry only exists to clear a
       badge that is not there, and
     * the 22px badge glyph landed beside 14px label text with no gap at
       all, so the arrow read as the last letter of "Join Now".

   So the padding rule above now excludes `footer *` and the page's own
   symmetric `0 10px` applies untouched — no value duplicated here.

   The arrow is REMOVED outright (`content: none`). The page draws no
   arrow on this bar, and an arrow is an affordance for "go somewhere" —
   this button subscribes, it does not navigate. Keeping it only meant
   competing with a 44px-tall, 14px-text bar for a glyph that the design
   never asked for. `content: none` (not `display: none`) is the correct
   kill: it stops the pseudo-element generating a box at all, so the
   flex row contains only the label and the label's own centring applies
   with nothing to compensate for.

   Measured on all five form pages at 1440 / 768 / 390: the label + arrow
   group sat +10.7px right of centre before rule 5 existed; with the arrow
   removed the label sits 0.0px from centre. `docs/_recon/_news_matrix.py`
   reproduces it; `docs/_fl/_probe_form.js` asserts it, using the pre-fix
   file as a negative control.

   Specificity: `footer` + 3 classes + 1 pseudo-element = (0,3,2). That is now
   LOWER than rule 2's (0,5,2) — but the two never compete, and this rule does
   not rely on winning: rule 2 carries `:not(footer *)`, so it does not match
   the footer's badge at all, and this rule is the only candidate there. (When
   rule 2 was (0,3,1) this rule did outrank it; that is no longer the mechanism,
   so do not read this rule as being protected by its specificity.)
   ------------------------------------------------------------------ */
footer .formlayer-form-wrapper .formlayer-form .formlayer-submit-btn::after {
  content: none;
}