/* ═══════════════════════════════════════════════════════
   MOBILE USABILITY FIXES FOR PAGESPEED INSIGHTS
   Addresses common mobile usability issues
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   CRITICAL MOBILE USABILITY FIXES
   ═══════════════════════════════════════════════════════ */

/* 1. Prevent horizontal scrolling */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

* {
    max-width: 100% !important;
}

/* 2. Ensure all images are responsive */
img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
}

/* 3. Fix table overflow on mobile */
table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
}

/* 4. Ensure all clickable elements meet 44x44px minimum */
a, button, input[type="button"], input[type="submit"], 
input[type="checkbox"], input[type="radio"], select, 
label[for], .clickable, [onclick], [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 5. Ensure adequate spacing between clickable elements */
a + a, button + button, 
a + button, button + a {
    margin-left: 8px !important;
}

/* 6. Fix font sizes - minimum 16px for body text */
body, p, span, div, li, td, th {
    font-size: 16px !important;
}

/* Exception for small text that's not interactive */
small, .text-small, .text-xs {
    font-size: 14px !important;
}

/* 7. Ensure proper line height for readability */
body, p, div {
    line-height: 1.6 !important;
}

/* 8. Fix form inputs for mobile */
input[type="text"], input[type="email"], 
input[type="tel"], input[type="number"], 
input[type="password"], input[type="search"],
textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    min-height: 44px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 9. Fix viewport width issues */
.container, .wrapper, main, section, article {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

/* 10. Fix fixed width elements */
[style*="width:"] {
    max-width: 100% !important;
}

/* 11. Ensure text is readable - proper contrast */
body, p, div, span, a, li {
    color: #2B1810 !important;
    background-color: transparent !important;
}

/* 12. Fix links - ensure they're clearly clickable */
a {
    text-decoration: underline !important;
    color: #C9A355 !important;
    padding: 4px 0 !important;
}

a:visited {
    color: #B8944A !important;
}

a:hover, a:focus {
    color: #D4B87A !important;
    text-decoration: underline !important;
}

/* 13. Fix buttons - ensure they're clearly buttons */
button, .btn-primary, .btn-secondary, 
input[type="button"], input[type="submit"] {
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

/* 14. Fix navigation links spacing */
nav a, .nav-links a, .mobile-menu a {
    padding: 14px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    margin: 4px 0 !important;
}

/* 15. Fix product cards for mobile */
.product-card, .card, article {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 20px !important;
}

/* 16. Fix grid layouts - prevent overflow */
.grid, .product-grid, .category-grid,
[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 17. Fix flexbox layouts */
.flex, [style*="display: flex"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 18. Fix modals and overlays */
.modal, .overlay, .popup {
    max-width: 100vw !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 19. Fix footer for mobile */
footer {
    padding: 40px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
}

footer .container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 20. Fix hero sections */
.hero-section, .hero, section[class*="hero"] {
    padding: 60px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 21. Fix text blocks - ensure proper width */
.text-block, .content, .text-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

/* 22. Fix lists */
ul, ol {
    padding-left: 20px !important;
    margin: 16px 0 !important;
}

li {
    margin: 8px 0 !important;
    padding-left: 8px !important;
}

/* 23. Fix headings spacing */
h1, h2, h3, h4, h5, h6 {
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

h1:first-child, h2:first-child, h3:first-child {
    margin-top: 0 !important;
}

/* 24. Fix paragraphs spacing */
p {
    margin: 16px 0 !important;
    line-height: 1.6 !important;
}

/* 25. Fix search inputs */
input[type="search"] {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
}

/* 26. Fix cart buttons */
.cart-button, .add-to-cart, 
button[class*="cart"], button[class*="add"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
}

/* 27. Fix social media links */
.social-links a, [class*="social"] a {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 28. Fix icons - ensure they're not too small */
.icon, svg, [class*="icon"] {
    min-width: 24px !important;
    min-height: 24px !important;
}

/* 29. Fix badges and labels */
.badge, .label, [class*="badge"], [class*="label"] {
    padding: 6px 12px !important;
    font-size: 14px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 30. Fix spacing between sections */
section {
    margin: 40px 0 !important;
    padding: 40px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════
   SPECIFIC MOBILE BREAKPOINT FIXES
   ═══════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) {
    /* Ensure all containers respect viewport */
    * {
        max-width: 100vw !important;
    }
    
    /* Fix any elements that might cause horizontal scroll */
    body > * {
        overflow-x: hidden !important;
    }
    
    /* Fix navigation */
    nav, .nav, .navigation {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 16px !important;
    }
    
    /* Fix main content area */
    main {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Fix any fixed or absolute positioned elements */
    [style*="position: fixed"], [style*="position: absolute"] {
        max-width: 100vw !important;
    }
    
    /* Fix sidebars */
    aside, .sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY IMPROVEMENTS
   ═══════════════════════════════════════════════════════ */

/* Ensure focus indicators are visible */
a:focus, button:focus, input:focus, 
select:focus, textarea:focus {
    outline: 3px solid #C9A355 !important;
    outline-offset: 2px !important;
}

/* Ensure sufficient color contrast */
a, button {
    color: #C9A355 !important;
}

a:visited {
    color: #B8944A !important;
}

/* ═══════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════ */

/* Optimize rendering */
* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Optimize scrolling */
html {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}