.container-header {
  background: rgb(5, 13, 26);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid var(--border);
}

.nav {
  font-size: 20px;
}

.footer {
  color: #fff;
  background-color: rgb(5, 13, 26);
  background-image: none;
  margin-top: 0;
  }


/* for logo position */

.container-header .mod-menu {
    padding-top: 20px;
}

.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below" 
                         "logo logo" 
                         "nav nav";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
}



@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ." 
                             ". logo nav nav nav .";
    }

}


/* =============================================
   FULL-WIDTH SECTIONS IN CASSIOPEIA
   =============================================
   The component area sits inside a CSS Grid (.site-grid)
   constrained to the "comp" area between main-start/main-end.
   
   Strategy: Expand .container-component to span the full grid
   (full-start to full-end), then use inner wrappers to control
   which sections bleed and which stay centered.
   ============================================= */

/* Step 1: Expand the component container to full grid width */
.grid-child.container-component {
  grid-column: 1 / -1 !important;
}

/* Step 2: Remove any max-width or padding that constrains it */
.grid-child.container-component {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Step 3: Sections INSIDE articles/modules that should stay 
   at normal content width — add class "content-width" */
.container-component .content-width {
  max-width: var(--cassiopeia-container-main-max-width, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Prevent horizontal overflow */
body {
  overflow-x: hidden;
}