/* Theme color */
:root {
  --tsinghua-purple: #671372;
}

/* Global font and text */
body {
  font-family: "Lora", serif;
  font-size: 14pt;
  line-height: 1.3;
  color: #222;
}

/* Paper meta (smaller text under title) */
.paper-meta {
  font-size: 0.9em;
  color: #444;
  margin-top: 4px;
}

/* Desktop photo size */

.profile-photo {
  width: 80%;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Lora", serif;
}

h1 {
  font-size: 1.9rem;
  margin-bottom: 1rem;
}

/* Section titles (fix spacing issue here) */
h2,
h2.anchored {
  font-size: 16pt;
  font-weight: bold;
  color: var(--tsinghua-purple);

  border-bottom: none !important;
  padding-bottom: 0 !important;

  margin-top: 30px !important;     /* KEY FIX */
  margin-bottom: 10px !important;   /* tighten below */
}

/* Reduce space after text blocks (THIS is the real cause of gap) */
p,
ul,
ol {
  margin-bottom: 20px;
}

/* Reduce space after h2 before content */
h2 + *,
h2.anchored + * {
  margin-top: 1px !important;
}

/* Remove Quarto title block lines */
.quarto-title-block,
.quarto-title-block .quarto-title h1 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.5rem;
}

/* Navbar (clean white style) */
.navbar {
  background-color: white !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Navbar text */
.navbar .nav-link,
.navbar .navbar-title {
  font-size: 14pt;
  color: #222 !important;
}

/* Navbar brand */
.navbar-brand,
.navbar-brand span,
.navbar-brand-container a {
  color: #222 !important;
}

/* Navbar hover */
.navbar .nav-link:hover {
  color: var(--tsinghua-purple) !important;
}

/* Search icon */
#quarto-search,
#quarto-search svg {
  color: #222 !important;
  fill: #222 !important;
}

/* Navbar logo */
.navbar-brand img {
  height: 45px;
  max-height: none;
}

/* Photo and icons layout */
.icon-wrapper {
  display: flex;
  justify-content: center;
}

.icon-wrapper .social-icons {
  width: 80%;
}

/* Social icons */
.social-icons {
  margin-top: 8px;
  display: flex !important;
  justify-content: left;
  align-items: center;
}

.social-icons a {
  margin: 0 12.5px;
  text-decoration: none !important;
}

.social-icons i {
  font-size: 2.1em !important;
  color: #555;
  transition: color 0.2s ease;
}

.social-icons a:hover i {
  color: var(--tsinghua-purple);
}

/* =========================
   Mobile optimization
========================= */
@media (max-width: 768px) {

  /* Stack columns vertically */
  .columns {
    display: block !important;
  }

  .column,
  .left-col {
    width: 100% !important;
    max-width: 100% !important;

    /* Remove side padding that narrows photo */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make photo container truly full width */
  .photo-wrapper,
  .photo-wrapper p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Full-width profile photo */
  .profile-photo {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
  }

  /* Center social icons */
  .social-icons {
    justify-content: center !important;
    margin-top: 12px;
    margin-bottom: 20px;
  }

  /* Slightly smaller navbar text on mobile */
  .navbar .nav-link,
  .navbar .navbar-title {
    font-size: 12pt !important;
  }

  /* Content spacing */
  main.content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Slightly tighter mobile typography */
  body {
    font-size: 13pt;
    line-height: 1.35;
  }
}