/**
 * Codeon Sticky Orderable Menu - Mobile Enhancements
 * Version: 1.1.4 (Security & Performance optimized)
 */

/* Base Mobile Styles (up to 768px) - Performance optimized */
@media (max-width: 768px) {
    .codeon-nav-container {
        padding: 8px 0; /* Adjusted based on new design's vertical rhythm */
        position: -webkit-sticky; /* Ensure sticky positioning */
        position: sticky;
        top: 0;
        z-index: 1000;
        /* Performance: GPU layer optimization */
        will-change: transform;
        transform: translateZ(0);
        /* Use @supports for backdrop-filter to prevent unnecessary blur on unsupported devices */
    }
    
    /* Enhanced background with backdrop-filter support for mobile */
    @supports (backdrop-filter: blur(15px)) {
        .codeon-nav-container {
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
        }
    }
    
    .codeon-nav-scroll {
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-top: 5px;    /* Fine-tune scroll area padding */
        padding-bottom: 5px;
    }

    .codeon-nav-item {
        min-width: 80px; /* Slightly smaller min-width than new desktop */
        min-height: 70px; /* Ensure enough tap height with larger icons */
        padding: 6px 8px; /* Compact padding */
        touch-action: manipulation; /* Good for touch interaction */
        /* Performance: Optimize for mobile taps */
        will-change: background-color, transform;
        transform: translateZ(0); /* Force GPU layer */
    }
    
    .codeon-emoji,
    .codeon-icon,
    .codeon-svg-icon {
        font-size: 1.8rem; /* Scaled down from new desktop, but still prominent */
        width: 1.8rem;
        height: 1.8rem;
        margin-bottom: 3px; /* Spacing between icon and text */
        line-height: 1;
        /* Performance: Mobile icon optimization */
        will-change: transform;
        transform: translateZ(0);
    }
    
    .codeon-text {
        font-size: 0.7rem; 
        font-weight: 500; /* Match desktop weight, active will be bolder */
        margin-top: 2px;
        max-width: 70px; /* Max width for text under icon */
        white-space: normal; /* Allow text to wrap on mobile */
        line-height: 1.2;
        text-align: center;
    }
    
    .codeon-nav-dots {
        width: 32px;  /* Circular shape, scaled for mobile */
        height: 32px; /* Circular shape, scaled for mobile */
        font-size: 18px; /* Arrow size */
        opacity: 0.75; /* Slightly more visible by default on mobile */
        background-color: rgba(255, 255, 255, 0.85);
        color: #333;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        /* Other dot styles like position, display, flex handled by main CSS or JS */
    }
    
    /* Specific to bottom placement */
    .codeon-nav-container.codeon-mobile-bottom {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        border-bottom: 0;
        padding-top: 5px; /* Add padding at the top of the container */
    }
    
    .codeon-nav-container.codeon-mobile-bottom .codeon-nav-scroll {
        padding: 5px 0; /* Adjust scroll area padding for bottom nav */
    }
    
    .codeon-nav-container.codeon-mobile-bottom .codeon-nav-item {
        min-height: 55px; /* Slightly more compact for bottom nav */
    }
    
    .codeon-nav-container.codeon-mobile-bottom .codeon-nav-item.active {
        border-bottom-color: transparent;
        border-top: 3px solid tomato; /* Active indicator at the top for bottom nav */
        margin-top: -3px; /* Adjust for border */
    }
}

/* Smaller Mobile Devices (up to 480px) */
@media (max-width: 480px) {
    .codeon-nav-item {
        min-width: 65px; /* Further reduce for very small screens */
        padding: 5px 5px;
    }
    
    .codeon-emoji,
    .codeon-icon,
    .codeon-svg-icon {
        font-size: 1.6rem; /* Further scale down icons */
        width: 1.6rem;
        height: 1.6rem;
    }
    
    .codeon-text {
        font-size: 0.65rem;
        max-width: 60px; /* Restrict text width */
    }
    
    .codeon-nav-dots {
        width: 28px; /* Smaller dots */
        height: 28px;
        font-size: 16px;
    }
}

/* Touch-friendly tap targets for navigation controls (coarse pointer like touch) */
/* This can be combined with other dot styles if always desired, or kept for coarse pointers */
@media (pointer: coarse) {
    .codeon-nav-dots {
        /* Ensure min height for tapability, already handled by width/height for circle */
        /* min-height: 40px; */ 
    }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .codeon-nav-container {
        background-color: rgba(30, 30, 30, 0.9); /* Darker, slightly more opaque */
        border-top-color: rgba(255,255,255,0.08); /* For bottom nav */
    }
    
    .codeon-nav-dots {
        background-color: rgba(45, 45, 45, 0.85);
        color: #ccc; /* Light arrow on dark bg */
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }
    
    .codeon-nav-container.codeon-mobile-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .codeon-nav-border-pill .codeon-nav-item.active {
        /* Ensure pill active colors from main CSS are respected or specifically overridden for dark mobile if needed */
        /* color: #1e1e1e; from main CSS */
    }
}

/* Safe area insets for modern mobile browsers (e.g., iPhone X notch) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .codeon-nav-container.codeon-mobile-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}
@supports (padding-left: env(safe-area-inset-left)) {
    .codeon-nav-container {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

@media (max-width: 767px) {
    .codeon-nav-container .codeon-nav-scroll {
        /* Add some horizontal padding to the scroll container itself on mobile */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Higher specificity to override without !important */
    .codeon-nav-container .codeon-nav-scroll .codeon-nav-item {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 12px;
        padding-right: 12px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .codeon-nav-container .codeon-nav-scroll .codeon-nav-item .codeon-emoji {
        font-size: 1.5em;
        margin-bottom: 4px;
    }

    .codeon-nav-container .codeon-nav-scroll .codeon-nav-item .codeon-icon i,
    .codeon-nav-container .codeon-nav-scroll .codeon-nav-item .codeon-icon svg {
        font-size: 1.5em;
        width: 1.5em;
        height: 1.5em;
        margin-bottom: 4px;
    }
    
    .codeon-nav-container .codeon-nav-scroll .codeon-nav-item .codeon-svg-img img {
        width: 1.5em;
        height: 1.5em;
        margin-bottom: 4px;
    }

    .codeon-nav-container .codeon-nav-scroll .codeon-nav-item .codeon-text {
        font-size: 0.85em;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }

    /* Adjustments for modern style if icons are above text */
    .codeon-style-modern .codeon-nav-item,
    .codeon-style-elegant .codeon-nav-item {
        flex-direction: column; /* Ensure items are stacked vertically */
        align-items: center; /* Center items in the column */
    }

    .codeon-style-modern .codeon-nav-item .codeon-text,
    .codeon-style-elegant .codeon-nav-item .codeon-text {
        margin-top: 5px; /* Add space between icon and text */
    }
    
    /* Specific adjustments for pill style on mobile */
    .codeon-nav-container.codeon-nav-border-pill .codeon-nav-scroll .codeon-nav-item {
        padding-left: 15px;
        padding-right: 15px;
    }
}