/*
 * Site-specific overrides on top of the ported Webflow stylesheet, which stays
 * untouched. Loaded after it by WebflowPage.astro. Each rule names the ticket
 * it came from.
 */

/* 86bcrb8hz: the DC Modern Luxury badge, moved from the homepage hero to a
   small strip just above the footer, at the client's request. */
.ecj-recognition {
  display: flex;
  justify-content: center;
  padding: 32px 16px;
  background-color: #fff;
}
.ecj-recognition-link {
  display: block;
  line-height: 0;
}
.ecj-recognition-badge {
  width: 96px;
  height: auto;
}

/* 86bcrb8hz: on phones the floating "Schedule Cleaning" box (228x59, pinned
   bottom-right) sat over the copy mid-line. It becomes a slim full-width bar,
   and pages carrying it get matching bottom padding so the end of the footer
   is never hidden underneath. */
@media screen and (max-width: 479px) {
  .sticky-button {
    left: 0;
    right: 0;
    bottom: 0;
    border-width: 2px 0 0;
  }
  .sticky-button .navy-button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    letter-spacing: 1px;
  }
  body:has(.sticky-button) {
    padding-bottom: 46px;
  }
}

/* 86bcrb8hz: service pages scrolled sideways on phones (11 of 12, up to 142px
   at 320). Two causes, both from the Webflow build:
   - the service H1 combo class pins 92px at every width, outranking the
     72px / 48px the site's own .banner-title steps down to; below tablet it
     now follows that same scale (tablet and up are unchanged);
   - the two checklist accordion columns stay side by side; they stack. */
@media screen and (max-width: 767px) {
  .banner-title.service-title {
    font-size: 72px;
  }
  .wrap.horizontal {
    flex-direction: column;
  }
  .wrap.horizontal > .accordion-wrap {
    width: 100%;
  }
}
@media screen and (max-width: 479px) {
  .banner-title.service-title {
    font-size: 48px;
  }
}

/* 86bcrb8hz: long URLs in the legal pages' rich text (linked on the privacy
   policy, plain text on the terms) pushed them wider than a phone screen. Only
   a string that cannot fit on a line is broken; ordinary text is unaffected. */
.w-richtext {
  overflow-wrap: break-word;
}
.w-richtext a {
  overflow-wrap: anywhere;
}

/* 86bcrb8hz: a rich-text table (the red-flag/green-flag comparison in the DC
   commercial-cleaning post) wider than a phone scrolls inside itself rather
   than widening the whole page. The post wrapper is a flex item, so it also
   needs min-width: 0 on phones, or it grows to the table's minimum width
   regardless. Desktop keeps Webflow's own 920px limit. */
.w-richtext table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .blog-template-wrapper,
  .blog-template-wrapper > .w-richtext {
    min-width: 0;
    max-width: 100%;
  }
}

/* 86bcrb8hz: Careers became a top-level menu item at the client's request. The
   desktop menu already filled the header, so a seventh item squeezed the logo
   to a thumbnail and wrapped "Call us". The labels give that room back:
   slightly less padding everywhere, plus less of the very wide letter-spacing
   (or 2px off the type size where there is none), tuned per breakpoint so the
   logo and the Call us button stay at or near their previous sizes. 1920px and
   up is untouched; the menu fits there as it is. */
@media screen and (min-width: 992px) {
  .nav-menu-centered .nav-menu-link.w-nav-link {
    padding-left: 6px;
    padding-right: 6px;
  }
  .nav-menu-centered .nav-dropdown-toggle-centered {
    padding-left: 14px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .nav-menu-centered .nav-menu-link.w-nav-link,
  .nav-item-title-centred {
    font-size: 14px;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .nav-menu-centered .nav-menu-link.w-nav-link,
  .nav-item-title-centred {
    letter-spacing: 3px;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .nav-menu-centered .nav-menu-link.w-nav-link,
  .nav-item-title-centred {
    letter-spacing: 6px;
  }
}

/* 86bcrb8hz: the Cloudflare Turnstile check is a fixed 300px wide, and on the
   narrowest phones the careers form column is only 220px, so /careers
   scrolled sideways at 320. Below 360px the widget is drawn at 72%. */
@media screen and (max-width: 359px) {
  .cf-turnstile {
    transform: scale(0.72);
    transform-origin: 0 0;
    margin-bottom: -18px;
  }
}