/**
 * Mobile-Specific Optimizations
 * Enhanced mobile experience for Penguin Home Services
 */

/* ==========================================================================
   Mobile-First Performance Optimizations
   ========================================================================== */

/* Reduce animations on mobile for better performance */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hardware acceleration for smooth scrolling */
.smooth-scroll {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==========================================================================
   Mobile Touch Optimizations
   ========================================================================== */

/* Increase touch target sizes for better usability */
@media (max-width: 768px) {
    button,
    input[type="button"],
    input[type="submit"],
    .btn,
    .mobile-nav-item,
    .mobile-bottom-nav a {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Touch-friendly navigation */
    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(34, 61, 47, 0.1);
    }
    
    /* Logo sizing for mobile */
    .logo img {
        height: 60px !important;
        max-width: 200px;
    }
    
    /* Mobile navigation improvements */
    .mobile-menu-toggle {
        padding: 0.75rem;
        z-index: 1001;
    }
    
    /* Mobile menu styling */
    .mobile-nav {
        padding-top: 80px;
        background: var(--forest-green);
    }
    
    .mobile-nav a {
        padding: 1rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 1.125rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    /* Hero section mobile optimization */
    .hero {
        padding: 3rem 0;
        min-height: 70vh;
    }
    
    .hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero p {
        font-size: 1.125rem;
        margin-bottom: 2rem;
    }
    
    /* Service cards mobile layout */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .service-card {
        padding: 2rem 1.5rem;
        text-align: center;
    }
    
    /* Forms mobile optimization */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.875rem;
        border-radius: 8px;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    /* Mobile bottom navigation */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e0e0e0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem 0.5rem;
        color: var(--forest-green);
        text-decoration: none;
        transition: all 0.3s ease;
        gap: 0.25rem;
    }
    
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:focus {
        background-color: var(--beige);
        color: var(--forest-green);
    }
    
    .mobile-bottom-nav svg {
        width: 20px;
        height: 20px;
    }
    
    .mobile-bottom-nav span {
        font-size: 0.75rem;
        font-weight: 500;
    }
    
    /* Add padding to body to account for fixed bottom nav */
    body {
        padding-bottom: 80px;
    }
}

/* ==========================================================================
   Mobile Typography & Spacing
   ========================================================================== */

@media (max-width: 768px) {
    /* Improved typography hierarchy */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
    
    /* Improved line spacing */
    p, li {
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    /* Section spacing */
    .section-padding {
        padding: 3rem 0;
    }
    
    /* Container responsive */
    .container {
        padding: 0 1rem;
        max-width: 100%;
    }
    
    /* Grid responsive */
    .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ==========================================================================
   Mobile Modal & Overlay Optimizations
   ========================================================================== */

@media (max-width: 768px) {
    .modal-content {
        width: calc(100vw - 2rem);
        max-height: calc(100vh - 4rem);
        margin: 2rem 1rem;
        border-radius: 12px;
    }
    
    .modal-close {
        top: 0.75rem;
        right: 0.75rem;
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
    
    /* Coupon modal optimization */
    .coupon-modal .modal-content {
        padding: 1.5rem;
    }
    
    .coupon-details {
        text-align: center;
    }
}

/* ==========================================================================
   Mobile Tables & Data
   ========================================================================== */

@media (max-width: 768px) {
    /* Responsive tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 500px;
        font-size: 0.875rem;
    }
    
    /* Service pricing tables */
    .pricing-table {
        display: block;
    }
    
    .pricing-table tr {
        display: block;
        border: 1px solid #e0e0e0;
        margin-bottom: 1rem;
        border-radius: 8px;
        padding: 1rem;
    }
    
    .pricing-table td {
        display: block;
        text-align: left;
        padding: 0.5rem 0;
        border: none;
    }
    
    .pricing-table td:before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: var(--forest-green);
    }
}

/* ==========================================================================
   Mobile Performance Enhancements
   ========================================================================== */

@media (max-width: 768px) {
    /* Optimize background images for mobile */
    .hero,
    .section-bg {
        background-attachment: scroll; /* Better performance than fixed */
    }
    
    /* Reduce complex box shadows on mobile */
    .card,
    .service-card,
    .footer {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Simplify gradients on mobile */
    .gradient-bg {
        background: var(--forest-green);
    }
}

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

@media (max-width: 768px) {
    /* Focus indicators for mobile */
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus {
        outline: 3px solid var(--mustard-gold);
        outline-offset: 2px;
    }
    
    /* High contrast for better visibility */
    .btn-primary:focus {
        background-color: var(--forest-green);
        color: var(--mustard-gold);
    }
    
    /* Improved error states */
    .form-control.error {
        border-color: #dc3545;
        border-width: 2px;
    }
    
    .error-message {
        font-size: 1rem;
        margin-top: 0.5rem;
        padding: 0.75rem;
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        border-radius: 6px;
        color: #721c24;
    }
}

/* ==========================================================================
   Mobile Service Request Form Enhancements
   ========================================================================== */

@media (max-width: 768px) {
    .service-request-form {
        padding: 1.5rem;
        margin: 1rem 0;
    }
    
    .form-step {
        min-height: 300px;
        padding: 1rem;
    }
    
    .progress-bar-container {
        margin-bottom: 1.5rem;
        height: 6px;
    }
    
    .progress-steps {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.75rem;
    }
    
    .form-navigation {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 1rem;
        border-top: 1px solid #e0e0e0;
        margin: 1rem -1.5rem -1.5rem;
    }
    
    .btn-next,
    .btn-prev {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Mobile Tips Section Optimizations
   ========================================================================== */

@media (max-width: 768px) {
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .tip-card {
        padding: 1.5rem;
        border-radius: 12px;
    }
    
    .tip-icon {
        width: 48px;
        height: 48px;
    }
    
    .category-filter {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    
    .filter-btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
    }
    
    .article-content {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .related-articles {
        margin-top: 3rem;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ==========================================================================
   Mobile Calculator & Interactive Elements
   ========================================================================== */

@media (max-width: 768px) {
    .financing-calculator {
        padding: 1.5rem;
        border-radius: 12px;
    }
    
    .calculator-inputs {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .calculator-results {
        margin-top: 2rem;
        padding: 1.5rem;
        border-radius: 12px;
    }
    
    .result-item {
        padding: 1rem 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .result-value {
        font-size: 1.5rem;
        font-weight: 800;
    }
}

/* ==========================================================================
   Mobile Loading States & Animations
   ========================================================================== */

@media (max-width: 768px) {
    /* Faster animations on mobile */
    .transition-fast {
        transition: all 0.2s ease;
    }
    
    .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    /* Scroll position indicator for long forms */
    .scroll-indicator {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background: var(--mustard-gold);
        z-index: 9999;
        transition: width 0.1s ease;
    }
}

/* ==========================================================================
   Mobile Dark Mode Support (Future Enhancement)
   ========================================================================== */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .header {
        background: rgba(34, 61, 47, 0.95);
        color: white;
    }
    
    .mobile-bottom-nav {
        background: var(--charcoal-green);
        border-top-color: rgba(255, 255, 255, 0.1);
    }
    
    .mobile-bottom-nav a {
        color: var(--beige);
    }
    
    .mobile-bottom-nav a:hover {
        background-color: rgba(180, 121, 12, 0.2);
        color: var(--mustard-gold);
    }
}