/* User Provided Stylesheet */

.myst-fm-downloads-dropdown {
  display: none !important;
}

table td:first-child,
table th:first-child {
  white-space: nowrap;
}

#giscus-comments {
  max-width: 100% !important;
  padding: 0 !important;
}

.giscus,
.giscus-frame {
  width: 100% !important;
}

#featured-projects + .myst-grid .myst-card-footer,
#featured-projects + .myst-grid .myst-card-title,
.sponsors-grid .myst-card-footer,
.sponsors-grid .myst-card-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  text-align: center !important;
  white-space: nowrap;
}

#featured-projects + .myst-grid .myst-card-footer {
  flex-direction: column;
  white-space: normal;
}

#featured-projects + .myst-grid .myst-card-footer img {
  height: 20px;
  vertical-align: middle;
  margin: 2px 2px 0 2px;
}

#featured-projects + .myst-grid .myst-card-footer > *,
#featured-projects + .myst-grid .myst-card-title > *,
.sponsors-grid .myst-card-footer > *,
.sponsors-grid .myst-card-title > * {
  text-align: center !important;
}

#featured-projects + .myst-grid .myst-card-footer p,
#featured-projects + .myst-grid .myst-card-footer strong,
.sponsors-grid .myst-card-footer p,
.sponsors-grid .myst-card-footer strong {
  margin: 0 auto;
}

.sponsors-grid .myst-card-body,
#featured-projects + .myst-grid .myst-card-body {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sponsors-grid .myst-card-body img,
#featured-projects + .myst-grid .myst-card-body img {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

#posts ~ .myst-grid .myst-card-header,
#posts ~ * .myst-grid .myst-card-header {
  padding: 0.5rem !important;
  border-bottom: none !important;
  background: transparent !important;
}

#posts ~ .myst-grid .myst-card-header img,
#posts ~ * .myst-grid .myst-card-header img {
  display: block;
  width: 100%;
  margin: 0 !important;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}

/* Homepage headshot */
img.rounded,
.rounded img {
  border-radius: 12px;
}

/* ---------------------------------------------------------------
   Single sticky top bar: "Shao Lab" left, section links right,
   search icon far right - all on one vertically centred row.
   Below xl (1280px) the theme's hamburger menu is left untouched.
   --------------------------------------------------------------- */
@media (min-width: 1280px) {
  .myst-primary-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 64px !important;          /* matches .myst-top-nav */
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 31 !important;           /* above the top bar */
    pointer-events: none !important;  /* let clicks reach the bar beneath */
  }
  .myst-primary-sidebar-pointer {
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    pointer-events: none !important;
  }
  .myst-primary-sidebar-nav {
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .myst-primary-sidebar-toc {
    max-width: none !important;
    overflow: visible !important;
    margin: 0 !important;
    height: auto !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .myst-toc {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 1.4rem;
    width: 100% !important;
    padding: 0 4rem 0 1.5rem !important;  /* right gap leaves room for search */
    pointer-events: none;   /* only the links themselves capture clicks */
  }
  .myst-toc a {
    display: inline-block !important;
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    pointer-events: auto;
  }
  main.article-grid { padding-top: 0 !important; }
}

/* Search reduced to a magnifying-glass icon; theme toggle hidden */
.myst-search-bar {
  display: inline-flex !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.35rem !important;
  width: auto !important;
  min-width: 0 !important;
}
.myst-search-text-placeholder,
.myst-search-shortcut {
  display: none !important;
}
.myst-theme-button {
  display: none !important;
}

/* ---------------------------------------------------------------
   One fixed-width, centred container shared by the top bar and the
   page content, so the logo and search icon always line up with the
   left and right edges of the body text at any window width.
   --------------------------------------------------------------- */
:root { --shao-container: 1170px; }

@media (min-width: 1280px) {
  /* Top bar: logo left, links right, search far right, inside the container */
  .myst-top-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .myst-top-nav-bar {
    max-width: var(--shao-container);
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .myst-home-link { margin-left: 0 !important; }

  .myst-toc {
    max-width: var(--shao-container);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 3.25rem 0 0 !important;   /* clears the search icon */
  }

  /* Content: use the full page column, then centre it at the same width */
  main.article-grid > article > *:not(.col-screen):not(.col-page):not(.col-page-right) {
    grid-column: page !important;
    width: 100% !important;   /* the title block sizes to content without this */
    max-width: var(--shao-container);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The footer otherwise stays in the old narrow body column. */
  footer.article > * {
    grid-column: page !important;
    width: 100% !important;
    max-width: var(--shao-container);
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Portrait is sized as a percentage of its column, so cap it now that
   the content column is full page width. */
img.rounded,
.rounded img {
  max-width: 360px;
}

/* The per-page CONTENTS outline lived in the right margin that the
   full-width content column now occupies, so it overlapped the text.
   Hidden: navigation is the top bar, and the pages are short. */
.myst-outline {
  display: none !important;
}

/* ---------------------------------------------------------------
   Homepage hero: the title block sits over a full-bleed photo with a
   dark scrim, in the manner of the Ecoclimate Lab site. Scoped with
   :has() to the page that carries the hero image.
   --------------------------------------------------------------- */
article:has(img.home-hero-bg) {
  position: relative;
}
main.article-grid > article:has(img.home-hero-bg) > img.home-hero-bg.home-hero-bg {
  position: absolute !important;
  top: 0;
  left: 0;
  grid-column: screen !important;
  width: 100% !important;
  max-width: none !important;
  height: 360px;
  object-fit: cover;
  object-position: center 60%;
  margin: 0 !important;
  z-index: 0;
  border-radius: 0 !important;
}
main.article-grid > article:has(img.home-hero-bg) > .myst-fm-block.myst-fm-block {
  position: relative;
  z-index: 1;
  grid-column: screen !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 2.75rem !important;
  padding-top: 0 !important;
  padding-inline: max(1.5rem, calc((100% - var(--shao-container)) / 2)) !important;
  /* scrim keeps white text legible over the bright left side of the photo */
  background: linear-gradient(90deg, rgba(8, 20, 14, 0.66) 0%, rgba(8, 20, 14, 0.5) 55%, rgba(8, 20, 14, 0.38) 100%);
}
article:has(img.home-hero-bg) .myst-fm-block h1,
article:has(img.home-hero-bg) .myst-fm-block p,
article:has(img.home-hero-bg) .myst-fm-block a {
  color: #ffffff !important;
}
article:has(img.home-hero-bg) .myst-fm-block h1 {
  font-size: 3rem;
  margin-bottom: 0.4rem;
}
article:has(img.home-hero-bg) .myst-fm-block .myst-fm-block-subtitle {
  font-size: 1.25rem;
  opacity: 0.95;
}
/* the author/affiliation strip is redundant inside the hero */
article:has(img.home-hero-bg) .myst-fm-authors-affiliations,
article:has(img.home-hero-bg) .myst-fm-block-header {
  display: none !important;
}
@media (max-width: 767px) {
  main.article-grid > article:has(img.home-hero-bg) > img.home-hero-bg.home-hero-bg { height: 240px; }
  main.article-grid > article:has(img.home-hero-bg) > .myst-fm-block.myst-fm-block { min-height: 240px; }
  article:has(img.home-hero-bg) .myst-fm-block h1 { font-size: 2rem; }
}

/* MyST turns every doi.org link into a citation and appends an auto-generated
   "References" list. It duplicates the publication list above it, and renders
   the Chinese-language titles and some author names incorrectly. */
.myst-bibliography {
  display: none !important;
}

/* Research-area figures: keep the three panels visually comparable
   despite different native aspect ratios, and never let the portrait
   ERW schematic tower over the text beside it. */
img.research-fig,
.research-fig img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
}