/* Optimized Sticky Elements CSS with Custom Properties */

/* CSS Custom Properties for dynamic positioning */
:root {
    --banner-height: 0px;
    --header-height: 70px;
    --header-total-offset: 70px;
}

/* Fallback sticky positioning when JS fails */
.sticky-element {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Banner sticky positioning */
.sticky-banner,
#roh-break-banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Header sticky positioning - only for students */
body.student_user .sticky-header,
body.student_user #header-wrapper {
    position: sticky !important;
    top: var(--banner-height) !important;
    z-index: 100 !important;
}

/* Mobile menu sticky positioning */
.sticky-menu,
body.student_user #menu-wrapper.mobile_view {
    position: sticky !important;
    top: var(--header-total-offset) !important;
    z-index: 90 !important;
}

/* Breadcrumbs sticky positioning - specific to course pages */
body.student_user.single-sfwd-quiz .sticky-breadcrumbs,
body.student_user.single-sfwd-quiz #content-wrapper > .breadcrumbs {
    position: sticky !important;
    z-index: 80 !important;
    /* On course pages for students: breadcrumbs always below header */
    top: var(--header-total-offset) !important;
}

/* General breadcrumbs fallback for other pages - stick to top for non-students */
.sticky-breadcrumbs,
#content-wrapper > .breadcrumbs {
    position: sticky !important;
    z-index: 80 !important;
    top: 0 !important;
}

/* For students only: when header is sticky, breadcrumbs should be below header */
body.student_user.header-sticky .sticky-breadcrumbs,
body.student_user.header-sticky #content-wrapper > .breadcrumbs {
    top: var(--header-total-offset) !important;
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
    .sticky-header,
    body.student_user #header-wrapper {
        /* Adjust header height for mobile if needed */
        --header-height: 60px;
    }
    
    .sticky-menu,
    body.student_user #menu-wrapper.mobile_view {
        /* Ensure mobile menu is properly positioned */
        top: var(--header-total-offset) !important;
    }
}

/* Performance optimizations */
.sticky-banner,
.sticky-header,
.sticky-menu,
.sticky-breadcrumbs {
    /* Enable hardware acceleration for smooth scrolling */
    /* will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden; */
}

/* Smooth transitions when elements become sticky */
.sticky-header,
.sticky-breadcrumbs {
    transition: box-shadow 0.2s ease-in-out;
}

/* Add subtle shadow when elements are sticky for better visual separation */
body.header-sticky .sticky-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.header-sticky .sticky-breadcrumbs {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Ensure proper stacking context */
.sticky-banner { z-index: 1000; }
.sticky-header { z-index: 100; }
.sticky-menu { z-index: 90; }
.sticky-breadcrumbs { z-index: 80; }

/* Legacy support for existing makeElementCSSSticky calls */
[style*="position: sticky"] {
    /* Ensure existing sticky elements work with new system */
    will-change: transform;
    transform: translateZ(0);
}