/* Fixed Navigation Bar Fixes */
/* Ensure proper viewport height handling */
html, body {
    height: 100%;
    overflow-x: hidden;
}

/* Prevent body scroll issues */
body {
    position: relative;
    overflow-x: hidden;
}

/* Fix for flex containers with fixed navigation */
.flex-container-with-nav {
    height: 100vh;
    overflow: hidden;
}

.flex-container-with-nav main {
    overflow-y: auto;
    height: calc(100vh - 80px); /* Adjust based on header height */
}

/* Fix for mobile viewport units */
@supports (-webkit-touch-callout: none) {
    .h-screen {
        height: -webkit-fill-available;
    }
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
}

/* Ensure fixed bottom navigation stays in place */
.fixed-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}

/* Add safe area padding for devices with home indicators */
.pb-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 1rem);
}

/* Ensure main content doesn't get hidden behind fixed nav */
.main-with-fixed-nav {
    padding-bottom: 5rem; /* Adjust based on your nav height */
}

/* Fix for iOS Safari address bar */
@supports (-webkit-touch-callout: none) {
    .main-with-fixed-nav {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }
}

/* Prevent body scroll when modal is open */
.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* Fix for sticky positioning issues */
.sticky-fix {
    position: -webkit-sticky;
    position: sticky;
}