/* ============================================================================
 * Huskers Asphalt — migration CSS
 * Off-platform fixes + small additions layered on top of the Webflow styles.
 * Loaded on every page (after the Webflow stylesheets).
 * ==========================================================================*/

/* --- Mobile nav: deterministic hamburger <-> close swap ---------------------
   Webflow drives this via IX2 JS which can mis-fire off-platform. Key it on the
   reliable `.w--open` class that the core Webflow nav toggles. */
.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; }

/* Keep the nav above hero overlays/content when the mobile menu opens. */
.navbar { z-index: 1000; }
.top-header { z-index: 1001; position: relative; }

/* --- WCAG AA contrast ------------------------------------------------------
   Brand red #df090c is ~4.18:1 on the light cards (needs 4.5). Darken it a hair
   for the small red text on light backgrounds; keep eyebrows on the dark sections
   light so they stay readable; bump footer headings to "large text" (>=18.66px
   bold) so the brand red passes at 3:1 there. */
/* Eyebrows (red) on light section backgrounds → darken a hair to meet AA. */
.text-highlighted:not(.text-white) { color: #c10709; }
/* Eyebrows on the dark/image-overlay sections stay light so they remain readable
   (note: plain .area is LIGHT — only .area__with-image-bg is dark). */
.home-intro .text-highlighted:not(.text-white),
.area__with-image-bg .text-highlighted:not(.text-white),
.quote .text-highlighted:not(.text-white),
.about.black-bg .text-highlighted:not(.text-white),
.gq-hero .text-highlighted:not(.text-white) { color: #ffffff; }
/* "Learn More" links sit on BLACK service cards (home) → lighten the red to pass on black. */
.service-boxes__link { color: #ff3b3b; }
/* Footer headings: bump to "large text" (>=18.66px bold) so the brand red passes at 3:1. */
.footer_menu-title { font-size: 19px; }

/* --- Before/after sliders: consistent box, no stretch (image-aspect-ratio) -- */
.beer-slider { aspect-ratio: 3 / 2; overflow: hidden; }
.beer-slider > img,
.beer-reveal > img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

/* --- Service / area card hover affordance ---------------------------------- */
.service-boxes__title,
.service-boxes__link,
.service-area__text,
.s-area-item h4 a,
.footer_menu-link { transition: color .2s ease; }
.service-boxes__title:hover,
.service-boxes__link:hover,
.service-area__text:hover,
.s-area-item:hover h4 a { color: var(--color--secondary); }

/* --- ALTCHA widget: sit cleanly inside the quote form ---------------------- */
altcha-widget {
  display: block;
  width: 100%;
  margin: 4px 0 16px;
  --altcha-max-width: 100%;
  --altcha-border-radius: 10px;
}
altcha-widget:not(:defined) { min-height: 64px; display: block; }

/* --- Service-areas search box ---------------------------------------------- */
.area-search { max-width: 560px; margin: 0 auto 2rem; }
.area-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: .9rem 1.1rem;
  font-size: 16px; /* >=16px: prevents iOS Safari auto-zoom */
  line-height: 1.3;
  border: 1.5px solid #d9d9d9;
  border-radius: 10px;
  outline: none;
  transition: border-color .2s ease;
  font-family: inherit;
  color: var(--color--text, #0d3453);
}
/* border-color focus only (no box-shadow spread → no iOS horizontal scroll) */
.area-search__input:focus { border-color: var(--color--secondary, #df090c); }
.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;
}

/* --- Map embed: ensure the iframe always fills its wrapper ------------------ */
.map-embed, .map-embed iframe { width: 100%; height: 100%; min-height: 280px; border: 0; }

/* --- FAQ accordion (driven by .faq-open, set by site-enhancements.js) ------- */
.faq__question-wrap { cursor: pointer; }
/* !important overrides the inline height:0/opacity:0/display:none that Webflow's
   IX2 runtime re-injects on these elements even after the trigger is removed. */
.faq__answer-wrap {
  display: block !important;
  height: auto !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height .35s ease, opacity .3s ease, padding .35s ease;
}
.faqs__item.faq-open .faq__answer-wrap {
  max-height: 1000px;
  opacity: 1 !important;
  padding-top: 4px !important;
  padding-bottom: 20px !important;
}
.faq__icon-vertical { transition: opacity .2s ease, transform .2s ease; }
.faqs__item.faq-open .faq__icon-vertical { opacity: 0; transform: rotate(90deg); }

/* --- iOS: 16px minimum on form fields prevents Safari auto-zoom on focus ----
   (Webflow ships these at 14px.) Mobile-only so desktop stays pixel-identical. */
@media screen and (max-width: 767px) {
  .quote__form-input,
  .quote__form-input.w-input,
  .quote__form-input.textarea,
  .w-input,
  .w-select { font-size: 16px; }
}