/* Rubber Cap - post-migration additions.
   Kept intentionally small: the live Webflow stylesheet is shipped unchanged so
   the design (incl. mobile) matches production. This file only styles elements
   that do not exist on the live site (the ALTCHA widget), makes the form success
   state read as a real success box, and styles the client-side area pagination. */

/* --- Navbar links: bolder weight (client request). --- */
.nav-menu-link { font-weight: 700 !important; }

/* --- Active nav link contrast: the current-page link was brand red #d2402f on
   white (4.28:1, fails AA). Use the darker brand red (#c0261a, ~5.9:1). --- */
.nav-menu-link.w--current { color: #c0261a !important; }

/* --- Button contrast: the brand red (#d2402f) gave white button text only
   4.65:1. Darken the red used as a button FILL to #c0261a (~5.9:1) so labels
   read clearly. Scoped to buttons — the brand red elsewhere is untouched. --- */
.primary-button-link,
.button-overlay-v2,
.button-primary,
.primary-button {
  background-color: #c0261a !important;
}
.button-overlay-v2 { background-color: #c0261a !important; }

/* --- Service-areas search box (hub page). --- */
.area-search { max-width: 560px; margin: 0 auto 2rem; }
.area-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1.1rem;
  font-size: 16px;                 /* 16px min so iOS Safari doesn't zoom */
  font-family: inherit;
  color: #1a1a1a;
  border: 1px solid #cbd2d9;
  border-radius: 12px;
  outline: none;
  background: #fff;
}
.area-search__input::placeholder { color: #6b7280; }
.area-search__input:focus { border-color: #24588d; }   /* border-only: no spread ring (iOS) */
.area-search__empty { text-align: center; margin-top: 1rem; opacity: .85; }
.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;
}

/* --- ALTCHA widget: pin an explicit light theme so the "I'm not a robot" label
   stays legible on the dark hero/quote forms (it defaults to currentColor). --- */
altcha-widget {
  display: block;
  margin: 0 0 16px;
  max-width: 320px;
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1a1a;
  --altcha-color-border: #cbd2d9;
  --altcha-color-border-focus: #2a7de1;
  --altcha-color-active: #2a7de1;
  --altcha-color-error-text: #b42318;
  --altcha-color-footer-bg: #f4f6f8;
  --altcha-border-radius: 10px;
}
altcha-widget, .quote__form altcha-widget { color: #1a1a1a; }

/* --- Form success: real green box (replaces Webflow's washed-out mint). The
   form is hidden by contact.js on success, so this shows in its place. --- */
.quote__form-success.w-form-done,
.w-form-done {
  background: #e7f7ec;
  border: 1.5px solid #1a7f37;
  color: #0f5132;
  border-radius: 12px;
  padding: 24px 22px;
  text-align: center;
  font-weight: 600;
}

/* --- Client-side area pagination controls (replaces Webflow/Finsweet). Reuses
   the site's existing .pagination-button look via .w-pagination-* classes. --- */
.area-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.area-pagination button {
  min-width: 40px;
  padding: 8px 14px;
  border: 1px solid #cbd2d9;
  background: #fff;
  color: #1a1a1a;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.area-pagination button:hover:not(:disabled) { border-color: #1a1a1a; }
.area-pagination button[aria-current="true"] {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.area-pagination button:disabled { opacity: .45; cursor: default; }