/* Where Elementor and Organic disagree, Organic wins.
 *
 * Elementor wraps every container in `.e-con`, which sets `display:flex`, a
 * boxed `--width`, and its own gap. Those are sensible defaults for a site
 * designed in Elementor and wrong for one that arrives with a design system:
 * `.grid` stops gridding, `.card` stops being a card, and widths come from
 * Elementor rather than from `.wrap`.
 *
 * This file is the seam. It does not restyle anything — it steps Elementor out
 * of the way wherever an Organic layout class is present, so styles.css governs
 * exactly as it does on the live site. Nothing here should ever set a colour,
 * a size or a font: those belong to Organic alone.
 */

/* Elementor's container defaults, neutralised. The custom-property resets
   matter as much as the display ones — `.e-con` sizes itself from --width. */
.e-con.section,
.e-con.wrap,
.e-con.grid,
.e-con.card,
.e-con.row,
.e-con.stack {
  --width: auto;
  --content-width: auto;
  --gap: initial;
  gap: revert;
}

/* Deliberately NOT reset above: max-width, padding and margin, nor Elementor's
   --padding-* / --margin-* custom properties. Organic sets
   its own on `.wrap` (the page gutter) and on `.section`, and overriding them
   here is what made the grid 720px columns instead of 660 — Elementor was out
   of the way, but so was the design system. Resetting only Elementor's custom
   properties leaves Organic's cascade intact. */

/* Organic decides the formatting context; Elementor's flex must not pre-empt
   it, or `display:grid` on `.grid` never takes effect. */
.e-con.section,
.e-con.card {
  display: block;
}

.e-con.grid {
  display: grid;
}

.e-con.row {
  display: flex;
}

/* `.wrap` is Organic's page gutter and carries its own max-width. */
.e-con.wrap {
  display: block;
}

/* Elementor gives every widget a wrapper div; Organic styles the element
   itself, so the wrapper must not introduce spacing of its own. */
.elementor-widget:where(.card-kicker, .card-title, .card-body, .lede, .eyebrow) {
  margin: 0;
}

/* Widgets whose class Organic styles should not also inherit Elementor's
   default block spacing. */
.elementor-widget-container > :where(p, h1, h2, h3, h4, h5, h6):only-child {
  margin: revert;
}

/* Row layout.
 *
 * Elementor's container direction is set in the editor UI and did not survive
 * being written programmatically — every container serialised back as `column`
 * whatever key the value was given. Widths did apply, so this supplies the one
 * missing property rather than reimplementing layout.
 *
 * A container carrying `eca-row` lays its children out horizontally; the team
 * can still change every other property in the editor, wrapping included, and
 * can drop the class to get Elementor's default stacking back.
 */
.e-con.eca-row {
  /* Elementor resolves container layout through `--flex-direction`, so
     setting the property loses to its own
     `.e-con { flex-direction: var(--flex-direction) }`. Feeding the
     variable works with that mechanism rather than against it — these
     are the variables Elementor sets when you choose Row in the editor. */
  /* !important because Elementor writes --flex-direction onto the
     specific element, which outranks a class selector. */
  --flex-direction: row !important;
  --container-widget-width: initial;
  --container-widget-height: 100%;
  --container-widget-flex-grow: 1;
  --container-widget-align-self: stretch;
  align-items: stretch;
}

/* Wrapping is NOT set here. It is the editor's to decide, per breakpoint, and
   a hardcoded `flex-wrap: wrap` beats the variable Elementor writes — which is
   what made every row on the site stack: percentage widths plus a gap overflow
   by a few pixels, and an overflowing row that is allowed to wrap does. */

@media (max-width: 767px) {
  .e-con.eca-row > .e-con {
    width: 100%;
  }
}

/* A row shrinks its columns rather than wrapping them (see eca_elementor.row).
   A flex item will not shrink below its content's intrinsic width unless it is
   told it may, so without this a long word still forces a wrap. */
.eca-row > .e-con { min-width: 0; }

/* The split header: a title that takes the room, and a link that hugs its own
   width on the same line. The `.split-head` component in styles.css is the same
   object in plain markup — change one, look at the other.
 *
 * THIS FILE ONLY WINS IF THE PAGE DATA STAYS QUIET. Elementor compiles a
 * container's own settings to
 * `.elementor-N .elementor-element.elementor-element-XXXX.e-con` — four
 * classes, against the three below. So a width or a flex size set in
 * `eca_elementor.split_header` is final, and nothing here can reach it.
 *
 * That is the whole history of this rule. The primitive asserted `width: 100%`
 * and `_flex_size: grow`, which compiled to `--width: 100%` with
 * `--flex-shrink: 0`: a title column as wide as the row and forbidden to
 * shrink, so the link and the gap hung off the right edge and the document
 * scrolled sideways — 143px at 1280. It was corrected here three times and
 * came back three times, because the correction was on the losing side of the
 * cascade.
 *
 * The primitive is silent now and these are the only declarations, so the title
 * column may shrink and the link column sizes to its content. If a sideways
 * scrollbar returns on a section header, read the page data first. */
.eca-row--split > .e-con:first-child {
  --flex-shrink: 1;
  --width: auto;
  min-width: 0;
}
.eca-row--split > .e-con:last-child {
  flex: 0 0 auto;
  --width: auto;
  width: auto;
}

/* Elementor's primary is a FILL here, so on dark it takes the exact accent.
 *
 * The kit maps primary to --color-accent, which the dark theme raises because
 * it is TYPE there — every Elementor button on dark therefore carried Morning
 * Mist on the lifted step at 3.58 and failed. Nothing in scripts/pages uses
 * primary as text, so the whole mapping can move rather than each button. */
:root[data-theme="dark"] body[class*="elementor-kit-"] {
  --e-global-color-primary: var(--color-cherry-berry);
}

/* The stat cards' circular crop.
 *
 * Elementor's frontend sheet carries `.elementor img { border-radius: 0 }` —
 * one class AND an element, which outranks `.stat-card__art`'s single class.
 * So the crop came out square inside Elementor and round everywhere else, from
 * a stylesheet neither of us wrote. Restated here at reach. */
.elementor .stat-card__art { border-radius: 50%; }

/* The opener, built in Elementor.
 *
 * The photograph, the scrim, the light ink and the capped height all come from
 * `.photo-hero.opener` in organic.css. This adds only what Elementor's own
 * container does not give those rules: the stacking context the scrim needs.
 * `.photo-hero` sets `isolation: isolate` already, but `.e-con` re-declares
 * enough around it that stating it on the container is the safe half-line.
 *
 * The image itself IS a container setting, because the team swaps it in the
 * editor — and a setting outranks this file, which is the right way round for
 * content and the wrong way round for layout. See the split header below. */
.e-con.eca-hero-full { isolation: isolate; }
.e-con.eca-hero-full > .e-con-inner { position: relative; }

/* Elementor globals point AT the Organic tokens rather than copying them.
 *
 * The kit stores real hex so the editor's colour picker shows real swatches —
 * but hex cannot flip, and this site has two themes. Every Elementor colour was
 * therefore frozen to the light palette and unreadable in dark mode. Redefining
 * the global variables here costs the picker nothing and makes every widget
 * follow `:root[data-theme]` like the rest of the site.
 *
 * Generated to match organic-to-elementor-kit.py's SYSTEM + CURATED lists.
 */
:root,
body[class*="elementor-kit-"] {
  /* `body[class*=...]` deliberately, not `[class*=...]`: the kit's own
     `.elementor-kit-N` rule has equal specificity and loads later, so a
     class-only selector here loses. */
  --e-global-color-primary: var(--color-accent);
  --e-global-color-secondary: var(--color-accent-2);
  --e-global-color-text: var(--color-text);
  /* Elementor's fourth system colour. Brass, not a second red: the brand allows
     exactly one action colour, so nothing here may compete with Heritage Clay. */
  --e-global-color-accent: var(--color-brass);

  /* The nine brand colours, under the names the brand documents use. */
  --e-global-color-eca_morning_mist: var(--eca-morning-mist);
  --e-global-color-eca_highland_mist: var(--eca-highland-mist);
  --e-global-color-eca_heritage_clay: var(--eca-heritage-clay);
  --e-global-color-eca_roasted_earth: var(--eca-roasted-earth);
  --e-global-color-eca_volcanic_stone: var(--eca-volcanic-stone);
  --e-global-color-eca_charcoal: var(--eca-charcoal);
  --e-global-color-eca_forest_canopy: var(--eca-forest-canopy);
  --e-global-color-eca_woven_taupe: var(--eca-woven-taupe);
  --e-global-color-eca_brass: var(--eca-brass);

  /* The roles. These are the ones to pick in the editor: they follow the theme,
     where a brand name above is fixed in both. */
  --e-global-color-color_bg: var(--color-bg);
  --e-global-color-color_surface: var(--color-surface);
  --e-global-color-color_text: var(--color-text);
  --e-global-color-color_text_secondary: var(--color-text-secondary);
  --e-global-color-color_accent: var(--color-accent);
  --e-global-color-color_accent_2: var(--color-accent-2);
  --e-global-color-color_coffee: var(--color-coffee);
  --e-global-color-color_stone: var(--color-stone);
  --e-global-color-color_taupe: var(--color-taupe);
  --e-global-color-color_bg_dark: var(--color-bg-dark);
  --e-global-color-color_surface_dark: var(--color-surface-dark);
  --e-global-color-color_text_dark: var(--color-text-dark);
  --e-global-color-color_accent_dark: var(--color-accent-dark);
  --e-global-color-atlas_cherry_berry: var(--atlas-cherry-berry);
  --e-global-color-atlas_forest_leaf: var(--atlas-forest-leaf);
  --e-global-color-atlas_moss_green: var(--atlas-moss-green);
  --e-global-color-atlas_harvest_gold: var(--atlas-harvest-gold);
}