/* Simon Paving — custom overrides layered on the Webflow export CSS.
   Off-platform fixes: ALTCHA theming, form success box, mobile map, navbar
   z-index, hamburger toggle, service-card hover, area search + pagination,
   Elfsight button, a11y helpers. Bump ?v= in build.js when this changes. */

/* ---------- ALTCHA widget: readable on light AND 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: #ff5c24;
  --altcha-color-active: #ff5c24;
  --altcha-color-error-text: #b42318;
  --altcha-color-footer-bg: #f4f6f8;
  --altcha-border-radius: 10px;
}
altcha-widget, .quote__form altcha-widget { color: #1a1a1a; }

/* ---------- Contact form success / error states ---------- */
.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;
}
.w-form-fail { border-radius: 12px; }

/* ---------- Navbar above hero videos / overlays on scroll ---------- */
.navbar.w-nav, .navbar { z-index: 1000; }

/* ---------- Mobile hamburger <-> close-X (deterministic, keyed on .nav-open set by js/nav.js) ---------- */
.navbar__close-icon-wrap { display: none; }
.navbar.nav-open .navbar__hamburguer-icon { display: none !important; }
.navbar.nav-open .navbar__close-icon-wrap { display: flex !important; }
/* Mobile menu panel readability when open */
@media screen and (max-width: 991px) {
  .navbar.nav-open .navbar__nav.w-nav-menu { display: block; }
}

/* ---------- Service-card + area-name hover ---------- */
.service-boxes__title-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.service-boxes__title-link:hover { color: var(--color--secondary, #ff5c24); }
.service-area__text { transition: color .2s ease; }
.service-area__text:hover { color: var(--color--secondary, #ff5c24); }
.s-area-item h4 { transition: color .2s ease; }
.s-area-item:hover h4 { color: var(--color--secondary, #ff5c24); }
.flex-link { transition: opacity .2s ease; }
.flex-link:hover { opacity: .75; }

/* ---------- Area search box (service-areas hub) ---------- */
.area-search { max-width: 560px; margin: 0 auto 2.5rem; }
.area-search__input {
  width: 100%; box-sizing: border-box; padding: 0.9rem 1.1rem;
  font-size: 16px; border: 1px solid #d9d9d9; border-radius: 10px; outline: none;
  font-family: inherit;
}
.area-search__input:focus { border-color: #ff5c24; }
.area-search__empty { text-align: center; margin-top: 1rem; opacity: .85; }

/* ---------- Client-side pagination controls ---------- */
.paginate-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 40px auto 0; flex-wrap: wrap;
}
.paginate-controls .paginate-btn {
  appearance: none; cursor: pointer; border: 0; border-radius: 10px;
  padding: 12px 24px; font-weight: 700; font-size: 15px; font-family: inherit;
  background: var(--color--secondary, #e00000); color: #fff; transition: opacity .2s ease;
}
.paginate-controls .paginate-btn:hover { opacity: .88; }
.paginate-controls .paginate-btn[disabled] { opacity: .4; cursor: default; }
/* status text: solid, high-contrast — dark on light sections, white on dark sections */
.paginate-controls .paginate-status { font-weight: 600; min-width: 110px; text-align: center; color: #0d3453; }
.paginate-controls.on-dark .paginate-status { color: #ffffff; }

/* ---------- Gallery filter active tab ---------- */
.gallery__filter-item.is-active .gallery__filter-radio-label,
.gallery__filter-radio-label.is-active { color: var(--color--secondary, #ff5c24); font-weight: 700; }
.gallery__item { transition: opacity .2s ease; }

/* ---------- Elfsight reviews: sizing + Load-More button ---------- */
.reviews__wrap { min-height: 480px; }
.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","Varela Round",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;
}
.carousel-reviews__wrap > .button {
  display: block; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;
}

/* ---------- WCAG AA contrast fixes ----------
   The brand red is the CSS variable --color--secondary (#fa0100). White-on-red
   and red-on-white both land just under 4.5:1. We fix it AT THE SOURCE by nudging
   the variable to #e00000 (visually near-identical). Because every resting AND
   :hover state references the variable (e.g. `.button:hover { color: var(--color--secondary) }`),
   the hover colour-swap stays consistent instead of breaking. */
:root { --color--secondary: #e00000; }

/* the one hardcoded red text usage (doesn't read the variable) */
.why__list-item__title-2 { color: var(--color--secondary); }

/* On DARK backgrounds a darker red would LOWER contrast — those accents go
   brighter (#ff7a5c) instead. NOTE .area is only dark when it also has
   .area__with-image-bg (home); the plain .area sections are light, so the
   default #e00000 applies there. */
.area__with-image-bg .text-highlighted,
.cta .text-highlighted,
.home-hero .text-highlighted,
.carousel-reviews .text-highlighted,
.footer_menu-title { color: #ff7a5c; }

/* .dark-hover buttons swap to a DARK bg on hover — their label must go white
   there (the shared `.button:hover` would otherwise tint it red on dark). */
.button.dark-hover:hover { color: #ffffff; }

/* ---------- Button hover readability ----------
   The stock hover inverts solid buttons to a WHITE bg with red text (only 5.04:1,
   thin red-on-white reads washed-out, and the 0.5s crossfade flashes a near
   white-on-white moment). Replace it with a clean DARKEN — dark-red bg + white
   label (~7:1) — which is unambiguously readable. Outlined variants keep their
   own fill-on-hover but get a stronger dark-red label. */
.button:hover { background-color: #a80000; border-color: #a80000; color: #ffffff; }
.button.outlined.white:hover,
.button.outlined.white.btn-cta:hover { background-color: #ffffff; color: #a80000; border-color: #a80000; }
.button.dark-hover:hover { background-color: var(--color--dark); color: #ffffff; }

/* ---------- Mini service-area names: readable per section ----------
   The list is white-text ("white-areas") because it was collected from the home's
   DARK image section. Everywhere else the .area section is light, so default the
   names to dark ink and only keep them white on the dark image section. */
.service-area__text.white-areas { color: var(--color--text); }
.area__with-image-bg .service-area__text.white-areas { color: var(--white); }
.area__with-image-bg .service-area__text.white-areas:hover,
.service-area__text.white-areas:hover { color: var(--color--secondary); }

/* touch targets: project category tags were < 24px (mobile a11y) */
.project-cat {
  min-height: 24px; display: inline-flex; align-items: center;
  padding-top: 4px; padding-bottom: 4px;
}

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

/* ---------- Mobile: location map stacks under info (map-absolute fix) ---------- */
@media screen and (max-width: 991px) {
  .location.full-location > .w-layout-blockcontainer.container,
  .location.full-location > .container { display: flex; flex-direction: column; }
  .location .map-absolute, .location.full-location .map-absolute {
    position: relative; width: 100%; margin-left: 0; height: 320px; margin-top: 24px;
    border-radius: 12px; overflow: hidden; order: 2;
  }
  .location .map-absolute iframe { width: 100%; height: 100%; border: 0; }
  .location .location__wrap.reverse { grid-template-columns: 1fr; order: 1; }
}

/* iOS: 16px inputs prevent auto-zoom */
@media screen and (max-width: 767px) {
  .quote__form input, .quote__form select, .quote__form textarea, .area-search__input { font-size: 16px; }
}