/* ====================================
   ELEVANOVA - Dark Mode & Mobile Enhancements
   ==================================== */

/* ========== Dark Mode Component Adjustments ========== */

/* Service Cards */
[data-theme="dark"] .service-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .service-card.featured {
    border-color: var(--color-secondary);
    box-shadow: 0 0 20px rgba(200, 121, 65, 0.2);
}

/* Work Cards */
[data-theme="dark"] .work-card {
    background: var(--bg-secondary);
}

/* Feature Cards */
[data-theme="dark"] .feature-card {
    background: var(--bg-secondary);
}

/* Testimonials */
[data-theme="dark"] .testimonial-card {
    background: var(--bg-secondary);
}

/* Forms */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--color-secondary);
    background: var(--bg-primary);
}

[data-theme="dark"] .contact__form-wrapper {
    background: var(--bg-secondary);
}

/* Portfolio Items */
[data-theme="dark"] .portfolio-item {
    background: var(--bg-secondary);
}

/* Modal */
[data-theme="dark"] .modal-content {
    background: var(--bg-primary);
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.9);
}

/* CTA Boxes */
[data-theme="dark"] .works__cta,
[data-theme="dark"] .cta-box {
    background: var(--gradient-primary);
}

/* Filters */
[data-theme="dark"] .filter-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .portfolio-filters {
    background: var(--bg-secondary);
}

/* ========== Mobile Enhancements (<576px) ========== */
@media (max-width: 576px) {
    /* Larger touch targets */
    .btn {
        min-height: 56px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--text-lg);
    }
    
    .nav__link {
        min-height: 56px;
        font-size: var(--text-lg);
        padding: var(--spacing-md);
    }
    
    /* Better spacing */
    .hero__title {
        font-size: 2.25rem;
        line-height: 1.1;
        margin-bottom: var(--spacing-lg);
    }
    
    .hero__description {
        font-size: var(--text-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    /* Cards spacing */
    .service-card,
    .work-card,
    .feature-card {
        padding: var(--spacing-xl);
    }
    
    /* Form improvements */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: var(--text-lg);
        padding: var(--spacing-md);
    }
    
    /* Navigation menu improvements */
    .nav__menu {
        background: var(--bg-primary);
    }
    
    .nav__menu.show-menu {
        box-shadow: var(--shadow-xl);
    }
    
    /* Stats improvements */
    .stat__number {
        font-size: var(--text-4xl);
    }
    
    /* Filter buttons mobile */
    .filter-btn {
        min-height: 56px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--text-base);
    }
    
    /* Portfolio grid mobile */
    .portfolio-item__image {
        height: 220px;
    }
    
    /* Theme toggle mobile */
    .theme-toggle {
        width: 48px;
        height: 48px;
    }
    
    .nav__toggle {
        width: 48px;
        height: 48px;
    }
}

/* ========== Very Small Screens (<400px) ========== */
@media (max-width: 400px) {
    .hero__title {
        font-size: 2rem;
    }
    
    .section__title {
        font-size: var(--text-3xl);
    }
    
    .nav__actions {
        gap: var(--spacing-sm);
    }
    
    .theme-toggle {
        width: 44px;
        height: 44px;
    }
}

/* ========== Tablet Enhancements (576px - 768px) ========== */
@media (min-width: 576px) and (max-width: 768px) {
    /* Optimize grid layouts */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .works__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .why-us__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Hero adjustments */
    .hero__stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== Smooth Transitions ========== */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Preserve specific transitions */
.btn,
.nav__link,
.service-card,
.work-card,
.feature-card,
.theme-toggle {
    transition: all var(--transition-base);
}

/* ========== Accessibility Improvements ========== */

/* Focus visible for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* High contrast for dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* ========== Print Styles ========== */
@media print {
    .header,
    .theme-toggle,
    .nav__toggle,
    .footer__social,
    .btn {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* ========== Landscape Mobile Improvements ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding-top: calc(80px + var(--spacing-xl));
        padding-bottom: var(--spacing-xl);
    }
    
    .section {
        padding: var(--spacing-2xl) 0;
    }
    
    .hero__image {
        display: none;
    }
}