/* ==========================================================================
   VigourSoft – Elementor sync layer
   Loaded last (after consistency.css), on the live site AND inside the
   Elementor editor preview, so both always look the same.

   1. Elementor Global Colors follow the theme's light / dark tokens.
      Site Settings > Global Colors in Elementor hold the light values
      (Ink, Muted, Body text, Accent, Card, Soft fill, Border, ...).
      Here each one is pointed at the matching --vs-* token, so any element
      that uses a Global Color switches automatically with the header toggle.
   2. Small structural guards for the rebuilt sections (circles, icon size).
   To undo: remove vs_enqueue_elementor_sync() in functions.php.
   ========================================================================== */

:root { --vs-body: #374151; }
html[data-theme="dark"] { --vs-body: #D4D4D4; }

/* (0,1,2) beats Elementor's own .elementor-kit-N rule, in both modes. */
html body[class*="elementor-kit-"] {
  --e-global-color-primary:     var(--vs-ink);
  --e-global-color-secondary:   var(--vs-muted);
  --e-global-color-text:        var(--vs-body);
  --e-global-color-accent:      var(--vs-accent);
  --e-global-color-vscard:      var(--vs-card);
  --e-global-color-vssoft:      var(--vs-card-soft);
  --e-global-color-vsborder:    var(--vs-border);
  --e-global-color-vsmuted2:    var(--vs-muted-2);
  --e-global-color-vsbg:        var(--vs-bg);
  --e-global-color-vsaccentdim: var(--vs-accent-dim);
  --e-global-color-vsonaccent:  var(--vs-on-accent);
}
html[data-theme="dark"] body[class*="elementor-kit-"] { --e-global-color-vssoft: #1A1A1A; }

/* --------------------------------------------------------------------------
   2. Rebuilt sections: Home case studies, About core values + leadership,
      Offerings capabilities, Careers benefits + people say.
   -------------------------------------------------------------------------- */

/* Every number / initials badge is a true circle at every breakpoint:
   width is set in Elementor, the height always follows it. */
.elementor .vs-raw-avatar.e-con,
.elementor .v-card-num.e-con,
.elementor .v-benefits-num.e-con,
.elementor .vigour-avatar.e-con {
  aspect-ratio: 1 / 1;
  height: auto;
  min-width: 0;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  overflow: hidden;
}
.elementor :is(.vs-raw-avatar-text, .v-card-num-text, .v-benefits-num-text, .vigour-avatar-text) .elementor-heading-title {
  line-height: 1 !important;
}

/* Offerings feature list: the tick sits centred in a 20px round badge and
   lines up with the first line of its text (one row = 20px line height).
   Elementor's list adds its own icon padding / text centring, which pushed the
   tick off-centre and the text down - both are reset here. */
.elementor .v-feature-list .elementor-icon-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
}
.elementor .v-feature-list .elementor-icon-list-icon {
  width: 20px; min-width: 20px; height: 20px; aspect-ratio: 1 / 1;
  padding: 0 !important; margin: 0 !important;
  border-radius: 50%;
  background: var(--vs-card-soft);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 20px;
  align-self: flex-start !important;
  line-height: 0;
}
html[data-theme="dark"] .elementor .v-feature-list .elementor-icon-list-icon { background: #1A1A1A; }
.elementor .v-feature-list .elementor-icon-list-icon svg,
.elementor .v-feature-list .elementor-icon-list-icon i {
  width: 10px !important; height: 10px !important; font-size: 10px !important;
  margin: 0 !important; padding: 0 !important; display: block;
}
.elementor .v-feature-list .elementor-icon-list-text {
  align-self: flex-start !important;
  padding: 0 !important; margin: 0 !important;
  line-height: 20px !important;
  min-width: 0;
}

/* Home case-study cards: same hover as every other card on the site */
.elementor .vs-cs-card.e-con {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
@media (hover: hover) {
  .elementor .vs-cs-card.e-con:hover {
    border-color: var(--vs-card-hover-border, var(--vs-accent)) !important;
    box-shadow: var(--vs-shadow-hover) !important;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) { .elementor .vs-cs-card.e-con:hover { transform: none; } }

/* Long text never breaks a card */
.elementor :is(.v-diff-card, .vs-raw-leader-item, .v-services-card, .v-benefits-card, .vigour-testimonial-card, .vs-cs-card) { min-width: 0; }
.elementor :is(.v-diff-desc, .vs-raw-leader-text, .v-card-desc, .v-benefits-desc, .vigour-quote) p { margin: 0; }

/* Section spacing for the rebuilt sections comes from Elementor
   (Advanced > Margin: 72 desktop / 56 tablet / 48 mobile), not from the
   theme's generic top-level container margin. Class set in Elementor. */
.elementor > .e-con.vs-sync {
  margin-block-start: var(--margin-block-start) !important;
  margin-block-end: var(--margin-block-end) !important;
}