/* WeatherGuard.Space - Responsive Styles */

/* Mobile First Approach */

/* Small devices (phones, 576px and up) */
@media (max-width: 575.98px) {
    .container {
        padding: 0 0.75rem;
    }
    
    .header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .main-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .nav-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .nav-link span {
        display: none;
    }
    
    .nav-link {
        min-width: 40px;
        justify-content: center;
    }
    
    .header-info {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .logo h1 {
        font-size: 1.25rem;
    }
    
    .logo i {
        font-size: 1.5rem;
    }
    
    .conditions-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .kp-card {
        grid-column: span 1;
    }
    
    .kp-gauge-container canvas {
        width: 150px !important;
        height: 150px !important;
    }
    
    .kp-value {
        font-size: 1.5rem;
    }
    
    .metric-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .chart-container {
        height: 250px;
    }
    
    .chart-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .chart-controls {
        width: 100%;
        justify-content: center;
    }
    
    .forecast-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    section h2 {
        font-size: 1.25rem;
    }
    
    .condition-card {
        padding: 1rem;
    }
    
    .chart-card {
        padding: 1rem;
    }
    
    .forecast-container,
    .alerts-container {
        padding: 1rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .main-nav {
        gap: 0.25rem;
    }
    
    .nav-link {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }
    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kp-card {
        grid-column: span 2;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .forecast-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kp-card {
        grid-column: span 2;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .forecast-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .metric-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 992px) {
    .conditions-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .kp-card {
        grid-column: span 2;
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .forecast-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .metric-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .header {
        padding: 0.5rem 0;
    }
    
    .main {
        padding: 1rem 0;
    }
    
    .condition-card {
        padding: 1rem;
    }
    
    .chart-container {
        height: 200px;
    }
    
    .kp-gauge-container canvas {
        width: 120px !important;
        height: 120px !important;
    }
    
    .kp-value {
        font-size: 1.25rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo i,
    .card-icon,
    .alert-icon {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .chart-controls,
    .alert-close,
    .loading-overlay {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .condition-card,
    .chart-card,
    .forecast-container,
    .alerts-container {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
    
    .main {
        padding: 0;
    }
    
    section {
        margin-bottom: 1rem;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .status-indicator {
        animation: none;
    }
    
    .loading-spinner i {
        animation: none;
    }
}

/* Dark mode preferences (already dark by default, but for consistency) */
@media (prefers-color-scheme: light) {
    /* Keep dark theme as primary, but could add light theme here if needed */
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --border-color: #ffffff;
        --text-muted: #ffffff;
        --text-secondary: #ffffff;
    }
    
    .condition-card,
    .chart-card,
    .forecast-container,
    .alerts-container {
        border-width: 2px;
    }
}

/* Focus styles for accessibility */
@media (prefers-reduced-motion: no-preference) {
    .chart-btn:focus,
    .alert-close:focus {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .chart-btn,
    .alert-close {
        min-height: 44px;
        min-width: 44px;
    }
    
    .condition-card:hover,
    .chart-card:hover {
        transform: none;
    }
    
    .footer-links a {
        padding: 0.5rem;
        display: inline-block;
    }
}

/* Specific breakpoints for common devices */

/* iPhone SE, iPhone 12 mini */
@media (max-width: 375px) {
    .container {
        padding: 0 0.5rem;
    }
    
    .logo h1 {
        font-size: 1rem;
    }
    
    .condition-card {
        padding: 0.75rem;
    }
    
    .kp-gauge-container canvas {
        width: 120px !important;
        height: 120px !important;
    }
    
    .kp-value {
        font-size: 1.25rem;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kp-card {
        grid-column: span 2;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-container {
        height: 350px;
    }
}

/* iPad landscape */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .conditions-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .kp-card {
        grid-column: span 2;
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large desktop screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .conditions-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .forecast-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}