/* ========================================
   MOBILE MARGIN/PADDING OVERRIDES
   This file loads last to override Bootstrap's container margins
   Uses high specificity selectors - !important only where Bootstrap requires it
   ======================================== */

@media (max-width: 767px) {
  /* Override Bootstrap's margin: auto for containers on mobile
     Bootstrap uses margin-left/right: auto for centering, which we need to override
     Using high specificity + !important only for margin since Bootstrap's auto is hard to override */
  body.theme-public main.container,
  body.theme-public main.container.container,
  body.theme-teen main.container,
  body.theme-teen main.container.container,
  body.theme-adult main.container,
  body.theme-adult main.container.container,
  body.theme-kid main.container,
  body.theme-kid main.container.container,
  body.theme-teacher main.container,
  body.theme-teacher main.container.container {
    /* Override Bootstrap's margin: auto - requires !important due to Bootstrap's specificity */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Padding can often be overridden without !important if specificity is high enough */
    padding-left: 0;
    padding-right: 0;
    /* Full width on mobile */
    width: 100%;
    max-width: 100%;
  }
  
  /* Target all container variants with high specificity - only use !important for margins */
  body.theme-public .container,
  body.theme-teen .container,
  body.theme-adult .container,
  body.theme-kid .container,
  body.theme-teacher .container,
  body .container,
  body .container-fluid,
  body .container-sm,
  body .container-md,
  body .container-lg,
  body .container-xl,
  body .container-xxl {
    /* Margin auto requires !important to override Bootstrap */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Padding can be overridden with specificity */
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
  }
}