/* ═══════════════════════════════════════════════════════════════════════════
   Elementor interop
   ───────────────────────────────────────────────────────────────────────────
   Elementor writes a per-page stylesheet (uploads/elementor/css/post-N.css)
   that is enqueued AFTER the theme, and it colors every heading and text
   widget from the global palette:

     .elementor-widget-text-editor                      { color: …global text }
     .elementor-widget-heading .elementor-heading-title { color: …global primary }

   Those beat a plain `.gm-label` on order, and beat `h2` on specificity, so a
   dark section would end up with dark text on a dark ground. The rules below
   hand control back to the section, at a specificity that wins on merit rather
   than with !important.

   Loaded last of the child theme's stylesheets. Keep it to conflict
   resolution — the actual design belongs in page-blocks.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Text widgets inherit from their section again, instead of being pinned to
      the global text color. */
.elementor-element.elementor-widget-text-editor { color: inherit; }

/* 2. Sections declare the color their contents inherit. */
.gm-hero, .gm-dark, .gm-dark-raised { color: var(--gm-canvas); }
.gm-canvas, .gm-canvas-2 { color: var(--gm-body); }

/* 3. Headings follow the section they sit in. Elementor's own rule is
      (0,2,0); scoping by section makes these (0,3,0). */
.gm-hero .elementor-widget-heading .elementor-heading-title,
.gm-dark .elementor-widget-heading .elementor-heading-title,
.gm-dark-raised .elementor-widget-heading .elementor-heading-title {
  color: var(--gm-canvas);
}

.gm-canvas .elementor-widget-heading .elementor-heading-title,
.gm-canvas-2 .elementor-widget-heading .elementor-heading-title {
  color: var(--gm-ink);
}

/* 4. Utility text colors, re-asserted above the reset in rule 1. */
.elementor-element.gm-label--clay    { color: var(--gm-clay-lit); }
.elementor-element.gm-label--water   { color: var(--gm-water); }
.elementor-element.gm-label--slate   { color: var(--gm-slate); }
.elementor-element.gm-label--firefly { color: var(--gm-firefly); }
.elementor-element.gm-hero-strip     { color: rgba(233, 222, 203, 0.78); }
.elementor-element.gm-shot-cap       { color: var(--gm-canvas); }
.elementor-element.gm-ph             { color: var(--gm-water); }
.gm-hero .elementor-element.gm-lede  { color: rgba(233, 222, 203, 0.86); }

/* On the cream bands the slate label needs to stay slate, not inherit body. */
.gm-canvas .elementor-element.gm-label--slate,
.gm-canvas-2 .elementor-element.gm-label--slate { color: var(--gm-slate); }

/* 5. Buttons. Elementor paints .elementor-button from the global accent at
      (0,2,0) in the later stylesheet, so the variants need (0,3,0). */
.elementor-element.gm-pill .elementor-button {
  background-color: var(--gm-clay);
  color: #FFF6EF;
  border: 1px solid var(--gm-clay);
}
.elementor-element.gm-pill .elementor-button:hover {
  background-color: var(--gm-clay-lit);
  border-color: var(--gm-clay-lit);
  color: #FFF6EF;
}

.elementor-element.gm-pill--ghost .elementor-button {
  background-color: transparent;
  color: var(--gm-ink);
  border: 1px solid rgba(12, 20, 28, 0.28);
}
.elementor-element.gm-pill--ghost .elementor-button:hover {
  background-color: rgba(12, 20, 28, 0.05);
  border-color: var(--gm-ink);
  color: var(--gm-ink);
}

.gm-hero .elementor-element.gm-pill--ghost .elementor-button,
.gm-dark .elementor-element.gm-pill--ghost .elementor-button,
.gm-dark-raised .elementor-element.gm-pill--ghost .elementor-button {
  color: var(--gm-canvas);
  border-color: rgba(233, 222, 203, 0.35);
}
.gm-hero .elementor-element.gm-pill--ghost .elementor-button:hover,
.gm-dark .elementor-element.gm-pill--ghost .elementor-button:hover,
.gm-dark-raised .elementor-element.gm-pill--ghost .elementor-button:hover {
  background-color: rgba(233, 222, 203, 0.07);
  border-color: var(--gm-canvas);
  color: var(--gm-canvas);
}

.elementor-element.gm-pill--ink .elementor-button {
  background-color: var(--gm-ink);
  color: var(--gm-canvas);
  border: 1px solid var(--gm-ink);
}
.elementor-element.gm-pill--ink .elementor-button:hover {
  background-color: var(--gm-ink-3);
  border-color: var(--gm-ink-3);
  color: var(--gm-canvas);
}

/* 6. Elementor gives every widget a bottom margin from the kit's widget
      spacing. Inside our own composed blocks that fights the container gap. */
.gm-figures .elementor-widget:not(:last-child),
.gm-shot .elementor-widget:not(:last-child),
.gm-badge.elementor-widget,
.gm-shot-cap.elementor-widget { margin-block-end: 0; }

/* 7. The caption and badge are positioned over the photo, so they must not
      take part in the container's flex flow. */
.gm-shot { display: block; }
.gm-shot .elementor-widget-image { line-height: 0; }

/* 8. Elementor caps every widget in a container with
      `.e-con > .elementor-widget { max-width: 100% }` at (0,2,0), which beats a
      plain .gm-measure. Restate the reading-width caps above it. */
.e-con > .elementor-widget.gm-measure { max-width: 34em; }
.e-con > .elementor-widget.gm-measure-tight { max-width: 26em; }

/* 9. Keep long link text in the credits list from forcing a horizontal scroll. */
.gm-credits a { overflow-wrap: anywhere; }

/* 10. Stop fixed-width containers from overflowing narrow viewports.
      ─────────────────────────────────────────────────────────────────────────
      Elementor's container is:

          .e-con { --width: 100%; width: var(--width); min-width: 0 }

      There is no max-width in that rule. Every band in this site sets an inner
      container width of 1240px so the content column has a fixed measure, and
      with nothing capping it that container stays 1240px wide on a 390px phone.
      The result is a page that scrolls sideways and clips its own headlines on
      every viewport under 1240px — which is most phones, tablets and small
      laptops. It measures clean above 1240px, which is why it survived review
      on a desktop.

      Capping at 100% makes those containers shrink to the viewport while still
      never exceeding their intended 1240px measure. Applied to the inner
      element too, since Elementor nests one inside the other. */
.e-con,
.e-con-inner { max-width: 100%; }