/* ==========================================================================
   APS Waterproofing — Residual Custom CSS
   Everything else is handled by Tailwind utilities (see components.js config).
   This file only holds rules that are awkward to express inline:
     - scroll-triggered fade-in toggled by IntersectionObserver
     - mobile menu / services dropdown open-state
     - testimonial slide active-state
     - FAQ accordion collapse
     - back-to-top visibility
   ========================================================================== */

/* Scroll fade-in (toggled via .visible class from JS) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Testimonial carousel — active slide only */
.testimonial-slide { display: none; }
.testimonial-slide.active { display: block; }

/* FAQ accordion collapse */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-item.open .faq-question svg { transform: rotate(180deg); }

/* Services dropdown visibility */
.nav-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
}

/* Mobile menu slide-in */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.35s ease;
}
.mobile-menu.open { transform: translateX(0); }

/* Back-to-top visibility */
.back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Force justify alignment used by .body-text (Tailwind's text-justify works but
   this keeps the hyphenation behavior consistent across browsers) */
.body-justify {
  text-align: justify;
  hyphens: auto;
}