/* Big Luke's Paving & Sealcoating — off-Webflow fixes & additions.
   Loaded after the exported stylesheets. Bump ?v= in build.js when changed. */

/* Sticky navbar must sit above hero overlays and section content. */
.navbar { z-index: 1000; }

/* --- Mobile nav: deterministic hamburger <-> close-X toggle.
   Webflow IX2 stamps inline styles (display/opacity) on both icons at load and
   animates the swap on click; that animation is timing-dependent. Key the swap
   on the reliable .w--open class instead — !important because it must beat the
   IX2 inline styles. */
.navbar__close-icon-wrap { display: none; }
.navbar__menu-button.w--open .navbar__hamburguer-icon { display: none !important; }
.navbar__menu-button.w--open .navbar__close-icon-wrap { display: flex !important; opacity: 1 !important; }

/* --- iOS: inputs under 16px trigger auto-zoom (and horizontal scroll). */
.quote__form-input,
.quote__form-input.textarea,
.area-search__input {
  font-size: 16px;
}

/* --- ALTCHA widget: self-contained theme so the label never inherits the
   hero form's white text (white-on-white = invisible). */
altcha-widget {
  display: block;
  margin: 0 0 4px;
  max-width: 260px;
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1a1a;
  --altcha-color-border: #cbd2d9;
  --altcha-color-border-focus: #d92226;
  --altcha-color-active: #d92226;
  --altcha-color-error-text: #b42318;
  --altcha-color-footer-bg: #f4f6f8;
  --altcha-border-radius: 10px;
}
altcha-widget, .quote__form altcha-widget { color: #1a1a1a; }

/* --- Form success: a real green confirmation box (replaces the form). */
.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;
}

/* --- Pagination controls (areas lists + gallery). */
.areas-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}
.areas-page-btn {
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #1c3144;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.areas-page-btn:hover:not(:disabled) { border-color: #d92226; color: #d92226; }
.areas-page-btn.is-active { background: #d92226; border-color: #d92226; color: #fff; }
.areas-page-btn:disabled { opacity: .45; cursor: default; }
.areas-page-dots { color: #999; padding: 0 2px; }

/* --- Service-areas hub search box. */
.area-search { max-width: 520px; margin: 0 auto 2rem; }
.area-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1.1rem;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  outline: none;
}
.area-search__input:focus { border-color: #d92226; }
.area-search__empty { text-align: center; margin-top: 1rem; opacity: .8; }
.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;
}

/* --- Eyebrow (.text-highlighted) contrast (WCAG AA).
   The brand red #d92226 passes on the light sections (4.99:1 on white) but
   fails on the dark sections (3.49:1 on #1a1a1a). Lighten it to a
   brand-adjacent red that clears AA (#ff5a5c = 5.69:1 on #1a1a1a) ONLY on the
   dark sections; the light-section eyebrows keep the exact brand red.
   (Dark/light of each section was verified by measuring rendered backgrounds.) */
.home-hero .text-highlighted,
.gallery .text-highlighted,
.carousel-reviews .text-highlighted,
.area .text-highlighted,
.quote .text-highlighted,
.gq-hero .text-highlighted,
.gq-process .text-highlighted,
.page-title .text-highlighted {
  color: #ff5a5c;
}

/* --- Hover affordance on service cards & area links. */
.service-boxes__title { color: inherit; text-decoration: none; transition: color .2s ease; }
.service-boxes__title:hover { color: var(--color--secondary); }
.service-area__text { transition: color .2s ease; }
.service-area__text:hover { color: var(--color--secondary); }
.s-area-item h4 { transition: color .2s ease; }
.s-area-item:hover h4 { color: var(--color--secondary); }
/* Service-area hub: the town name itself is a link to its page. */
.s-area-name-link { color: inherit; text-decoration: none; }
.s-area-name-link:hover { color: var(--color--secondary); }

/* --- Elfsight reviews: the client has NO reviews yet, so the widget renders
   empty. Reserve no height and collapse the section's padding so the page
   doesn't show a big white gap between the heading and the next section.
   WHEN REVIEWS START COMING IN: restore breathing room by setting
   min-height back to ~480px and removing the .reviews padding override below. */
.reviews__wrap [class*="elfsight-app-"] { min-height: 0; }
.reviews { padding-top: 8px !important; padding-bottom: 32px !important; }
.reviews__wrap .es-load-more-button-container {
  margin-top: 40px !important;
  display: flex !important;
  justify-content: center !important;
}
.reviews__wrap .es-load-more-button.es-button-base-container {
  font-family: "Roboto Condensed", "Oswald", sans-serif !important;
  padding: 14px 30px !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}