/* =========================================================================
   Funding Xperts — Elementor compatibility
   -------------------------------------------------------------------------
   Loaded only on a document built with Elementor (see fx_enqueue_assets()).
   The PHP homepage never sees this file.

   READ THIS BEFORE ADDING ANYTHING HERE.

   Most of what you would expect to need is NOT in this file, on purpose.
   Elementor's container rule is `.e-con { display: flex; ... }` — one class,
   specificity 0,1,0. The theme's is `.fx-hero__grid { display: grid }` — also
   one class, also 0,1,0. A tie at equal specificity is decided by load order,
   and Elementor enqueues at priority 20 while the theme enqueues at 10, so
   Elementor was winning purely by arriving last.

   fx_order_styles_after_elementor() in functions.php makes the theme's
   stylesheets depend on `elementor-frontend`, so WordPress prints them after
   it. The theme then wins every one of those ties on its own, with its own
   values, and no rule has to be restated here. That matters: this codebase has
   spent six releases making sure no spacing or colour value exists in two
   places, and a compatibility sheet full of copied values would undo it.

   So the only rules below are ones load order cannot fix: cases where Elementor
   emits markup the theme has never seen.

   WHAT LOAD ORDER CANNOT FIX, AND WHY EACH RULE IS HERE.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Widget wrappers inside a theme-owned flex or grid row
   -------------------------------------------------------------------------
   Every Elementor widget is wrapped in `.elementor-element`, which Elementor
   sizes with `--width: 100%`. Inside `.fx-final__inner` (a flex row that wants
   its two children to sit side by side) or `.fx-hero__actions` (a row of
   buttons), that stretches each wrapper to full width and stacks them.

   The theme never had to say anything about this because the theme's own
   markup has no wrapper divs.
   ------------------------------------------------------------------------- */
body.elementor-page .fx-final__actions > .elementor-element,
body.elementor-page .fx-hero__actions > .elementor-element,
body.elementor-page .fx-final__inner > .elementor-element {
  width: auto;
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   2. Container chrome the theme does not set
   -------------------------------------------------------------------------
   `.e-con` carries a boxed max-width and a min-height that the theme has no
   opinion about, so there is no theme rule for load order to win with. Both
   are neutralised; the theme's own `.fx-container` max-width then applies
   where it is wanted, and nowhere else.
   ------------------------------------------------------------------------- */
body.elementor-page .e-con {
  /* Elementor's own defaults, read out of frontend.min.css 4.2.4:
       --row-gap:    var(--widgets-spacing-row, 20px)
       --column-gap: var(--widgets-spacing-column, 20px)
     That 20px is added between every widget, on top of the margins the theme's
     own markup already uses, which made every section taller than the PHP page.
     Zeroing the variables hands spacing back to the theme. Wrappers that DO set
     their own `gap` (.fx-product, .fx-support__item, .fx-hero__actions and the
     grids) are unaffected: their `gap` is a direct declaration and wins on load
     order. */
  --row-gap: 0px;
  --column-gap: 0px;
  min-height: 0;
}

/* -------------------------------------------------------------------------
   3. Theme flex rows stacking vertically
   -------------------------------------------------------------------------
   `.e-con.e-flex { --flex-direction: column }` is Elementor's default, and
   `flex-direction: var(--flex-direction)` is applied at .elementor-element,
   specificity 0,1,0.

   The theme's row wrappers only say `display: flex` and rely on the CSS
   initial value of `flex-direction`, which is `row`. Because they never state
   it, load order has nothing to win with and Elementor's column applies: the
   closing CTA's buttons stacked, and the support panels put their icon above
   the text instead of beside it.

   Setting Elementor's own variable is the least invasive fix, and at 0,2,1
   it clears `.e-con.e-flex` at 0,2,0. This restores a CSS initial value; it
   does not copy a design decision out of the theme.
   ------------------------------------------------------------------------- */
body.elementor-page .fx-final__inner,
body.elementor-page .fx-final__actions,
body.elementor-page .fx-hero__actions,
body.elementor-page .fx-support__item,
body.elementor-page .fx-solution__head {
  --flex-direction: row;
}

/* -------------------------------------------------------------------------
   4. A shortcode that needs to BE the grid item, not sit inside one
   -------------------------------------------------------------------------
   In the funding band the two columns are meant to finish level. 1.8.2 does
   that on the PHP homepage by letting the row stretch and having the routing
   card absorb the difference:

     .fx-funding__top { align-items: stretch }
     .fx-routing      { display: flex; flex-direction: column }
     .fx-routing__flow{ flex: 1 }

   On the Elementor page that quietly stopped working, because the grid item is
   no longer .fx-routing. A shortcode widget nests its output three divs deep:

     .fx-funding__top
       > .elementor-element.elementor-widget-shortcode   <- the grid item
         > .elementor-widget-container
           > .elementor-shortcode
             > .fx-routing                               <- what we want stretched

   The wrapper stretched to full height exactly as asked; .fx-routing inside it
   sized to its content and the card finished about 30px short of the text
   column beside it.

   display: contents removes those three boxes from layout, so .fx-routing
   becomes the grid item itself and 1.8.2's rules apply unchanged. Measured on
   the real page at 1440px: 29.4px out before, 0.0px after.

   Scoped to this one grid on purpose. The hero and platform grids do not need
   it - .fx-hero__grid aligns to the start and .fx-platform__grid centres, so
   neither depends on the child stretching.
   ------------------------------------------------------------------------- */
@media (min-width: 980px) {
  body.elementor-page .fx-funding__top > .elementor-widget-shortcode,
  body.elementor-page .fx-funding__top > .elementor-widget-shortcode > .elementor-widget-container,
  body.elementor-page .fx-funding__top > .elementor-widget-shortcode .elementor-shortcode {
    display: contents;
  }
}

/* -------------------------------------------------------------------------
   5. Editor-only affordances
   -------------------------------------------------------------------------
   Inside the Elementor editor an empty container collapses to nothing and
   becomes impossible to click. Only ever applied within the editor iframe,
   which carries .elementor-editor-active on the body.
   ------------------------------------------------------------------------- */
body.elementor-editor-active .e-con:empty {
  min-height: 60px;
}