/* ==========================================================================
   SORTEX — Elementor compatibility
   Load AFTER sortex.css. Only needed if the pages are built with Elementor.

   Two things Elementor does that the design system has to survive:

   1. It renders every widget inside wrappers:
          <div class="elementor-element sx-eyebrow">
            <div class="elementor-widget-container">
              <h6 class="elementor-heading-title">…</h6>

      The "CSS Classes" field puts our class on the OUTER wrapper, not on the
      element that actually shows the text. So every rule that styles text has
      to be pushed down to the inner node as well.

   2. Containers default to flex with their own gap and padding, which fights
      the CSS grid the layout is built on.

   NOT VERIFIED against a live Elementor render — check after importing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Neutralise Elementor's layout defaults on our containers
   -------------------------------------------------------------------------- */
.sx .e-con,
.sx .e-con-inner {
  --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
  --margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0;
  --gap: 0;
  max-width: none;
  width: auto;
}

/* Our section/wrap/grid classes must win over .e-con { display: flex } */
.sx .sx-sec.e-con,
.sx .sx-sec { display: block; }

.sx .sx-wrap.e-con {
  display: block;
  width: 100%;
  max-width: var(--sx-wrap);
  margin-inline: auto;
  padding-inline: var(--sx-pad-x);
}

.sx .sx-grid.e-con {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sx-gap);
}
@media (max-width: 900px) { .sx .sx-grid.e-con { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 560px) { .sx .sx-grid.e-con { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Grid children are Elementor containers — keep them as plain blocks so the
   span/start classes control placement rather than flex. */
.sx .sx-grid.e-con > .e-con { display: block; }

/* The widget wrapper must not introduce a box of its own. */
.sx .elementor-widget-container { margin: 0; padding: 0; }
.sx .elementor-widget:not(:last-child) { margin-bottom: 0; }
.sx .elementor-element { max-width: 100%; }

/* --------------------------------------------------------------------------
   2. Push text styling down to the node Elementor actually renders
   -------------------------------------------------------------------------- */

/* Headings — Elementor emits .elementor-heading-title inside the wrapper */
.sx .elementor-heading-title {
  font-family: var(--sx-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .96;
  text-wrap: balance;
  margin: 0;
  color: inherit;
}
.sx h1.elementor-heading-title { font-size: var(--sx-t-h1); }
.sx h2.elementor-heading-title { font-size: var(--sx-t-h2); line-height: 1.0; }
.sx h3.elementor-heading-title { font-size: var(--sx-t-h3); line-height: 1.08; letter-spacing: -.025em; }
.sx h4.elementor-heading-title { font-size: var(--sx-t-h4); line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }

/* Eyebrow: the class lands on the wrapper, so build the rule there and strip
   the inner heading back to plain text. */
.sx .sx-eyebrow .elementor-heading-title {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: inherit;
}

/* Same treatment for the other mono/label leaves */
.sx .sx-step__no .elementor-heading-title,
.sx .sx-spec__k .elementor-heading-title,
.sx .sx-card__idx .elementor-heading-title,
.sx .sx-market__cert .elementor-heading-title,
.sx .sx-hero__cap .elementor-heading-title,
.sx .sx-cat__meta .elementor-heading-title,
.sx .sx-next__label .elementor-heading-title {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: inherit;
}

/* Oversized figures keep the display face */
.sx .sx-stat__fig .elementor-heading-title,
.sx .sx-hero__fig .elementor-heading-title {
  font-family: var(--sx-display);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
}

/* Body copy — text-editor renders a plain <p> inside the wrapper */
.sx .elementor-widget-text-editor p { margin: 0 0 1em; max-width: var(--sx-measure); }
.sx .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.sx .sx-lead .elementor-widget-container,
.sx .sx-lead p {
  font-size: var(--sx-t-lead);
  line-height: 1.45;
  letter-spacing: -.012em;
  max-width: 54ch;
}
.sx .sx-sm .elementor-widget-container,
.sx .sx-sm p { font-size: var(--sx-t-sm); line-height: 1.55; }

/* Buttons — Elementor emits <a class="elementor-button"> */
.sx .sx-btn .elementor-button,
.sx a.elementor-button {
  background: var(--sx-ink);
  color: var(--sx-bone);
  border: 1px solid var(--sx-ink);
  border-radius: 0;
  padding: 1.05em 1.9em;
  font-family: var(--sx-body);
  font-size: var(--sx-t-sm);
  font-weight: 600;
  transition: background .45s var(--sx-ease), color .45s var(--sx-ease), border-color .45s;
}
.sx .sx-btn .elementor-button:hover { background: var(--sx-tan); border-color: var(--sx-tan); color: var(--sx-ink); }
.sx-sec--ink .sx-btn .elementor-button,
.sx-phero .sx-btn .elementor-button { background: var(--sx-bone); color: var(--sx-ink); border-color: var(--sx-bone); }
.sx .sx-btn--ghost .elementor-button { background: transparent; color: inherit; border-color: var(--sx-rule); }
.sx-sec--ink .sx-btn--ghost .elementor-button { border-color: var(--sx-rule-inv); color: var(--sx-bone); }

/* Images */
.sx .elementor-widget-image img { display: block; width: 100%; height: auto; }
.sx .sx-img .elementor-widget-image img,
.sx .sx-cat__img .elementor-widget-image img { height: 100%; object-fit: cover; }

/* Lists rendered through text-editor keep their markers */
.sx .elementor-widget-text-editor ul.sx-list { list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   3. Elementor accordion restyled to match the native <details> design
   The FAQ is the one component whose markup genuinely changes, because the
   answers are the copy most likely to be edited.
   -------------------------------------------------------------------------- */
.sx .sx-acc .elementor-accordion { border-top: 1px solid var(--sx-rule); }
.sx .sx-acc .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--sx-rule); }
.sx .sx-acc .elementor-tab-title {
  padding: clamp(1.1rem, .9rem + .8vw, 1.75rem) 0;
  background: none;
  border: 0;
  font-family: var(--sx-display);
  font-size: var(--sx-t-h4);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
  transition: color .3s;
}
.sx .sx-acc .elementor-tab-title a,
.sx .sx-acc .elementor-tab-title { color: var(--sx-text); }
.sx .sx-acc .elementor-tab-title:hover,
.sx .sx-acc .elementor-tab-title.elementor-active { color: var(--sx-tan-deep); }
.sx .sx-acc .elementor-accordion-icon { color: var(--sx-tan-deep); }
.sx .sx-acc .elementor-tab-content {
  border: 0;
  padding: 0 0 1.9rem;
  max-width: 68ch;
  color: var(--sx-text-mid);
  font-size: var(--sx-t-body);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. Motion
   sortex.js looks for [data-reveal]. Elementor strips unknown attributes from
   widget wrappers, so reveals are opted-in per section instead: the section
   container keeps its class, and this makes its children animate as a group.
   -------------------------------------------------------------------------- */
.sx .sx-sec > .e-con > .elementor-element { opacity: 1; transform: none; }

/* Markets grid — Elementor containers default to flex, so restate the grid. */
.sx .sx-markets.e-con { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1180px) { .sx .sx-markets.e-con { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .sx .sx-markets.e-con { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px)  { .sx .sx-markets.e-con { grid-template-columns: 1fr; } }
.sx .sx-markets.e-con > .e-con { display: block; }