/* Mobile Responsive Enhancements */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: 2rem !important; line-height: 1.2; }
    h2 { font-size: 1.75rem !important; line-height: 1.3; }
    h3 { font-size: 1.5rem !important; line-height: 1.4; }
    h4 { font-size: 1.25rem !important; line-height: 1.4; }
    
    /* Spacing */
    .mobile-padding { padding: 1rem !important; }
    .mobile-margin { margin: 1rem !important; }
    
    /* Grid Layouts */
    .mobile-grid-1 { grid-template-columns: 1fr !important; }
    .mobile-stack { flex-direction: column !important; }
    
    /* Cards and Containers */
    .mobile-card {
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 0.5rem;
    }
    
    /* Buttons */
    .mobile-button {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    /* Forms */
    .mobile-form input,
    .mobile-form select,
    .mobile-form textarea {
        width: 100%;
        margin-bottom: 1rem;
        padding: 0.75rem;
        font-size: 1rem;
    }
    
    /* Tables */
    .mobile-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-table table {
        min-width: 600px;
    }
    
    /* Navigation */
    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Content Spacing */
    .mobile-content {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    /* Images */
    .mobile-image {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    
    /* Text */
    .mobile-text-sm { font-size: 0.875rem; }
    .mobile-text-base { font-size: 1rem; }
    .mobile-text-lg { font-size: 1.125rem; }
    
    /* Hide on mobile */
    .mobile-hidden { display: none !important; }
    
    /* Show only on mobile */
    .mobile-only { display: block !important; }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .tablet-padding { padding: 1.5rem !important; }
    
    /* Hide mobile-only on tablet */
    .mobile-only { display: none !important; }
}

/* Desktop Styles */
@media (min-width: 1025px) {
    /* Hide mobile-only on desktop */
    .mobile-only { display: none !important; }
}

/* Specific Component Fixes */

/* Blog Page Mobile Fixes */
@media (max-width: 768px) {
    .blog-header {
        padding: 2rem 1rem !important;
    }
    
    .blog-featured {
        padding: 1rem !important;
    }
    
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .blog-search-form {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .blog-search-form input,
    .blog-search-form select {
        width: 100% !important;
    }
    
    .blog-pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .blog-pagination a {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
}

/* Legal Services Mobile Fixes */
@media (max-width: 768px) {
    .legal-header {
        padding: 2rem 1rem !important;
    }
    
    .legal-featured {
        padding: 1rem !important;
        flex-direction: column !important;
    }
    
    .legal-services-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .legal-card {
        padding: 1rem !important;
    }
    
    .legal-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .legal-buttons a {
        width: 100% !important;
        text-align: center !important;
    }
}

/* Admin Panel Mobile Fixes */
@media (max-width: 768px) {
    .admin-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .admin-card {
        padding: 1rem !important;
    }
    
    .admin-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .admin-table table {
        min-width: 600px !important;
    }
    
    .admin-form {
        padding: 1rem !important;
    }
    
    .admin-form .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .admin-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .admin-buttons button,
    .admin-buttons a {
        width: 100% !important;
    }
}

/* Analytics Dashboard Mobile Fixes */
@media (max-width: 768px) {
    .analytics-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .analytics-chart {
        padding: 1rem !important;
    }
    
    .analytics-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .analytics-modal {
        width: 95% !important;
        margin: 1rem !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

/* Form Enhancements */
@media (max-width: 768px) {
    .form-container {
        padding: 1rem !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .form-input {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .form-textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    .form-select {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }
    
    .form-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .form-button {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* Navigation Mobile Fixes */
@media (max-width: 768px) {
    .nav-mobile {
        position: relative !important;
    }
    
    .nav-menu {
        display: none !important;
    }
    
    .nav-menu.active {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
    }
    
    .nav-item {
        display: block !important;
        padding: 1rem !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .nav-item:last-child {
        border-bottom: none !important;
    }
}

/* Utility Classes */
.mobile-show { display: none; }
.mobile-hide { display: block; }

@media (max-width: 768px) {
    .mobile-show { display: block !important; }
    .mobile-hide { display: none !important; }
    
    .mobile-text-center { text-align: center !important; }
    .mobile-text-left { text-align: left !important; }
    .mobile-text-right { text-align: right !important; }
    
    .mobile-w-full { width: 100% !important; }
    .mobile-h-auto { height: auto !important; }
    
    .mobile-p-4 { padding: 1rem !important; }
    .mobile-p-6 { padding: 1.5rem !important; }
    .mobile-m-4 { margin: 1rem !important; }
    .mobile-m-6 { margin: 1.5rem !important; }
    
    .mobile-rounded { border-radius: 0.5rem !important; }
    .mobile-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; }
}

/* Touch Improvements */
@media (hover: none) and (pointer: coarse) {
    .touch-target {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    button, .btn, a.button {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
    }
    
    input, select, textarea {
        min-height: 44px !important;
        padding: 0.75rem !important;
    }
}

/* Accessibility Improvements */
@media (max-width: 768px) {
    .focus-visible {
        outline: 2px solid #3b82f6 !important;
        outline-offset: 2px !important;
    }
    
    .sr-only-mobile {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}