/* Base styles with universal box-sizing */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: white;
    font-family: Arial, sans-serif;
}

.scroll-container {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure full width */
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.wp-block-cover.custom-snap-container.snap-section {
    position: relative;
    display: block;
    min-height: 100vh;
    width: 100%;
    color: white;
    background: transparent;
    margin: 0;
    padding: 0;
}

.custom-snap-media {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: -1;
}

.custom-snap-media.active {
    opacity: 1;
}

.wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
}

/* Desktop: 1400px and taller than 900px */
@media (min-width: 1400px) and (min-height: 900px) {
    html, body {
        overflow: hidden;
    }
    .scroll-container {
        height: 100vh;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }
    .wp-block-cover.custom-snap-container.snap-section {
        height: 100vh;
        scroll-snap-align: start;
    }
    body.admin-bar .scroll-container {
        height: calc(100vh - 32px);
    }
    body.admin-bar .wp-block-cover.custom-snap-container.snap-section {
        height: calc(100vh - 32px);
    }
    .wp-block-cover__inner-container {
        justify-content: center;
        padding-top: 165.2px;
        height: calc(100vh - 165.2px);
        min-height: calc(100vh - 165.2px);
    }
    body.admin-bar .wp-block-cover__inner-container {
        height: calc(100vh - 32px - 165.2px);
        min-height: calc(100vh - 32px - 165.2px);
    }
    .snap-footer {
        height: auto;
        scroll-snap-align: start;
        position: relative;
        z-index: 1;
        bottom: 60px;
    }
}

/* Tablet: 768px to 1399px OR height less than 900px */
@media (min-width: 768px) and (max-width: 1399px), (max-height: 899px) {
    html, body {
        overflow-y: auto;
        height: auto;
    }
    .scroll-container {
        height: auto;
        overflow-y: auto;
        width: 100%; /* Reinforce full width */
    }
    .wp-block-cover.custom-snap-container.snap-section {
        min-height: 100vh;
        height: auto;
        margin-bottom: 40px;
        width: 100%;
        max-width: 100%; /* Prevent theme interference */
        margin-left: 0; /* Reset any theme margins */
        margin-right: 0;
    }
    .wp-block-cover__inner-container {
        justify-content: center;
        width: calc(100% - 40px); /* Account for 20px padding on both sides */
        max-width: 100%;
        min-height: 100vh;
        height: auto;
        margin: 0 auto; /* Center within section */
    }
    .wp-block-cover__inner-container > * {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-left: 0; /* Override theme centering */
        margin-right: 0;
        width: 100%; /* Force children to fit container */
    }
}

/* Mobile: Below 768px */
@media (max-width: 767px) {
    html, body {
        overflow-y: auto;
        height: auto;
    }
    .scroll-container {
        height: auto;
        overflow-y: auto;
        width: 100%;
    }
    .wp-block-cover.custom-snap-container.snap-section {
        min-height: 0;
        height: auto;
        margin-bottom: 40px;
        width: 100%;
    }
    .wp-block-cover__inner-container {
        justify-content: flex-start;
        padding: 20px 0px 0px 0px;
        width: 100%;
        max-width: 100%;
        text-align: center;
        min-height: 0;
        height: auto;
    }
    .wp-block-cover__inner-container > * {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-left: auto;
        margin-right: auto;
    }
}