/* HygieWash PHP - Custom styles */
:root {
  --primary: hsl(213 46% 26%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(107 43% 57%);
  --background: hsl(210 20% 98%);
  --foreground: hsl(213 46% 26%);
  --muted: hsl(210 20% 96%);
  --muted-foreground: hsl(213 20% 45%);
  --card: hsl(0 0% 100%);
  --border: hsl(213 20% 88%);
}

body { font-family: 'Open Sans', sans-serif; }
/* Match Next.js: headings use Poppins, bold, tracking-tight */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.section-padding { padding: 4rem 1rem; }
@media (min-width: 768px) { .section-padding { padding: 5rem 2rem; } }
@media (min-width: 1024px) { .section-padding { padding: 6rem 4rem; } }

.container-custom { max-width: 80rem; margin-left: auto; margin-right: auto; }

/* Navbar – match Next.js Navbar */
.nav-link {
  color: hsl(213 46% 26% / 0.8);
  font-weight: 500;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--primary); }

/* section-title – match Next.js (text-3xl md:text-4xl lg:text-5xl font-bold text-primary mb-4) + line-heights */
.section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--primary);
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .section-title { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .section-title { font-size: 3rem; line-height: 1; }
}
.section-subtitle { font-size: 1.125rem; color: var(--muted-foreground); max-width: 42rem; margin-left: auto; margin-right: auto; }
.card-hover { transition: all 0.3s; }
.card-hover:hover { box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1); transform: translateY(-4px); }
.testimonial-card {
  background-color: var(--card);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  border: 1px solid hsl(213 20% 88% / 0.5);
}
.font-heading { font-family: 'Poppins', sans-serif; }

.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.text-secondary { color: var(--secondary); }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.5s ease-out forwards; }

@keyframes pulse-gentle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.animate-pulse-gentle { animation: pulse-gentle 2s ease-in-out infinite; }

/* Hero – match Next.js HeroSection (multi-layer overlay + pattern) */
.hero-pattern {
  opacity: 0.05;
  background-image: radial-gradient(circle at 50% 50%, white 1px, transparent 1px);
  background-size: 24px 24px;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

details[open] summary .details-chevron {
  transform: rotate(180deg);
}

/* Pricing page accordion – chevron rotate when open (match Next.js) */
.pricing-accordion-item details[open] .pricing-accordion-chevron {
  transform: rotate(180deg);
}

/* FAQ: one open at a time + open/close animation */
.faq-item[open] {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.faq-item .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
}
.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
}
.faq-item .faq-answer > * {
  overflow: hidden;
}
.faq-item .faq-chevron {
  transform: rotate(0deg);
}
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

/* What Our Customers Say – star size match Next.js (Star w-5 h-5 = 20px) */
.testimonial-star {
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
}

/* How It Works – connection line across steps (match Next.js ProcessSection) */
.process-connector-line {
  position: absolute;
  height: 2px;
  top: calc(32px + 12px + 32px); /* badge + mb-3 + half icon */
  left: calc(50% + 32px);
  width: calc(100% + 1.5rem - 64px);
  background: linear-gradient(to right, hsl(107 43% 57% / 0.4), hsl(107 43% 57% / 0.6), hsl(107 43% 57% / 0.4));
}