/*
 * Site-wide presentation refinements (November 2026).
 * Loaded after HTML5 UP's main.css and page-specific inline styles so
 * typography and vertical spacing remain consistent on every page.
 * Keep these adjustments small and scoped; do not modify the vendor theme.
 */

/* Standardized, modestly reduced main page titles. */
.page-title {
  font-size: clamp(2.15rem, 3.15vw, 3rem) !important;
  line-height: 1.23;
  letter-spacing: -0.015em;
  margin-top: 0;
}

/* Tighten the oversized gap below pink-underlined section headings. */
#main .inner header.major > :last-child {
  margin-bottom: 0.85em;
  padding-bottom: 0.35em;
}
#main .inner section > header.major {
  margin-bottom: 0.4em;
}

/* Override very generous theme section padding while retaining separation. */
#main > .inner > section {
  padding-top: 3.2em;
  padding-bottom: 2.1em;
}
#main > .inner > section:first-of-type {
  padding-top: 2.5em;
}
#main .inner > section > :last-child {
  margin-bottom: 0;
}

/* Larger site identity on the HOME header without reintroducing About Me h1. */
body.home-page #header .logo strong {
  font-size: 1.5em;
  line-height: 1.4;
}

/* Differentiate the section hierarchy on About Me. */
#awards > header.major h2 {
  font-size: 1.8rem;
}
#awards > .awards-subsection > header.major h3 {
  font-size: 1.35rem;
}
#awards .award-item > h4 {
  font-size: 1.05rem;
  line-height: 1.45;
}
#awards .awards-subsection {
  margin-top: 1.5em;
}
#awards .posts {
  margin-bottom: 1.3em;
}

/* Make the Year column align between both UW–Madison teaching tables. */
#previous-teaching table {
  table-layout: fixed;
  width: 100%;
}
#previous-teaching th:first-child,
#previous-teaching td:first-child {
  width: 142px;
}

/* Teaching feature article sits directly below the NC State role. */
.teaching-feature {
  border-left: 3px solid #f56a6a;
  padding: 0.2em 0 0.3em 1.15em;
  margin: 0.7em 0 1.4em;
}
.teaching-feature h3 {
  margin-bottom: 0.45em;
}
.teaching-feature p {
  margin-bottom: 0.7em;
}

/* Research: bibliographic source and date should read larger than authors. */
body.research-page #publication-list .publication-authors {
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0.25em 0 0.1em;
}
body.research-page #publication-list .publication-detail {
  font-size: 1.04rem;
  line-height: 1.55;
  color: #5b676d;
  margin: 0.2em 0 0.4em;
}
body.research-page #publication-list .publication-advisor {
  font-size: 0.95rem;
  margin: 0.3em 0 0.7em;
}

@media screen and (max-width: 736px) {
  #main > .inner > section {
    padding-top: 2.4em;
    padding-bottom: 1.5em;
  }
  #main > .inner > section:first-of-type {
    padding-top: 1.9em;
  }
  #previous-teaching th:first-child,
  #previous-teaching td:first-child {
    width: 95px;
  }
  body.home-page #header .logo strong {
    font-size: 1.25em;
  }
}


/* =============================================================
   Desktop banner: fixed two-column grid, never width(50%) + margin.
   Old Editorial theme percentages and portrait media rules otherwise
   let images or buttons extend into the adjacent column.
   ============================================================= */
body.home-page #banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  grid-template-areas: "intro portrait";
  align-items: start;
  column-gap: clamp(1.25rem, 2.6vw, 3rem);
  row-gap: 1.5rem;
  width: 100%;
  min-width: 0;
}

body.home-page #banner > .content {
  grid-area: intro;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  flex: none;
  margin: 0;
  overflow-wrap: break-word;
}

body.home-page #banner > .image {
  grid-area: portrait;
  display: block;
  position: relative;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  flex: none;
  align-self: start;
  overflow: hidden;
  border-radius: 0.375rem;
}

body.home-page #banner > .image img {
  position: static;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain;
}

/* The three wide links must wrap *within the text column*. */
body.home-page #banner .content > ul.actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.home-page #banner .content > ul.actions > li {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.home-page #banner .content > ul.actions > li > a.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: auto;
  min-height: 3.4em;
  max-width: 100%;
  line-height: 1.35;
  white-space: normal !important;
  overflow-wrap: anywhere;
  padding: 0.8em 1.25em;
}

/* Stack when the viewport or content area is too narrow for two columns.
   This overrides the original theme's orientation-based image sizing. */
@media screen and (max-width: 1100px) {
  body.home-page #banner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "intro" "portrait";
  }

  body.home-page #banner > .image {
    width: 100% !important;
    max-width: 34rem;
    justify-self: start;
  }
}

/* =============================================================
   Explicit light / dark theme toggle.
   Light remains the default until the visitor changes it.
   ============================================================= */
.theme-switcher {
  display: flex;
  align-items: center;
}

#sidebar > .inner > .theme-switcher {
  margin: 0 0 1.2em 0;
  padding: 0 0 1.2em 0;
  border-bottom: solid 1px rgba(110, 125, 132, 0.24);
}

.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: auto;
  min-height: 2.5rem;
  line-height: 1.3;
  padding: 0.55rem 0.85rem;
  color: #3d4449 !important;
  background: #edf1f2 !important;
  border: 1px solid #c9d1d5;
  border-radius: 0.4rem;
  box-shadow: none !important;
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  background: #e2e8eb !important;
}

.theme-toggle:focus-visible {
  outline: 3px solid #f56a6a;
  outline-offset: 3px;
}

.theme-toggle-symbol {
  font-size: 1.3em;
  line-height: 1;
}

#header .theme-toggle-compact {
  display: inline-flex;
  height: 2.3rem;
  min-height: 0;
  width: 2.3rem;
  padding: 0;
  line-height: 1;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
}

.theme-toggle-compact .theme-toggle-label {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Override vendor theme's bright backgrounds, text, tables and borders. */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #main {
  background: #141c21;
  color: #c9d3d8;
}

html[data-theme="dark"] #sidebar,
html[data-theme="dark"] #sidebar > .inner {
  background: #202b31;
  color: #c9d3d8;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] #menu ul,
html[data-theme="dark"] #menu ul a,
html[data-theme="dark"] table th,
html[data-theme="dark"] table td {
  color: #edf1f3;
}

html[data-theme="dark"] a {
  color: #ff9e9d;
}

html[data-theme="dark"] a:hover {
  color: #ffc1bf;
}

html[data-theme="dark"] #header,
html[data-theme="dark"] #main > .inner > section,
html[data-theme="dark"] #sidebar > .inner > *,
html[data-theme="dark"] hr,
html[data-theme="dark"] table thead,
html[data-theme="dark"] table tbody tr,
html[data-theme="dark"] .posts article::before,
html[data-theme="dark"] .posts article::after {
  border-color: #394950;
}

html[data-theme="dark"] .posts article::before,
html[data-theme="dark"] .posts article::after {
  background-color: #394950;
}

html[data-theme="dark"] header.major > :last-child {
  border-bottom-color: #ec8e91;
}

html[data-theme="dark"] #sidebar .toggle::before {
  color: #c9d3d8;
}

html[data-theme="dark"] .course-card,
html[data-theme="dark"] .teaching-feature,
html[data-theme="dark"] #sidebar .alt {
  background: #1d292e;
  border-color: #405159;
}

html[data-theme="dark"] table tbody tr:nth-child(2n + 1) {
  background-color: rgba(235, 244, 247, 0.055);
}

html[data-theme="dark"] .button,
html[data-theme="dark"] a.button {
  color: #ffaeab !important;
  box-shadow: inset 0 0 0 2px #ec8e91;
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] a.button:hover {
  background: rgba(236, 142, 145, 0.13);
}

html[data-theme="dark"] body.home-page .button,
html[data-theme="dark"] body.home-page a.button {
  background: #536c33 !important;
  border-color: #748d53;
  color: #f9fff4 !important;
  box-shadow: inset 0 0 0 1px #7b9560;
}

html[data-theme="dark"] body.home-page .button:hover {
  background: #648043 !important;
}

html[data-theme="dark"] .theme-toggle {
  color: #eef3f5 !important;
  background: #2d3c44 !important;
  border-color: #60747e;
  box-shadow: none !important;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: #39505a !important;
}

html[data-theme="dark"] #publication-list .publication-authors,
html[data-theme="dark"] #publication-list .publication-authors strong,
html[data-theme="dark"] body.research-page #publication-list .publication-detail,
html[data-theme="dark"] body.research-page #publication-list .publication-advisor,
html[data-theme="dark"] .teaching-subtitle,
html[data-theme="dark"] .teaching-note,
html[data-theme="dark"] .course-term,
html[data-theme="dark"] #footer .copyright {
  color: #bfccd2;
}

html[data-theme="dark"] #publication-list .publication-authors strong {
  color: #f0f5f7;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #243239;
  border-color: #4a5d67;
  color: #f0f5f7;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}

/* Keep the homepage theme button reliably clickable alongside social icons. */
body.home-page #header .icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  position: relative;
  z-index: 5;
}

body.home-page #header .icons li {
  padding: 0;
  flex: 0 0 auto;
}

body.home-page #header .theme-toggle-compact {
  position: relative;
  z-index: 6;
  cursor: pointer;
  touch-action: manipulation;
}

.theme-switcher {
  flex-wrap: wrap;
  gap: 0.6rem;
}

.theme-system-button[aria-pressed="true"] {
  border-color: #556b2f;
  box-shadow: inset 0 0 0 1px #556b2f !important;
}

html[data-theme="dark"] .theme-system-button[aria-pressed="true"] {
  border-color: #99b97a;
  box-shadow: inset 0 0 0 1px #99b97a !important;
}

@media screen and (max-width: 736px) {
  /* HTML5 UP pins the icon list above the header on narrow displays. */
  body.home-page #header .icons {
    position: absolute;
  }
}



/* =============================================================
   Mobile width and appearance refinements (November 2026)
   ============================================================= */

/* All button rows (including the ResearchGate link) may wrap when they
   exceed the page width. Avoid the HTML5 UP nowrap button overflow. */
#main .inner ul.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
  padding-left: 0;
}
#main .inner ul.actions > li {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
#main .inner ul.actions > li > .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 3.2em;
  height: auto;
  padding: 0.7em 1.25em;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
/* Long article titles and DOI links should not widen the viewport. */
#publication-list a,
#publication-list .publication-detail {
  overflow-wrap: anywhere;
}

/* Higher-contrast location captions in dark mode on the homepage. */
html[data-theme="dark"] body.home-page #fieldwork .fieldwork-title {
  color: #edf3f6;
  font-weight: 600;
}

/* Keep mobile appearance controls in normal document flow (rather than
   floating over the homepage's social links or buttons). */
#main > .inner > .mobile-theme-controls {
  display: none;
}

@media screen and (max-width: 736px) {
  #main > .inner > .mobile-theme-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    position: relative;
    z-index: 6;
    max-width: 100%;
    padding: 0.75rem 0 0;
  }

  /* The sidebar theme controls remain in place on desktop, but aren't
     duplicated in the mobile slide-out navigation. */
  #sidebar > .inner > .theme-switcher {
    display: none;
  }

  #main > .inner > .mobile-theme-controls .mobile-theme-toggle {
    width: 2.65rem;
    min-width: 2.65rem;
    min-height: 2.5rem;
    padding: 0.4rem;
  }

  #main > .inner > .mobile-theme-controls .mobile-theme-toggle .theme-toggle-label {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* =============================================================
   Awards: compact, chronological groups with a clear hierarchy.
   ============================================================= */
#awards.awards-organized .awards-intro {
  color: #65747a;
  max-width: 52rem;
  margin-bottom: 1.6em;
}

#awards .awards-group {
  margin: 2em 0 0;
}

#awards .awards-group > h3 {
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 0 0 0.8em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #dce2e5;
}

#awards .award-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

#awards .award-row {
  display: grid;
  grid-template-columns: minmax(5.25rem, 7rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  min-width: 0;
  padding: 0.95rem 1.15rem;
  border-radius: 0.35rem;
  border: 1px solid #e1e6e9;
  background: #f8fafb;
}

#awards .award-year {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #5b6a70;
}

#awards .award-description {
  min-width: 0;
}

#awards .award-description h4 {
  font-size: 1.06rem;
  line-height: 1.4;
  margin: 0 0 0.3em;
}

#awards .award-description p {
  color: #65747a;
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.5;
}

#awards .award-description a {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

/* Service copy remains readable without dense nested card styling. */
.service-group {
  margin-top: 2em;
}

.service-group h2 {
  font-size: 1.4rem;
  margin: 0 0 0.65em;
}

/* The Gallery displays real photographs already kept in /images/. */
.botanical-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.25rem;
  align-items: start;
}

.botanical-gallery .gallery-item {
  margin: 0;
  min-width: 0;
}

.botanical-gallery .gallery-item a {
  display: block;
  border: 0;
  overflow: hidden;
  border-radius: 0.4rem;
}

.botanical-gallery .gallery-item a:focus-visible {
  outline: 3px solid #f56a6a;
  outline-offset: 3px;
}

.botanical-gallery .gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

.botanical-gallery .gallery-item figcaption {
  color: #4d5e65;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0.55rem 0 0;
}

/* Dark-mode contrast matches the rest of the website. */
html[data-theme="dark"] #awards .awards-intro,
html[data-theme="dark"] #awards .award-description p,
html[data-theme="dark"] #awards .award-year,
html[data-theme="dark"] .botanical-gallery .gallery-item figcaption {
  color: #c7d5dc;
}

html[data-theme="dark"] #awards .award-row {
  background: #1d292e;
  border-color: #3d4d55;
}

html[data-theme="dark"] #awards .awards-group > h3 {
  border-bottom-color: #42545e;
}

@media screen and (max-width: 480px) {
  #awards .award-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
  }
  .botanical-gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1rem;
  }
}