/* =============================================================
   site-fixes.css — global UI fixes for echolsservices
   ============================================================= */

/* -------- Hero "Request a Callback" form (Elementor-wrapped Gravity Form)
   Service-area / location pages render the callback form via the Elementor
   gform_widget which inflates label markup and stretches the column down
   the page. These rules compact it into the same card look (~378 × 480)
   as the hand-written .gen-hero-form used on collierville-tn et al. */

.e-con:has(> .elementor-widget-wp-widget-gform_widget) {
  flex: 0 0 378px !important;
  max-width: 378px !important;
  align-self: flex-start !important;
  padding: 30px !important;
  background: #F7F7F7 !important;
  box-sizing: border-box;
}

.e-con:has(> .elementor-widget-wp-widget-gform_widget) > .elementor-widget-heading {
  margin-bottom: 10px !important;
}
.e-con:has(> .elementor-widget-wp-widget-gform_widget) > .elementor-widget-heading .elementor-heading-title {
  margin: 0 !important;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: #111;
}
.e-con:has(> .elementor-widget-wp-widget-gform_widget) > .elementor-widget-text-editor {
  margin-bottom: 20px !important;
}
.e-con:has(> .elementor-widget-wp-widget-gform_widget) > .elementor-widget-text-editor .elementor-widget-container {
  font-size: 15px;
  line-height: 1.5;
  color: #222;
}
.e-con:has(> .elementor-widget-wp-widget-gform_widget) > .elementor-widget-wp-widget-gform_widget,
.e-con:has(> .elementor-widget-wp-widget-gform_widget) > .elementor-widget-wp-widget-gform_widget .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-widget-wp-widget-gform_widget .gform_heading {
  display: none;
}

.elementor-widget-wp-widget-gform_widget .gfield_label,
.elementor-widget-wp-widget-gform_widget legend.gfield_label,
.elementor-widget-wp-widget-gform_widget .gform_required_legend {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.elementor-widget-wp-widget-gform_widget .gfield {
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.elementor-widget-wp-widget-gform_widget .gform-body,
.elementor-widget-wp-widget-gform_widget .gform_body,
.elementor-widget-wp-widget-gform_widget .gform_fields {
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-widget-wp-widget-gform_widget input[type="text"],
.elementor-widget-wp-widget-gform_widget input[type="tel"],
.elementor-widget-wp-widget-gform_widget input[type="email"],
.elementor-widget-wp-widget-gform_widget textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff !important;
}

.elementor-widget-wp-widget-gform_widget input[type="text"]:focus,
.elementor-widget-wp-widget-gform_widget input[type="tel"]:focus,
.elementor-widget-wp-widget-gform_widget input[type="email"]:focus,
.elementor-widget-wp-widget-gform_widget textarea:focus {
  outline: none;
  border-color: #1863A0 !important;
}

.elementor-widget-wp-widget-gform_widget .ginput_container--name,
.elementor-widget-wp-widget-gform_widget .ginput_container_name {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
}

.elementor-widget-wp-widget-gform_widget .ginput_container--name > span,
.elementor-widget-wp-widget-gform_widget .ginput_container_name > span {
  flex: 1 1 0;
  min-width: 120px;
}

.elementor-widget-wp-widget-gform_widget .gform_footer {
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

.elementor-widget-wp-widget-gform_widget .gform_button {
  width: 100%;
  background: #1863A0;
  color: #fff;
  border: 0;
  padding: 13px 22px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}

.elementor-widget-wp-widget-gform_widget .gform_button:hover {
  background: #15588E;
}

/* -------- CTA banner sections (heading + phone + button) --------
   Vertically center the three columns (heading text, "Give Us a Call"
   icon-box, "Request a Callback" button) inside the CTA banner. */
.e-con-boxed.e-parent:has(.elementor-widget-icon-box):has(.elementor-widget-button) > .e-con-inner {
  align-items: center !important;
}
.e-con-boxed.e-parent:has(.elementor-widget-icon-box):has(.elementor-widget-button) > .e-con-inner > .e-con {
  align-self: center !important;
}

/* -------- Homepage hero — vertically center content + form on big screens --------
   The hero (.elementor-element-9e70525) is min-height:88vh. Its two columns
   (left: heading/intro/phone, right: "Request a Callback" form) were pinned to
   the top of that height, leaving a large empty gap at the bottom on tall
   screens. Center them as a group, matching the CTA-banner centering pattern
   above. Desktop only — mobile/tablet stack and stay full-width. */
@media (min-width: 1025px) {
  .elementor-13 .elementor-element-9e70525 > .e-con-inner {
    align-items: center !important;
  }
  .elementor-13 .elementor-element-9e70525 > .e-con-inner > .e-con {
    align-self: center !important;
  }
}