/**
 * EngageIQ site-wide Figma layout contract V17
 *
 * Authority:
 * - EngageIQ-Codex Figma foundations, Header, Buttons, and Homepage SOT
 * - Homepage SOT / Desktop / 1440 x 900, node 54:2
 * - Homepage SOT / Mobile / 390 x 844, node 54:36
 *
 * V17 is a correction layer over the protected V16 content state. It fixes
 * shared layout primitives and does not replace approved page copy.
 */

:root {
  --ei-layout-content: var(--ei-content-max, 1376px);
  --ei-layout-reading: var(--ei-reading-max, 1120px);
  --ei-layout-gutter: var(--ei-page-gutter-desktop, 48px);
}

/**
 * Some recovered and generated Elementor sections omit the local --display
 * custom property. Elementor then evaluates display: var(--display) as invalid
 * and the div falls back to inline. Inline containers ignore their authored
 * width, max-width, and auto margins, which caused the site-wide edge drift.
 *
 * Restore only the missing block-formatting primitive. Existing page rules
 * retain control of flex direction, grids, gaps, alignment, and visibility.
 */
body.ei-brand-sot[data-ei-page]
  .elementor:is(
    [data-elementor-type="wp-page"],
    [data-elementor-type="page"],
    [data-elementor-type="single-post"]
  )
  > .e-con.e-parent,
body.ei-brand-sot[data-ei-page]
  .elementor:is(
    [data-elementor-type="wp-page"],
    [data-elementor-type="page"],
    [data-elementor-type="single-post"]
  )
  > .e-con.e-parent
  > .e-con-inner {
  display: flex;
}

body.ei-brand-sot[data-ei-page] .e-con {
  min-width: 0;
}

/**
 * The canonical editorial measure is 1120px. This restates the Figma reading
 * canvas after the display repair so copied comparison and feature sections
 * cannot expand to the viewport.
 */
body.ei-brand-sot[data-ei-layout="editorial"]
  .elementor:is(
    [data-elementor-type="wp-page"],
    [data-elementor-type="page"]
  )
  > .e-con.e-parent
  > .e-con-inner {
  width: min(100%, var(--ei-layout-reading)) !important;
  max-width: var(--ei-layout-reading) !important;
  margin-inline: auto !important;
}

/**
 * Preserve the established type roles even when page-local Elementor rules
 * carry an obsolete font family with higher specificity.
 */
body.ei-brand-sot[data-ei-page]
  :where(
    .elementor-heading-title,
    .wp-block-heading,
    .ei-faq-sot__title
  ) {
  font-family: var(--ei-font-display, "Saans", "Inter Tight", Arial, sans-serif) !important;
  font-synthesis: none;
}

body.ei-brand-sot[data-ei-page]
  :where(
    .elementor-widget-text-editor,
    .entry-content,
    .wp-block-post-content,
    .ei-faq-sot__answer
  )
  :where(p, li) {
  font-family: var(--ei-font-body, "Inter Tight", Arial, sans-serif) !important;
}

body.ei-brand-sot[data-ei-page]
  :where(
    .eyebrow,
    .kicker,
    .overline,
    .section-label,
    .technical-label,
    .ei-site-nav__label,
    .ei-site-footer__label,
    .ei-site-footer__bottom
  ) {
  font-family: var(--ei-font-label, "IBM Plex Mono", ui-monospace, monospace) !important;
}

/**
 * Header geometry is bound to the same values documented in Figma. The action
 * width is an explicit token so future page CSS cannot shrink the account CTA.
 */
body.ei-brand-sot[data-ei-page] .ei-site-header__cta {
  width: var(--ei-header-action-width, 184px);
  min-width: var(--ei-header-action-width, 184px);
}

/**
 * Keep the canonical FAQ title anchored to the top of its content column.
 */
body.ei-brand-sot[data-ei-page] .ei-faq-sot__inner {
  align-items: start;
}

/**
 * Elementor loop grids used a recovered item-width formula that adds the
 * column gap instead of subtracting it. Minmax tracks keep every card inside
 * the available canvas at all four documented viewports.
 */
body.ei-brand-sot[data-ei-page]
  .elementor-loop-container.elementor-grid {
  grid-template-columns: repeat(
    var(--grid-columns, 1),
    minmax(0, 1fr)
  ) !important;
}

body.ei-brand-sot[data-ei-page]
  .elementor-loop-container.elementor-grid
  > .e-loop-item {
  width: auto !important;
  min-width: 0;
}

/**
 * The footer is one full-width component. Legacy inline and Elementor display
 * values must not change its canvas or its inner grid.
 */
body.ei-brand-sot[data-ei-page] .ei-site-footer {
  display: block;
  width: 100%;
}

body.ei-brand-sot[data-ei-page] .ei-site-footer > .ei-site-container {
  width: min(calc(100% - 96px), var(--ei-layout-content));
  max-width: var(--ei-layout-content);
  margin-inline: auto;
}

@media (max-width: 1220px) {
  body.ei-brand-sot[data-ei-page] .ei-site-footer > .ei-site-container {
    width: min(calc(100% - 64px), var(--ei-layout-content));
  }

  /**
   * The Home desktop comparison row has fixed child widths in the original
   * Elementor export. Scale those same proportions inside the compact canvas.
   */
  body.ei-brand-sot[data-ei-family="home"]
    .switchtotal
    > .rowrowone {
    width: 56.26% !important;
  }

  body.ei-brand-sot[data-ei-family="home"]
    .switchtotal
    > .rowrowtwo {
    width: 25.48% !important;
  }

  body.ei-brand-sot[data-ei-family="home"]
    .switchtotal
    > .rowrowthree {
    width: 18.26% !important;
  }

  body.ei-brand-sot[data-ei-family="home"]
    .switchtotal
    > .rowrowrow,
  body.ei-brand-sot[data-ei-family="home"] .blockkie {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
}

@media (max-width: 1160px) {
  /**
   * Fixed-width nested Elementor grids must fit the current inner canvas.
   */
  body.ei-brand-sot[data-ei-page] .e-con-inner > .e-con {
    max-width: 100% !important;
  }
}

@media (min-width: 1025px) {
  /**
   * The root-container display repair above has greater specificity than
   * Elementor's desktop visibility utility. Restate the utility so mobile
   * fallback sections never render alongside their desktop counterparts.
   */
  body.ei-brand-sot[data-ei-page] .elementor-hidden-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /**
   * Several exports omitted Elementor's core tablet visibility utility.
   */
  body.ei-brand-sot[data-ei-page] .elementor-hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  :root {
    --ei-layout-gutter: var(--ei-page-gutter-mobile, 16px);
  }

  /**
   * Figma mobile Header is 88px: 12px top and bottom around a 64px brand tile.
   */
  body.ei-brand-sot[data-ei-page] .ei-site-header {
    min-height: 88px;
    padding-block: 12px;
  }

  body.ei-brand-sot[data-ei-page] .ei-site-header__shell {
    min-height: 64px;
  }

  body.ei-brand-sot[data-ei-page] .ei-site-header__bar {
    height: 64px;
  }

  body.ei-brand-sot[data-ei-page] .ei-site-header .ei-site-nav {
    inset: 88px 0 0;
  }

  body.ei-brand-sot[data-ei-page] .elementor-hidden-mobile {
    display: none !important;
  }

  body.ei-brand-sot[data-ei-page] .ei-site-footer > .ei-site-container {
    width: min(calc(100% - 32px), var(--ei-layout-content));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ei-brand-sot[data-ei-page] *,
  body.ei-brand-sot[data-ei-page] *::before,
  body.ei-brand-sot[data-ei-page] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}