/* Treasure Valley Chip Seal — post-migration overrides (loaded after the
   Webflow CSS). Brand: primary #234c83 (blue), secondary #e5852e (orange).
   Keep this file the home for anything not in the original Webflow stylesheet. */

/* ----------------------------------------------------- form success / error */
.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;
}

/* ------------------------------------------------------------ ALTCHA widget
   Self-contained theme: the widget's label defaults to currentColor, which is
   INVISIBLE (white-on-white) on the dark hero/quote forms. Pin a white box
   with dark text so it reads on any background. */
altcha-widget {
  display: block;
  margin: 0 0 16px;
  max-width: 280px;
  color: #1a1a1a;
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1a1a;
  --altcha-color-border: #cbd2d9;
  --altcha-color-border-focus: #e5852e;
  --altcha-color-active: #e5852e;
  --altcha-color-error-text: #b42318;
  --altcha-color-footer-bg: #f4f6f8;
  --altcha-border-radius: 10px;
}
.quote__form altcha-widget { color: #1a1a1a; }

/* ----------------------------------------------------------- card hover fx */
.service-boxes__title-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.service-boxes__title-link:hover { color: var(--color--secondary, #e5852e); }
.service-area__text { transition: color .2s ease; }
.service-area__item:hover .service-area__text { color: var(--color--secondary, #e5852e); }
.s-area-item .flex-link:hover .underline { color: var(--color--secondary, #e5852e); }
.s-area-name-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.s-area-name-link:hover { color: var(--color--secondary, #e5852e); }

/* ------------------------------------------------------- service-area search */
.area-search { max-width: 520px; margin: 0 auto 2rem; }
.area-search__input {
  width: 100%; box-sizing: border-box; padding: .85rem 1.1rem;
  font-size: 16px; border: 1px solid #d9d9d9; border-radius: 8px; outline: none;
  font-family: inherit;
}
.area-search__input:focus { border-color: #e5852e; } /* border (not box-shadow) — no iOS overflow */
.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;
}

/* --------------------------------------------------------------- navbar z */
.navbar.w-nav { z-index: 1000; }

/* ----------------------------------------------- mobile hamburger / close icon
   Driven deterministically off the reliable .w--open class (core Webflow nav
   toggles it) so the icon is correct even if IX2 is slow to init. */
.navbar__close-icon-wrap { display: none; }
.navbar__menu-button.w--open .navbar__hamburguer-icon { display: none; }
.navbar__menu-button.w--open .navbar__close-icon-wrap { display: block; }

/* ------------------------------------------------------------- FAQ accordion
   Deterministic open/close (no Webflow IX2). build.js strips the inline
   display:none / data-w-id from FAQ items so this controls them. */
.faqs__item .faq__answer-wrap {
  display: block !important; overflow: hidden;
  transition: opacity .3s ease;
}
.faqs__item:not(.is-open) .faq__answer-wrap {
  height: 0 !important; opacity: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
.faqs__item.is-open .faq__answer-wrap { height: auto !important; opacity: 1 !important; }
.faq__question-wrap { cursor: pointer; }
.faq__icon-vertical { transition: opacity .2s ease, transform .2s ease; }
.faqs__item.is-open .faq__icon-vertical { opacity: 0; }

/* --------------------------------------------------- Elfsight reviews page
   The embed's Load More ships with padding:0 and asks for Montserrat. */
.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: "DM Sans", "Open Sans", 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;
}
/* reviews PAGE widget container needs height while the embed boots;
   NOT applied to the home carousel (it's only ~245px tall) */
.reviews .reviews__wrap [class*="elfsight-app-"] { min-height: 480px; }
/* home reviews carousel: center the "read more Reviews" button */
.carousel-reviews__wrap > .button {
  display: block; width: max-content; max-width: 100%;
  margin-left: auto; margin-right: auto;
}

/* --------------------------------------------------- mobile layout fixes */
@media screen and (max-width: 991px) {
  /* Location map: position:absolute on desktop overlapped content on mobile.
     Stack info first, map below. */
  .location.full-location > .w-layout-blockcontainer.container,
  .location.full-location > .container,
  .location.full-location .map-wrap {
    display: flex; flex-direction: column;
  }
  .location.full-location .map-absolute {
    position: relative; width: 100%; margin-left: 0;
    left: 0; right: 0; top: 0; bottom: auto;
    height: 320px; margin-top: 24px; border-radius: 12px; overflow: hidden; order: 2;
  }
  .location.full-location .map-absolute iframe { width: 100%; height: 100%; border: 0; }
  .location.full-location .location__wrap.reverse { grid-template-columns: 1fr; order: 1; }
}

@media screen and (max-width: 767px) {
  /* Service cards .one-column variant: icon/image LEFT, content RIGHT */
  .service-boxes__inner.one-column {
    grid-template-columns: auto 1fr; grid-column-gap: 16px;
    align-items: start; padding: 20px;
  }
  .service-boxes__inner.one-column .service-boxes__content-wrap { min-width: 0; }
}

/* iOS: 16px min on inputs prevents auto-zoom + horizontal scroll */
.quote__form-input.w-input, .quote__form-input { font-size: 16px; }