/* Site-level CSS overrides for the Next.js conversion.
   Loaded after the original Webflow stylesheets so rules here win. */

/* Contact page hero — the export ships this section without top padding,
   so the fixed navigation bar overlaps the "Get a free quote!" form.
   Push the section down by the navigation height plus the same gap that
   sits above the "Book Appointment" button at the top of the page. */
:root {
  --nav-edge-padding: 1rem; /* matches the visual padding above the nav button */
  --nav-height: 5rem;       /* approximate height of the sticky nav */
}

header.section.text-color-white:has(.contact-form) {
  padding-top: calc(var(--nav-edge-padding) + var(--nav-height) + var(--nav-edge-padding));
}

@media (min-width: 992px) {
  header.section.text-color-white:has(.contact-form) {
    padding-top: calc(var(--nav-edge-padding) + 5.5rem + var(--nav-edge-padding));
  }
}

/* Home hero "Certified by" label is rendered light grey on a light background
   on mobile and becomes unreadable. Force it black at narrow viewports. */
@media (max-width: 767px) {
  .container.header .certified-by h5,
  .container.header .certified-by .text-color-grey {
    color: #000;
  }

  /* Align the "Certified by" block with the H1, body copy, and CTA above it
     (the mobile rule adds 2rem of horizontal padding that nothing else has),
     and cut the gap between the "Certified by" label and the badges in half
     (was 5rem from the desktop rule). */
  .container.header .certified-by.bottom-margin {
    padding-left: 0;
    padding-right: 0;
  }
  /* Stack the label above the badges and left-align everything so the first
     badge's left edge lines up with the "Certified by" label. */
  .container.header .certified-by {
    flex-direction: column;
    align-items: flex-start;
  }
  .container.header .certified-by_logo-component {
    margin-left: 0;
    align-items: flex-start;
    margin-top: 1rem;
  }
}

/* "Reliable Heating Services to Keep You Comfortable" cards on the heating
   pages: .service-content_card.is-2 keeps its desktop 35% width on phones, so
   four cards stack into a narrow off-center column with truncated text.
   Force full-width on phones so each card is its own row and reads cleanly. */
/* Mobile nav dropdown: the "Call 604-802-9527" button sits flush against the
   "Book Appointment" button above it. Add the same top margin the Book
   Appointment button uses so the two have matching vertical spacing. */
@media (max-width: 991px) {
  .g-nav_menu #nav-button.button.solid {
    margin-top: 1.5rem;
  }
}

/* About page "Work with us / Current job openings" section: the .job-listing
   block uses margin-top: 5rem, leaving a huge gap between the heading and
   the first job posting on mobile. Halve it on phones. */
@media (max-width: 767px) {
  .job-listing {
    margin-top: 2.5rem;
  }
}

/* "Should You Hire a Professional or DIY?" comparison table on the drain
   cleaning pages: at narrow widths the third column gets clipped because
   cells don't shrink. Pin column widths and trim padding/text so all three
   columns fit on a phone screen without horizontal scroll. */
@media (max-width: 767px) {
  .table_component {
    table-layout: fixed;
    width: 100%;
    font-size: 0.875rem;
  }
  .table_component .table_header,
  .table_component .table_cell {
    width: 33.333%;
    padding: 0.5rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 479px) {
  .service-content_card.is-2 {
    width: 100%;
  }
  /* Restore the image: full-width within the card, cap height so it crops
     to a sensible landscape ratio (matches the desktop card visual). */
  .service-content_card.is-2 .service-content_image {
    display: block;
    width: 100%;
    height: 14rem;
    max-height: none;
    object-fit: cover;
  }
}

/* The "Fair pricing, excellent service" section uses .home-featured_card-heading
   (hard-coded at 3rem) instead of a plain h2, so on mobile the heading stays
   huge and overflows the screen. Mirror the responsive sizing of <h2> so this
   heading matches the very next section ("Say goodbye to water leaks..."). */
@media (max-width: 991px) {
  .home-featured_card-heading {
    font-size: 2.25rem;
  }
}
@media (max-width: 479px) {
  .home-featured_card-heading {
    font-size: 1.75rem;
  }
}

/* Home hero — the original .container.header has padding-top: 5rem and no
   padding-bottom, so flex centering ends up visually top-heavy (content sits
   close to the nav). Mirror the top padding on the bottom so the heading,
   CTA, and "Certified by" badges center vertically in the hero. */
.container.header {
  padding-bottom: 5rem;
}