/**
 * ZYZ DYNAMICS Mobile Enhancement System
 * Universal mobile-first patterns for all tools
 * 
 * Philosophy: Meet people where they live - on their phones
 * Touch-first, thumb-friendly, content-focused mobile experience
 */

/* ============================================
   MOBILE NAVIGATION SYSTEM
   ============================================ */

@media (max-width: 768px) {
    /* Mobile navigation - CSS-first approach that works without JavaScript */
    .site-nav {
        padding: 15px 0;
        position: relative;
    }
    
    /* Default: Navigation visible (CSS-only fallback) */
    .nav-links {
        display: flex;
        flex-direction: column;
        background: #000;
        border: 1px solid #222;
        border-radius: 8px;
        padding: 10px 0;
        gap: 0;
        position: relative;
        margin: 0 auto;
        max-width: 300px;
    }
    
    /* Enhanced dropdown mode when JavaScript is available */
    .js-enabled .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        border-top: none;
        z-index: 1000;
        max-width: none;
        margin: 0;
    }
    
    .js-enabled .nav-links.mobile-open {
        display: flex;
    }
    
    .nav-links a {
        padding: 12px 20px;
        border-bottom: 1px solid #111;
        font-size: 1em;
        text-align: left;
    }
    
    .nav-links a:last-child {
        border-bottom: none;
    }
    
    /* Toggle button only shows when JavaScript is available */
    .mobile-nav-toggle {
        display: none;
        background: #111;
        border: 1px solid #333;
        color: #fff;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.9em;
        margin: 0 auto;
    }
    
    .js-enabled .mobile-nav-toggle {
        display: block;
    }
    
    .mobile-nav-toggle:hover {
        background: #222;
        border-color: #444;
    }
    
    .mobile-nav-toggle::after {
        content: " ▼";
        font-size: 0.8em;
        opacity: 0.7;
    }
    
    .mobile-nav-toggle.open::after {
        content: " ▲";
    }
}

/* ============================================
   MOBILE HEADER OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Dramatically reduce header prominence on mobile */
    header .logo {
        font-size: 2.5em !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px !important;
    }
    
    header .tagline {
        font-size: 1.1em !important;
        letter-spacing: 1px !important;
        margin-bottom: 30px !important;
    }
    
    .tool-header {
        margin-bottom: 25px !important;
    }
    
    .tool-header h1 {
        font-size: 1.8em !important;
        margin-bottom: 8px !important;
    }
    
    .tool-subtitle {
        font-size: 1em !important;
        margin-bottom: 15px !important;
    }
    
    /* Quick access code styling */
    .tool-header code,
    .tool-header span[style*="monospace"] {
        font-size: 0.9em !important;
        padding: 2px 6px !important;
    }
}

/* ============================================
   MOBILE TOUCH TARGETS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure all interactive elements meet 44px minimum */
    button, .btn, input[type="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 1em;
    }
    
    /* Enhanced range sliders for thumb interaction */
    input[type="range"] {
        height: 12px !important;
        margin: 15px 0 !important;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #4ecdc4 !important;
        border: 3px solid #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #4ecdc4 !important;
        border: 3px solid #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        cursor: pointer !important;
    }
    
    /* Enhanced select dropdowns */
    select {
        min-height: 44px;
        padding: 10px 15px;
        font-size: 1em;
        border-radius: 8px;
        background: #111;
        border: 1px solid #333;
        color: #fff;
    }
    
    /* Enhanced text inputs */
    input[type="text"], input[type="number"], textarea {
        min-height: 44px;
        padding: 12px 15px;
        font-size: 1em;
        border-radius: 8px;
        border: 1px solid #333;
        background: #111;
        color: #fff;
    }
    
    textarea {
        min-height: 120px;
        resize: vertical;
    }
}

/* ============================================
   MOBILE LAYOUT PATTERNS
   ============================================ */

@media (max-width: 768px) {
    /* Force single column layouts */
    .main-content, .tools-grid, .controls-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Optimize card spacing */
    .tool-card, .product-card, .mode-card {
        padding: 20px !important;
        margin-bottom: 15px;
    }
    
    /* Reduce container padding */
    .container {
        padding: 20px 15px !important;
    }
    
    /* Stack form groups vertically */
    .control-group, .input-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Full-width mobile inputs */
    .control-group input, .control-group select, .control-group button {
        width: 100% !important;
    }
}

/* ============================================
   MOBILE MODE TABS TO DROPDOWN
   ============================================ */

@media (max-width: 768px) {
    /* Convert tab systems to dropdowns on mobile */
    .mode-selector, .tab-selector {
        position: relative;
    }
    
    .mode-selector .mode-btn:not(.active),
    .tab-selector .tab-btn:not(.active) {
        display: none;
    }
    
    .mode-selector .mode-btn.active,
    .tab-selector .tab-btn.active {
        width: 100%;
        position: relative;
        text-align: left;
        justify-content: space-between;
        padding-right: 40px;
    }
    
    .mode-selector .mode-btn.active::after,
    .tab-selector .tab-btn.active::after {
        content: "▼";
        position: absolute;
        right: 15px;
        opacity: 0.7;
    }
    
    .mode-selector.mobile-open .mode-btn.active::after,
    .tab-selector.mobile-open .tab-btn.active::after {
        content: "▲";
    }
    
    .mode-selector.mobile-open .mode-btn,
    .tab-selector.mobile-open .tab-btn {
        display: block !important;
        width: 100%;
        border-radius: 0;
        border-bottom: 1px solid #333;
    }
    
    .mode-selector.mobile-open .mode-btn:last-child,
    .tab-selector.mobile-open .tab-btn:last-child {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }
}

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

@media (max-width: 768px) {
    /* Optimize reading sizes for mobile */
    body {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.3em; }
    
    /* Improve line height for thumb scrolling */
    p, li, label {
        line-height: 1.6;
        margin-bottom: 12px;
    }
    
    /* Enhance code readability */
    code, pre {
        font-size: 0.9em;
        line-height: 1.4;
        overflow-x: auto;
    }
}

/* ============================================
   MOBILE UTILITY CLASSES
   ============================================ */

@media (max-width: 768px) {
    .mobile-hidden { display: none !important; }
    .mobile-only { display: block !important; }
    .mobile-stack { flex-direction: column !important; }
    .mobile-full-width { width: 100% !important; }
    .mobile-center { text-align: center !important; }
    .mobile-no-padding { padding: 0 !important; }
    .mobile-small-gap { gap: 10px !important; }
}

/* Desktop-only utility */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}

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

@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    *, *::before, *::after {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimize transforms for mobile performance */
    .tool-card:hover, .product-card:hover {
        transform: none !important;
    }
    
    /* Improve scroll performance */
    .scrollable-content {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

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

@media (max-width: 768px) {
    /* Improve focus visibility on mobile */
    button:focus, input:focus, select:focus, textarea:focus {
        outline: 3px solid #4ecdc4;
        outline-offset: 2px;
    }
    
    /* Ensure sufficient color contrast */
    .tool-subtitle, .product-subtitle {
        color: #ccc !important; /* Improved from #888 */
    }
    
    /* Enhance touch feedback */
    button:active, .btn:active {
        background-color: #333 !important;
        transform: scale(0.98) !important;
    }
}