/* LCSV Auto Tech - Mobile Margin Fix for Kadence Theme + Beaver Builder */
/* 
  This CSS fixes the white margin gaps between HTML block sections on mobile ONLY.
  The gaps are caused by Beaver Builder's .fl-module-html default margins (20px).
  Add this to WordPress: Appearance > Customize > Additional CSS
  Or add via WPCode as a CSS snippet with "Site Wide Header" insertion
*/

/* Mobile-only fixes */
@media (max-width: 1024px) {
  /* Set body background to match dark theme - fills any gaps */
  body {
    background-color: hsl(0, 0%, 8%) !important;
  }
  
  /* Page content area background - ONLY the main content, not header/footer */
  .site-main,
  .fl-builder-content,
  .entry-content {
    background-color: hsl(0, 0%, 8%) !important;
  }

  /* BEAVER BUILDER: Remove ALL margins from HTML modules */
  .fl-module.fl-module-html,
  .fl-module-html.fl-html,
  .fl-builder-content .fl-module-html,
  .fl-row .fl-module-html,
  [class*="fl-node-"].fl-module-html {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Beaver Builder row/column gaps */
  .fl-row,
  .fl-col,
  .fl-module {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Site container padding - the 24px culprit */
  .site-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Beaver Builder content wrappers - remove horizontal padding too */
  .fl-row-content-wrap,
  .fl-col-content,
  .fl-node-content {
    padding: 0 !important;
  }
  
  /* Remove lateral margins/padding from main content containers */
  .fl-builder-content,
  .fl-row-fixed-width,
  .fl-row-content,
  .fl-col-group,
  .fl-col,
  .fl-col-content,
  .fl-module-content,
  .content-wrap,
  .site-container > .site-inner,
  .entry-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* KADENCE: Remove gaps between blocks */
  .wp-block-html {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .entry-content > .wp-block-kadence-rowlayout {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Group blocks that wrap our HTML */
  .wp-block-group:has(> .wp-block-html) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}