/* Global Mobile CSS - Applied to all pages */

/* ===== MOBILE-FIRST RESPONSIVE DESIGN ===== */

/* Base mobile styles (applied to all screen sizes) */
* {
    box-sizing: border-box;
}

/* Prevent zoom on input focus (iOS) */
@media screen and (max-width: 768px) {
    input, select, textarea {
        font-size: 16px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ===== MOBILE BREAKPOINTS ===== */

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .container, .logitize-container {
        padding: 0 1rem;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }
}

/* Mobile (481px - 768px) */
@media (max-width: 768px) {
    /* Touch-friendly minimum sizes */
    .btn, 
    .logitize-nav-link,
    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Improved spacing for mobile */
    .section {
        padding: 2rem 0;
    }
    
    .container, .logitize-container {
        padding: 0 1.5rem;
    }
    
    /* Stack elements vertically on mobile */
    .flex-row,
    .flex-container {
        flex-direction: column;
    }
    
    /* Full width on mobile */
    .col-mobile-full {
        width: 100%;
        flex: 1 1 100%;
    }
    
    /* Hide desktop elements */
    .desktop-only {
        display: none;
    }
    
    /* Show mobile elements */
    .mobile-only {
        display: block;
    }
    
    /* Improved form styling - exclude radio buttons and checkboxes */
    input:not([type="radio"]):not([type="checkbox"]), textarea, select {
        padding: 0.75rem;
        border-radius: 8px;
        border: 1px solid #E5E7EB;
        font-size: 16px;
    }
    
    /* Better button styling */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        border-radius: 8px;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container, .logitize-container {
        padding: 0 2rem;
    }
    
    /* Show tablet elements */
    .tablet-only {
        display: block;
    }
    
    /* Hide mobile elements on tablet */
    .mobile-only {
        display: none;
    }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) {
    /* Hide mobile/tablet elements */
    .mobile-only,
    .tablet-only {
        display: none;
    }
    
    /* Show desktop elements */
    .desktop-only {
        display: block;
    }
}

/* ===== MOBILE-SPECIFIC UTILITIES ===== */

/* Prevent horizontal scroll */
.mobile-container {
    overflow-x: hidden;
    width: 100%;
}

/* Mobile-friendly images */
.mobile-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile-friendly tables */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Stack table cells on mobile */
    .mobile-table-stack td,
    .mobile-table-stack th {
        display: block;
        width: 100%;
        text-align: left;
    }
}

/* ===== MOBILE PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
    * {
        animation-duration: 0.3s;
        transition-duration: 0.3s;
    }
    
    /* Disable hover effects on touch devices */
    .hover-effect:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ===== MOBILE ACCESSIBILITY ===== */

/* Better focus indicators for mobile */
@media (max-width: 768px) {
    button:focus,
    input:focus,
    textarea:focus,
    select:focus,
    a:focus {
        outline: 2px solid #FF6A00;
        outline-offset: 2px;
    }
}

/* ===== MOBILE LAYOUT HELPERS ===== */

/* Mobile grid system */
.mobile-grid {
    display: grid;
    gap: 1rem;
}

@media (max-width: 480px) {
    .mobile-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .mobile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== MOBILE TYPOGRAPHY ===== */

@media (max-width: 768px) {
    /* Improved readability on mobile */
    p {
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    /* Better heading hierarchy */
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.2;
        margin-bottom: 0.75rem;
    }
    
    /* Improved list spacing */
    ul, ol {
        padding-left: 1rem;
        margin-bottom: 1rem;
    }
    
    li {
        margin-bottom: 0.5rem;
    }
    
}

/* ===== MOBILE SPACING SYSTEM ===== */

/* Mobile spacing utilities */
@media (max-width: 768px) {
    .mobile-mt-0 { margin-top: 0; }
    .mobile-mt-1 { margin-top: 0.25rem; }
    .mobile-mt-2 { margin-top: 0.5rem; }
    .mobile-mt-3 { margin-top: 1rem; }
    .mobile-mt-4 { margin-top: 1.5rem; }
    .mobile-mt-5 { margin-top: 2rem; }
    
    .mobile-mb-0 { margin-bottom: 0; }
    .mobile-mb-1 { margin-bottom: 0.25rem; }
    .mobile-mb-2 { margin-bottom: 0.5rem; }
    .mobile-mb-3 { margin-bottom: 1rem; }
    .mobile-mb-4 { margin-bottom: 1.5rem; }
    .mobile-mb-5 { margin-bottom: 2rem; }
    
    .mobile-p-0 { padding: 0; }
    .mobile-p-1 { padding: 0.25rem; }
    .mobile-p-2 { padding: 0.5rem; }
    .mobile-p-3 { padding: 1rem; }
    .mobile-p-4 { padding: 1.5rem; }
    .mobile-p-5 { padding: 2rem; }
}