/**
 * TurnKey Directories 2.0 - CRITICAL Mobile CSS Override
 * 
 * NUCLEAR OPTION - This file loads FIRST and uses maximum specificity
 * to ensure mobile full-width layout regardless of inline styles
 * 
 * Load this BEFORE all other CSS files
 */

/* ============================================
   MOBILE FULL WIDTH - MAXIMUM PRIORITY
   ============================================ */

@media (max-width: 768px) {
    /* Force everything to use viewport width */
    html {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    body,
    body * {
        box-sizing: border-box !important;
    }
    
    body {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Remove constraints from ALL possible wrapper elements */
    #page,
    #content,
    .site,
    .site-content,
    .content-area,
    .site-main,
    main,
    article,
    .entry-content,
    .page-content,
    [class*="container"],
    [class*="wrapper"],
    [id*="content"] {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* NUCLEAR - Target business container with every possible specificity */
    html body div.glass-business-container[style],
    html body div.glass-business-container,
    body div.glass-business-container[style],
    body div.glass-business-container,
    div.glass-business-container[style],
    div.glass-business-container,
    .glass-business-container[style],
    .glass-business-container {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        flex: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }
    
    /* NUCLEAR - Target main card with every possible specificity */
    html body div.glass-main-card[style],
    html body div.glass-main-card,
    body div.glass-main-card[style],
    body div.glass-main-card,
    div.glass-main-card[style],
    div.glass-main-card,
    .glass-main-card[style],
    .glass-main-card {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        flex: none !important;
        order: 1 !important;
        box-sizing: border-box !important;
    }
    
    /* ANNIHILATE ALL SIDEBARS - Maximum specificity */
    html body * .glass-ad-sidebar-left,
    html body * .glass-ad-sidebar-right,
    html body .glass-ad-sidebar-left,
    html body .glass-ad-sidebar-right,
    body * .glass-ad-sidebar-left,
    body * .glass-ad-sidebar-right,
    body .glass-ad-sidebar-left,
    body .glass-ad-sidebar-right,
    * .glass-ad-sidebar-left,
    * .glass-ad-sidebar-right,
    .glass-ad-sidebar-left,
    .glass-ad-sidebar-right,
    .glass-ad-sidebar-left[style],
    .glass-ad-sidebar-right[style],
    [class*="glass-ad-sidebar"],
    [class*="ad-sidebar"],
    [class*="sidebar"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        position: fixed !important;
        top: -999999px !important;
        left: -999999px !important;
        right: auto !important;
        bottom: auto !important;
        z-index: -999999 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        transform: scale(0) !important;
        content-visibility: hidden !important;
    }
    
    /* Target children that might be sidebars by inline style */
    .glass-business-container > div:not(.glass-main-card),
    .glass-business-container > div[style*="width: 300"],
    .glass-business-container > div[style*="width:300"],
    .glass-business-container > div[style*="width: 160"],
    .glass-business-container > div[style*="width:160"],
    .glass-business-container > div[style*="min-height: 600"],
    .glass-business-container > div:first-child:not(.glass-main-card),
    .glass-business-container > div:last-child:not(.glass-main-card),
    .glass-business-container > aside,
    .glass-business-container > [class*="sidebar"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        position: fixed !important;
        top: -999999px !important;
        left: -999999px !important;
        z-index: -999999 !important;
        pointer-events: none !important;
    }
    
    /* Ensure all content sections are full width */
    .glass-info-section,
    .glass-section-card,
    .glass-card-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Override any max-width constraints */
    [style*="max-width"],
    [style*="max-width: 900px"],
    [style*="max-width: 1080px"],
    [style*="max-width: 1200px"],
    [style*="max-width: 1600px"] {
        max-width: 100vw !important;
    }
}

/* ============================================
   PRINT STYLES - Ensure mobile styles don't affect print
   ============================================ */

@media print {
    body,
    .glass-business-container,
    .glass-main-card {
        width: auto !important;
        max-width: none !important;
    }
}