/* ──────────────────────────────────────────────
 * esgri-page-shell.css
 * The site's standard page "furniture" — the green title banner (and the
 * underlined section heading) that Elementor used to draw around a page's real
 * content. Reproduced here so migrated Variant C pages look unchanged.
 * Used by /global-affiliates/ (10250), /affiliated_researchers/ (4112) and
 * /insights/ (17484); reuse it for any page carrying the same banner.
 *
 * Specs lifted from the generated post-10250.css / post-4112.css:
 *   banner container 99e7fad : bg var(--e-global-color-secondary) = rgb(56,90,72),
 *                              box-shadow 0 0 30px rgba(0,0,0,.25), z-index 1
 *   heading 3d94b18          : colour var(--e-global-color-accent) = #FFF, weight 700,
 *                              widget margin 10px 0; 32px ≤1024; 25px ≤767
 *   section head 9833362 (10250): colour var(--e-global-color-78b943c) = #7F7F7F, left-aligned,
 *                              in container 9a5d8f2 with a 2px bottom border
 *                              var(--e-global-color-721e868) = #CCCCCC
 *   spacers                  : 19px + 50px (10250), 85px (4112), none (17484)
 * Desktop h2 font-size is deliberately NOT set — the kit defines no h2
 * typography, so the size comes from the theme exactly as it did before.
 *
 * Enqueued site-wide by Code Snippets #15 "ESGRI Site Assets" rather than via
 * data-fetch-css: the banner is server-rendered in the page content, so a
 * JS-injected stylesheet would let it paint unstyled first (the Scholars project has a
 * documented FOUC history — see Scholars/AVATAR-FOUC-FIX.md).
 * ────────────────────────────────────────────── */

/* Phlox adds its own content padding now that these are plain pages, which
   shows up as a white gap between the nav and the banner. Zero it for our pages
   only. Padding on the wrapper (never a negative margin — that slides the
   banner under the header). */
body .aux-primary:has([data-esgri-shell]),
body .entry-main:has([data-esgri-shell]) {
    padding-top: 0 !important;
}

.esgri-pageshell {
    max-width: 1140px;   /* Elementor's boxed container width (kit: --container-max-width) */
    margin: 0 auto;
}

/* ── Full-bleed green title banner ── */
.esgri-titlebar {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background-color: rgb(56, 90, 72) !important;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
    padding: 5px 0;
    z-index: 1;
}

.esgri-titlebar__inner {
    max-width: 1140px;
    margin: 0 auto;
    /* padding, not margin — a margin on the h2 would collapse out of the
       banner and reappear as a white gap above it */
    padding: 10px 0;
}

.esgri-titlebar__title {
    color: #FFFFFF !important;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

/* ── Section heading with the grey underline (Global Affiliates) ── */
.esgri-sectionhead {
    width: 100%;
    border-bottom: 2px solid #CCCCCC;
}

.esgri-sectionhead__title {
    color: #7F7F7F !important;
    text-align: left;
    margin: 10px 0;
}

/* ── Spacers (mirroring the Elementor spacer widgets) ── */
.esgri-spacer--19 { height: 19px; }
.esgri-spacer--50 { height: 50px; }
.esgri-spacer--85 { height: 85px; }

@media (max-width: 1024px) {
    .esgri-titlebar__title { font-size: 32px; }
}

@media (max-width: 767px) {
    .esgri-titlebar__title { font-size: 25px; }
    /* keep the banner text on the same left edge as the cards */
    .esgri-titlebar__inner { padding: 10px 16px; }
    .esgri-pageshell { padding: 0 16px; }
}