/**
 * RESPONSIVE UNIFIED CSS - BEM ARCHITECTURE
 * 
 * Consolidates:
 * - responsive-consolidated.css (Mobile-first responsive system)
 * - browser-compatibility.css (Browser-specific fixes and compatibility)
 * 
 * @package RentAssistenz
 * @version 1.0.0 - CSS Consolidation
 * @priority 20 (loads early for responsive behavior)
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES - RESPONSIVE DESIGN SYSTEM
   ============================================================================= */

:root {
    /* Breakpoints */
    --breakpoint-xs: 360px;
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    
    /* Responsive spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Responsive typography */
    --font-size-xs: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
}

/* =============================================================================
   BROWSER COMPATIBILITY - WEBKIT/SAFARI FIXES
   ============================================================================= */

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
    /* REMOVED: Hero Safari fixes moved to hero-unified.css */
    
    /* Safari scroll smoothing */
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Safari input styling fixes */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
        border-radius: var(--contact-radius, 8px);
    }
    
    /* Safari button styling */
    button,
    input[type="submit"],
    input[type="button"] {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    /* Firefox input styling */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        -moz-appearance: none;
    }
    
    /* Firefox smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
}

/* Internet Explorer 11 fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* REMOVED: Gallery IE11 fixes moved to gallery-unified.css */
    
    /* REMOVED: IE11 Hero fixes moved to hero-unified.css */
}

/* Edge legacy fixes */
@supports (-ms-ime-align: auto) {
    /* REMOVED: Hero Edge fixes moved to hero-unified.css */
}

/* =============================================================================
   MOBILE RESPONSIVE DESIGN - MOBILE FIRST
   ============================================================================= */

/* === Extra Small Mobile (360px and below) === */
@media (max-width: 360px) {
    /* Container adjustments */
    .container,
    .container-fluid {
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
    }
    
    /* Typography scaling */
    h1 { font-size: var(--font-size-xl); }
    h2 { font-size: var(--font-size-lg); }
    h3 { font-size: var(--font-size-md); }
    h4, h5, h6 { font-size: var(--font-size-sm); }
    
    /* Button sizing for senior accessibility */
    .btn,
    button,
    input[type="submit"] {
        min-height: 64px;
        padding: 18px 24px;
        font-size: 16px;
        min-width: 200px;
    }
    
    /* REMOVED: Navigation adjustments moved to navigation-critical-fix.css */
    /* This prevents conflicts between responsive and navigation systems */
    
    /* REMOVED: Gallery responsive moved to gallery-unified.css */
    
    /* REMOVED: Services cards responsive moved to services-unified.css */
}

/* === Small Mobile (480px and below) === */
@media (max-width: 480px) {
    /* OWL Carousel: REMOVED - duplicated in style.css with !important (active there) */
    
    /* REMOVED: Services responsive moved to services-unified.css */
    
    /* REMOVED: Contact forms responsive moved to contact-unified.css */
    
    /* REMOVED: Hero responsive styles moved to hero-unified.css */
    
    /* REMOVED: Testimonials responsive moved to testimonials-unified.css */
    
    /* Footer adjustments */
    .footer-widgets {
        padding: var(--spacing-md) 0;
    }
    
    .footer-widget {
        margin-bottom: var(--spacing-md);
    }
}

/* === Medium Mobile/Tablet (768px and below) === */
@media (max-width: 768px) {
    /* Container responsive */
    .container {
        max-width: 100%;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    /* Grid layouts */
    .row {
        margin-left: calc(-1 * var(--spacing-sm));
        margin-right: calc(-1 * var(--spacing-sm));
    }
    
    .col,
    [class*="col-"] {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    /* REMOVED: Services grid responsive moved to services-unified.css */
    
    /* REMOVED: Gallery carousel responsive moved to gallery-unified.css */
    
    /* REMOVED: Hero responsive styles moved to hero-unified.css */
    
    /* REMOVED: Navigation responsive moved to navigation-critical-fix.css */
    /* This prevents conflicts between responsive system and navigation control */
    
    /* REMOVED: Contact sections responsive moved to contact-unified.css */
    
    /* REMOVED: Testimonials responsive moved to testimonials-unified.css */
}

/* === Large Tablet/Small Desktop (1024px and below) === */
@media (max-width: 1024px) {
    /* Container max-width */
    .container {
        max-width: 960px;
    }
    
    /* REMOVED: Services grid layout moved to services-unified.css */
    
    /* REMOVED: Gallery grid layout moved to gallery-unified.css */
    
    /* REMOVED: Hero adjustments moved to hero-unified.css */
    
    /* REMOVED: Testimonials layout moved to testimonials-unified.css */
}

/* === Desktop (1200px and above) === */
@media (min-width: 1200px) {
    /* Container max-width */
    .container {
        max-width: 1140px;
    }
    
    /* REMOVED: Services grid full layout moved to services-unified.css */
    
    /* REMOVED: Gallery full grid moved to gallery-unified.css */
    
    /* REMOVED: Hero full size styles moved to hero-unified.css */
    
    /* REMOVED: Testimonials full layout moved to testimonials-unified.css */
}

/* =============================================================================
   HIGH CONTRAST AND ACCESSIBILITY RESPONSIVE
   ============================================================================= */

/* High contrast mode responsive */
@media (prefers-contrast: high) {
    @media (max-width: 768px) {
        /* Ensure high contrast elements remain visible on mobile */
        .btn,
        button,
        input[type="submit"] {
            border: 3px solid #000000;
            background: #ffffff;
            color: #000000;
        }
        
        /* REMOVED: Hero high contrast styles moved to hero-unified.css */
    }
}

/* Reduced motion responsive */
@media (prefers-reduced-motion: reduce) {
    @media (max-width: 768px) {
        /* Remove animations on mobile for reduced motion users */
        .btn,
        button {
            transition: none;
        }
        
        .btn:hover,
        button:hover {
            transform: none;
        }
        
        /* REMOVED: Gallery reduced motion moved to gallery-unified.css */
    }
}

/* =============================================================================
   PRINT RESPONSIVE
   ============================================================================= */

@media print {
    /* Hide non-essential elements on all screen sizes */
    /* REMOVED: .navbar, .mobile-menu moved to print-dark-mode.css */
    /* This prevents conflicts between responsive system and navigation control */
    .owl-nav,
    .owl-dots,
    .gallery-lightbox {
        display: none;
    }
    
    /* Ensure content fits on print */
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    /* REMOVED: Hero print styles moved to hero-unified.css */
    
    /* REMOVED: Gallery print layout moved to gallery-unified.css */
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS FOR MOBILE
   ============================================================================= */

/* GPU acceleration for mobile smooth scrolling */
@media (max-width: 768px) {
    /* REMOVED: Gallery GPU acceleration and image optimization moved to gallery-unified.css */
    
    /* Mobile touch optimization */
    button,
    .btn,
    input[type="submit"],
    a {
        -webkit-tap-highlight-color: rgba(0, 124, 186, 0.3);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}