/**
 * Container System
 * Flexible container system for different layout needs
 */

/* Base container */
.container,
.jcs-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Theme containers */
.theme-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 2.5rem 1rem;
  background: var(--white);
}

.theme-container-auto {
  max-width: var(--container-width);
  margin: 0 auto;
}

@media (min-width: 1400px) {
  .theme-container-auto {
    max-width: var(--max-width);
    padding: 0 1.5rem;
  }
}

.theme-container-full {
  width: 100%;
  max-width: none;
  padding: 0;
}

.theme-container-fluid {
  width: 100%;
  max-width: none;
  padding: 0 1rem;
}

/* Container modifiers */
.theme-container-no-padding {
  padding: 0;
}

.theme-container-large-padding {
  padding: 0 2rem;
}

/* Responsive container adjustments */
@media (min-width: 992px) {
  .container,
  .jcs-container {
    max-width: 1200px;
    padding: 0 30px;
  }
}

@media (max-width: 767px) {
  .container,
  .jcs-container {
    padding: 0 15px;
  }
}

/* Specific container types */
.content-container {
  max-width: 800px;
  margin: 0 auto;
}

.header-container {
  width: 100%;
}

.footer-container {
  width: 100%;
}

.section-container {
  padding: 4rem 0;
}

.hero-container {
  padding: 6rem 0;
}

/* Content areas */
.site-main {
}

.content-area {
  width: 100%;
}

/* Override containers for full-width elements */
.force-full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.force-container-width {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* WooCommerce specific containers */
.woocommerce .theme-container,
.woocommerce-page .theme-container {
  max-width: var(--max-width);
}

.home-page-content .theme-container {
  max-width: var(--container-wide-width);
}

/* Utility classes for breaking out of containers */
.break-container-left {
  margin-left: calc(50% - 50vw);
}

.break-container-right {
  margin-right: calc(50% - 50vw);
}

.break-container-both {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Nubecom specific containers */
.nubecom-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.nubecom-container-wide {
  max-width: var(--container-wide-width);
  margin: 0 auto;
  padding: 0 1rem;
}