/* Home Page Responsive CSS
   This CSS scales the entire home page to fit on mobile screens
   while preserving the original desktop layout.
   Users can then pinch-to-zoom to view sections in detail.
*/

/* Base scaling for mobile devices */
@media screen and (max-width: 768px) {
    html {
        /* Allow horizontal scrolling if needed but prioritize fit */
        overflow-x: auto;
    }
    
    body {
        /* Scale the entire page to fit viewport width */
        /* The page is ~728px wide, so we scale it down */
        transform-origin: top left;
        min-width: 768px;
        width: 768px;
    }
    
    /* Wrapper to contain the scaled content */
    html, body {
        margin: 0;
        padding: 0;
    }
}

/* Small phones (less than 480px viewport) */
@media screen and (max-width: 480px) {
    body {
        /* Scale factor: viewport / page width */
        /* For 375px viewport and 728px page: 375/728 ≈ 0.515 */
        transform: scale(0.5);
        transform-origin: top left;
        min-width: 768px;
        width: 768px;
    }
    
    /* Adjust the html container to prevent cutoff */
    html {
        width: 100vw;
        overflow-x: hidden;
    }
}

/* Medium phones (480px - 600px viewport) */
@media screen and (min-width: 481px) and (max-width: 600px) {
    body {
        transform: scale(0.65);
        transform-origin: top left;
        min-width: 768px;
        width: 768px;
    }
    
    html {
        width: 100vw;
        overflow-x: hidden;
    }
}

/* Large phones / small tablets (600px - 768px viewport) */
@media screen and (min-width: 601px) and (max-width: 768px) {
    body {
        transform: scale(0.85);
        transform-origin: top left;
        min-width: 768px;
        width: 768px;
    }
    
    html {
        width: 100vw;
        overflow-x: hidden;
    }
}

/* Ensure tables maintain their structure */
@media screen and (max-width: 768px) {
    table {
        table-layout: auto !important;
    }
    
    td, th {
        /* Allow text to wrap normally in table cells */
        white-space: normal;
    }
    
    /* Keep images at their defined sizes */
    img {
        max-width: none !important;
        height: auto;
    }
    
    /* Preserve div widths */
    div {
        max-width: none !important;
    }
    
    /* Ensure links remain clickable */
    a {
        display: inline-block;
    }
}

/* Alternative approach using viewport units for more precise scaling */
@supports (width: 1vw) {
    @media screen and (max-width: 768px) {
        body {
            /* Use CSS calc for dynamic scaling based on actual viewport */
            --scale-factor: calc(100vw / 768px);
            transform: scale(var(--scale-factor, 0.5));
            transform-origin: top left;
            min-width: 768px;
            width: 768px;
        }
    }
}

/* Prevent double-tap zoom issues on iOS */
@media screen and (max-width: 768px) {
    * {
        touch-action: manipulation;
    }
}

/* Make sure the background extends properly when scaled */
@media screen and (max-width: 768px) {
    html {
        background-color: #ffffff;
        min-height: 100vh;
    }
    
    body {
        background-color: #ffffff;
    }
}