@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
}

body {
  overflow-x: hidden;
  background-color: #ffffff;
  color: #1f2937;
}

/* Base styling for green accent */
.text-brand-green {
  color: #16A34A;
}
.bg-brand-green {
  background-color: #16A34A;
}
.border-brand-green {
  border-color: #16A34A;
}

/* FAQ Accordion using details/summary */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary ~ * {
  animation: sweep .3s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0; transform: translateY(-10px)}
  100%  {opacity: 1; transform: translateY(0)}
}

/* Range Slider Styling */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #16A34A;
  cursor: pointer;
  margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #e5e7eb;
  border-radius: 3px;
}
input[type=range]:focus {
  outline: none;
}

/* Skeleton Loading */
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}
@keyframes skeleton-loading {
  0% { background-color: #f3f4f6; }
  100% { background-color: #e5e7eb; }
}