/* ==========================================================================
   Elementor Compatibility Layer
   Resets Elementor's own defaults and rebinds spacing/typography/color
   to theme tokens so page-builder output and custom widgets share one
   visual language.
   ========================================================================== */

/* ---------- Container inheritance ---------- */

.elementor .e-con,
.elementor-section {
  max-width: 100%;
}

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed {
  max-width: var(--container-width);
}

/* Section vertical rhythm follows theme spacing rather than Elementor's own */

.elementor-section,
.e-con {
  --e-con-gap: var(--space-md);
}

.elementor-top-section,
.e-parent.e-con {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

/* ---------- Typography inheritance ---------- */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}

.elementor a:not(.btn):not(.elementor-button) {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.elementor a:not(.btn):not(.elementor-button):hover {
  color: var(--color-secondary);
}

/* ---------- Elementor button -> theme button ---------- */

.elementor-button {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.elementor-button:hover {
  transform: translateY(-2px);
}

.elementor-button.elementor-button-link {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------- Forms inside Elementor ---------- */

.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  border-radius: var(--radius-sm);
  border-color: var(--color-border);
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), .15);
}

/* ---------- Neutralize Elementor's default spacing conflicts ---------- */

.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

.elementor-widget-container {
  transition: none;
}

/* Remove default Elementor icon-box/box-shadow presets so custom
   widgets can opt into theme shadows explicitly instead of fighting them. */
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-image-box .elementor-image-box-img {
  box-shadow: none;
}

/* ---------- Editor-only safeguards ----------
   Keeps the backend Elementor editor canvas from inheriting the
   frontend @import fonts twice or fighting panel styles. */

.elementor-editor-active .elementor-widget-container {
  outline-color: var(--color-secondary);
}

/* ---------- Custom widget namespace ----------
   Every future custom Elementor widget should be rendered inside an
   element carrying `.jsf-widget` so it automatically inherits the
   design system without extra classes. */

.jsf-widget {
  font-family: var(--font-body);
  color: var(--color-body);
}

.jsf-widget h1, .jsf-widget h2, .jsf-widget h3,
.jsf-widget h4, .jsf-widget h5, .jsf-widget h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

.jsf-widget a { color: var(--color-primary); }
.jsf-widget .btn { font-family: var(--font-heading); }

/* ---------- Responsive parity with Elementor's own breakpoints ---------- */

@media (max-width: 1439px) {
  .elementor-top-section,
  .e-parent.e-con { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
}

@media (max-width: 1024px) {
  .elementor-top-section,
  .e-parent.e-con { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
}

@media (max-width: 767px) {
  .elementor-top-section,
  .e-parent.e-con { padding-top: var(--space-md); padding-bottom: var(--space-md); }
}