/* Global Scrollbar Fix - Prevents Double Scrollbars */

/* Ensure only one scrollbar appears globally */
html {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    scrollbar-gutter: stable;
}

body {
    overflow-x: hidden;
    overflow-y: visible;
    min-height: 100%;
    height: auto;
}

/* Prevent containers from creating their own scrollbars */
.grid-container,
.project-detail-main,
.projects-main,
.writings-main {
    overflow: visible !important;
    height: auto !important;
}

/* Ensure main content containers don't conflict with document scroll */
main,
.main-content {
    overflow: visible;
    height: auto;
}

/* Fix for project pages specifically */
.project-detail-main {
    max-height: none;
    overflow-y: visible;
}

/* Ensure no nested scrollable containers */
section,
article,
div {
    overflow-y: visible;
}

/* Exception for intentionally scrollable elements */
.modal-content,
.dropdown-content,
.contact-modal__content {
    overflow-y: auto;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    html {
        -webkit-overflow-scrolling: touch;
    }

    body {
        position: relative;
    }

    /* Prevent containers from creating scrollbars - exclude img/video/canvas */
    *:not(img):not(video):not(canvas) {
        overflow-x: visible !important;
    }

    /* Ensure media elements use default overflow */
    img, video, canvas {
        overflow: clip !important;
    }

    /* Only allow vertical overflow on document level */
    .grid-container,
    .project-detail-main {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
}