/**
 * Fallback CSS for browsers without modern CSS support
 * Includes IE11, older Safari, and browsers without CSS Grid/Flexbox
 */

/* IE11 and older browser fallbacks */
.no-js .loading-overlay {
    display: none;
}

.no-js .workshop-container {
    background: linear-gradient(45deg, #001122 0%, #003366 50%, #001122 100%);
}

/* Flexbox fallbacks for IE10/11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .workshop-container {
        display: block;
        height: 100vh;
        background: linear-gradient(45deg, #001122 0%, #003366 50%, #001122 100%);
    }
    
    .background-layer {
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/images/workshop-desktop.png', sizingMethod='scale')";
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/images/workshop-desktop.png', sizingMethod='scale');
    }
    
    .hotspots-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .hotspot {
        position: absolute;
        width: 40px;
        height: 40px;
        background: #00ffff;
        border-radius: 50%;
        cursor: pointer;
    }
}

/* CSS Grid fallbacks */
@supports not (display: grid) {
    .hotspots-container {
        position: relative;
    }
    
    .hotspot {
        float: left;
        margin: 10px;
    }
}

/* Object-fit fallbacks */
@supports not (object-fit: cover) {
    .background-layer {
        background-size: 100% 100%;
    }
}

/* CSS Custom Properties fallbacks */
.no-customproperties .workshop-container {
    background: #000;
}

.no-customproperties .hotspot {
    background: #00ffff;
}

.no-customproperties .loading-text {
    color: #00ffff;
}

/* Backdrop-filter fallbacks */
@supports not (backdrop-filter: blur(10px)) {
    .hotspot-tooltip {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .loading-overlay {
        background: rgba(0, 0, 0, 0.95);
    }
}

/* Transform fallbacks for IE9 */
.no-csstransforms .hotspot {
    margin-left: -20px;
    margin-top: -20px;
}

.no-csstransforms .loading-spinner {
    border: 3px solid #00ffff;
    border-radius: 50%;
}

/* Animation fallbacks */
.no-cssanimations .loading-spinner {
    border: 3px solid #00ffff;
}

.no-cssanimations .hotspot-pulse {
    display: none;
}

/* Touch device fallbacks */
.no-touch .hotspot:hover {
    transform: scale(1.1);
    background: #fff;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .workshop-container {
        background: #000;
    }
    
    .hotspot {
        background: #fff;
        border: 2px solid #000;
    }
    
    .loading-text {
        color: #fff;
    }
}

/* Reduced motion fallbacks */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner {
        animation: none;
        border: 3px solid #00ffff;
    }
    
    .hotspot-pulse {
        animation: none;
        opacity: 1;
    }
    
    .hotspot {
        transition: none;
    }
}

/* Print styles */
@media print {
    .loading-overlay,
    .hotspots-container {
        display: none;
    }
    
    .workshop-container {
        background: #fff;
        color: #000;
    }
    
    .background-layer {
        opacity: 0.3;
    }
}

/* Screen reader improvements */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Older browser image fallbacks */
.no-webp .background-layer {
    background-image: url('../images/workshop-mobile.png');
}

@media (min-width: 768px) {
    .no-webp .background-layer {
        background-image: url('../images/workshop-desktop.png');
    }
}

/* Modernizr class fallbacks */
.no-js .workshop-container::before {
    content: "This site works best with JavaScript enabled.";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #00ffff;
    padding: 20px;
    border: 1px solid #00ffff;
    text-align: center;
    z-index: 1000;
}

/* Low resolution display fallbacks */
@media (max-resolution: 120dpi) {
    .background-layer {
        image-rendering: auto;
    }
}

/* Older mobile browser support */
@media screen and (max-device-width: 480px) {
    .workshop-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .background-layer {
        -webkit-background-size: cover;
        background-size: cover;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .background-layer {
        image-rendering: -moz-crisp-edges;
    }
}

/* Safari specific fixes */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .background-layer {
            image-rendering: -webkit-optimize-contrast;
        }
    }
}

/* Edge legacy support */
@supports (-ms-ime-align: auto) {
    .workshop-container {
        display: block;
    }
    
    .background-layer {
        position: fixed;
    }
}

/* Graceful degradation for very old browsers */
.workshop-container {
    *zoom: 1; /* IE6/7 hasLayout trigger */
}

.workshop-container:before,
.workshop-container:after {
    content: "";
    display: table;
}

.workshop-container:after {
    clear: both;
}