/* smooth-scroll.css - Smooth scrolling for all components */

/* Enable smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Smooth scrolling for all scrollable containers */
* {
    scroll-behavior: smooth;
}

/* Smooth scrolling for specific scrollable elements */
.scroll-container,
.scrollable,
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto,
.overflow-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Smooth scrolling for anchor links */
a[href^="#"] {
    scroll-behavior: smooth;
}

/* Smooth scrolling for sections */
section {
    scroll-margin-top: 2rem; /* Offset for fixed headers */
}

/* Smooth scrolling for elements with IDs (anchor targets) */
[id] {
    scroll-margin-top: 2rem;
}

/* Custom scrollbar styling for better UX (optional) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-green-50, #F0FDF4);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-green-500, #22C55E);
    border-radius: 10px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-green-600, #16A34A);
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-green-500, #22C55E) var(--color-green-50, #F0FDF4);
}

/* Smooth scrolling for mobile devices */
@media (max-width: 767px) {
    html {
        scroll-padding-top: 1rem;
    }
    
    section,
    [id] {
        scroll-margin-top: 1rem;
    }
}

/* Smooth scrolling for accordion content */
.accordion-content {
    scroll-behavior: smooth;
}

/* Smooth scrolling for modal content */
.modal-content,
.tips-modal-content {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Smooth scrolling for disease list */
.disease-grid,
.results-cards {
    scroll-behavior: smooth;
}

/* Prevent smooth scroll on programmatic scrolls (optional - can be removed if you want all scrolls smooth) */
.scroll-instant {
    scroll-behavior: auto;
}