/* ===== Armored Asphalt — migration fixes (Webflow → Cloudflare Pages) ===== */

/* Keep the sticky navbar above hero background video / overlays on scroll */
.navbar { z-index: 1000; }

/* Mobile hamburger <-> close-X toggle, keyed on the reliable Webflow .w--open class
   (don't rely on IX2 JS, which can fail to init in time) */
.navbar__menu-button .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; }

/* Service-card title + service-area name hover (gold accent) */
.service-boxes__item .service-boxes__title { transition: color .2s ease; }
.service-boxes__item:hover .service-boxes__title { color: var(--gold, #c5760d); }
.service-area__text { transition: color .2s ease; }
.service-area__text:hover { color: var(--gold, #c5760d); }
.s-area-item h2 { transition: color .2s ease; }
.s-area-item:hover h2 { color: var(--gold, #c5760d); }
.faq__question-wrap { cursor: pointer; }

/* iOS: 16px minimum on inputs prevents Safari auto-zoom (and the resulting h-scroll) */
.quote__form-input, .quote__form-input.w-input, .area-search__input, textarea.quote__form-input { font-size: 16px; }

/* ALTCHA widget — fit the form width, sit above the submit button.
   Form sits on a dark background, so make the widget text/border light (readable). */
.altcha-mig {
  display: block; margin: 4px 0 18px; max-width: 100%;
  --altcha-max-width: 100%;
  --altcha-border-radius: 10px;
  --altcha-color-text: #ffffff;
  --altcha-color-base: rgba(255, 255, 255, 0.06);
  --altcha-color-border: rgba(255, 255, 255, 0.4);
  --altcha-color-border-focus: var(--gold, #c5760d);
}
/* belt-and-suspenders in case the widget renders in light DOM */
.altcha-mig, .altcha-mig * { color: #ffffff; }

/* before/after slider images: cover the box so they aren't distorted (fixes image-aspect-ratio) */
.beer-slider img, .image-wrapper img { object-fit: cover; }

/* Honeypot field — visually hidden, off-screen */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Service-areas hub: instant search box */
.area-search { max-width: 560px; 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: 10px; outline: none;
  transition: border-color .2s ease;
}
/* border-color focus only (no box-shadow spread → avoids iOS horizontal scroll) */
.area-search__input:focus { border-color: var(--gold, #c5760d); }
.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; }

/* Mobile: the location map is position:absolute on desktop (right half). On mobile that
   overlaps the content and disappears — stack info first, map below at a fixed height. */
@media screen and (max-width: 991px) {
  .location.full-location .map-wrap { display: flex; flex-direction: column; }
  .location.full-location .location__wrap.reverse { grid-template-columns: 1fr; }
  .location.full-location .map-absolute,
  .location.full-location .map-absolute.second {
    position: relative; inset: auto; width: 100%; height: 320px;
    margin: 24px 0 0; border-radius: 12px; overflow: hidden;
  }
  .location.full-location .map-absolute iframe { width: 100%; height: 100%; border: 0; min-height: 320px; }
}

/* Home reviews carousel "See more Reviews" button — center it */
.carousel-reviews__wrap > .button { display: block; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }