/* Safari Address Bar Collapse Functionality */
/* This CSS ensures Safari's address bar collapses properly when scrolling */
/* Organized to prevent double scrollbars on desktop while enabling mobile functionality */

/* ======================================
   DESKTOP STYLES (DEFAULT)
   ====================================== */

/* Default styles for desktop - ensure no double scrollbars */
html, body {
    margin: 0;
    padding: 0;
}

/* Basic wrapper for all devices */
.safari-page-wrapper {
    position: relative;
}

/* ======================================
   MOBILE DEVICES ONLY 
   ====================================== */

@media screen and (max-width: 768px) {
    /* Reset and enable proper scrolling for mobile */
    html, body {
        height: 100%;
        /* Enable smooth scrolling for better UX */
        scroll-behavior: smooth;
    }

    body {
        /* CRITICAL: Allow document scroll to enable address bar collapse */
        overflow: auto;
        /* Prevent horizontal scrolling */
        overflow-x: hidden;
    }

    /* Use min-height: 100dvh to avoid the 100vh iOS Safari trap */
    /* dvh (dynamic viewport height) adjusts automatically when address bar shows/hides */
    .safari-page-wrapper {
        min-height: -webkit-fill-available; /* Webkit fallback */
        min-height: 100dvh;
        /* Add minimum padding to ensure scrolling triggers */
        padding-bottom: 1px;
    }

    /* Ensure main wrapper takes full height for proper scrolling behavior */
    .main-wrapper {
        min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        /* Add extra height to ensure scrolling is possible */
        min-height: calc(100dvh + 50px);
    }

    /* Prevent zoom on focus for iOS - helps maintain proper viewport */
    input, textarea, select {
        font-size: 16px;
    }

    /* Force document height to be larger than viewport to enable scrolling */
    body {
        min-height: calc(100dvh + 1px);
        min-height: calc(-webkit-fill-available + 1px);
    }
}

/* ======================================
   FALLBACKS FOR OLDER BROWSERS
   ====================================== */

/* Fallback for browsers that don't support dvh */
@supports not (height: 100dvh) {
    @media screen and (max-width: 768px) {
        .safari-page-wrapper {
            min-height: 100vh;
        }
        
        .main-wrapper {
            min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        }
    }
}

/* ======================================
   IOS SAFARI SPECIFIC OPTIMIZATIONS
   ====================================== */

/* For iOS Safari, ensure proper scrolling behavior */
@supports (-webkit-overflow-scrolling: touch) {
    @media screen and (max-width: 768px) {
        body {
            -webkit-overflow-scrolling: touch;
        }
        
        /* Ensure any scrollable containers also have momentum scrolling */
        .safari-page-wrapper,
        .main-wrapper {
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* Handle safe areas for devices with notches - mobile only */
@supports (padding: env(safe-area-inset-top)) {
    @media screen and (max-width: 768px) {
        .safari-page-wrapper {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* Additional iOS Safari-specific fixes */
@supports (-webkit-appearance: none) {
    @media screen and (max-width: 768px) {
        /* Target webkit browsers (Safari, Chrome on iOS) */
        html {
            /* Fix for iOS Safari viewport height issues */
            height: -webkit-fill-available;
        }
        
        body {
            /* Ensure body fills the available space */
            min-height: -webkit-fill-available;
        }
    }
}

/* ======================================
   ORIENTATION SPECIFIC MOBILE STYLES
   ====================================== */

/* Portrait mode - mobile only */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .safari-page-wrapper {
        min-height: calc(-webkit-fill-available + 1px);
        min-height: calc(100dvh + 1px);
    }
}

/* Landscape mode - mobile only */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .safari-page-wrapper {
        min-height: calc(-webkit-fill-available + 1px);
        min-height: calc(100dvh + 1px);
    }
}