/* ====== Typography: Bricolage Grotesque everywhere ======
   The vendor theme (style.css, ~8800 lines) sets explicit font-family on
   dozens of scattered selectors (buttons, nav links, spans, the chatbot,
   etc.), so a scoped h1-h6/p rule doesn't reach them. Using a universal
   !important override instead - it beats every one of those without
   having to hunt each down individually. Icons are excluded: Font
   Awesome/Flaticon glyphs are rendered via <i> tags whose font-family
   IS the icon font, so forcing Bricolage onto them would break every
   icon on the site. This site only ever uses <i> for icon glyphs, never
   for italic text, so excluding the tag entirely is safe. */
*:not(i) {
  font-family: "Bricolage Grotesque", sans-serif !important;
}

/* Weights chosen to match the site's existing heading hierarchy
   (h1/h2 bold, h3-h6 semibold, body text regular). */
h1,
h2 {
  font-weight: 700;
}
h3,
h4,
h5,
h6 {
  font-weight: 600;
}
body,
p {
  font-weight: 400;
}

/* ====== Buttons: better hover feedback + fixed low-contrast text ======
   primary-btn/secondary-btn previously rendered medium-green text on a
   dark-green background (~2:1 contrast) - switched to white for legibility.
   filled-white now actually renders white, matching its name. */
.main-btn {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.main-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.main-btn:hover::before {
  left: 125%;
}

.main-btn.primary-btn,
.main-btn.secondary-btn,
.main-btn.primary-btn:hover,
.main-btn.secondary-btn:hover,
.main-btn.golden-btn:hover,
.main-btn.filled-btn:hover {
  color: #fff;
}
.main-btn.filled-btn.filled-white,
.main-btn.filled-btn.filled-white:hover {
  color: #fff;
}

/* ====== Fix theme-wide green-on-green contrast bugs ======
   The vendor theme's .text-white utility class (meant to make headings/
   paragraphs white on colored backgrounds) actually sets them to bright
   green (#26b650) due to a shared selector bug - broken wherever it's
   combined with a dark-green .main-bg section (homepage "Popular
   Services" title, About page's Features box). Also fixes the pricing
   card hover state, which turns the whole card dark green while its
   text stayed the same bright green. */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p {
  color: #fff !important;
}
.single-pricing-item:hover .pricing-body,
.single-pricing-item:hover .pricing-body .pricing-title h3.title,
.single-pricing-item:hover .pricing-body p {
  color: #fff !important;
}

/* Accent sub-title (e.g. "Popular Services", "English/Spanish") was olive
   green (#7eb048) on a dark-green .main-bg section - only 2.56:1 contrast,
   below the WCAG AA minimum of 4.5:1. White reads clearly (6.57:1). */
.text-white .sub-title {
  color: #fff !important;
}

/* Top bar labels ("Email:", "Call:", etc.) were dark green on the
   darkseagreen bar background - 2.4:1 contrast. Matched to the same
   near-black used by the adjacent link/value text (9.76:1). */
.header-top-bar-two .top-left span b.title {
  color: #2f2f2f !important;
}

/* Footer nav/contact links hovered to dark green (#2a7d2e) on the footer's
   own dark-green background (#2d693b) - 1.27:1 contrast, essentially
   invisible. White reads clearly (6.57:1). */
.footer-nav-widget .footer-nav li a:hover,
.contact-info-widget .info-list li a:hover {
  color: #fff !important;
}

/* ====== Navbar height ======
   The logo file itself is 200x131px with no height constraint anywhere
   in the vendor CSS, so the whole nav bar was stretching to 131px tall
   to fit it. Capping the logo's height (aspect ratio preserved via
   width:auto) shrinks the bar back down to a normal size. */
.header-navigation .site-branding .brand-logo img {
  max-height: 52px;
  width: auto;
}

/* ====== Navbar liquid glass ======
   Was solid white via inline style; swapped for a translucent frosted
   look so the page content shows through faintly behind it.
   IMPORTANT: backdrop-filter (or filter/transform/perspective) on an
   element creates a new *containing block* for any position:fixed
   descendant - it stops being positioned relative to the viewport and
   starts being positioned relative to this element instead. The mobile
   slide-in menu (.nav-menu) is position:fixed, so putting backdrop-filter
   directly on .header-navigation broke it completely (stuck off-screen
   even when "open"). Moving the blur to a ::before overlay instead keeps
   .header-navigation itself filter-free, so its fixed descendants still
   position against the real viewport. */
.header-navigation {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.header-navigation::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  z-index: -1;
  pointer-events: none;
}
/* Was position:static, so its z-index did nothing and its own z-index:99
   dropdown could end up painted behind page content with a higher
   stacking value (e.g. the hero slider's active slide, at z-index:999).
   Scoped to :not(.sticky) because the vendor's own `.sticky` class (added
   by theme.js on scroll) sets position:fixed at the same specificity -
   applying this unconditionally made a same-specificity, later-loaded
   rule silently override that back to relative and broke the sticky
   header entirely. */
.header-navigation:not(.sticky) {
  position: relative;
  z-index: 1000;
}
/* The phone dropdown (in the top bar, above the nav) extends downward
   into the space the nav bar occupies. .header-top-bar-two was also
   position:static, so once the nav bar above got its own z-index:1000
   stacking context, the phone dropdown's z-index:200 started losing to
   it and rendered hidden behind the nav bar. Giving the top bar a higher
   context than the nav fixes that without affecting the nav itself. */
.header-top-bar-two {
  position: relative;
  z-index: 1001;
}

/* ====== Hero heading spacing ======
   85px font-size with the theme's default 1.12 line-height made a
   2-line hero heading ~190px tall, plus a 33px bottom margin - read as
   excessive top/bottom whitespace around the heading. */
.hero-content h1 {
  line-height: 1.08;
  margin-bottom: 14px;
}

/* The slide wrapper itself had 193px top / 290px bottom padding, making
   the whole hero section taller than most viewports (921px on a 720px
   window) regardless of the heading's own spacing. */
.hero-wrapper-three .single-slider {
  padding: 100px 0 110px !important;
}
@media (max-width: 991px) {
  .hero-wrapper-three .single-slider {
    padding: 90px 0 90px !important;
  }
}

/* ====== Navbar text on the new glass background ======
   Nav links were bright green (2.46:1 against a typical light backdrop -
   fails WCAG AA) or dark green on hover; unreliable once the bar became
   translucent and whatever's scrolled behind it shows through. Dark text
   reads clearly regardless of what's blurred underneath. */
.navigation-white.header-navigation .main-menu > ul > li > a {
  color: #2f2f2f !important;
}
.header-navigation .main-menu > ul > li:hover > a {
  color: #2a7d2e !important;
}
/* The Services dropdown panel itself is dark green (#2d693b) - its links
   were near-black (2.04:1 contrast). White reads clearly (6.57:1) in both
   its base and hover state (scoped with > so it can't be overridden by
   the top-level nav hover rule above). */
.header-navigation .main-menu ul > li .sub-menu li a,
.header-navigation .main-menu ul > li .sub-menu li:hover > a {
  color: #fff !important;
}

/* ====== Buttons: border radius ====== */
.main-btn {
  border-radius: 10px;
}

.main-btn.primary-btn:hover,
.main-btn.secondary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(45, 105, 59, 0.6);
}
.main-btn.golden-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(126, 176, 72, 0.6);
}
.main-btn.filled-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(45, 105, 59, 0.45);
}
/* ====== Top bar: single line ======
   The top-left bar (email, 2 phone numbers, location, storm response) was
   wrapping to a second line and doubling the bar's height. Collapsing the
   two "Call:" entries into one item with a hover dropdown, shortening the
   storm-response label, and trimming the item/icon spacing gets it back
   to a single line. */
.header-top-bar-two .top-left span:not(:last-child) {
  margin-inline-end: 14px !important;
}
.header-top-bar-two .top-left span i {
  margin-inline-end: 6px !important;
}
.header-top-bar-two .top-left {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.header-top-bar-two .top-left span.phone-dropdown {
  position: relative;
  cursor: pointer;
}
.phone-dropdown-caret {
  margin-inline-start: 6px;
  font-size: 11px;
  transition: transform 0.2s ease;
}
.phone-dropdown:hover .phone-dropdown-caret {
  transform: rotate(180deg);
}
.phone-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  min-width: 200px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}
.phone-dropdown:hover .phone-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.phone-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  color: #2f7d43 !important;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.phone-dropdown-menu a:hover {
  background: #f2f7f3;
}
.phone-dropdown-menu a i {
  font-size: 13px;
}

.main-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* ====== FAQ accordion ======
   The vendor .accordion-card had no margin between cards and no border
   or shadow, so a list of them just ran together into one solid block
   with no visual separation between questions. */
.accordion-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  margin-bottom: 16px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.accordion-card:hover {
  border-color: rgba(47, 125, 67, 0.25);
  box-shadow: 0 10px 24px rgba(20, 40, 25, 0.08);
}
.accordion-card:last-child {
  margin-bottom: 0;
}
.accordion-card .accordion-header h6.accordion-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.accordion-card .accordion-header h6.accordion-title:hover {
  color: #2f7d43;
}
.accordion-card .accordion-header h6.accordion-title:after {
  color: #2f7d43;
  flex-shrink: 0;
  -webkit-margin-start: 16px;
  margin-inline-start: 16px;
}
.accordion-card .accordion-body p {
  color: #5b5b5b;
  line-height: 1.7;
}