/* Mobile-specific enhancements */
@media (max-width: 768px) {
    /* Improved mobile navigation */
    nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    nav a {
        padding: 0.5rem 1rem;
        border-radius: 6px;
        background-color: var(--bg-light);
    }
    
    nav a:hover,
    nav a:focus {
        background-color: var(--border-color);
    }
    
    nav a::after {
        display: none;
    }
    
    /* Better text readability */
    .content p {
        text-align: left;
        hyphens: auto;
        word-wrap: break-word;
    }
    
    /* Improved spacing */
    .content {
        padding: 2rem 0;
    }
    
    .content h2 {
        margin-bottom: 1.5rem;
    }
    
    .content p {
        margin-bottom: 1.2rem;
    }
    
    .step-number {
        padding: 0.4rem 0.9rem;
        font-size: 0.85rem;
        margin-bottom: 0.8rem;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    header h1 {
        text-align: center;
        width: 100%;
    }
    
    nav {
        width: 100%;
    }
    
    .hero h1 {
        line-height: 1.3;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    nav a,
    .card {
        -webkit-tap-highlight-color: rgba(5, 150, 105, 0.1);
    }
}