/* ========================================
   Custom Styles for YizhengZhen.github.io
   Theme: Chirpy
   ======================================== */

/* ========== SIDEBAR ========== */

/* Center avatar */
#sidebar #avatar {
  display: block;
  margin: 0 auto;
}

#sidebar #avatar img {
  display: block;
  margin: 0 auto;
}

/* Sidebar bottom - center icons and remove the dot */
#sidebar .sidebar-bottom {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0.4rem;
}

#sidebar .icon-border {
  display: none !important;
}

/* ---------- Topbar: push mode-toggle + search to the far right ---------- */
#topbar {
  justify-content: flex-start !important;
}

#topbar .mode-toggle {
  margin-left: auto;
}

/* ========== RESEARCH FOCUS CARDS ========== */

/* Redesign: use subtle bordered panels with icon on top */
#index-page .research-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

#index-page .research-card {
  background: var(--card-bg);
  border: 1px solid var(--main-border-color);
  border-radius: 10px;
  padding: 0.9rem 1.1rem 0.9rem;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

#index-page .research-card:hover {
  box-shadow: var(--card-shadow);
  transform: translateY(-3px);
}

/* Icon + title on the same line */
#index-page .research-card .card-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

#index-page .research-card .card-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

#index-page .research-card h5 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 !important;
  padding-top: 0 !important;
  color: var(--heading-color, var(--text-color));
}

/* Override Chirpy's %anchor pseudo-element on h5 inside cards */
#index-page .research-card h5::before,
#index-page .research-card h5 .anchor {
  display: none !important;
}

#index-page .research-card ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

#index-page .research-card ul li {
  font-size: 0.88rem;
  color: var(--text-muted-color);
  opacity: 0.65;
  line-height: 1.6;
  padding: 0.1rem 0;
  position: relative;
  padding-left: 1rem;
}

#index-page .research-card ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--text-muted-color);
  opacity: 0.5;
}

/* ========== RECENT UPDATES ========== */

#index-page .recent-updates {
  list-style: none;
  padding-left: 0;
}

#index-page .recent-updates li {
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--main-border-color);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

#index-page .recent-updates li:last-child {
  border-bottom: none;
}

#index-page .recent-updates .update-year {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 2.8rem;
  flex-shrink: 0;
  color: var(--text-muted-color);
  letter-spacing: 0.02em;
}

#index-page .recent-updates .update-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  margin-right: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#index-page .recent-updates .update-badge.paper {
  background: #3273dc;
  color: #fff;
}

#index-page .recent-updates .update-badge.preprint {
  background: #f0ad4e;
  color: #fff;
}

#index-page .recent-updates .update-badge.repos {
  background: #20b2aa;
  color: #fff;
}

#index-page .recent-updates .update-badge.talk {
  background: #5cb85c;
  color: #fff;
}

#index-page .recent-updates .update-badge.award {
  background: #9b59b6;
  color: #fff;
}

#index-page .recent-updates .update-badge.position {
  background: #1a2a3a;
  color: #fff;
}

#index-page .recent-updates .update-badge.news {
  background: #868e96;
  color: #fff;
}

#index-page .recent-updates .update-link {
  font-size: 0.8rem;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.paper-card-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.paper-card {
  background: var(--card-bg);
  border: 1px solid var(--main-border-color);
  border-radius: 18px;
  padding: 1.15rem 1.2rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);
}

.paper-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.paper-card-header > div:first-child {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.paper-card-title {
  font-weight: 700;
  line-height: 1.45;
  min-width: 0;
}

.paper-card-details summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem 0.65rem;
  align-items: start;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.paper-card-details summary::-webkit-details-marker {
  display: none;
}

.paper-card-summary-top,
.paper-card-summary-title-row {
  grid-column: 1 / -1;
}

.paper-card-summary-top {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.paper-card-summary-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.paper-card-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 1rem;
  flex-shrink: 0;
}

.paper-card-summary-icon,
.work-card-icon {
  align-self: start;
}

.paper-card-summary-details-trigger {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--link-color);
  font-weight: 600;
}

.paper-card-summary-action {
  display: contents;
}

.paper-card-summary-triangle {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  justify-content: center;
  align-items: center;
  font-size: 0.95rem;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  color: var(--link-color);
}

.paper-card-summary-title,
.work-card-title strong {
  display: block;
  white-space: normal;
  word-break: break-word;
}

.paper-card-details[open] .paper-card-summary-triangle {
  transform: rotate(90deg);
}

.work-card-list,
.talk-card-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.work-card,
.talk-card,
.paper-card {
  background: var(--card-bg);
  border: 1px solid var(--main-border-color);
  border-radius: 18px;
  padding: 1.15rem 1.2rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);
}

.work-card-header {
  margin-bottom: 0.75rem;
}

.work-card-title,
.paper-card-summary-title {
  font-weight: 700;
  line-height: 1.45;
  min-width: 0;
  word-break: break-word;
}

.work-card-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.work-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 1rem;
  flex-shrink: 0;
}

.work-card-title strong {
  min-width: 0;
}

.work-card-link {
  font-weight: 600;
  color: var(--link-color);
  white-space: nowrap;
}

.work-card-body,
.paper-card-body {
  margin-top: 0.5rem;
}

.paper-card-summary-title {
  display: inline-block;
  min-width: 0;
}

.paper-card-summary-link {
  white-space: nowrap;
  font-weight: 600;
  color: var(--link-color);
}

.work-card-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 0.85rem;
  align-items: start;
}

.work-card-meta dt {
  font-weight: 700;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.work-card-meta dd {
  margin: 0;
  padding: 0;
}

.work-card-body p,
.paper-card-body p {
  margin: 0.75rem 0 0;
  line-height: 1.65;
}

.paper-card-summary-tags {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.publication-gap {
  height: 1.5rem;
}

.talk-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.talk-card-index {
  min-width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--main-border-color);
  color: var(--text-color);
  font-weight: 700;
}

.talk-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.talk-card-title {
  font-weight: 700;
  line-height: 1.4;
}

.talk-card-description {
  color: var(--text-muted-color);
}

.talk-card-links,
.talk-card-links a {
  color: var(--link-color);
}

/* ========== LINKS ========== */

.paper-card-details ul {
  margin: 0.85rem 0 0 0;
  padding-left: 1.25rem;
}

.paper-card-details li {
  margin-bottom: 0.55rem;
  line-height: 1.7;
}

.paper-card-details a {
  color: var(--link-color);
}

/* ========== LINKS ========== */

#index-page .links-list {
  list-style: none;
  padding-left: 0;
}

#index-page .links-list li {
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

#index-page .links-list li a {
  font-weight: 500;
}

/* ========================================
   TYPOGRAPHY & READABILITY
   ======================================== */

/* ---------- Global font size & line-height ---------- */
body {
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Target main content area explicitly (Chirpy overrides body font in its SCSS) */
#main-content,
#main-content p,
#main-content li,
#main-content td,
#main-content .content {
  font-size: 1.05rem;
  line-height: 1.78;
}

/* ---------- Headings: slightly bolder ---------- */
h2 {
  font-weight: 650;
}
h3 {
  font-weight: 600;
}

/* ---------- Sidebar: name & nav items ---------- */
#sidebar .site-title a {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}

#sidebar .nav-link {
  font-size: 1rem !important;
  font-weight: 500;
}

/* ---------- Dark mode: improve contrast ---------- */
html[data-mode='dark'] {
  --text-color: #c8c9ca;
  --text-muted-color: #a0a2a5;
  --heading-color: #dde0e4;
}

/* Dark mode links: slightly brighter */
html[data-mode='dark'] a {
  color: #5ea8d8;
}

html[data-mode='dark'] a:hover {
  color: #7dbde8;
}

/* ---------- Light mode: slightly deeper muted text ---------- */
html:not([data-mode='dark']) {
  --text-muted-color: #5a6270;
}

/* Links in light mode: add weight for readability */
html:not([data-mode='dark']) a {
  font-weight: 500;
}

/* ========== WORKS PAGE - PAPER LABELS ========== */

.paper-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 5px;
  text-transform: capitalize;
  white-space: nowrap;
}

.label-theory {
  background: #bbdefb;
  color: #1565c0;
}

.label-exp {
  background: #ffe0b2;
  color: #e65100;
}

.label-collab {
  background: #e1bee7;
  color: #7b1fa2;
}

/* Dark mode adjustments for labels */
html[data-mode='dark'] .label-theory {
  background: #1e3a5f;
  color: #90caf9;
}

html[data-mode='dark'] .label-exp {
  background: #5f3a1e;
  color: #ffb74d;
}

html[data-mode='dark'] .label-collab {
  background: #4a2a5f;
  color: #ce93d8;
}