/* ============================================================
   Elementor ↔ Tech Edition dark-mode compatibility
   ============================================================
   Strategy
   --------
   1. Map Elementor's built-in global color CSS variables to
      the theme's own design tokens so any widget using a
      "global colour" swatch flips automatically when
      data-theme="dark" changes --ink / --bg / --line.

   2. Provide sensible defaults for common widget elements so
      they inherit the theme palette instead of Elementor's
      hardcoded fallbacks.

   3. [data-theme="dark"] overrides with !important so they
      beat Elementor's own generated stylesheet rules.
      Inline styles are handled in elementor-dark-mode.js.
   ============================================================ */

/* ----------------------------------------------------------
   1. Bind Elementor global color CSS vars to theme tokens
   ---------------------------------------------------------- */
:root {
    /* Standard Elementor default palette slots */
    --e-global-color-primary:   var(--ink);
    --e-global-color-secondary: var(--muted);
    --e-global-color-text:      var(--ink-soft);
    --e-global-color-accent:    var(--brand);
}

/* ----------------------------------------------------------
   2. Elementor wrappers — stay transparent so body bg shows
   ---------------------------------------------------------- */
.elementor-section:not([data-settings*="background"]),
.elementor-container,
.e-container,
.e-container--row,
.e-container--column,
.elementor-column-wrap,
.elementor-widget-wrap {
    background-color: transparent;
}

/* ----------------------------------------------------------
   3. Widget defaults (light mode / no explicit colour)
   ---------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title {
    color: var(--ink);
}
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
    color: var(--ink-soft);
}
.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--line);
}
.elementor-icon-box-title,
.elementor-icon-box-title *,
.elementor-icon-box-description {
    color: var(--ink-soft);
}
.elementor-image-box-title {
    color: var(--ink);
}
.elementor-image-box-description {
    color: var(--ink-soft);
}
.elementor-icon-list-text {
    color: var(--ink-soft);
}
.elementor-caption {
    color: var(--muted);
}

/* ----------------------------------------------------------
   4. Dark-mode overrides — beat Elementor's generated CSS
   ---------------------------------------------------------- */

/* Headings */
[data-theme="dark"] .elementor-widget-heading .elementor-heading-title {
    color: var(--ink) !important;
}

/* Text / paragraph */
[data-theme="dark"] .elementor-widget-text-editor .elementor-widget-container,
[data-theme="dark"] .elementor-widget-text-editor p,
[data-theme="dark"] .elementor-widget-text-editor li,
[data-theme="dark"] .elementor-text-editor {
    color: var(--ink-soft) !important;
}

/* Dividers */
[data-theme="dark"] .elementor-widget-divider .elementor-divider-separator {
    border-color: var(--line) !important;
}

/* Icon box */
[data-theme="dark"] .elementor-icon-box-title,
[data-theme="dark"] .elementor-icon-box-title *,
[data-theme="dark"] .elementor-icon-box-description {
    color: var(--ink-soft) !important;
}

/* Image box */
[data-theme="dark"] .elementor-image-box-title {
    color: var(--ink) !important;
}
[data-theme="dark"] .elementor-image-box-description {
    color: var(--ink-soft) !important;
}

/* Icon list */
[data-theme="dark"] .elementor-icon-list-item .elementor-icon-list-text {
    color: var(--ink-soft) !important;
}

/* Alert */
[data-theme="dark"] .elementor-alert {
    background: var(--bg-soft) !important;
    border-color: var(--line) !important;
    color: var(--ink-soft) !important;
}

/* Tabs / accordion titles */
[data-theme="dark"] .elementor-tab-title,
[data-theme="dark"] .elementor-tab-title * {
    color: var(--ink) !important;
    border-color: var(--line) !important;
}
[data-theme="dark"] .elementor-accordion-title {
    color: var(--ink) !important;
}

/* Generic catch-all — any bare text inside .elementor */
[data-theme="dark"] .elementor h1,
[data-theme="dark"] .elementor h2,
[data-theme="dark"] .elementor h3,
[data-theme="dark"] .elementor h4,
[data-theme="dark"] .elementor h5,
[data-theme="dark"] .elementor h6 {
    color: var(--ink) !important;
}
[data-theme="dark"] .elementor p,
[data-theme="dark"] .elementor li {
    color: var(--ink-soft);
}