/* Summer Theme - Responsive Enhancements */

/* Mobile Optimizations for Summer Effects */
@media (max-width: 768px) {
    /* Reduce particle count on mobile */
    .summer-particles .particle:nth-child(n+6) {
        display: none;
    }
    
    /* Smaller summer sun on mobile */
    .summer-sun {
        width: 80px !important;
        height: 80px !important;
        top: 15px !important;
        right: 15px !important;
    }
    
    /* Simplified wave animations on mobile */
    .summer-waves .wave {
        animation-duration: 8s !important;
    }
    
    /* Reduce summer theme background complexity on mobile */
    body.summer-theme {
        background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
        background-attachment: scroll; /* Fixed backgrounds can cause issues on mobile */
    }
    
    /* Summer hero adjustments for mobile */
    .summer-hero {
        background-attachment: scroll !important;
    }
    
    /* Summer button sizing for mobile */
    .summer-button-primary,
    .summer-button-secondary {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Summer card spacing on mobile */
    .summer-card {
        margin-bottom: 1rem;
        min-height: 150px !important;
    }
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Medium particle count for tablets */
    .summer-particles .particle:nth-child(n+8) {
        display: none;
    }
    
    /* Medium summer sun for tablets */
    .summer-sun {
        width: 100px !important;
        height: 100px !important;
    }
    
    /* Summer card grid adjustments for tablets */
    .summer-section .grid {
        gap: 1.5rem;
    }
}

/* Large Screen Optimizations */
@media (min-width: 1200px) {
    /* Full particle effects on large screens */
    .summer-particles .particle {
        display: block;
    }
    
    /* Larger summer sun on big screens */
    .summer-sun {
        width: 140px !important;
        height: 140px !important;
    }
    
    /* Enhanced wave effects on large screens */
    .summer-waves::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(45deg, transparent 30%, var(--summer-blue) 50%, transparent 70%);
        opacity: 0.3;
        animation: wave-shimmer 6s ease-in-out infinite;
    }
}

/* High DPI Screen Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper summer particle graphics */
    .summer-particles .particle {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Enhanced summer sun quality */
    .summer-sun::before,
    .summer-sun::after {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Dark Mode Compatibility */
@media (prefers-color-scheme: dark) {
    body.summer-theme {
        /* Darker summer theme variant */
        background: linear-gradient(135deg, #2c3e50 0%, #3498db 25%, #9b59b6 75%, #e74c3c 100%);
    }
    
    .summer-hero {
        background-blend-mode: overlay;
    }
    
    .summer-button-primary {
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    }
    
    .summer-card {
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
    }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    /* Disable all summer animations */
    .summer-particles .particle,
    .summer-sun::before,
    .summer-sun::after,
    .summer-waves .wave,
    .summer-waves .wave-foam,
    .summer-waves .wave-bubble {
        animation: none !important;
        transform: none !important;
    }
    
    /* Static summer effects */
    .summer-particles .particle {
        opacity: 0.3;
        position: static;
    }
    
    .summer-sun {
        animation: none !important;
    }
    
    /* Remove hover effects that could cause motion */
    .summer-card:hover {
        transform: none !important;
    }
    
    .summer-button-primary:hover,
    .summer-button-secondary:hover {
        transform: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    body.summer-theme {
        background: linear-gradient(135deg, #000080 0%, #800080 50%, #ff4500 100%);
    }
    
    .summer-button-primary {
        background: #ff4500 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff;
    }
    
    .summer-button-secondary {
        background: #000080 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff;
    }
    
    .summer-card {
        border: 2px solid #ffffff;
        background: rgba(0, 0, 0, 0.8) !important;
    }
}

/* Print Styles */
@media print {
    /* Hide all summer effects in print */
    .summer-particles,
    .summer-sun,
    .summer-waves {
        display: none !important;
    }
    
    body.summer-theme {
        background: white !important;
        color: black !important;
    }
    
    .summer-card {
        background: white !important;
        border: 1px solid #ccc !important;
        color: black !important;
    }
    
    .summer-button-primary,
    .summer-button-secondary {
        background: white !important;
        color: black !important;
        border: 1px solid #ccc !important;
    }
}

/* Orientation Change Optimizations */
@media (orientation: landscape) and (max-height: 500px) {
    /* Landscape mobile optimization */
    .summer-hero {
        min-height: 100vh;
    }
    
    .summer-particles .particle {
        transform: scale(0.8);
    }
    
    .summer-sun {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Performance Optimizations */
@media (max-width: 480px) {
    /* Ultra mobile optimization - minimal effects */
    .summer-particles .particle:nth-child(n+4) {
        display: none;
    }
    
    .summer-waves .wave-bubble {
        display: none;
    }
    
    /* Simplified animations for better performance */
    .summer-particles .particle {
        animation-duration: 12s !important;
    }
    
    .summer-sun::before {
        animation-duration: 8s !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Touch-friendly summer interactions */
    .summer-card {
        min-height: 44px; /* Minimum touch target size */
        touch-action: manipulation;
    }
    
    .summer-button-primary,
    .summer-button-secondary {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* Remove hover effects on touch devices */
    .summer-card:hover {
        transform: none;
    }
}

/* Container Query Support (Future-proofing) */
@container (max-width: 400px) {
    .summer-card {
        padding: 1rem !important;
        font-size: 0.9rem;
    }
}

/* Focus Indicators for Summer Elements */
.summer-button-primary:focus,
.summer-button-secondary:focus {
    outline: 3px solid var(--summer-accent);
    outline-offset: 2px;
}

.summer-card:focus {
    outline: 2px solid var(--summer-accent);
    outline-offset: 4px;
}

/* Animation Performance Optimization */
@supports (will-change: transform) {
    .summer-particles .particle,
    .summer-sun,
    .summer-waves .wave {
        will-change: transform;
    }
}

/* GPU Acceleration Hints */
.summer-particles .particle,
.summer-sun::before,
.summer-sun::after,
.summer-waves .wave {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Keyframe for wave shimmer effect */
@keyframes wave-shimmer {
    0%, 100% {
        opacity: 0.1;
        transform: translateX(-100%);
    }
    50% {
        opacity: 0.3;
        transform: translateX(100%);
    }
}