/* ==========================================================================
   Elementor Free compatibility.

   How to recreate a design section in Elementor:
     1. Build the layout with sections / containers / widgets as normal.
     2. In each widget or container, open Advanced > CSS Classes and paste the
        class from the design (for example: atlas-eyebrow, atlas-container,
        home-hero-title, btn btn-primary). The class names are documented in
        docs/CLASS-REFERENCE.md.
     3. Add "atlas-inherit" as well when a class carries typography and the
        widget is a Heading / Text Editor / Button: it lets the design's class
        win over Elementor's own font settings.
     4. Scroll-reveal: add the class "atlas-rv" (Elementor Free cannot add the
        data-rv attribute, which is a Pro feature).
   ========================================================================== */

/* Match the design's 1200px content width */
.atlas-elementor .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

.atlas-elementor {
  --container-max-width: 1200px;
  --content-width: 1200px;
}

.atlas-elementor .e-con {
  --container-max-width: 1200px;
}

/* Elementor's default kit sets its own heading / body fonts: keep the design's */
.atlas-elementor .elementor-heading-title,
.atlas-elementor .elementor-widget-text-editor,
.atlas-elementor .elementor-button {
  font-family: var(--font-heading);
}

.atlas-elementor .elementor-widget-text-editor {
  font-family: var(--font-body);
}

/* Let a design class win over Elementor's per-widget typography */
.atlas-inherit .elementor-heading-title,
.atlas-inherit .elementor-widget-container,
.atlas-inherit .elementor-button,
.atlas-inherit .elementor-icon-list-text,
.atlas-inherit.elementor-widget-text-editor {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* Design buttons on an Elementor Button widget */
.elementor-widget-button.btn .elementor-button,
.elementor-widget-button.atlas-btn .elementor-button {
  background: transparent;
  border-radius: 0;
  padding: 0;
  color: inherit;
}

/* Default page template: Elementor owns the width, so remove the theme's prose column */
.atlas-page--default > .elementor {
  width: 100%;
}