/* ============================================================
   Cola City Roofing — polish overrides on top of the verbatim mirror.
   Loaded LAST + uses !important so it beats LiteSpeed's async UCSS.
   Targeted, additive fixes only — does not alter content.
   ============================================================ */

/* --- 1) Brand-color the "Why Homeowners Trust" checkmark icons ---
   Original renders fa-check-circle in black; recolor to brand orange. */
.elementor-widget-icon .elementor-icon i.fa-check-circle,
.elementor-widget-icon .elementor-icon svg.fa-check-circle {
  color: #f1782d !important;
  fill: #f1782d !important;
}

/* --- 1b) Balance the 5-item "Why Homeowners Trust" grid ---
   The bottom row is two 50%-wide columns, so the pair hangs left with an empty gap
   on the right. Narrow them to match the top row's thirds and center the pair.
   Scoped to this section's element id (the hero also uses col-50, so don't touch it). */
.elementor-element-1aae940 .elementor-container:has(> .elementor-col-50) {
  justify-content: center !important;
}
.elementor-element-1aae940 .elementor-container > .elementor-col-50 {
  width: 33.333% !important;
  max-width: 33.333% !important;
  flex: 0 0 33.333% !important;
}

/* --- 2) Equal-height service cards with bottom-aligned buttons ---
   The middle "Roof Repair" card has less copy, so its button floated up
   leaving white space. Make each card a full-height flex column and pin
   the CTA button to the bottom so all three buttons align. */
/* Each content column is nested in its own container and only sizes to its content,
   so the cards' buttons sat at different heights. The nested Elementor flex columns
   resist a pure flex-fill, so equalize the content columns with a min-height (measured
   tallest = 460px) on desktop; combined with the flex column + margin-top:auto below,
   every card's button lands on the same baseline. Mobile (single column) is left alone. */
.hservice-concol {
  display: flex !important;
  flex-direction: column !important;
}
@media (min-width: 1025px) {
  .hservice-concol {
    min-height: 460px !important;
  }
}
.hservice-concol > .elementor-widget-wrap.elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  /* Elementor defaults populated columns to flex-wrap:wrap + align-content:flex-start,
     which makes column children shrink to content width and float. Force a single
     full-width vertical stack, and grow to fill the (equal-height) card via flex:1
     instead of height:100% (which mis-resolves through the nested inner columns). */
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-content: stretch !important;
  flex: 1 1 auto !important;
}
/* The button widget was rendering 460px tall (it inherits a full-height rule), leaving
   the orange button stuck at its top with empty space below. Force its height to its
   content and pin it to the bottom of the equal-height card with margin-top:auto. */
.hservice-concol .elementor-widget-button.full-widbtn {
  height: auto !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
}