/*
 * Layout Override CSS
 * This file contains aggressive overrides to ensure the two-column layout works correctly
 * with content expanding to fill the available space
 */

/* Layout container background to match content area */
.social1-layout {
  display: flex !important;
  min-height: 100vh !important;
  max-width: 100% !important;
  margin: 10px auto 0 !important;
  background-color: var(--card-background) !important;
}

/* Force main content to take all available space */
.social1-main-content {
  flex: 1 !important;
  margin-left: var(--sidebar-width) !important;
  margin-right: 20px !important;
  margin-top: 20px !important;
  width: calc(100% - var(--sidebar-width) - 20px) !important;
  max-width: none !important;
  padding: 0 !important;
  background-color: var(--card-background) !important;
}

/* Override any container classes within content */
.social1-main-content .container,
.social1-main-content .container-fluid,
.social1-main-content .container-sm,
.social1-main-content .container-md,
.social1-main-content .container-lg,
.social1-main-content .container-xl,
.social1-main-content .container-xxl {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Override Bootstrap's container max-widths at all breakpoints */
@media (min-width: 576px) {
  .social1-main-content .container,
  .social1-main-content .container-sm {
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
  .social1-main-content .container,
  .social1-main-content .container-sm,
  .social1-main-content .container-md {
    max-width: 100% !important;
  }
}

@media (min-width: 992px) {
  .social1-main-content .container,
  .social1-main-content .container-sm,
  .social1-main-content .container-md,
  .social1-main-content .container-lg {
    max-width: 100% !important;
  }
}

@media (min-width: 1200px) {
  .social1-main-content .container,
  .social1-main-content .container-sm,
  .social1-main-content .container-md,
  .social1-main-content .container-lg,
  .social1-main-content .container-xl {
    max-width: 100% !important;
  }
}

@media (min-width: 1400px) {
  .social1-main-content .container,
  .social1-main-content .container-sm,
  .social1-main-content .container-md,
  .social1-main-content .container-lg,
  .social1-main-content .container-xl,
  .social1-main-content .container-xxl {
    max-width: 100% !important;
  }
}

/* Fix for any direct children of main content */
.social1-main-content > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix for any rows within the main content */
.social1-main-content .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the site header doesn't constrain width */
.site-header .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove any max-width constraints from any element */
.social1-main-content [style*="max-width"] {
  max-width: 100% !important;
}