/* =====================================================
   MOBILE RESPONSIVENESS FIXES
   ===================================================== */

/* Prevent horizontal scrolling on all devices */
html,
body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

/* Ensure main content doesn't overflow */
body>* {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix for any container that might cause overflow */
.container,
.section,
.hero,
.content-wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

/* Responsive container standard */
.responsive-container {
    width: 100%;
    max-width: 1280px;
    /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .responsive-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .responsive-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Main content padding to account for fixed navbar */
main,
.main-content,
body>section:first-of-type {
    padding-top: 80px;
    /* Height of fixed navbar */
}

@media (max-width: 767px) {

    main,
    .main-content,
    body>section:first-of-type {
        padding-top: 70px;
        /* Slightly less on mobile */
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
        /* Account for bottom nav */
    }
}

/* Force responsive grids on mobile */
@media (max-width: 767px) {

    /* Store grid - force single column */
    .product-grid,
    [class*="grid-cols-"] {
        grid-template-columns: 1fr !important;
    }

    /* Calendar grid - force single column */
    .calendar-grid,
    .event-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Prevent images from breaking layout */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive text - prevent overflow */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix for hero sections */
.hero,
.store-hero,
[class*="hero"] {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure buttons don't overflow */
button,
.btn,
[class*="btn-"] {
    max-width: 100%;
    white-space: normal;
}

/* Fix for modals on mobile */
@media (max-width: 767px) {

    .modal,
    [role="dialog"] {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0 auto;
    }
}

/* Prevent table overflow */
table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

@media (max-width: 767px) {
    table {
        font-size: 0.875rem;
    }
}

/* Fix for embedded content */
iframe,
embed,
object {
    max-width: 100%;
}

/* Ensure forms are responsive */
form {
    width: 100%;
    max-width: 100%;
}

input,
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix for any absolute positioned elements */
[style*="position: absolute"] {
    max-width: 100vw;
}

/* Prevent pre/code blocks from breaking layout */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Mobile-specific fixes */
@media (max-width: 767px) {

    /* Reduce padding on mobile */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Smaller font sizes for headings */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    /* Stack flex items on mobile */
    .flex-row-desktop {
        flex-direction: column !important;
    }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {

    a,
    button,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* =====================================================
   UI HARDENING - PREVENT EDGE CLIPPING
   ===================================================== */

/* Fix 1: Safe Area Insets for iOS */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Fix 2: Button Groups - Force Wrapping */
.store-filters,
.filter-group,
.button-group,
[class*="filter"],
[class*="sort"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem;
}

/* Fix 3: Horizontal Padding - Breathing Room */
main,
section,
.container,
.section-light,
.section-dark {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 768px) {

    main,
    section,
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Fix 4: Prevent Nav Overflow */
.nav-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
}

@media (max-width: 767px) {
    .navbar .nav-links {
        max-width: 100vw;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix 5: Bottom Nav Safe Area (Additional Support) */
.mobile-bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    height: calc(60px + env(safe-area-inset-bottom)) !important;
}

/* Fix 6: Product Page - Prevent Button Overlap */
@media (max-width: 767px) {

    .pdp-actions,
    .product-actions,
    [class*="add-to-cart"] {
        margin-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}

/* Fix 7: Ensure Minimum Edge Spacing */
@media (max-width: 320px) {

    /* iPhone SE / Mini */
    * {
        box-sizing: border-box;
    }

    button,
    .btn,
    a.btn-primary {
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
    }
}

/* =====================================================
   SURGICAL STRIKE - KILL NAV SCROLLBARS
   ===================================================== */

/* NUCLEAR OPTION: Force all nav elements to never scroll */
nav,
.navbar,
header,
.nav-links,
.navbar .nav-links {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Body is the ONLY element allowed to scroll */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}