/* Responsive Design */

/* Responsive Typography */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* Tablet Styles */
@media (max-width: 768px) {
    .form-wrapper {
        width: 95vw;
    }
    
    .container {
        width: 100vw;
        padding: var(--spacing-sm) 2vw;
        margin: var(--spacing-sm) auto;
    }
    
    .header-image {
        height: 180px;
    }
    
    .header-content h1 {
        font-size: var(--font-size-xl);
    }
    
    .form-inline-group {
        flex-direction: column;
        gap: 0;
    }
    
    .inline-field {
        margin-bottom: var(--spacing-lg);
    }
    
    .result-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .copy-btn {
        width: 100%;
    }
    
    /* Improved spacing for mobile */
    .instructions {
        padding: var(--spacing-md);
    }
    
    .instructions ol {
        padding-left: var(--spacing-md);
    }
    
    .parameter-info {
        padding: var(--spacing-md);
    }
    
    .parameter-info li {
        padding: var(--spacing-xs);
    }
    
    /* Optimize touch targets */
    .form-group input[type="text"],
    .form-group input[type="url"],
    .form-group input[type="date"],
    .form-group select,
    .generate-btn,
    .reset-btn,
    .copy-btn {
        min-height: 44px; /* Minimum recommended touch target size */
        padding: 12px 16px;
    }
}

/* Mobile Styles */
@media (max-width: 600px) {
    .form-wrapper {
        width: 100%;
    }
    
    .generate-btn,
    .reset-btn {
        width: 100%;
        margin: var(--spacing-sm) 0;
    }
    
    .reset-btn {
        margin-left: 0;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    /* Adjust header for smaller screens */
    .header-image {
        height: 160px;
    }
    
    .header-content h1 {
        font-size: var(--font-size-lg);
    }
    
    .header-content p {
        font-size: var(--font-size-md);
    }
    
    /* Adjust spacing for smaller screens */
    .form-group {
        margin-bottom: var(--spacing-md);
    }
    
    /* Make tooltips more mobile-friendly */
    .tooltip .tooltip-text {
        width: 180px;
        margin-left: -90px;
    }
}

/* Very Small Screens */
@media (max-width: 400px) {
    html {
        font-size: 13px;
    }
    
    .header-image {
        height: 140px;
    }
    
    .header-content {
        padding: var(--spacing-md);
    }
    
    .instructions ol {
        padding-left: var(--spacing-sm);
    }
}