/* ==========================================================================
   1. Universal Layout Margins & Spacing for Top & Bottom Containers
   ========================================================================== */
.site-grid > .container-banner,
.site-grid > .container-below-banner,
.site-grid > .container-top-a,
.site-grid > .container-top-b,
.site-grid > .container-top-c,
.site-grid > .container-top-d,
.site-grid > .container-bottom-a,
.site-grid > .container-bottom-b,
.site-grid > .container-bottom-c,
.site-grid > .container-bottom-d {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Grid columns for non-fullwidth containers */
.site-grid > .container-top-a,
.site-grid > .container-top-b,
.site-grid > .container-top-c,
.site-grid > .container-top-d,
.site-grid > .container-bottom-a,
.site-grid > .container-bottom-b,
.site-grid > .container-bottom-c,
.site-grid > .container-bottom-d {
    grid-column: 2 / -2;
}

/* Multi-module flex layout for extended positions */
.container-top-c,
.container-top-d,
.container-bottom-c,
.container-bottom-d {
    display: flex;
    flex-wrap: wrap !important; /* Crucial: allows cards to wrap vertically */
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.container-top-c > *,
.container-top-d > *,
.container-bottom-c > *,
.container-bottom-d > * {
    flex: 1 1 0;
    min-width: 0; /* Prevents long text from blowing out card width */
    max-width: 100%;
}


/* ==========================================================================
   2. Mobile & Portrait Tablet: Force Natural DOM Order & 100% Stacking
   ========================================================================== */
@media (max-width: 991.98px) {
    .site-grid > .container-banner,
    .site-grid > .container-below-banner,
    .site-grid > .container-top-a,
    .site-grid > .container-top-b,
    .site-grid > .container-top-c,
    .site-grid > .container-top-d,
    .site-grid > .container-sidebar-left,
    .site-grid > .container-component,
    .site-grid > .container-sidebar-right,
    .site-grid > .container-bottom-a,
    .site-grid > .container-bottom-b,
    .site-grid > .container-bottom-c,
    .site-grid > .container-bottom-d {
        grid-row: auto !important;
    }

    /* Force child modules in multi-flex positions to fill full width and wrap */
    .container-top-c > *,
    .container-top-d > *,
    .container-bottom-c > *,
    .container-bottom-d > * {
        flex: 1 1 100% !important; /* Forces 1 card per line */
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ==========================================================================
   3. Desktop & Landscape Tablet (992px+): Explicit Grid Row Assignments
   ========================================================================== */
@media (min-width: 992px) {
    /* Locks the top positions cleanly in order */
    .site-grid > .container-banner         { grid-row: 1 !important; }
    .site-grid > .container-below-banner   { grid-row: 2 !important; }
    .site-grid > .container-top-a          { grid-row: 3 !important; }
    .site-grid > .container-top-b          { grid-row: 4 !important; }
    .site-grid > .container-top-c          { grid-row: 5 !important; }
    .site-grid > .container-top-d          { grid-row: 6 !important; }

    /* Main content and sidebars */
    .site-grid > .container-sidebar-left   { grid-row: 7 !important; }
    .site-grid > .container-component      { grid-row: 7 !important; }
    .site-grid > .container-sidebar-right  { grid-row: 7 !important; }

    /* Extended Bottom positions */
    .site-grid > .container-bottom-a       { grid-row: 8 !important; }
    .site-grid > .container-bottom-b       { grid-row: 9 !important; }
    .site-grid > .container-bottom-c       { grid-row: 10 !important; }
    .site-grid > .container-bottom-d       { grid-row: 11 !important; }
}


/* ==========================================================================
   4. Component Interior Spacing & Card Resets
   ========================================================================== */
.container-main-top-primary,
.container-main-top-secondary,
.container-main-top-tertiary,
.container-main-bottom-primary,
.container-main-bottom-secondary,
.container-main-bottom-tertiary {
    margin-bottom: 1.5rem;
}

.card {
    border: none !important;
    border-width: 0px !important;
    box-shadow: none !important;
}


header.header,
.container-header {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Cassiopeia Header Text & Link Colors */
header.header,
.container-header,
.container-header .site-title,
.container-header .site-description {
  color: #adb5bd !important; /* Soft light-slate gray */
}

.container-header a,
.container-header .nav-link,
.container-header .navbar-brand {
  color: #adb5bd !important;
  transition: color 0.2s ease-in-out;
}

/* Medium Gray Hover State */
.container-header a:hover,
.container-header a:focus,
.container-header .nav-link:hover,
.container-header .nav-link:focus,
.container-header .navbar-brand:hover {
  color: #6c757d !important; /* Classic medium slate gray */
}