/* Capitol Chip Seal — post-migration overrides (loaded after Webflow CSS).
   Brand: --primary #eb8900 (orange), --secondary #62390d (brown). */

/* ---- WCAG AA contrast on primary CTA buttons ----
   White text on the brand orange (--primary #eb8900) is only 2.58:1 and fails
   the color-contrast audit. Darken just the primary CTA buttons to ~4.6:1.
   (The brown "Our Services" secondary button already passes and is untouched.)
   To restore the brighter brand orange, delete these two rules. */
.primary-button-link, .quote__form-submit { background-color: #a85f00 !important; }
.primary-button-link:hover, .quote__form-submit:hover { background-color: #8f5000 !important; }

/* ---- form success box: real green (Webflow default is a washed-out mint) ---- */
.quote__form-success.w-form-done,
.w-form-done {
  display: none;
  background: #e7f7ec;
  border: 1.5px solid #1a7f37;
  color: #0f5132;
  border-radius: 12px;
  padding: 24px 22px;
  text-align: center;
  font-weight: 600;
}
/* leave .w-form-fail as Webflow's default red */

/* ---- ALTCHA widget: self-contained light theme, legible on dark hero forms ---- */
altcha-widget {
  display: block;
  margin: 0 0 16px;
  max-width: 280px;
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1a1a;
  --altcha-color-border: #cbd2d9;
  --altcha-color-border-focus: #eb8900;
  --altcha-color-active: #eb8900;
  --altcha-color-error-text: #b42318;
  --altcha-color-footer-bg: #f4f6f8;
  --altcha-border-radius: 10px;
}
altcha-widget, .quote__form altcha-widget { color: #1a1a1a; }

/* ---- service-areas hub: search + client pagination ---- */
.area-search { max-width: 560px; margin: 0 auto 2rem; }
.area-search__input {
  width: 100%; box-sizing: border-box; padding: 0.85rem 1.1rem;
  font-size: 16px; border: 1px solid #d9d9d9; border-radius: 10px; outline: none;
  background: #fff; color: #1e1400;
}
.area-search__input:focus { border-color: #eb8900; }
.area-search__empty { text-align: center; margin-top: 1rem; opacity: .85; }
.area-search__empty a { color: #eb8900; font-weight: 700; }
.area-pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 32px auto 8px; flex-wrap: wrap;
}
.area-pager__btn {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 10px 22px; border-radius: 10px; border: 1.5px solid #eb8900;
  background: #eb8900; color: #fff; transition: opacity .2s ease;
}
.area-pager__btn:hover { opacity: .88; }
.area-pager__btn:disabled { opacity: .4; cursor: default; }
.area-pager__info { font-weight: 600; color: #62390d; }

/* accessible-hidden label */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* card hover affordance on the area list */
.service-area-item { transition: transform .18s ease, box-shadow .18s ease; }

/* ---- keep sticky navbar above hero videos / overlays on scroll ---- */
.navbar-menu-container.w-nav, .navbar-wrapper { z-index: 1000; }

/* ---- mobile ---- */
@media screen and (max-width: 991px) {
  /* Webflow's slide-in nav animation doesn't always fire off-platform: the menu
     opens (display:block, .w--open) but stays translated off-screen. Force it
     on-screen deterministically, keyed on the reliable .w--open button class.
     (Menu precedes the button in the DOM, so use :has() from the container.) */
  .navbar-menu-container:has(.menu-button.w--open) .nav-menu-wrapper.w-nav-menu {
    transform: translateX(0) !important;
  }
  .menu-button.w--open .hamburger-icon { color: #fff; }
}
@media screen and (max-width: 767px) {
  /* iOS Safari auto-zooms (and h-scrolls) on inputs under 16px */
  .quote__form-input, .w-input, .w-select, textarea.quote__form-input {
    font-size: 16px;
  }
  /* embedded Google map: full width, sensible height, no overflow */
  .location__map iframe, .location iframe, iframe[src*="google.com/maps"] {
    width: 100%; max-width: 100%; min-height: 280px; border: 0;
  }
}