/* Mobile Optimizations for GRPHARM Website
 * This file contains additional optimizations for mobile devices
 * to improve user experience while maintaining the existing design.
 */

/* ===== General Mobile Optimizations ===== */

/* Improve tap targets for better mobile interaction */
@media screen and (max-width: 767px) {
    /* Ensure all interactive elements have adequate touch targets */
    a, button, .btn-primary, .btn-outline, .btn-vote, 
    .menu-toggle, .lang-btn, input[type="submit"] {
        min-height: 44px; /* Apple's recommended minimum touch target size */
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px;
    }
    
    /* Improve form elements on mobile */
    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
        padding: 12px !important;
        border-radius: 0; /* Fix iOS rounded corners */
        -webkit-appearance: none; /* Fix iOS default styling */
        margin-bottom: 15px;
    }
    
    /* Fix for iOS input zoom and improve form usability */
    .email-signup {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .email-input {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px !important;
    }
    
    .btn-signup {
        width: 100%;
        padding: 12px !important;
    }
    
    /* Improve spacing for mobile */
    .container {
        padding: 0 15px;
    }
    
    /* Optimize typography for mobile */
    h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
    
    p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Improve readability with better contrast */
    .slide-content h2, .hero-tagline h1 {
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important; /* Stronger shadow for better readability */
    }
}

/* ===== Enhanced Mobile Navigation ===== */

@media screen and (max-width: 767px) {
    /* Improve mobile menu toggle */
    .menu-toggle {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2000;
        cursor: pointer;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    
    .menu-toggle span {
        display: block;
        width: 24px;
        height: 3px;
        background-color: var(--color-white);
        transition: all 0.3s ease;
        border-radius: 1px;
        margin: 2px 0;
    }
    
    /* Smoother animation for menu toggle */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
    
    /* Improve mobile navigation container */
    .nav-container {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: 0;
        background-color: rgba(0, 0, 0, 0.95); /* Slightly transparent for modern feel */
        overflow-y: auto;
        transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Smoother animation */
        z-index: 999;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(5px); /* Modern blur effect for iOS */
        -webkit-backdrop-filter: blur(5px); /* For Safari */
    }
    
    /* Improve mobile menu when active */
    .nav-container.active {
        height: calc(100vh - 60px) !important;
        overflow-y: auto !important; /* Allow scrolling if menu is tall */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        max-height: calc(100vh - 60px);
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding-top: 20px;
    }
    
    /* Improve mobile menu items */
    .main-nav.active ul {
        display: flex !important;
        flex-direction: column;
        padding: 20px;
        width: 100%;
        max-height: none;
        overflow-y: visible;
    }
    
    .main-nav li {
        margin: 0 0 20px 0;
        width: 100%;
        text-align: center;
    }
    
    .main-nav a {
        font-size: 1.2rem !important;
        padding: 15px 0 !important;
        display: block;
        width: 100%;
        position: relative;
    }
    
    /* Add active state visual feedback */
    .main-nav a:active {
        opacity: 0.7;
    }
    
    /* Improve language switcher in mobile menu */
    .language-switcher {
        display: flex;
        justify-content: center;
        margin: 30px 0;
        width: 100%;
        padding: 0 20px;
    }
    
    .language-switcher a {
        padding: 12px 15px; /* 增加内边距 */
        margin: 0 5px;
        min-width: 70px;
        min-height: 44px; /* 确保符合苹果推荐的最小触摸目标尺寸 */
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2000; /* 确保在其他元素之上 */
        border: 2px solid rgba(255, 255, 255, 0.5); /* 加粗边框增强可见性 */
        border-radius: 4px; /* 添加圆角 */
        transition: all 0.2s ease; /* 添加过渡效果 */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); /* 添加触摸高亮颜色 */
    }
    
    .language-switcher a.active {
        border-color: #fff; /* 活动状态边框更明显 */
        font-weight: bold; /* 活动状态文字加粗 */
        background-color: rgba(255, 255, 255, 0.1); /* 添加背景色增强可见性 */
    }
    
    .language-switcher a.touch-active,
    .language-switcher a.click-active {
        opacity: 0.7; /* 触摸反馈 */
        transform: scale(0.95); /* 轻微缩小效果 */
        background-color: rgba(255, 255, 255, 0.2); /* 触摸时背景色变化 */
    }
    
    /* 确保语言切换器在菜单打开时可见 */
    .nav-container.active .language-switcher {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ===== Vote Page Mobile Optimizations ===== */

@media screen and (max-width: 767px) {
    /* Improve vote page layout */
    .vote-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .vote-item {
        margin-bottom: 20px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }
    
    .vote-item-content {
        padding: 15px;
    }
    
    /* Improve vote buttons */
    .vote-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-vote {
        width: 100%;
        padding: 12px 0;
        font-size: 0.9rem;
    }
    
    /* Improve past votes grid */
    .past-votes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .past-vote-item {
        margin-bottom: 20px;
    }
    
    /* Improve countdown display */
    .countdown-timer {
        gap: 10px;
    }
    
    .countdown-item {
        padding: 0 5px;
    }
    
    #countdown-days, #countdown-hours, #countdown-minutes, #countdown-seconds {
        font-size: 1.8rem;
    }
    
    .countdown-unit {
        font-size: 0.7rem;
    }
    
    /* Improve voter list */
    .voter-item {
        padding: 10px;
    }
    
    .voter-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* ===== Product Page Mobile Optimizations ===== */

@media screen and (max-width: 767px) {
    /* Improve product grid */
    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .product-category {
        margin-bottom: 20px;
    }
    
    /* Optimize product images */
    .category-image {
        padding-bottom: 100%; /* Square aspect ratio for better fit */
    }
    
    /* Improve product details */
    .product-details {
        padding: 15px;
    }
    
    /* Optimize product carousel for mobile */
    .product-carousel {
        margin-bottom: 20px;
    }
    
    .carousel-nav {
        margin-top: 10px;
    }
    
    .carousel-nav-item {
        width: 60px;
        height: 60px;
    }
}

/* ===== Performance Optimizations for Mobile ===== */

@media screen and (max-width: 767px) {
    /* Optimize animations for better performance */
    * {
        animation-duration: 0.3s !important; /* Shorter animations for better performance */
        transition-duration: 0.3s !important;
    }
    
    /* Reduce motion for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation: none !important;
            transition: none !important;
        }
    }
    
    /* Optimize fixed elements to prevent jank */
    .site-header {
        will-change: transform; /* Optimize for animations */
        transform: translateZ(0); /* Force GPU acceleration */
    }
    
    /* Improve scrolling performance */
    body {
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

/* ===== Accessibility Improvements for Mobile ===== */

@media screen and (max-width: 767px) {
    /* Increase contrast for better readability */
    .btn-primary, .btn-outline, .btn-vote {
        border-width: 2px; /* Thicker borders for better visibility */
    }
    
    /* Improve focus states for keyboard navigation */
    a:focus, button:focus, input:focus, select:focus, textarea:focus {
        outline: 2px solid var(--color-accent) !important;
        outline-offset: 2px !important;
    }
    
    /* Hide focus outlines for mouse/touch, show for keyboard */
    body:not(.keyboard-navigation) a:focus,
    body:not(.keyboard-navigation) button:focus,
    body:not(.keyboard-navigation) input:focus,
    body:not(.keyboard-navigation) select:focus,
    body:not(.keyboard-navigation) textarea:focus {
        outline: none !important;
    }
}

/* ===== iOS-specific Fixes ===== */

@supports (-webkit-touch-callout: none) {
    /* iOS-specific styles */
    
    /* Fix for iOS momentum scrolling */
    .nav-container.active {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix for iOS button styling */
    button, .btn-primary, .btn-outline, .btn-vote, input[type="submit"] {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Fix for iOS 100vh issue */
    .nav-container.active {
        height: calc(100% - 60px) !important; /* Use % instead of vh for iOS */
        max-height: calc(100% - 60px) !important;
        overflow-y: auto !important;
    }
    
    /* Fix for iOS input zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ===== Android-specific Fixes ===== */

@supports not (-webkit-touch-callout: none) {
    /* Android-specific styles */
    
    /* Fix for some Android browsers' handling of fixed positioning */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    /* Improve tap highlight color */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}