/* Additional Mobile Enhancements */
/* This file contains extra mobile optimizations */

/* CRITICAL: Prevent zoom on mobile devices */
@media (max-width: 768px) {
    /* Force prevent zoom on input focus for iOS */
    input[type="text"], 
    input[type="email"], 
    input[type="url"], 
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 50px !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        zoom: 1 !important;
    }
    
    /* Stronger form label styles */
    .form-group label,
    .presets-header label {
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    /* Ensure all form groups are full width */
    .form-group {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Remove any grid layouts on mobile */
    .form-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    
    .form-grid .form-group {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Prevent any transforms or scaling */
    input:focus, 
    select:focus,
    textarea:focus {
        transform: none !important;
        -webkit-transform: none !important;
        outline: 2px solid #06b6d4 !important;
        outline-offset: 2px !important;
        zoom: 1 !important;
        scale: 1 !important;
    }
    
    /* Override any hover effects on mobile */
    .form-group:hover,
    .info-icon:hover {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* Better touch targets */
    button, 
    .info-icon {
        min-height: 28px;
        min-width: 28px;
    }
    
    /* Improved button spacing */
    .generate-btn, 
    .clear-btn, 
    .copy-btn {
        margin: 0.75rem 0;
        padding: 1rem 1.5rem;
        min-height: 50px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Better visual hierarchy on mobile */
    .header h1 {
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    /* Improved scrolling for history */
    .history-list {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better button group layout */
    .save-template-btn, 
    .delete-template-btn {
        margin-left: 0.25rem;
        min-height: 40px;
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
    
    /* Improved body text readability */
    .seo-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .seo-content li {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Prevent any webkit specific zoom issues */
    * {
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 360px) {
    .container {
        padding: 0.25rem;
    }
    
    .header, .url-builder, .seo-content, .history-block {
        padding: 1rem 0.75rem;
    }
    
    .form-grid {
        gap: 0.75rem;
    }
    
    .presets-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .save-template-btn, 
    .delete-template-btn, 
    .clear-history-btn {
        align-self: stretch;
        text-align: center;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .header {
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .header h1 {
        font-size: clamp(2rem, 6vw, 2.8rem);
    }
    
    .header p {
        font-size: 0.95rem;
    }
    
    .url-builder {
        padding: 1.5rem 1.25rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .info-icon, 
    .validation-icon {
        font-weight: 600;
    }
}

/* Dark mode improvements for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .form-group input:focus {
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
    }
    
    .preset-dropdown:focus {
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
    }
}

/* Reduced motion for mobile users */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
    .form-group:hover,
    .form-group input:focus,
    .generate-btn:hover,
    .copy-btn:hover {
        transform: none;
    }
    
    .info-icon:hover {
        transform: none;
    }
}

/* Focus improvements for keyboard navigation on mobile */
@media (max-width: 768px) {
    input:focus, 
    select:focus, 
    button:focus {
        outline: 2px solid #06b6d4;
        outline-offset: 2px;
    }
    
    .info-icon:focus {
        outline: 2px solid #06b6d4;
        outline-offset: 2px;
        border-radius: 50%;
    }
}


/* Extra tighter spacing for small screens */
@media (max-width: 480px) {
    .container {
        padding: 0.25rem !important;
    }
    
    .header, .url-builder, .seo-content, .history-block {
        padding: 1rem 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer {
        padding: 1rem 0.5rem !important;
    }
    
    .footer p {
        font-size: 0.7rem !important;
        margin-bottom: 0.25rem !important;
    }
}

/* Extra responsive adjustments */
@media (max-width: 360px) {
    .container {
        padding: 0.125rem !important;
    }
    
    .header, .url-builder, .seo-content, .history-block {
        padding: 0.75rem 0.375rem !important;
    }
    
    .footer p {
        font-size: 0.65rem !important;
    }
}