/* Adaptive Scaling CSS for A&P Test Prep Website */
/* This file handles automatic website scaling to fit any screen size */

/* Root scaling setup */
:root {
    --scale-factor: 1;
    --base-width: 980px;
    --base-height: 600px;
}

/* Ensure proper scaling foundation */
html {
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    transform-origin: top left !important;
    position: relative !important;
}

/* Main containers with scaling support */
#site-root,
#SITE_CONTAINER {
    transform-origin: top left !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent content from breaking out during scaling */
#site-root * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Mobile scaling (320px to 768px) */
@media screen and (max-width: 768px) {
    html {
        /* Fluid typography scaling */
        font-size: clamp(14px, 4vw, 18px) !important;
    }
    
    body {
        /* Ensure full viewport usage */
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Scale containers appropriately */
    #site-root,
    #SITE_CONTAINER {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
    }
    
    /* Responsive typography */
    h1 { font-size: clamp(20px, 6vw, 28px) !important; }
    h2 { font-size: clamp(18px, 5vw, 24px) !important; }
    h3 { font-size: clamp(16px, 4vw, 20px) !important; }
    h4 { font-size: clamp(14px, 3.5vw, 18px) !important; }
    p, div, span, li { font-size: clamp(14px, 3vw, 16px) !important; }
    
    /* Responsive spacing */
    * {
        padding: calc(var(--original-padding, 8px) * clamp(0.8, 2vw, 1.2)) !important;
        margin: calc(var(--original-margin, 4px) * clamp(0.8, 2vw, 1.2)) !important;
    }
}

/* Tablet scaling (768px to 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: clamp(15px, 2vw, 17px) !important;
    }
    
    #site-root,
    #SITE_CONTAINER {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Tablet typography */
    h1 { font-size: clamp(24px, 4vw, 32px) !important; }
    h2 { font-size: clamp(20px, 3.5vw, 28px) !important; }
    h3 { font-size: clamp(18px, 3vw, 24px) !important; }
}

/* Desktop scaling (1024px and up) */
@media screen and (min-width: 1025px) {
    html {
        font-size: clamp(16px, 1.2vw, 18px) !important;
    }
    
    /* Limit maximum width on very large screens */
    #site-root,
    #SITE_CONTAINER {
        max-width: min(100vw, 1400px) !important;
        margin: 0 auto !important;
    }
}

/* Landscape orientation adjustments */
@media screen and (orientation: landscape) and (max-height: 500px) {
    html {
        font-size: clamp(12px, 2vh, 16px) !important;
    }
    
    /* Reduce vertical spacing in landscape */
    * {
        margin-top: calc(var(--original-margin-top, 4px) * 0.7) !important;
        margin-bottom: calc(var(--original-margin-bottom, 4px) * 0.7) !important;
        padding-top: calc(var(--original-padding-top, 4px) * 0.7) !important;
        padding-bottom: calc(var(--original-padding-bottom, 4px) * 0.7) !important;
    }
}

/* High DPI screen adjustments */
@media screen and (min-resolution: 2dppx) {
    html {
        font-size: calc(var(--base-font-size, 16px) * 1.1) !important;
    }
}

/* Very small screens (less than 320px) */
@media screen and (max-width: 319px) {
    html {
        font-size: 12px !important;
    }
    
    body {
        transform: scale(0.9) !important;
        transform-origin: top left !important;
        width: 111% !important;
    }
    
    #site-root,
    #SITE_CONTAINER {
        width: 111% !important;
    }
}

/* Very large screens (more than 1920px) */
@media screen and (min-width: 1921px) {
    #site-root,
    #SITE_CONTAINER {
        max-width: 1600px !important;
        margin: 0 auto !important;
        transform: scale(1.1) !important;
        transform-origin: top center !important;
    }
}

/* Container query support for modern browsers */
@supports (container-type: inline-size) {
    .responsive-container {
        container-type: inline-size;
    }
    
    @container (max-width: 768px) {
        .responsive-text {
            font-size: clamp(14px, 4cqw, 16px) !important;
        }
    }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
    .responsive-container {
        width: 100% !important;
    }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print media scaling */
@media print {
    html {
        font-size: 12pt !important;
    }
    
    body {
        width: 100% !important;
        transform: none !important;
    }
    
    #site-root,
    #SITE_CONTAINER {
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
    }
}

/* Force all Wix elements to be scalable */
[data-mesh-id],
[data-comp-id],
[id^="comp-"],
.mesh-layout {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transform-origin: top left !important;
}

/* Images and media scaling */
img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Text scaling helpers */
.scale-text {
    font-size: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    line-height: clamp(1.2, 3vw, 1.6) !important;
}

/* Button scaling */
button, .button, input[type="button"], input[type="submit"] {
    font-size: clamp(14px, 3vw, 18px) !important;
    padding: clamp(8px, 2vw, 16px) clamp(12px, 3vw, 24px) !important;
    min-height: clamp(36px, 8vw, 48px) !important;
    min-width: clamp(36px, 8vw, 48px) !important;
}

/* Final override to ensure everything scales */
* {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}