/**
 * Mobile Layout Fix - Bricard Services 2025
 *
 * Fixes GeneratePress one-container layout issues on mobile devices
 * Eliminates need for inline style hacks by providing proper responsive overrides
 *
 * @package GeneratePress Child
 * @since 1.0.0
 */

/* ============================================
   MOBILE FIRST: RESET DESKTOP SPACING
   ============================================ */

/**
 * Mobile devices (≤768px)
 * Remove all desktop padding/margins that cause layout overflow
 */
@media (max-width: 768px) {
    /**
     * Remove .site-content padding
     * Desktop: 40px all around (80px total horizontal)
     * Mobile: 0px (content uses its own padding via child theme)
     */
    .one-container .site-content {
        padding: 0 !important;
    }

    /**
     * Remove .site-main sidebar margins
     * Desktop: 40px margin for spacing between content and sidebar
     * Mobile: 0px (sidebar stacks below, no side-by-side layout)
     */
    .one-container.right-sidebar .site-main,
    .one-container.both-right .site-main,
    .one-container.left-sidebar .site-main,
    .one-container.both-left .site-main,
    .one-container.both-sidebars .site-main {
        margin: 0 !important;
    }

    /**
     * Remove ALL .grid-container padding on mobile (ALL pages)
     * Desktop: 10px left/right
     * Mobile: 0px (full viewport width, no white margins)
     *
     * Individual content sections add their own padding as needed
     * Hero sections remain full-bleed edge-to-edge
     */
    .grid-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /**
     * Ensure .container and combined classes also have 0 padding
     * Prevents padding from child theme's 02-mobile-base.css
     *
     * Target all combinations of container classes on #page:
     * - .site.container
     * - .grid-container.container
     * - .site.grid-container.container
     */
    .site.container,
    .grid-container.container,
    .site.grid-container.container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0;
        margin-right: 0;
    }

    /**
     * Ensure proper width calculation
     * Prevent any width-related issues from parent theme
     */
    .site.grid-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /**
     * Reset any float-based layouts on mobile
     * Mobile should be stacked, not floated
     */
    .one-container .site-content {
        display: flex;
        flex-direction: column;
    }

    /**
     * Ensure content area takes full width
     */
    .one-container .content-area {
        width: 100%;
        max-width: 100%;
    }

    /**
     * Remove inside article padding on mobile
     * Let the child theme handle content spacing
     */
    .one-container .inside-article {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /**
     * Override GeneratePress Customizer inline CSS
     * Customizer sets: padding:10px 10px 60px 10px on mobile
     * This creates visible white margins on mobile
     * We need to override with !important to beat inline styles
     */
    .one-container .inside-article,
    .one-container .inside-page-header,
    .separate-containers .inside-article,
    .separate-containers .inside-page-header,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .separate-containers .paging-navigation {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================
   TABLET: TRANSITION SPACING
   ============================================ */

/**
 * Tablet devices (769px - 1024px)
 * Gradually restore spacing but keep it reasonable for medium screens
 */
@media (min-width: 769px) and (max-width: 1024px) {
    /**
     * Moderate .site-content padding for tablets
     */
    .one-container .site-content {
        padding: 30px !important;
    }

    /**
     * Moderate .site-main margins for tablets
     */
    .one-container.right-sidebar .site-main,
    .one-container.both-right .site-main {
        margin-right: 30px !important;
    }

    .one-container.left-sidebar .site-main,
    .one-container.both-left .site-main {
        margin-left: 30px !important;
    }

    .one-container.both-sidebars .site-main {
        margin: 0 30px !important;
    }
}

/* ============================================
   DESKTOP: RESTORE ORIGINAL SPACING
   ============================================ */

/**
 * Desktop devices (>1024px)
 * Restore full GeneratePress spacing for optimal desktop layout
 */
@media (min-width: 1025px) {
    /**
     * Full .site-content padding on desktop
     */
    .one-container .site-content {
        padding: 40px !important;
    }

    /**
     * Full .site-main margins on desktop
     */
    .one-container.right-sidebar .site-main,
    .one-container.both-right .site-main {
        margin-right: 40px !important;
    }

    .one-container.left-sidebar .site-main,
    .one-container.both-left .site-main {
        margin-left: 40px !important;
    }

    .one-container.both-sidebars .site-main {
        margin: 0 40px !important;
    }

    /**
     * Restore grid container desktop padding
     */
    .grid-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ============================================
   SPECIAL CASES & OVERRIDES
   ============================================ */

/**
 * Separate containers layout (if used)
 * Apply similar mobile-first approach
 */
@media (max-width: 768px) {
    .separate-containers .site-main {
        margin: 0 !important;
    }

    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header {
        padding-left: var(--space-4, 16px) !important;
        padding-right: var(--space-4, 16px) !important;
    }
}

/**
 * Full-width content pages (no sidebar)
 * Ensure no unexpected spacing
 */
@media (max-width: 768px) {
    .no-sidebar .site-main {
        margin: 0 !important;
    }

    .no-sidebar .site-content {
        padding: 0 !important;
    }
}

/**
 * Override for child theme location pages
 * Ensure hero sections work correctly with this layout fix
 */
@media (max-width: 768px) {
    .single-location .one-container .site-content,
    .single .one-container .site-content {
        padding: 0 !important;
    }
}

/* ============================================
   COMPATIBILITY & SAFETY
   ============================================ */

/**
 * Ensure box-sizing is consistent
 * Prevents padding from affecting total width calculations
 */
.site,
.site-content,
.site-main,
.grid-container {
    box-sizing: border-box;
}

/**
 * Prevent horizontal overflow at root level
 * Last line of defense against layout breaks
 */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .site {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/**
 * Debug helper (commented out - uncomment to visualize spacing)
 */
/*
@media (max-width: 768px) {
    .site-content { outline: 2px solid red !important; }
    .site-main { outline: 2px solid blue !important; }
    .grid-container { outline: 2px solid green !important; }
}
*/