/* Custom overrides loaded after Tailwind build (styles.css) */

/* Reverted FAQ background overrides to default SoftAesthetic grid */

/* Custom overrides - loaded after Tailwind build (styles.css) */

/* ==========================
   Continuous Marquee Rows
   (Testimonials, Case Studies, Logos)
   ========================== */

/* Edge fade masks for nicer overflow clipping */
.testimonial-fade-container,
.logo-fade-container {
  position: relative;
}

.testimonial-fade-container::before,
.testimonial-fade-container::after,
.logo-fade-container::before,
.logo-fade-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 64px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.testimonial-fade-container::before,
.logo-fade-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0));
}

.testimonial-fade-container::after,
.logo-fade-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0));
}

/* Testimonial marquee (Right to Left) */
.testimonial-marquee-container {
  position: relative;
}

.testimonial-marquee-track-rtl {
  display: flex;
  gap: 1.5rem;
  width: -moz-fit-content;
  width: fit-content;
  will-change: transform;
  animation: marquee-rtl 50s linear infinite;
}

.testimonial-marquee-content {
  display: flex;
  gap: 1.75rem;
}

/* Case studies marquee (Left to Right) */
.case-study-marquee-container {
  position: relative;
}

.case-study-marquee-track-ltr {
  display: flex;
  gap: 1.25rem;
  width: -moz-fit-content;
  width: fit-content;
  will-change: transform;
  animation: marquee-ltr 60s linear infinite;
}

.case-study-marquee-content {
  display: flex;
  gap: 1.75rem;
}

/* Trusted logos marquee (Right to Left) */
.marquee-container {
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 2rem;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  will-change: transform;
  animation: marquee-rtl 40s linear infinite;
}

.marquee-logos {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.logo-item {
  flex: 0 0 auto;
}

/* Pause on hover for accessibility/usability */
.testimonial-marquee-track-rtl:hover,
.case-study-marquee-track-ltr:hover,
.marquee-track:hover {
  animation-play-state: paused;
}

/* Keyframes: move by half to loop seamlessly with duplicated content */
@keyframes marquee-rtl {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-ltr {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* Reduced motion: disable animations and allow manual scroll */
@media (prefers-reduced-motion: reduce) {
  .testimonial-marquee-track-rtl,
  .case-study-marquee-track-ltr,
  .marquee-track {
    animation: none !important;
  }

  .testimonial-marquee-container,
  .case-study-marquee-container,
  .marquee-container {
    overflow-x: auto;
  }
}

/* Testimonial card layout refinements */
.testimonial-card-marquee {
  flex: 0 0 360px;
  width: 360px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(229, 231, 235, 0.8);
}

.testimonial-card-marquee p {
  font-size: 0.95rem;
  line-height: 1.7;
}

.testimonial-card-marquee > .flex.items-center {
  margin-top: auto;
}

@media (max-width: 1024px) {
  .testimonial-card-marquee {
    flex-basis: 320px;
    width: 320px;
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  .testimonial-card-marquee {
    flex-basis: 280px;
    width: 280px;
    min-height: 360px;
  }
}

/* Case study card layout refinements */
.case-study-card-marquee {
  flex: 0 0 360px;
  width: 360px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(229, 231, 235, 0.8);
}

.case-study-card-marquee p {
  font-size: 0.95rem;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .case-study-card-marquee {
    flex-basis: 320px;
    width: 320px;
    min-height: 340px;
  }
}

@media (max-width: 640px) {
  .case-study-card-marquee {
    flex-basis: 280px;
    width: 280px;
    min-height: 320px;
  }
}

/* ==========================
   Sliding Header Animation (Desktop Only)
   ========================== */

/* Desktop: Enable sliding header animation */
@media (min-width: 1024px) {
  /* Header starts visible at top - override Tailwind transitions */
  #header {
    transform: translateY(0) !important;
    transition: transform 0.3s ease-in-out !important;
  }

  /* Slide up - hide header when scrolling down */
  #header.header-slide-up {
    transform: translateY(-100%) !important;
  }

  /* Slide down - show header when scrolling up */
  #header.header-slide-down {
    transform: translateY(0) !important;
  }
}

/* Mobile: Keep normal header (no sliding animation) */
@media (max-width: 1023px) {
  #header,
  #header.header-slide-up,
  #header.header-slide-down {
    transform: none !important;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #header {
    transform: none !important;
    transition: none !important;
  }
}