/* Mobile Optimization Styles for Saudi Riyal Symbol Website */

/* Additional responsive styles to enhance mobile experience */
@media (max-width: 768px) {
    /* Improve header for mobile */
    header .container {
        padding: 10px 15px;
    }
    
    /* Create mobile menu button */
    .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--dark-color);
        cursor: pointer;
    }
    
    /* Hide desktop navigation by default on mobile */
    nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--white-color);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }
    
    /* Show navigation when active */
    nav ul.active {
        display: flex;
    }
    
    /* Adjust hero section for mobile */
    #hero {
        padding: 120px 0 60px;
    }
    
    .hero-content h2 {
        font-size: 1.8rem;
    }
    
    .hero-symbol {
        font-size: 80px;
        margin: 30px 0;
    }
    
    /* Adjust section padding for mobile */
    #about, #showcase, #usage, #implementation, #downloads {
        padding: 60px 0;
    }
    
    /* Improve tab navigation for mobile */
    .tab-nav {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1 0 calc(50% - 10px);
        text-align: center;
        margin-bottom: 10px;
        font-size: 0.9rem;
        padding: 10px 5px;
    }
    
    /* Adjust code blocks for mobile */
    .code-block {
        font-size: 0.8rem;
        padding: 15px;
        max-width: 100%;
        overflow-x: auto;
    }
    
    /* Improve interactive elements for touch */
    .size-slider::-webkit-slider-thumb {
        width: 25px;
        height: 25px;
    }
    
    .color-picker {
        width: 50px;
        height: 50px;
    }
    
    /* Adjust copy button for mobile */
    .copy-btn {
        width: 40px;
        height: 40px;
    }
    
    /* Improve footer for mobile */
    .footer-content {
        text-align: center;
    }
    
    .footer-logo {
        align-items: center;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .hero-content h2 {
        font-size: 1.5rem;
    }
    
    .hero-symbol {
        font-size: 60px;
    }
    
    h2 {
        font-size: 1.6rem !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
    }
    
    /* Make buttons more touch-friendly */
    .btn {
        padding: 15px 25px;
        font-size: 1rem;
    }
    
    /* Adjust showcase items for very small screens */
    .showcase-item, .implementation-item, .download-item {
        padding: 20px 15px;
    }
    
    /* Improve tab navigation for very small screens */
    .tab-btn {
        flex: 1 0 100%;
    }
    
    /* Adjust interactive elements for very small screens */
    .interactive-section {
        padding: 20px 15px;
    }
}

/* Touch-specific optimizations */
@media (hover: none) {
    /* Enhance touch targets */
    nav ul li a, .btn, .tab-btn, .download-btn {
        padding: 12px 20px;
    }
    
    /* Improve hover states for touch devices */
    .showcase-item:hover, .implementation-item:hover, .download-item:hover {
        transform: none;
    }
    
    /* Make interactive controls more touch-friendly */
    .size-slider {
        height: 15px;
    }
    
    .size-slider::-webkit-slider-thumb {
        width: 30px;
        height: 30px;
    }
}

/* Orientation-specific adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    /* Adjust hero section for landscape orientation */
    #hero {
        padding: 100px 0 50px;
    }
    
    .hero-symbol {
        margin: 20px 0;
    }
    
    /* Improve section spacing for landscape */
    #about, #showcase, #usage, #implementation, #downloads {
        padding: 40px 0;
    }
}

/* High-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering of the symbol on high-DPI screens */
    .saudi-riyal-symbol {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}