/* ==========================================================================
   Elementor compatibility layer for the Optimal design system.

   The Phase-1 stylesheet (assets/css/style.css) was written for clean
   semantic HTML. Elementor wraps every element in its own .elementor-element
   containers and applies its own flex/padding/gap defaults. This file lets
   the approved design win where the two disagree, WITHOUT editing the
   audited Phase-1 stylesheet.

   Split of responsibility:
     - Elementor owns structure + layout knobs the client edits in the UI
     - style.css owns the visual treatment (color, border, shadow, radius)
   ========================================================================== */

/* --- 1. Neutralise Elementor container defaults on our own layout blocks ---
   Elementor gives every container padding, a gap, and flex-column direction.
   Our sections/containers already control their own spacing, so reset it
   wherever one of our classes is present. */
.elementor .e-con.hero,
.elementor .e-con.intro,
.elementor .e-con.services,
.elementor .e-con.why,
.elementor .e-con.methodology,
.elementor .e-con.page-hero,
.elementor .e-con.page-section,
.elementor .e-con.container,
.elementor .e-con.cta-band {
  --padding-block-start: 0;
  --padding-block-end: 0;
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

/* Our sections are full-bleed; Elementor's default max-width would cage them. */
.elementor .e-con.hero,
.elementor .e-con.intro,
.elementor .e-con.services,
.elementor .e-con.why,
.elementor .e-con.methodology,
.elementor .e-con.page-hero,
.elementor .e-con.page-section,
.elementor .e-con.cta-band {
  --width: 100%;
  max-width: none;
}

/* --- 2. Restore our grid layouts -----------------------------------------
   Elementor sets display:flex on every container. Each of these classes is
   a grid in the approved design, so re-assert it at higher specificity.
   (The grid-template-columns / gap values still come from style.css.) */
.elementor .e-con.card-grid,
.elementor .e-con.services-grid,
.elementor .e-con.why-grid,
.elementor .e-con.sector-grid,
.elementor .e-con.insight-grid,
.elementor .e-con.value-grid,
.elementor .e-con.entity-grid,
.elementor .e-con.footer-grid,
.elementor .e-con.timeline,
.elementor .e-con.faq-list,
.elementor .e-con.scope-list,
.elementor .e-con.contact-layout,
.elementor .e-con.contact-info,
.elementor .e-con.pillar-row,
.elementor .e-con.form-row,
.elementor .e-con.subhead,
.elementor .e-con.cta-row {
  display: grid;
}

/* Flex rows that should stay rows (Elementor defaults to column). */
.elementor .e-con.cta-row,
.elementor .e-con.hero-tags,
.elementor .e-con.pillar-row {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
}

/* --- 3. Widget wrappers must not interfere -------------------------------
   Elementor wraps each widget in .elementor-element > .elementor-widget-container.
   Those wrappers should be layout-transparent so our cards/grids see the
   real content as their child. */
.elementor .e-con > .elementor-widget {
  width: 100%;
}
.elementor .elementor-widget-container {
  display: contents;
}

/* Our headings/paragraphs carry their own margins from style.css; Elementor
   zeroes them via its reset, so restore normal flow inside our blocks. */
.elementor .e-con .elementor-heading-title {
  font: inherit;
  color: inherit;
}

/* --- 4. Cards keep their stacking context --------------------------------
   Phase-1 fix #3 gives .sub-topic a numbered ::after behind the content.
   Under Elementor the children are .elementor-element wrappers, so the
   z-index rule needs to reach them too. */
.elementor .sub-topic > *,
.elementor .sub-topic > * > * {
  position: relative;
  z-index: 1;
}

/* --- 5. Buttons ----------------------------------------------------------
   Elementor's .elementor-button styling would override our .btn design.
   Where an element carries our .btn class, our design wins. */
.elementor .elementor-button.btn,
.elementor .btn .elementor-button {
  background: none;
  padding: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  fill: currentColor;
}
.elementor .elementor-widget-button.btn-primary .elementor-button,
.elementor .elementor-widget-button.btn-outline .elementor-button {
  all: unset;
  cursor: pointer;
}

/* --- 6. RTL ---------------------------------------------------------------
   Elementor emits its own direction handling; make sure Arabic pages keep
   the logical-property behaviour the Phase-1 stylesheet relies on. */
[dir="rtl"] .elementor .e-con {
  text-align: start;
}