/* Arrow Asphalt — post-migration overrides (loaded after arrow-asphalt.css).
   Off-Webflow fixes: form success box, deterministic FAQ accordion, hover states,
   area search box, and mobile layout corrections. Bump ?v= in site.config.json
   when this file changes (assets are served immutable). */

:root { --aa-accent: #e97d02; }

/* --- accessibility helper --- */
.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;
}

/* --- contact form success / error boxes --- */
.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;
}
.quote__form-error.w-form-fail, .w-form-fail {
  background: #fdecea; border: 1.5px solid #b42318; color: #8a1c12;
  border-radius: 12px; padding: 18px 20px; text-align: center; font-weight: 600;
}
/* ALTCHA widget: force an explicit, self-contained readable theme. Its text
   color defaults to `currentColor`, so on the white-text hero quote forms the
   label rendered white-on-white (unreadable). These custom properties inherit
   through the widget's shadow DOM and keep it a legible white box everywhere. */
altcha-widget {
  display: block; margin: 0 0 16px; max-width: 260px;
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1a1a;
  --altcha-color-border: #cbd2d9;
  --altcha-color-border-focus: #e97d02;
  --altcha-color-active: #e97d02;
  --altcha-color-error-text: #b42318;
  --altcha-color-footer-bg: #f4f6f8;
  --altcha-border-radius: 10px;
}
/* Belt-and-suspenders: never let an inherited light text color leak in. */
altcha-widget, .quote__form altcha-widget { color: #1a1a1a; }

/* --- FAQ accordion (deterministic; replaces Webflow IX2) --- */
.faq__answer-wrap {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .3s ease;
}
.faqs__item.is-open .faq__answer-wrap { max-height: 1200px; opacity: 1; }
.faq__question-wrap { cursor: pointer; }
.faq__icon-vertical { transition: opacity .25s ease, transform .25s ease; }
.faqs__item.is-open .faq__icon-vertical { opacity: 0; transform: rotate(90deg); }

/* --- hover states (Webflow-only interactions off-platform) --- */
.service-boxes__title, .service-boxes__link, .service-area__text,
.sa-title a, .s-area-name-link, .flex-link {
  transition: color .2s ease;
}
a.service-top:hover .service-boxes__title,
.service-boxes__link:hover,
.service-area__text:hover,
.sa-title a:hover, .s-area-name-link:hover { color: var(--aa-accent); }
.s-area-name-link { color: inherit; text-decoration: none; }

/* CTA button contrast: white text sat on the brand orange at ~3.4:1 (fails WCAG
   AA). Give the "magic button" a solid, slightly deeper orange (~4.9:1) so the
   label is legible. Delete this block to restore the lighter brand orange. */
.magic-button_button { background-color: #a85800; }

/* --- 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;
  font-size: 1rem; border: 1px solid #d9d9d9; border-radius: 8px; outline: none;
  transition: border-color .2s ease;
}
.area-search__input:focus { border-color: var(--aa-accent); }
.area-search__empty { text-align: center; margin-top: 1rem; opacity: .85; }

/* --- Elfsight reviews widget polish --- */
/* Reserve height on the reviews PAGE (not the home carousel) so the layout
   doesn't collapse/jump while the widget loads. */
.reviews__wrap [class*="elfsight-app-"] { min-height: 480px; }
.reviews__wrap .es-load-more-button-container,
.carousel-reviews__wrap > .button {
  margin-top: 32px; display: flex; justify-content: center;
}
.carousel-reviews__wrap > .button { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }

/* --- keep the navbar above hero videos / overlays on scroll --- */
.navbar { z-index: 1000; }

/* Mobile menu icon swap — deterministic on the reliable .w--open class instead of
   relying on Webflow IX2 (which can leave the hamburger showing while the menu is
   open). Closed = hamburger; open = X. */
.navbar__close-icon-wrap { display: none; }
.w-nav-button.w--open .navbar__hamburguer-icon { display: none !important; }
.w-nav-button.w--open .navbar__close-icon-wrap { display: flex !important; }

/* ----------------------------------------------------------------------------
   MOBILE FIXES
---------------------------------------------------------------------------- */
/* Location map: .map-absolute is absolutely positioned on desktop; stack it
   below the address block on mobile so it doesn't overlap or disappear. */
@media screen and (max-width: 991px) {
  .location.full-location .map-wrap { display: flex; flex-direction: column; }
  .location.full-location .map-absolute {
    position: relative; inset: auto; width: 100%; height: 300px;
    margin: 0 0 24px; border-radius: 12px; overflow: hidden; order: -1;
  }
  .location.full-location .map-absolute iframe { width: 100%; height: 100%; border: 0; }
}

/* iOS: 16px min on inputs prevents Safari auto-zoom + horizontal scroll. */
@media screen and (max-width: 767px) {
  .quote__form-input.w-input, .quote__form-input, .area-search__input {
    font-size: 16px;
  }
}