/* === beMarketing VCS Theme — Site-Specific Frontend CSS === */
/* Ported from the static source site's css/globals.css + css/custom-style.css.
   Only the pieces the plan calls for are ported here (gradient bands, pill-button
   fallback, red gradient band, coupon-card border, header shrink). Hero background
   images are intentionally NOT ported — those are set inside Elementor. Known bugs
   in the old CSS (Roboto,serif; dead .vcs-rollover classes; the malformed
   .bg-danger.gradient declaration) are fixed here, not replicated. */

/* === Gradient Bands :: BEGIN ===
   Correspond to the old site's .bg-light.gradient (band-taupe here, 0deg) and
   .bg-light.gradient-reverse (band-white here, 180deg). */
.vcs-band-white {
  background: linear-gradient(180deg, #fff 10%, #fffaf3 90%);
}
.vcs-band-taupe {
  background: linear-gradient(0deg, #fff 10%, #fffaf3 90%);
}
/* === Gradient Bands :: END === */

/* === Pill Button Fallback :: BEGIN ===
   Use when a widget doesn't already get pill styling from the Elementor kit globals. */
.vcs-btn-pill {
  border-radius: 50rem;
  font-family: Figtree, sans-serif;
  font-weight: 600;
}
/* === Pill Button Fallback :: END === */

/* === Red Gradient Band :: BEGIN ===
   Fixes the old site's malformed declaration
   (`background: #b22b35);background: linear-gradient(...)` — stray paren, two
   background declarations). This is the single, valid replacement. */
.vcs-band-red {
  background: linear-gradient(60deg, #b22b35 5%, #83151d 40%, #610a11 95%);
}
/* === Red Gradient Band :: END === */

/* === Coupon Card :: BEGIN ===
   Dashed-border coupon card utility (old site built this ad hoc per-card via
   Bootstrap's border-danger + border-3 + dashed utilities). */
.vcs-coupon-card {
  border: 3px dashed #b22b35;
  border-radius: 0.3rem;
}
/* === Coupon Card :: END === */

/* === Header Shrink-on-Scroll :: BEGIN ===
   Toggled by assets/vcs-theme.js adding/removing .vcs-shrunk at scrollY > 50. */
.vcs-header {
  transition: all 0.25s ease;
}

/* === Header Shrink-on-Scroll :: END === */


/* === Trust Row Logos :: BEGIN ===
   The page-css shim's `.vcs-trust-badge{height:45px}` is (0,1,0) and loses to
   Elementor's `.elementor img{height:auto;max-width:100%}` (0,1,1). These rules
   out-specify it. Live target: `height="45px"` inline logos in one flex row. */
.elementor .vcs-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.elementor img.vcs-trust-badge {
  height: 45px !important;
  width: auto !important;
  max-width: none !important;
}
.elementor .vcs-trust-google img {
  height: 45px !important;
  width: 45px !important;
}
/* === Trust Row Logos :: END === */


/* === Bootstrap Button Fallback :: BEGIN ===
   Rich HTML from the static source keeps its `btn btn-danger` / `btn-primary` /
   `btn-outline-danger` classes, but Bootstrap is not loaded. These reproduce the
   live `.btn` geometry (padding .55rem 1.25rem, border-radius 50rem, Figtree 600,
   label #FFFAF3). !important is needed because hello-elementor styles bare
   <button> elements with the kit's button background, and some of these CTAs are
   ServiceTitan <button class="btn btn-primary" onclick> nodes preserved verbatim.
   white-space/max-width: found while verifying the header mobile-overflow fix —
   native <button> elements default to white-space:nowrap, so a long verbatim
   ServiceTitan CTA ("Schedule Service in Your Neighborhood", .btn.btn-danger.mt-3
   on the homepage's "Why Choose..." box) ignored its narrow mobile container and
   overflowed the viewport by ~5px at 390px width. Allowing wrap only ever takes
   effect when a button's text doesn't fit, so single-line desktop buttons are
   unaffected. */
.elementor a.btn,
.elementor button.btn {
  display: inline-block !important;
  font-family: Figtree, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  text-align: center;
  vertical-align: middle;
  white-space: normal !important;
  max-width: 100%;
  border: 1px solid transparent !important;
  border-radius: 50rem !important;
  padding: 12px 30px !important;
  text-decoration: none !important;
  cursor: pointer;
}
.elementor .btn.btn-danger  { background-color: #d03939 !important; border-color: #d03939 !important; color: #fffaf3 !important; }
.elementor .btn.btn-primary { background-color: #42b7db !important; border-color: #42b7db !important; color: #fffaf3 !important; }
.elementor .btn.btn-outline-danger  { background-color: transparent !important; border-color: #d03939 !important; color: #d03939 !important; }
.elementor .btn.btn-outline-primary { background-color: transparent !important; border-color: #42b7db !important; color: #42b7db !important; }
.elementor .btn.btn-lg { padding: 0.75rem 1.5rem !important; }
.elementor .btn.btn-xl { padding: 1.25rem 1.75rem !important; font-size: 1.5rem !important; }
.elementor .btn.w-100  { width: 100% !important; }
.elementor .btn.me-2   { margin-right: 0.5rem; }
.elementor .btn.mb-2   { margin-bottom: 0.5rem; }
.elementor .btn.mb-3   { margin-bottom: 1rem; }
.elementor .btn.mx-1   { margin-left: 0.25rem; margin-right: 0.25rem; }
/* === Bootstrap Button Fallback :: END === */

/* === Bootstrap Utility Fallback :: BEGIN ===
   Live's highlighted callouts are `<div class="bg-warning rounded-2 p-2 mb-2">`;
   the HTML shim converts bg-cream/bg-babyblue/bg-danger but not bg-warning. */
.elementor .bg-warning { background-color: #ffc107; }
.elementor .rounded-2  { border-radius: 0.25rem; }
.elementor .rounded-3  { border-radius: 0.5rem; }
.elementor .p-2 { padding: 0.5rem; }
.elementor .mb-2 { margin-bottom: 0.5rem; }
.elementor .mb-3 { margin-bottom: 1rem; }
.elementor .list-unstyled { list-style: none; padding-left: 0; }
/* === Bootstrap Utility Fallback :: END === */

/* === Gravity Forms :: BEGIN ===
   Live's contact submit is `<button class="btn btn-danger w-100">Contact Us</button>`
   — full-width red pill. GF 2.9's foundation theme ships a square blue default. */
.elementor .gform_wrapper .gform_footer input[type="submit"],
.elementor .gform_wrapper .gform_footer button[type="submit"],
.elementor .gform_wrapper .gform_button {
  background-color: #d03939 !important;
  border: 1px solid #d03939 !important;
  color: #fffaf3 !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border-radius: 50rem !important;
  padding: 0.55rem 1.25rem !important;
  width: 100% !important;
}
.elementor .gform_wrapper .gform_footer input[type="submit"]:hover,
.elementor .gform_wrapper .gform_footer button[type="submit"]:hover,
.elementor .gform_wrapper .gform_button:hover {
  background-color: #e73030 !important;
  border-color: #e73030 !important;
}
/* === Gravity Forms :: END === */



/* === ServiceTitan Scheduler Buttons :: BEGIN ===
   Used by the Theme Builder header's Schedule Service button (HTML widget)
   and any future ServiceTitan scheduler trigger elements.
.vcs-st-btn {
  display: inline-block;
  font-family: Figtree, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  border: none;
  border-radius: 50rem;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
  color: #fffaf3;
  background-color: #d03939;
}
.vcs-st-btn:hover { background-color: #e73030; }
.vcs-st-btn--dark,
.elementor .vcs-st-btn--dark {
  background-color: #221f20 !important;
  color: #ffffff !important;
}
.vcs-st-btn--dark:hover,
.elementor .vcs-st-btn--dark:hover { background-color: #333333 !important; }
ServiceTitan Scheduler Buttons BEGIN ===*/

/* === Legacy Bootstrap Utility Shims (raw-HTML content) :: BEGIN ===
   Rich content ported from the old static source site keeps Bootstrap
   utility classes that WordPress/Elementor never defines, inside the
   text-editor/HTML widgets that carry this raw markup verbatim (findings-sta
   F-301/F-307/F-310/F-313/F-316: unstyled .text-uppercase/.fw-medium/
   .fw-light "Why Choose..." callout on all 5 standalone-service pages;
   findings-loc F-303/F-305: inert Bootstrap .row/.col-6 "Neighborhoods We
   Serve" grid on barboursville-wv + huntington-wv). Only what content
   actually uses is implemented here, scoped to the content widgets so these
   can never collide with anything else on the page. */

/* Minimal Bootstrap row/col-6 grid: 2-up at >=768px, stacked below. */
.elementor-widget-text-editor .row,
.elementor-widget-html .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.elementor-widget-text-editor .row > .col-6,
.elementor-widget-html .row > .col-6 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (min-width: 768px) {
  .elementor-widget-text-editor .row > .col-6,
  .elementor-widget-html .row > .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* === Legacy Bootstrap Utility Shims (raw-HTML content) :: END === */

/* === Nested List Divider Fix :: BEGIN ===
   findings-loc F-302-loc: the page-css.json per-page shim defines
   `.vcs-list li{border-bottom:1px solid ...}` as a plain descendant
   selector, so it also matches plain <ul><li> items nested INSIDE a
   .vcs-list <li> (e.g. barboursville-wv's "Critical Furnace Services"
   sub-list inside the emergency-furnace-repair list item), producing an
   unwanted red/blue horizontal divider under content that was never meant
   to have one. page-css.json is generated per-page — do not edit it;
   neutralize here instead. Higher specificity than the shim's rule wins
   regardless of source order. */
.elementor .vcs-list li ul:not(.vcs-list) li,
.elementor .vcs-list--red li ul:not(.vcs-list) li {
  border-bottom: none !important;
}
/* === Nested List Divider Fix :: END === */

/* === Maintenance-Plan Icon Rows Spacing :: BEGIN ===
   The reusable "maintenance plan" icon+heading+text block (identified by its
   vcs-icon-maintenance-*.svg icons, repeated verbatim across furnace/,
   furnace/repair/, about-us/, etc.) accumulates ~56px of vertical
   whitespace between items locally (20px row padding-bottom + 16px
   container row-gap + 20px next row's padding-top) vs ~45px on live,
   contributing to local pages running 25-30% taller than live
   (findings-fam F-302, findings-det F-301 dead-space, findings-uti F-303).
   Scoped via :has() to the icon-image src pattern so this can only ever
   match this specific recurring block, never any other icon-list/image
   row on the site. Halves the row's own padding, and pulls each row up
   with a negative margin-top to counteract half of the parent's 16px
   row-gap (CSS forbids nesting :has() inside :has(), so the parent
   container 2 levels up can't be targeted directly — this achieves the
   same visual halving via the row itself). Applied uniformly to every
   matching row, including the first, which also tightens the gap under
   the intro paragraph immediately above it (same shared flex parent). */
.elementor .e-con:has(> .e-con > .elementor-widget-image > img[src*="vcs-icon-maintenance-"]) {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: -8px !important;
}
/* === Maintenance-Plan Icon Rows Spacing :: END === */

/* === Header Utility Bar Mobile Overflow Fix :: BEGIN ===
   findings-chrome F-302-chrome: at 390px the utility bar (.vcs-header's
   FIRST child — serving-text + "We're Hiring" button + social-icons HTML
   widget) has flex-wrap:nowrap with no shrink/wrap accommodation, so the
   last social icon (Yelp) is pushed ~14-20px past the viewport edge,
   producing horizontal page scroll. The nav row (2nd child) already has an
   equivalent single-line fix above; this is the analogous mobile-only fix
   for the 1st child, tightening gaps/padding/font-size so everything fits.
   Desktop is unaffected (media-query gated) — confirmed clean vs. live. */
@media (max-width: 480px) {
  .vcs-header .e-con:first-child {
    gap: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* The serving-text column is the only non-essential item — let it shrink
     and ellipsis first so the button + social icons never get squeezed
     narrower than their own natural (icon) content, which is what was
     causing the icons to render past their shrunk parent's edge. */
  .vcs-header .e-con:first-child > .elementor-widget-text-editor {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .vcs-header .e-con:first-child > .elementor-widget-text-editor p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
  }
  .vcs-header .e-con:first-child > .elementor-widget-button,
  .vcs-header .e-con:first-child > .elementor-widget-html {
    flex: 0 0 auto !important;
  }
  .vcs-header .e-con:first-child .elementor-widget-html > div {
    gap: 8px !important;
  }
}
/* === Header Utility Bar Mobile Overflow Fix :: END === */

/* === Footer Flex Layout Fix :: BEGIN ===
   Elementor containers written via _elementor_data default to e-con-full (100%
   width) even when _element_width is set.  Override with CSS on the specific
   footer sections so items flow horizontally. */
.elementor-location-footer > .elementor-element > .e-con-inner > .e-con:first-child > .e-con,
.elementor-location-footer > .elementor-element > .e-con:first-child > .e-con {
  width: auto !important;
  --container-widget-width: auto;
  flex-grow: 0;
  flex-shrink: 0;
}
.elementor-location-footer > .elementor-element > .e-con-inner > .e-con:nth-child(2) > .e-con,
.elementor-location-footer > .elementor-element > .e-con:nth-child(2) > .e-con {
  width: auto !important;
  --container-widget-width: auto;
  flex-shrink: 0;
}
.elementor-location-footer > .elementor-element > .e-con-inner > .e-con:nth-child(2) > .elementor-widget-html,
.elementor-location-footer > .elementor-element > .e-con:nth-child(2) > .elementor-widget-html {
  flex-grow: 1;
}
/* === Footer Flex Layout Fix :: END === */