/*
 * Spice Isle Enigmas — Elementor Integration
 *
 * Loaded only when Elementor is active. Fixes conflicts between the theme
 * and Elementor's default styles, and ensures brand fonts/colours carry
 * through to Elementor widgets.
 */

/* -------------------------------------------------------------------------
   Typography: apply brand fonts to Elementor widgets
   ------------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
}

/* -------------------------------------------------------------------------
   Buttons: map Elementor default button to brand style
   ------------------------------------------------------------------------- */
.elementor-button.elementor-button-default,
.elementor-button-wrapper .elementor-button {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 9999px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.elementor-button.elementor-button-default:hover,
.elementor-button-wrapper .elementor-button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200,114,42,.35);
}

/* -------------------------------------------------------------------------
   Section / Container: remove conflicting max-width when inside full-width
   template, let Elementor manage its own container widths
   ------------------------------------------------------------------------- */
.sie-full-width #site-main,
.sie-elementor-built #site-main {
  padding: 0;
}

.sie-full-width .elementor-section.elementor-section-boxed > .elementor-container,
.sie-elementor-built .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-width);
}

/* -------------------------------------------------------------------------
   Fix: theme's p { max-width: 70ch } clipping Elementor text widgets
   ------------------------------------------------------------------------- */
.elementor-widget-text-editor p,
.elementor-widget-heading p,
.elementor p.elementor-alert-description {
  max-width: none;
}

/* -------------------------------------------------------------------------
   Cards & boxes: Elementor icon-box / image-box inherit brand look
   ------------------------------------------------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
   Dividers: match brand colours
   ------------------------------------------------------------------------- */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--color-border);
}

/* -------------------------------------------------------------------------
   Forms (Elementor Form widget free)
   ------------------------------------------------------------------------- */
.elementor-field-group .elementor-field {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .65rem 1rem;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .2s, box-shadow .2s;
}
.elementor-field-group .elementor-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200,114,42,.15);
}
.elementor-field-group .elementor-button {
  background: var(--color-primary);
  color: #fff;
}

/* -------------------------------------------------------------------------
   Page-builder page: strip the default site background tint so Elementor
   sections show their own full-width backgrounds correctly
   ------------------------------------------------------------------------- */
.sie-elementor-built .sie-page,
.sie-full-width .sie-page {
  background: transparent;
  padding: 0;
}