/* ==========================================================================
   esgri-chrome.css — the site header and footer, every page   (2026-08-07)
   ==========================================================================
   Lifted verbatim from the trial block at the bottom of in-the-media.css, with
   the `body.page-id-21761` scope removed from 49 selectors. Enqueued site-wide
   by Code Snippet #15; the matching footer MARKUP is printed on `wp_footer` by
   the same snippet, because CSS cannot create a footer that is not there.

   🚨 THREE PAGES ARE EXCLUDED, in the snippet, not here:
     19958  /home-2/ — carries its own copy of both, in frontpage.css and in
            its page content. Loading this as well would give it two footers,
            and would flatten the transparent-over-hero header state that only
            the front page has.
     22031  /2026-sustainability-forum/ and the 2025 page — both hide the theme
            header and footer outright and carry their own sticky nav.

   🚨 FOUR THINGS TRAVEL WITH THIS BLOCK. Every one of them was a separate bug
   during the trial, and dropping any one brings it back:
     1. The logo swap. Phlox renders a 225x150 PORTRAIT img that holds the bar
        at 156px whatever min-height says; the img is hidden and a 260x52
        horizontal logo painted as a background instead. THAT is what produces
        120px, not min-height.
     2. The .admin-bar offsets. WordPress shifts the document 32px (46 at
        <=782) for logged-in users but not `position: fixed` elements, so a
        logged-out check cannot see this gap at all.
     3. .aux-sticky-placeholder { display: none }. Phlox grows it to the
        header's ORIGINAL height on scroll — 156px of empty page.
     4. box-shadow: none on Phlox's inner layers. .has_eae_slider carries
        `box-shadow: rgba(0,0,0,.5) 0 0 10px` and bleeds ~9px past its own box,
        which reads as two grey bands under the bar once you scroll. The front
        page strips it in a rule whose geometry was copied here but whose
        box-shadow line was missed the first time.
   ========================================================================== */

/* ==========================================================================
   New site header — TRIAL, this page only (Chase, 7 Aug)
   ==========================================================================
   The header Chase built for /home-2/ lives in frontpage.css and only reaches
   pages that load it. Same trick here: these rules ship in this page's own
   stylesheet, so nothing else on the site moves. Roll out by lifting this block
   into a site-wide sheet (Code Snippet #15 already enqueues esgri-art.css and
   esgri-page-shell.css on every page) once it is signed off.

   What is deliberately NOT copied from the front page:
     * the dark mega-menu scrim — Chase: home only
     * the transparent/white-text state, which needs a dark hero behind it.
       This page is a black band over a light body, so the bar is always in the
       front page's "sticky" appearance: white, colour logo, dark text.

   🚨 The 120px height comes from the LOGO, not the container. Phlox renders a
   225x150 portrait <img>, which holds the bar at 156 no matter what min-height
   says. The front page hides that img and paints a 260x52 horizontal logo as a
   background instead; without that step min-height does nothing.
   -------------------------------------------------------------------------- */
#site-elementor-header,
.aux-elementor-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-height: 120px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  z-index: 1400 !important;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .18)) !important;
}

/* The white pill sits behind the bar so the drop-shadow above can round with it */
.aux-elementor-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 100% !important;
  background: #fff !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Phlox toggles #sticky-header between relative and fixed, which makes the logo
   jump. Pinned in both states, as on the front page. */
#site-elementor-header #sticky-header,
.aux-elementor-header #sticky-header,
.aux-elementor-header.aux-sticky #sticky-header {
  position: fixed !important;
  top: 30px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
  z-index: 1401 !important;
}

.aux-elementor-header .aux-logo-anchor img,
.aux-elementor-header .aux-logo-text {
  display: none !important;
}
.aux-elementor-header .aux-logo-anchor {
  display: block !important;
  width: 260px !important;
  height: 52px !important;
  background-image: url("https://hkujcesgri.hku.hk/wp-content/uploads/2026/05/esgri-logo-color-horizontal-scaled.png") !important;
  background-position: center left !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* The bar no longer occupies space, so the page has to clear it itself. */
#main {
  padding-top: 120px !important;
}

@media (max-width: 720px) {
  #site-elementor-header,
  .aux-elementor-header { min-height: 72px !important; }
  #site-elementor-header #sticky-header,
  .aux-elementor-header #sticky-header,
  .aux-elementor-header.aux-sticky #sticky-header { top: 12px !important; }
  .aux-elementor-header .aux-logo-anchor { width: 170px !important; height: 34px !important; }
  #main { padding-top: 72px !important; }
}

/* ==========================================================================
   New site footer — TRIAL, this page only (Chase, 7 Aug)
   ==========================================================================
   Lifted from frontpage.css and scoped to this page, as the header block above.

   The markup does NOT go in page content: the HKU WAF drops any page write
   carrying an absolute <img src="https://...">, answering 200 and saving
   nothing — it did exactly that on the first attempt. It is uploaded as
   esgri-footer.html and pulled in by a data-fetch-html div, which is also the
   shape a rollout wants: one fragment, every page, one place to edit.

   ⚠️ Site-wide this still needs a decision: either that div goes into every
   page's content, or Code Snippet #15 injects it. Rebuilding Elementor footer
   template 42 is the third option and the only one that needs no JS.
   -------------------------------------------------------------------------- */
.aux-elementor-footer {
  display: none !important;
}
.fp-footer {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: 80px !important;
  margin-bottom: 0 !important;
  background: #000 !important;
  color: #fff;
  padding: 64px 48px 32px;
  border-radius: 0 !important;
  box-sizing: border-box;
  font-family: 'Poppins', -apple-system, sans-serif;
}
.fp-footer__cols {
  max-width: 1280px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}
.fp-footer__col--logo img {
  max-width: 180px;
  width: 100%;
  height: auto;
  display: block;
}
.fp-footer__col--partners {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.fp-footer__partner-label {
  font-size: 14px;
  font-weight: 300 !important;
  margin: 0 0 8px !important;
  color: #fff;
}
.fp-footer__partner-logo {
  display: inline-block;
  text-decoration: none;
}
.fp-footer__partner-logo img {
  height: 84px;
  width: auto;
  display: block;
}
.fp-footer__partner:nth-child(2) .fp-footer__partner-logo img {
  height: 140px;
  margin-left: -24px;
}
.fp-footer__col--nav {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.fp-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fp-footer__nav a {
  color: #fff !important;
  font-size: 15px;
  font-weight: 300 !important;
  letter-spacing: .06em;
  text-decoration: none !important;
  transition: opacity var(--fp-t-fast);
}
.fp-footer__nav a:hover { opacity: .65; }
.fp-footer__social {
  display: flex;
  gap: 12px;
  align-items: center;
}
.fp-footer__social a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #000 !important;
  color: #fff !important;
  border-radius: 50% !important;
  border: 0 !important;
  transition: background var(--fp-t-fast);
  text-decoration: none !important;
}
.fp-footer__social a:hover {
  background: #1f2533 !important;
}
.fp-footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
.fp-footer__social-text span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}
.fp-footer__bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.fp-footer__disclaimer {
  font-size: 12px;
  font-weight: 300 !important;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 0 0 14px !important;
}
.fp-footer__copyright {
  font-size: 12px;
  font-weight: 300 !important;
  color: rgba(255,255,255,.7);
  margin: 0 !important;
}
@media (max-width: 900px) {
  .fp-footer__cols { grid-template-columns: 1fr; gap: 36px; }
  .fp-footer { padding: 48px 24px 24px; }
}

/* ==========================================================================
   Two things the trial got wrong (Chase, 7 Aug)
   ==========================================================================
   🚨 The logged-in gap. A `position: fixed` header is placed against the
   VIEWPORT, but the admin bar pushes the DOCUMENT down 32px (46px under 782).
   So the bar sat at 0–120 while the black band started at 152 — a 32px stripe
   that only an editor ever sees, which is why the logged-out check missed it.
   Anything fixed on this site has to carry the same offset.

   The white strip above the footer is .fp-footer's own 80px top margin. On the
   front page the section above it is also white so it never showed; here the
   list sits on #EFEFEF and the margin reads as a band of body background.
   -------------------------------------------------------------------------- */
body.admin-bar #site-elementor-header,
body.admin-bar .aux-elementor-header {
  top: 32px !important;
}
body.admin-bar #site-elementor-header #sticky-header,
body.admin-bar .aux-elementor-header #sticky-header,
body.admin-bar .aux-elementor-header.aux-sticky #sticky-header {
  top: 62px !important;   /* the 30px the header uses, plus the bar */
}

@media screen and (max-width: 782px) {
  body.admin-bar #site-elementor-header,
  body.admin-bar .aux-elementor-header {
    top: 46px !important;
  }
  body.admin-bar #site-elementor-header #sticky-header,
  body.admin-bar .aux-elementor-header #sticky-header,
  body.admin-bar .aux-elementor-header.aux-sticky #sticky-header {
    top: 58px !important;   /* 12px + the bar */
  }
}

.fp-footer {
  margin-top: 0 !important;
}

/* 🚨 Phlox's own sticky spacer. On scroll the theme adds .aux-sticky and grows
   `.aux-sticky-placeholder` from 0 to the header's ORIGINAL height — 156px, the
   value these rules override. Our header is position:fixed in BOTH states, so it
   never occupies flow and the spacer reserves room for nothing: the whole
   document dropped 156px the moment you scrolled past the threshold, which is
   the gap Chase saw.

   ⚠️ /home-2/ has this too and always has — measured 7 Aug: scrolling past ~60px
   moves its content from docTop 0 to 156 and the page from 4608 to 4764 tall.
   It reads as part of the scroll there rather than as a seam, but it is the same
   bug. Fix it in frontpage.css with this same line. */
.aux-sticky-placeholder {
  display: none !important;
}

/* 🚨 The grey bands inside the white bar were NOT my drop-shadow — I removed
   that first and they did not move. They come from an Elementor container the
   header template carries, .has_eae_slider, which spans y 30–90 and has its own
   `box-shadow: rgba(0,0,0,.5) 0 0 10px`. It bleeds ~9px past its own box, which
   is exactly where the bands measured: 21–29 above and 90–98 below. At the top
   of the page the black band hides the lower one; scroll and both show against
   #EFEFEF.

   The front page already strips this — one line in a rule that clears the
   background, border and shadow off every Phlox inner layer so the rounded pill
   shows through. I had copied the block's geometry and not that. Copied whole
   now; it must travel with these rules on rollout. */
.aux-elementor-header #sticky-header,
.aux-elementor-header .e-con-parent,
.aux-elementor-header .e-con-inner,
.aux-elementor-header .e-con,
.aux-elementor-header .aux-wrapper,
.aux-elementor-header .aux-header,
.aux-elementor-header .aux-header-elements-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}