/**
 * Smooth Scroll Cross-Browser Fixes
 * Ensures consistent smooth scrolling behavior across all browsers
 */

/* ===================================
   HTML Scroll Behavior
   =================================== */
html {
    /* Remove default smooth scroll behavior to use our custom implementation */
    scroll-behavior: auto !important;
}

/* ===================================
   Body Scroll Fixes
   =================================== */
body {
    /* Ensure smooth scrolling is not interfered with by CSS */
    scroll-behavior: auto !important;
    overflow-x: hidden; /* Prevent horizontal scroll issues */
}

/* ===================================
   Focus Management
   =================================== */
section:focus {
    outline: 2px solid #F28120;
    outline-offset: 2px;
}

/* ===================================
   Scroll Snap Prevention
   =================================== */
* {
    scroll-snap-type: none !important;
    scroll-snap-stop: normal !important;
}

/* ===================================
   Browser-Specific Fixes
   =================================== */

/* Chrome/Edge specific */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    html {
        scroll-behavior: auto !important;
    }
}

/* Firefox specific */
@-moz-document url-prefix() {
    html {
        scroll-behavior: auto !important;
    }
}

/* Safari specific */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
    html {
        scroll-behavior: auto !important;
    }
}

/* ===================================
   Smooth Scroll Animation Classes
   =================================== */
.smooth-scrolling {
    pointer-events: none; /* Prevent clicks during scroll */
}

.smooth-scrolling * {
    pointer-events: none;
}

/* ===================================
   Performance Optimizations
   =================================== */
.smooth-scroll-target {
    /* Ensure target elements are properly positioned for smooth scroll */
    position: relative;
}

/* ===================================
   Touch Device Optimizations
   =================================== */
@media (pointer: coarse) {
    /* Better touch scrolling on mobile devices */
    html, body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto !important;
    }
}

/* ===================================
   High DPI Display Optimizations
   =================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure smooth animation on high DPI displays */
    html {
        scroll-behavior: auto !important;
    }
}

/* ===================================
   Reduced Motion Support
   =================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    
    /* Respect user's preference for reduced motion */
    .smooth-scrolling {
        animation: none !important;
        transition: none !important;
    }
}