/* css styles */
.profile-pic {
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: 50%;
}

/* Column space */
.columns .column {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.profile-columns > .column {
  padding-top: 0.1rem;
  padding-left: 0rem;
  padding-right: 0rem;
}

/* ---- Global font ---- */
html, body, 
.page-columns, .content, .quarto-title-block, .navbar,
p, li, ul, ol, a, span, div,
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif !important;
}
html, body {
  font-size: 17.5px;   /* try 16 instead of 18 */
}

body {
  background-color:  #fafafa; /* warm white outside */
}

main {
  background-color: #fcfbf8; /* almost white*/
  background-color: #fbf8f1;  /* light earth note*/
  background-color: #f7f8f4; /* super light green*/
  background-color: #f1f3e8; /* bit stronger green*/
  background-color: #e9edd6; /* bit warmer greener*/
  background-color: #ecefdc; /* bit warmer greener*/
  border-radius: 11px;
  padding: 1.5rem;
  box-shadow: 0 16px 55px rgba(0,0,0,0.31);
}

/* ---- Profile name and picture ---- */
.profile-col {
  text-align: center;
  /* background-color: #fbfcfe; */
  padding: 2.5rem 1.5rem;
  border-radius: 6px;
  height: 98%;
}

.profile-name {
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 0.8rem;
}

.profile-title {
  font-size: 1.1rem;
  color: #777;
  text-align: center;
  margin-top: -0.7rem;
}

/* Center the whole navbar content (brand + links) like in the Lusi Xie example */
.navbar .container,
.navbar .container-fluid,
.navbar .navbar-container {
  max-width: 1100px;         /* adjust to taste */
  margin-left: auto;
  margin-right: auto;
}

/* Optional: make the brand a bit less "stuck" to the edge */
.navbar-brand {
  margin-right: 2rem;
}


.edu-item{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1rem 0 1.25rem 0;
}



/* If your theme uses extra padding, normalize it a bit */
.navbar {
  padding-left: 0;
  padding-right: 0;
}

/* Align right column with top of image */
.bio-right {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* Remove top margin from first heading in that column */
.bio-right h2:first-child,
.bio-right h3:first-child {
  margin-top: 0 !important;
}

/* Sometimes Quarto wraps content */
.bio-right > *:first-child {
  margin-top: 0 !important;
}

/* --- Load Bootstrap Icons --- */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* --- Center the navbar menu items --- */
.navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

/* Keep brand from hogging the left spacing */
.navbar .navbar-brand {
  margin-right: 1.5rem;
}

/* --- Icons under your name --- */
.profile-links {
  margin-top: -0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  font-size: 1.2rem;
}

/* Make all icons behave the same */
.profile-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: blue;
  color: rgb(68,137,183);
}

.profile-links a:hover {
  transform: translateY(-2px);
  opacity: 0.55;
}

/* ORCID image tuning */
.orcid-icon {
  width: 30px;
  height: 30px;
  display: block;
}

.edu-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.2rem;
}

.edu-item i {
  font-size: 1.35rem;
  margin-top: 0.1rem;
  color: #444;
}

.edu-degree {
  font-size: 1.05rem;
}

.edu-school {
  color: #777;
  font-size: 0.95rem;
}

/* Research interests list spacing */
ul li {
  margin-bottom: 0.5rem;
}

h2 {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 0.5rem;
  margin-bottom: 1.4rem;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.pub-title {
}

.pub-description {
  color: #666;
  margin-top: -0.7rem;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
}


/* =========================
   Mobile: force one-column
   ========================= */
/* =========================
   Mobile: force one-column
   ========================= */
@media (max-width: 768px) {

  /* --- Mobile dark theme --- */
  html, body {
    background-color: #222222;
    color: #f2f2f2;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kill Quarto layout padding (this is usually the culprit) */
  #quarto-content,
  .page-columns,
  .page-columns .content,
  .page-columns .sidebar,
  .quarto-container,
  .container,
  .container-fluid,
  .content-block {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* main area: remove the "card" look on mobile */
  main,
  main.content,
  main#quarto-content {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* All columns stack */
  .columns {
    display: block !important;
  }

  .columns .column {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 2rem;
  }

  /* Center profile block */
  .profile-col,
  .bio-right {
    max-width: 650px;
    margin: 0 auto !important;
    background-color: transparent !important;
  }

  /* Smaller portrait */
  .profile-pic {
    width: 185px !important;
    height: 185px !important;
  }

  /* Titles */
  .profile-name {
    font-size: 1.6rem !important;
  }

  .profile-title {
    font-size: 1.05rem !important;
  }

  /* Headings */
  h1, h2, h3 {
    color: #ffffff !important;
  }

  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.15rem; }

  /* Links */
  a {
    color: #6CB2DE !important;
  }

  /* Publications */
  .pub-title {
    color: #ffffff !important;
  }

  .pub-description {
    color: #cccccc !important;
    font-size: 0.95rem;
  }

  /* Navbar if present */
  .navbar {
    background-color: #121212 !important;
    border-bottom: 1px solid #333;
  }
}