/* Mobile Optimizations for Better UX and PageSpeed */

/* Performance: Reduce repaints and reflows */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Improve touch targets on mobile - WCAG 2.1 Level AAA (44x44px minimum) */
@media (max-width: 767px) {
    /* Larger tap targets for symbols */
    .section_content .cs {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 2px;
    }
    
    /* Better spacing for symbol grid */
    .section_content {
        padding: 10px 5px;
    }
    
    /* Improve button sizes */
    #copy-btn, #clear-btn {
        padding: 10px 15px;
        font-size: 14px;
        min-height: 44px;
    }
    
    /* Better input field */
    #symbol-message {
        font-size: 24px;
        padding: 10px;
        min-height: 50px;
    }
    
    /* Section titles more readable */
    .section_title h2 {
        font-size: 18px;
        padding: 10px 5px;
    }
    
    /* Instructions more visible */
    .get_symbols_instruction {
        font-size: 14px;
        padding: 12px 10px;
        margin-bottom: 15px;
    }
}

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

/* Improve copy notification - removed as it's now in style.css */

/* Prevent text selection on rapid tapping */
.cs {
    -webkit-tap-highlight-color: rgba(74, 144, 226, 0.3);
    user-select: none;
    -webkit-user-select: none;
}

/* Better hover/active states for touch */
@media (hover: none) and (pointer: coarse) {
    .cs:active {
        transform: scale(0.95);
        background-color: rgba(74, 144, 226, 0.2);
    }
    
    .related-card:active {
        transform: scale(0.98);
    }
}

/* Optimize for small screens */
@media (max-width: 480px) {
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .col-md-9 {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Stack buttons vertically on very small screens if needed */
    #symbol-message-container {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
    }
    
    #symbol-message {
        flex: 1 1 100%;
        width: 100%;
        margin: 0 0 5px 0;
    }
    
    #copy-btn, #clear-btn {
        flex: 1 1 calc(50% - 5px);
        margin: 0;
    }
}

/* Loading state for better perceived performance */
.section_content.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Add subtle animation to symbol clicks */
@keyframes symbolClick {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cs.clicked {
    animation: symbolClick 0.3s ease;
}

/* Improve accessibility */
.cs:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Better spacing for related categories on mobile */
@media (max-width: 767px) {
    .related-categories {
        margin: 20px -5px;
        padding: 15px 5px;
    }
}

/* Sticky header optimization for mobile */
@media (max-width: 767px) {
    .navbar-default {
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* Improve readability */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Better link styling in related section */
.introduction a {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0;
    color: #4a90e2;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.introduction a:hover,
.introduction a:focus {
    background-color: #f0f7ff;
    text-decoration: none;
}

/* Optimize ads spacing */
.ads {
    margin: 10px 0;
    min-height: 50px;
}

/* Performance: Use GPU acceleration for animations (use sparingly) */
.related-card:hover,
.cs:active,
#inserted_notif_msg {
    will-change: transform;
}

/* Performance: Optimize for mobile viewport */
@media (max-width: 767px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimize font rendering on mobile */
    body {
        text-rendering: optimizeSpeed;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}