/* Body background so the "box" stands out */
body {
  background: #575d61;       /* pick any page background */
  border-top: 3px solid #0088cc;
}

/* Boxed header */
.container-header {
  max-width: 1200px;          /* match the site-grid */
  margin: 15px auto 0;             /* center it */
  background: #fff;            /* header background */
  border-radius: 12px 12px 0 0;/* rounded top only */
  overflow: hidden;            /* tidy corners */
}

/* Ensure logo/nav don’t hug the edges */
.container-header .grid-child {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 6px 6px 0 0;

}

/* Make the whole site boxed */
.site-grid {
  max-width: 1200px;         /* your boxed width */
  margin: 0 auto 1rem;         /* center + top/bottom space */
  background: #fff;          /* box background */
  border-radius: 0 0 6px 6px;
  overflow: hidden;          /* tidy rounded corners */
}

/* Make sure inner containers don't stretch beyond the box */
.container, .container-fluid {
  max-width: 100%;
}

/* Prevent images/modules from overflowing the rounded edges */
.site-grid img, 
.site-grid video,
.site-grid iframe {
  max-width: 100%;
  height: auto;
  border-radius: inherit;
}

/* Optional: make footer blend with the box (if your footer is inside .site-grid) */
/* Boxed footer for Cassiopeia */
.footer {
  max-width: 1200px;
  margin: 1rem auto 2rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 -5px 15px rgba(0,0,0,.06);
  overflow: hidden;
  padding: 1.5rem;
  text-align: center; /* optional */
  color: #333;
}

.bottom-a, .bottom-b {
  margin: 1rem 0;
}

.bottom-a p, .bottom-b p {
  margin: 0;
}

/* If you’re using the offcanvas menu, keep it above the box shadow */
.offcanvas {
  z-index: 1100;
}