/* ============================================================
   ELEMENTOR OVERRIDE — Al Najm Al Thaqib
   ============================================================
   Forces Elementor Pro widgets to conform to our design system.
   Only loaded when Elementor is active (conditional in functions.php).

   Purpose:
     - Strip Elementor's default typography (system fonts, sizes)
     - Replace Elementor's blue accent with --najm-violet
     - Match Elementor buttons to our .btn-primary
     - Fix container widths to our --container-max
     - Ensure Arabic pages respect RTL direction
   ============================================================ */


/* ─────────────────────────────────────────────
   1. SECTION PADDING — Remove Elementor defaults
   Elementor adds its own padding that conflicts with --section-py.
   ───────────────────────────────────────────── */

.elementor-section {
  padding-top: 0;
  padding-bottom: 0;
}

.elementor-section > .elementor-container {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}

/* Remove Elementor's default inner section padding */
.elementor-section .elementor-widget-wrap {
  padding: 0;
}

/* Strip default widget bottom margin — we control spacing via design tokens */
.elementor-widget:not(:last-child) {
  margin-bottom: var(--space-6);
}


/* ─────────────────────────────────────────────
   2. TYPOGRAPHY — Force our fonts over Elementor's defaults
   Elementor injects inline font-family which we override.
   ───────────────────────────────────────────── */

.elementor-widget,
.elementor-widget p,
.elementor-widget span,
.elementor-widget li,
.elementor-widget a,
.elementor-widget blockquote {
  font-family: var(--font-en) !important;
  color: var(--najm-body);
  line-height: var(--leading-normal);
}

/* Arabic pages — override to Arabic font */
body.rtl .elementor-widget,
body.rtl .elementor-widget p,
body.rtl .elementor-widget span,
body.rtl .elementor-widget li,
body.rtl .elementor-widget a,
body.rtl .elementor-widget blockquote,
body.lang-ar .elementor-widget,
body.lang-ar .elementor-widget p,
body.lang-ar .elementor-widget span,
body.lang-ar .elementor-widget li,
body.lang-ar .elementor-widget a,
body.lang-ar .elementor-widget blockquote {
  font-family: var(--font-ar) !important;
  line-height: var(--leading-loose);
}


/* ─────────────────────────────────────────────
   3. HEADINGS — Override .elementor-heading-title h1-h6
   Match our design-system.css heading defaults.
   ───────────────────────────────────────────── */

.elementor-heading-title {
  color: var(--najm-ink) !important;
  font-family: var(--font-en) !important;
  line-height: var(--leading-tight) !important;
  font-weight: 700;
}

h1.elementor-heading-title {
  font-size: var(--text-hero) !important;
  font-weight: 800;
}

h2.elementor-heading-title {
  font-size: var(--text-5xl) !important;
}

h3.elementor-heading-title {
  font-size: var(--text-3xl) !important;
}

h4.elementor-heading-title {
  font-size: var(--text-2xl) !important;
}

h5.elementor-heading-title {
  font-size: var(--text-xl) !important;
  font-weight: 600;
}

h6.elementor-heading-title {
  font-size: var(--text-lg) !important;
  font-weight: 600;
}

/* Arabic headings */
body.rtl .elementor-heading-title,
body.lang-ar .elementor-heading-title {
  font-family: var(--font-ar) !important;
  letter-spacing: 0 !important;
}


/* ─────────────────────────────────────────────
   4. BUTTONS — Override .elementor-button to match .btn-primary
   Strips Elementor's default blue/gradient button styles.
   ───────────────────────────────────────────── */

.elementor-button-wrapper .elementor-button {
  background-color: var(--najm-violet) !important;
  color: var(--najm-cta-text) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-3) var(--space-8) !important;
  font-family: var(--font-en) !important;
  font-weight: 700 !important;
  font-size: var(--text-base) !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  transition: background var(--ease-default), transform 0.1s ease !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.elementor-button-wrapper .elementor-button:hover,
.elementor-button-wrapper .elementor-button:focus {
  background-color: var(--najm-cta-hover-bg) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* Remove Elementor's button background-image (gradient) */
.elementor-button-wrapper .elementor-button::before,
.elementor-button-wrapper .elementor-button::after {
  display: none !important;
}

/* Arabic button text */
body.rtl .elementor-button-wrapper .elementor-button,
body.lang-ar .elementor-button-wrapper .elementor-button {
  font-family: var(--font-ar) !important;
}

/* Button icon (if Elementor adds one) */
.elementor-button .elementor-button-icon {
  color: var(--najm-cta-text) !important;
}


/* ─────────────────────────────────────────────
   5. CONTAINER — Fix max-width to our design tokens
   Elementor defaults to 1140px; we use 1200px / 1400px.
   ───────────────────────────────────────────── */

.elementor-section .elementor-container {
  max-width: var(--container-max) !important;
}

.elementor-section.elementor-section-full_width .elementor-container {
  max-width: 100% !important;
}

/* Boxed layout override */
.elementor-section-boxed .elementor-container {
  max-width: var(--container-max) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Wide container variant — for sections that need more room */
.elementor-section.e-con-boxed.najm-wide .elementor-container,
.elementor-section.najm-wide .elementor-container {
  max-width: var(--container-wide) !important;
}


/* ─────────────────────────────────────────────
   6. RTL — Ensure Elementor sections respect dir="rtl"
   Elementor doesn't always propagate RTL correctly.
   ───────────────────────────────────────────── */

body.rtl .elementor-section,
body.lang-ar .elementor-section {
  direction: rtl;
  text-align: right;
}

body.rtl .elementor-widget-wrap,
body.lang-ar .elementor-widget-wrap {
  direction: rtl;
}

/* Elementor columns — flex direction for RTL */
body.rtl .elementor-row,
body.lang-ar .elementor-row {
  flex-direction: row-reverse;
}

/* Elementor icon-list — align to right */
body.rtl .elementor-icon-list-items,
body.lang-ar .elementor-icon-list-items {
  text-align: right;
}

body.rtl .elementor-icon-list-item,
body.lang-ar .elementor-icon-list-item {
  flex-direction: row-reverse;
}

/* Elementor image-box — text right, image right */
body.rtl .elementor-image-box-wrapper,
body.lang-ar .elementor-image-box-wrapper {
  text-align: right;
}

/* Centered elements stay centered in RTL */
body.rtl .elementor-widget.elementor-widget-heading[data-widget_type="heading.default"] .elementor-heading-title[style*="text-align: center"],
body.lang-ar .elementor-widget.elementor-widget-heading[data-widget_type="heading.default"] .elementor-heading-title[style*="text-align: center"] {
  text-align: center !important;
}


/* ─────────────────────────────────────────────
   7. LINK COLORS — Replace Elementor's blue with our violet
   Elementor uses #61CE70 or #6EC1E4 — we override with violet.
   ───────────────────────────────────────────── */

.elementor-widget a {
  color: var(--najm-violet) !important;
  text-decoration: none;
  transition: color var(--ease-default);
}

.elementor-widget a:hover {
  color: var(--najm-violet-hover) !important;
}

/* Elementor's post/archive links */
.elementor-post__title a,
.elementor-post__read-more {
  color: var(--najm-violet) !important;
}

.elementor-post__title a:hover,
.elementor-post__read-more:hover {
  color: var(--najm-violet-hover) !important;
}

/* Elementor tab/accordion active states */
.elementor-tab-title.elementor-active,
.elementor-tab-title.elementor-active a {
  color: var(--najm-violet) !important;
}

/* Elementor icon widget — use silver for icons, violet for active */
.elementor-icon {
  color: var(--najm-silver-metallic) !important;
}

.elementor-icon:hover {
  color: var(--najm-violet) !important;
}


/* ─────────────────────────────────────────────
   ELEMENTOR EDITOR COMPATIBILITY
   Ensure the design system works inside the Elementor editor.
   ───────────────────────────────────────────── */

/* Don't hide things in the preview/editor */
.elementor-editor-active .elementor-widget {
  opacity: 1 !important;
  transform: none !important;
}


/* ─────────────────────────────────────────────
   SHADOWS — Strip Elementor's default box shadows
   Replace with our neutral shadow tokens.
   ───────────────────────────────────────────── */

.elementor-widget.elementor-widget-image-box,
.elementor-widget.elementor-widget-icon-box {
  box-shadow: none;
}

.elementor-widget.elementor-widget-image-box:hover,
.elementor-widget.elementor-widget-icon-box:hover {
  box-shadow: var(--shadow-md);
}