/* ═══════════════════════════════════════════
   MERCY HOUSE — ELEMENTOR COMPATIBILITY
   These rules ensure Elementor's canvas sits
   correctly within the Mercy House theme.
═══════════════════════════════════════════ */

/* ── Strip default WP margins so Elementor fills the page ── */
.elementor-page .site-main,
.elementor-page main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* ── Full-width sections (no container padding) ── */
.elementor-section.elementor-section-stretched {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Push content below the fixed nav ── */
.elementor-page .elementor-section:first-child,
.mh-section-wrap > .elementor-section:first-child {
  padding-top: 80px;
}

/* ── Expose CSS variables to Elementor widgets ── */
:root {
  --e-global-color-primary:   #c8963e;
  --e-global-color-secondary: #7a8c6e;
  --e-global-color-text:      #2c2c2c;
  --e-global-color-accent:    #c4674a;
}

/* ── Elementor heading widget — use Cormorant by default ── */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.15;
}

/* ── Elementor button widget — MH Gold by default ── */
.elementor-widget-button .elementor-button {
  background-color: #c8963e;
  border-radius: 50px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .03em;
  transition: background-color .25s, transform .25s;
}
.elementor-widget-button .elementor-button:hover {
  background-color: #c4674a;
  transform: translateY(-2px);
}

/* ── Elementor divider ── */
.elementor-widget-divider .elementor-divider-separator {
  border-color: rgba(200,150,62,0.3);
}

/* ── Image widget border-radius ── */
.elementor-widget-image img {
  border-radius: 4px;
}

/* ── Icon box widget ── */
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
  color: #c8963e;
}

/* ── Text editor (body copy) ── */
.elementor-widget-text-editor {
  font-family: 'DM Sans', sans-serif;
  color: #5a5a5a;
  line-height: 1.8;
}

/* ── Make Elementor sections snap edge-to-edge ── */
.elementor-top-section {
  width: 100%;
}

/* ── Elementor inner container max-width override ── */
.elementor-section .elementor-container {
  max-width: 1200px;
}
.elementor-section.elementor-section-full_width .elementor-container {
  max-width: 100%;
}

/* ── Elementor form widget — MH styles ── */
.elementor-widget-form .elementor-field-group input,
.elementor-widget-form .elementor-field-group textarea,
.elementor-widget-form .elementor-field-group select {
  border: 1.5px solid #e4ddd2 !important;
  border-radius: 9px !important;
  font-family: 'DM Sans', sans-serif !important;
  background: #fdfaf5 !important;
  transition: border-color .2s !important;
}
.elementor-widget-form .elementor-field-group input:focus,
.elementor-widget-form .elementor-field-group textarea:focus {
  border-color: #c8963e !important;
  outline: none !important;
}
.elementor-widget-form .elementor-button {
  background-color: #c8963e !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
}
.elementor-widget-form .elementor-button:hover {
  background-color: #c4674a !important;
}

/* ── Nav stays on top of Elementor canvas ── */
#navbar { z-index: 9999 !important; }

/* ── Elementor editor sidebar fix ── */
#elementor-editor-wrapper {
  z-index: 10000;
}

/* ── Responsive: Elementor column stacking ── */
@media (max-width: 767px) {
  .elementor-column {
    width: 100% !important;
  }
}

/* ── Section background helper classes you can apply in Elementor ── */
.mh-bg-cream      { background-color: #f7f3ec !important; }
.mh-bg-dark       { background-color: #2c2c2c !important; }
.mh-bg-white      { background-color: #fdfaf5 !important; }
.mh-bg-gold       { background-color: #c8963e !important; }
.mh-text-gold     { color: #c8963e !important; }
.mh-text-white    { color: #ffffff !important; }
.mh-text-sage     { color: #7a8c6e !important; }
.mh-rounded-pill  { border-radius: 50px !important; }
.mh-shadow        { box-shadow: 0 8px 40px rgba(0,0,0,.08) !important; }
.mh-border-gold   { border: 1.5px solid rgba(200,150,62,.3) !important; }
.mh-label-style {
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #c8963e !important;
}