/* Enhanced Responsive Design for Fancy Font Generator Plugin */
/* This file provides additional improvements that work with the desktop design approach */

/* ===== GLOBAL RESPONSIVE IMPROVEMENTS ===== */

/* Ensure proper viewport handling */
.ffg-generator-container,
.ffg-universal-widget {
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

/* ===== DESKTOP DESIGN FOR ALL DEVICES ===== */

/* Keep the same desktop layout across all screen sizes */
.ffg-style-row {
    grid-template-columns: 1fr 50px !important;
    gap: 8px !important;
    padding: 0 !important;
    text-align: left !important;
}

.ffg-style-label-top {
    position: absolute !important;
    top: -10px !important;
    left: 12px !important;
    grid-column: 1 !important;
}

.ffg-style-preview {
    order: unset !important;
    margin-bottom: 0 !important;
    grid-column: 1 !important;
    min-height: 60px !important;
}

.ffg-style-actions {
    grid-column: 2 !important;
    justify-content: center !important;
}

.ffg-copy-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    padding: 8px !important;
}

/* ===== CATEGORY GRID - DESKTOP LAYOUT ===== */

/* Keep desktop grid layout for all devices */
.ffg-category-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

/* ===== UNIVERSAL WIDGET GRID LAYOUTS ===== */

/* Keep desktop layout for all devices */
.ffg-widget-fonts[data-layout="grid"],
.ffg-widget-fonts[data-layout="cards"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */

/* Touch-friendly button sizes while maintaining desktop layout */
@media (hover: none) and (pointer: coarse) {
    .ffg-copy-btn,
    .ffg-widget-copy-btn,
    .ffg-load-more-button,
    .ffg-widget-load-more-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
    }
    
    .ffg-category-link {
        min-height: 44px !important;
        padding: 12px 24px !important;
    }
    
    /* Maintain desktop layout with touch-friendly sizing */
    .ffg-style-row {
        min-height: 60px !important;
    }
    
    .ffg-style-preview {
        min-height: 50px !important;
    }
}

/* ===== MOBILE-SPECIFIC ENHANCEMENTS ===== */

/* Small mobile devices (575px and below) */
@media (max-width: 575px) {
    /* Enhanced copy button for mobile */
    .ffg-copy-btn,
    .ffg-widget-copy-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        padding: 10px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25) !important;
    }
    
    /* Improved clipboard icon for mobile */
    .ffg-clipboard-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Mobile font preview sizing */
    .ffg-style-preview,
    .ffg-widget-font-preview {
        min-height: 50px !important;
        padding: 0.75rem !important;
    }
    
    .ffg-preview-text,
    .ffg-widget-preview-text {
        font-size: 0.85rem !important; /* Smaller font size for mobile */
        line-height: 1.2 !important; /* Tighter line height */
        min-height: 1.2em !important;
        padding: 0.25rem !important;
        /* Ensure text is fully visible on mobile */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        display: block !important; /* Better text wrapping */
        text-align: left !important; /* Better readability */
    }
    
    /* Mobile style row adjustments */
    .ffg-style-row,
    .ffg-widget-font-item {
        grid-template-columns: 1fr 44px !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }
    
    .ffg-style-label-top,
    .ffg-widget-font-label {
        top: -8px !important;
        left: 10px !important;
        padding: 0 6px !important;
    }
    
    .ffg-style-name,
    .ffg-widget-font-name {
        font-size: 0.7rem !important;
        height: 18px !important;
    }
    
    /* Fix placeholder text for mobile */
    .ffg-text-input::placeholder,
    .ffg-widget-text-input::placeholder {
        font-size: 14px !important;
        line-height: 1.3 !important;
        color: #9ca3af !important;
        font-style: italic !important;
        font-weight: 400 !important;
    }
}

/* Extra small mobile devices (375px and below) */
@media (max-width: 375px) {
    .ffg-copy-btn,
    .ffg-widget-copy-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        padding: 8px !important;
    }
    
    .ffg-clipboard-icon {
        width: 14px !important;
        height: 14px !important;
    }
    
    .ffg-style-preview,
    .ffg-widget-font-preview {
        min-height: 45px !important;
        padding: 0.5rem !important;
    }
    
    .ffg-preview-text,
    .ffg-widget-preview-text {
        font-size: 0.75rem !important; /* Even smaller for very small screens */
        line-height: 1.1 !important; /* Very tight line height */
        min-height: 1.1em !important;
        padding: 0.125rem !important;
        /* Ensure text is fully visible on very small mobile */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        display: block !important;
        text-align: left !important;
    }
    
    .ffg-style-row,
    .ffg-widget-font-item {
        grid-template-columns: 1fr 40px !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }
    
    .ffg-style-label-top,
    .ffg-widget-font-label {
        top: -6px !important;
        left: 8px !important;
        padding: 0 4px !important;
    }
    
    .ffg-style-name,
    .ffg-widget-font-name {
        font-size: 0.65rem !important;
        height: 16px !important;
    }
    
    /* Fix placeholder text for very small mobile */
    .ffg-text-input::placeholder,
    .ffg-widget-text-input::placeholder {
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #9ca3af !important;
        font-style: italic !important;
        font-weight: 400 !important;
    }
}

/* Extra extra small mobile devices (320px and below) */
@media (max-width: 320px) {
    .ffg-preview-text,
    .ffg-widget-preview-text {
        font-size: 0.7rem !important; /* Smallest font size for very small screens */
        line-height: 1.1 !important;
        min-height: 1.1em !important;
        padding: 0.1rem !important;
        /* Maximum text visibility on very small screens */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        display: block !important;
        text-align: left !important;
    }
    
    .ffg-style-preview,
    .ffg-widget-font-preview {
        min-height: 40px !important;
        padding: 0.4rem !important;
    }
    
    .ffg-style-row,
    .ffg-widget-font-item {
        grid-template-columns: 1fr 36px !important;
        gap: 3px !important;
        margin-top: 5px !important;
    }
    
    .ffg-copy-btn,
    .ffg-widget-copy-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        padding: 6px !important;
    }
    
    .ffg-clipboard-icon {
        width: 12px !important;
        height: 12px !important;
    }
    
    /* Fix placeholder text for extra small mobile */
    .ffg-text-input::placeholder,
    .ffg-widget-text-input::placeholder {
        font-size: 12px !important;
        line-height: 1.1 !important;
        color: #9ca3af !important;
        font-style: italic !important;
        font-weight: 400 !important;
    }
}

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

/* Hardware acceleration for animations */
.ffg-text-input,
.ffg-widget-text-input,
.ffg-style-row,
.ffg-widget-font-item,
.ffg-copy-btn,
.ffg-widget-copy-btn {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ===== BROWSER SPECIFIC FIXES ===== */

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    .ffg-text-input,
    .ffg-widget-text-input {
        -webkit-appearance: none;
        border-radius: 9999px !important;
    }
}

/* Firefox specific fixes */
@supports (-moz-appearance: none) {
    .ffg-text-input,
    .ffg-widget-text-input {
        -moz-appearance: none;
    }
}

/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
    .ffg-text-input,
    .ffg-widget-text-input {
        -ms-appearance: none;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus indicators for keyboard navigation */
.ffg-text-input:focus,
.ffg-widget-text-input:focus,
.ffg-copy-btn:focus,
.ffg-widget-copy-btn:focus,
.ffg-category-link:focus,
.ffg-load-more-button:focus,
.ffg-widget-load-more-btn:focus {
    outline: 2px solid #667eea !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ffg-text-input,
    .ffg-widget-text-input {
        border-width: 3px !important;
        border-color: #000 !important;
    }
    
    .ffg-copy-btn,
    .ffg-widget-copy-btn {
        border: 2px solid #000 !important;
    }
    
    .ffg-style-row,
    .ffg-widget-font-item {
        border-width: 2px !important;
        border-color: #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ffg-text-input,
    .ffg-widget-text-input,
    .ffg-style-row,
    .ffg-widget-font-item,
    .ffg-copy-btn,
    .ffg-widget-copy-btn {
        animation: none !important;
        transition: none !important;
    }
    
    .ffg-text-input:hover,
    .ffg-widget-text-input:hover,
    .ffg-style-row:hover,
    .ffg-widget-font-item:hover,
    .ffg-copy-btn:hover,
    .ffg-widget-copy-btn:hover {
        transform: none !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .ffg-generator-container,
    .ffg-universal-widget {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .ffg-copy-btn,
    .ffg-widget-copy-btn,
    .ffg-load-more-button,
    .ffg-widget-load-more-btn {
        display: none !important;
    }
    
    .ffg-style-row,
    .ffg-widget-font-item {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* ===== FIXED WIDTH ISSUES ===== */

/* Ensure no horizontal scrolling */
.ffg-generator-container *,
.ffg-universal-widget * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix for long text breaking layouts */
.ffg-preview-text,
.ffg-widget-preview-text {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Fix for very long font names */
.ffg-style-name,
.ffg-widget-font-name {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}