/**
 * AppPresser Directory Listing Fix
 * Fixes content being cut off on the right side in mobile app
 * 
 * Add this CSS to your plugin with high priority or use wp_add_inline_style
 */

/* ============================================
   CRITICAL: Force proper width constraints in AppPresser
   ============================================ */

/* Target AppPresser context - use both body class and iframe detection */
body.in-apppresser .directory-listing,
body.in-apppresser .directory-items,
body.in-apppresser .directory-item,
iframe .directory-listing,
iframe .directory-items,
iframe .directory-item {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Force container to respect viewport */
body.in-apppresser .directory-listing,
iframe .directory-listing {
    padding: 10px !important;
    margin: 0 !important;
}

/* Fix grid layout in AppPresser - FORCE single column */
body.in-apppresser .directory-items,
iframe .directory-items {
    grid-template-columns: 1fr !important; /* Single column only */
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
}

/* Ensure individual items don't overflow */
body.in-apppresser .directory-item,
iframe .directory-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Critical for grid items */
    margin: 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* Fix for grid layout override */
body.in-apppresser .directory-layout-grid .directory-items,
iframe .directory-layout-grid .directory-items {
    grid-template-columns: 1fr !important; /* Override auto-fill */
}

/* ============================================
   Fix Images That Might Be Causing Overflow
   ============================================ */

body.in-apppresser .directory-item-image,
body.in-apppresser .directory-item-image img,
iframe .directory-item-image,
iframe .directory-item-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

body.in-apppresser .directory-item-image img,
iframe .directory-item-image img {
    object-fit: cover !important;
    max-height: 200px !important;
}

/* ============================================
   Fix Content Widths
   ============================================ */

body.in-apppresser .directory-item-content,
body.in-apppresser .directory-item-title,
body.in-apppresser .directory-item-excerpt,
body.in-apppresser .directory-item-contact,
iframe .directory-item-content,
iframe .directory-item-title,
iframe .directory-item-excerpt,
iframe .directory-item-contact {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ============================================
   Fix Buttons and Links That Might Overflow
   ============================================ */

body.in-apppresser .directory-contact-btn,
iframe .directory-contact-btn {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* Allow wrapping if needed */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ============================================
   Fix Filter Section
   ============================================ */

body.in-apppresser .directory-filters,
iframe .directory-filters {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    margin: 0 0 15px 0 !important;
}

body.in-apppresser .directory-filters select,
iframe .directory-filters select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   Additional AppPresser-Specific Containers
   ============================================ */

/* Target Ionic/AppPresser wrapper elements */
body.in-apppresser ion-content,
body.in-apppresser ion-card,
body.in-apppresser .ion-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Ensure parent containers don't allow overflow */
body.in-apppresser .site-content,
body.in-apppresser .content-area,
body.in-apppresser main,
body.in-apppresser article,
iframe .site-content,
iframe .content-area,
iframe main,
iframe article {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ============================================
   Fix for Beaver Builder Rows/Columns in App
   ============================================ */

body.in-apppresser .fl-row,
body.in-apppresser .fl-col,
body.in-apppresser .fl-col-content,
body.in-apppresser .fl-module,
iframe .fl-row,
iframe .fl-col,
iframe .fl-col-content,
iframe .fl-module {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* ============================================
   Debug Helper (Remove after testing)
   ============================================ */

/* Uncomment this section to see what's causing overflow */
/*
body.in-apppresser * {
    outline: 1px solid rgba(255, 0, 0, 0.2) !important;
}

body.in-apppresser .directory-item {
    outline: 2px solid blue !important;
}

body.in-apppresser .directory-items {
    outline: 2px solid green !important;
}

body.in-apppresser .directory-listing {
    outline: 2px solid orange !important;
}
*/

/* ============================================
   Responsive Breakpoints for App
   ============================================ */

/* iPhone SE / Small phones */
@media (max-width: 375px) {
    body.in-apppresser .directory-listing {
        padding: 8px !important;
    }
    
    body.in-apppresser .directory-item {
        padding: 12px !important;
    }
    
    body.in-apppresser .directory-items {
        gap: 12px !important;
    }
}

/* iPhone 12/13/14 Pro Max / Large phones */
@media (min-width: 428px) {
    body.in-apppresser .directory-listing {
        padding: 12px !important;
    }
}

/* Tablets in portrait */
@media (min-width: 768px) and (max-width: 1024px) {
    body.in-apppresser .directory-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ============================================
   Landscape Mode Optimization
   ============================================ */

@media (orientation: landscape) and (max-width: 812px) {
    body.in-apppresser .directory-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    body.in-apppresser .directory-item-image img {
        max-height: 150px !important;
    }
}

/* ============================================
   Safe Area Insets for iOS Notch
   ============================================ */

body.in-apppresser .directory-listing {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
}

/* ============================================
   Performance Optimizations
   ============================================ */

body.in-apppresser .directory-item {
    will-change: auto !important; /* Prevent unnecessary GPU acceleration */
    transform: translateZ(0); /* Force hardware acceleration when needed */
}

/* ============================================
   Print Styles (if users print from app)
   ============================================ */

@media print {
    body.in-apppresser .directory-items {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}