/* Proper container constraints to prevent edge-to-edge content */

/* Override previous global-scale-fix.css with proper constraints */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  max-width: 1200px !important; /* Constrain width */
}

@media (min-width: 640px) {
  .container {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
    max-width: 1200px !important;
  }
}

@media (min-width: 768px) {
  .container {
    padding-right: 2.5rem !important;
    padding-left: 2.5rem !important;
    max-width: 1200px !important;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
    max-width: 1200px !important;
  }
}

@media (min-width: 1280px) {
  .container {
    padding-right: 4rem !important;
    padding-left: 4rem !important;
    max-width: 1200px !important;
  }
}

/* Fix max-width utilities to be more reasonable */
.max-w-screen-xl {
  max-width: 1200px !important;
}

/* Ensure all sections have proper spacing from edges */
section > div:first-child:not(.container) {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (min-width: 768px) {
  section > div:first-child:not(.container) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  section > div:first-child:not(.container) {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* Fix header to have proper constraints */
.site-header nav {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (min-width: 768px) {
  .site-header nav {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .site-header nav {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* Fix footer constraints */
.site-footer > div {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (min-width: 768px) {
  .site-footer > div {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .site-footer > div {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* Article banner specific fixes */
.article-banner h1,
.bg-gradient-to-r h1 {
  font-size: 2rem !important;
  line-height: 2.5rem !important;
}

@media (min-width: 768px) {
  .article-banner h1,
  .bg-gradient-to-r h1 {
    font-size: 2.5rem !important;
    line-height: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .article-banner h1,
  .bg-gradient-to-r h1 {
    font-size: 3rem !important;
    line-height: 3.5rem !important;
  }
}

/* Ensure article content has proper constraints */
article,
.article-content {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
  article,
  .article-content {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Hero sections need special treatment */
.home-hero-section > div,
.hero-section > div {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (min-width: 768px) {
  .home-hero-section > div,
  .hero-section > div {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .home-hero-section > div,
  .hero-section > div {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* Fix sections that use just padding classes */
.px-6 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (min-width: 768px) {
  .px-6 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .px-6 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* Ensure no content touches viewport edges */
body {
  overflow-x: hidden;
}

main {
  width: 100%;
}

/* Force all direct section children to respect constraints */
section > *:first-child {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}