/* Mobile-specific enhancements for Vincenzo's website */

/* Ensure all tables are responsive */
@media screen and (max-width: 768px) {
    
    /* Main layout container improvements */
    body {
        margin: 0 !important;
        padding: 5px !important;
        background-color: #780A37 !important;
    }
    
    /* Make the main wrapper table responsive */
    table[bgcolor="#780A37"] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Header section improvements */
    table[background*="Background2.jpg"] {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    /* Logo and header content */
    td[rowspan="2"] {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }
    
    /* Navigation area */
    td[colspan="3"] {
        padding: 10px 5px !important;
    }
    
    /* Content area layout */
    td[width="196"] {
        width: 100% !important;
        padding: 15px !important;
        text-align: center !important;
    }
    
    /* Footer image */
    img[src*="footer_4.gif"] {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 10px auto !important;
    }
    
    /* Menu container */
    #NavigationMenu {
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Page title styling */
    #PageTitle {
        font-size: 16px !important;
        line-height: 1.2 !important;
        margin: 10px 0 !important;
    }
    
    /* Include file content */
    font[size="-2"] {
        font-size: 10px !important;
        display: block !important;
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 480px) {
    
    /* Extra small screens - stack everything */
    table, tbody, tr {
        display: block !important;
        width: 100% !important;
    }
    
    td {
        display: block !important;
        width: 100% !important;
        padding: 5px !important;
        text-align: center !important;
    }
    
    /* Hide spacing cells */
    td[width="10"],
    td[width="20"],
    td:empty {
        display: none !important;
    }
    
    /* Adjust header images for small screens */
    img[src*="bread1.jpg"],
    img[src*="wine2.jpg"] {
        max-width: 80px !important;
        margin: 5px !important;
    }
    
    /* Page title for small screens */
    h1 {
        font-size: 14px !important;
        margin: 5px 0 !important;
    }
}

/* Content page improvements */
@media screen and (max-width: 768px) {
    
    /* Content tables */
    table[width="650"] {
        width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Menu navigation links */
    td[align="center"] a {
        display: inline-block !important;
        margin: 5px !important;
        padding: 8px 12px !important;
        background-color: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }
    
    /* Content images */
    img[src*="iconPic"] {
        margin: 0 5px !important;
    }
    
    /* Content text */
    td[align="left"] {
        text-align: left !important;
        padding: 15px !important;
        line-height: 1.4 !important;
    }
    
    /* Reviews section mobile */
    .reviews-section {
        padding: 40px 15px !important;
    }
    
    .reviews-section h2 {
        font-size: 28px !important;
    }
    
    .reviews-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .review-card {
        padding: 20px !important;
    }
    
    .google-badge {
        padding: 0 15px !important;
    }
}

@media screen and (max-width: 480px) {
    
    /* Stack menu navigation on small screens */
    td[align="center"] {
        text-align: left !important;
    }
    
    td[align="center"] a {
        display: block !important;
        margin: 3px 0 !important;
        text-align: center !important;
    }
    
    /* Reviews on extra small screens */
    .reviews-section {
        padding: 30px 10px !important;
    }
    
    .reviews-section h2 {
        font-size: 24px !important;
    }
    
    .review-card {
        padding: 15px !important;
    }
    
    .reviewer-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .reviewer-name {
        font-size: 16px !important;
    }
    
    .review-text {
        font-size: 14px !important;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    
    /* Larger touch targets for menu items */
    .menutext a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 15px !important;
    }
    
    /* Larger touch targets for form elements */
    input, select, button {
        min-height: 44px !important;
        padding: 10px !important;
    }
    
    /* Larger touch targets for content links */
    a {
        min-height: 32px !important;
        display: inline-block !important;
        padding: 8px !important;
    }
}