/* Touch Specific Enhancements */

@media (hover: none) {
    /* Enhanced tap targets for touch devices */
    nav ul li a,
    .btn,
    .book-card,
    .social-links a,
    .filter-btn {
        padding: 12px 16px; 
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Make checkboxes, radio buttons, and other form controls larger */
    input[type="checkbox"],
    input[type="radio"] {
        transform: scale(1.2);
        margin: 0 10px 0 0;
    }
    
    /* Better focus states for touch */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid rgba(0, 123, 255, 0.5);
        outline-offset: 2px;
    }
    
    /* Add active state for buttons on touch */
    .btn:active,
    .filter-btn:active,
    nav ul li a:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* Fix Safari-specific issues */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS Safari viewport height issues */
    .min-vh-100 {
        min-height: -webkit-fill-available;
    }
    
    /* Fix for form elements in iOS */
    input, 
    textarea, 
    select {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 5px;
    }
}

/* Fix orientation change issues */
@media screen and (orientation: portrait) {
    .book-detail {
        flex-direction: column;
    }
}

@media screen and (orientation: landscape) and (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .hero {
        min-height: 70vh;
    }
}

/* Modern mobile layout improvements */
@media screen and (max-width: 768px) {
    /* Sticky header for better navigation */
    header {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    /* Improve author section for mobile viewing */
    .author-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Better image handling on mobile */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Improve readability */
    p, li {
        line-height: 1.6;
    }
    
    /* Enhance mobile form experience */
    input, 
    textarea, 
    select, 
    button {
        font-size: 16px; /* Prevent iOS zoom on focus */
    }
    
    /* Floating button to return to top on long pages */
    .back-to-top {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: var(--primary-color);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        z-index: 99;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
}