/* ============================================

   Luka Homepage

   Warm minimal academic homepage template

   ============================================ */



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

}



body.theme-luka,

body.theme-luka *,

body.theme-luka *::before,

body.theme-luka *::after {

  box-sizing: border-box;

}



:root {

  --luka-bg: #faf9f7;

  --luka-text: #3d3929;

  --luka-accent: #c2714f;

  --luka-secondary: #8c8577;

  --luka-border: rgba(194, 113, 79, 0.2);

  --luka-shadow: rgba(194, 113, 79, 0.15);

  --luka-social-bg: #ffffff;

  --luka-social-text: #8b7355;

  --luka-footer-border: rgba(194, 113, 79, 0.15);

}



@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --luka-bg: #1a1917;

    --luka-text: #d1cec7;

    --luka-accent: #e28a67;

    --luka-secondary: #9b9488;

    --luka-border: rgba(226, 138, 103, 0.2);

    --luka-shadow: rgba(0, 0, 0, 0.3);

    --luka-social-bg: #22211e;

    --luka-social-text: #d1cec7;

    --luka-footer-border: rgba(226, 138, 103, 0.15);

  }

}



[data-theme="dark"] {

  --luka-bg: #1a1917;

  --luka-text: #d1cec7;

  --luka-accent: #e28a67;

  --luka-secondary: #9b9488;

  --luka-border: rgba(226, 138, 103, 0.2);

  --luka-shadow: rgba(0, 0, 0, 0.3);

  --luka-social-bg: #22211e;

  --luka-social-text: #d1cec7;

  --luka-footer-border: rgba(226, 138, 103, 0.15);

}



[data-theme="light"] {

  --luka-bg: #faf9f7;

  --luka-text: #3d3929;

  --luka-accent: #c2714f;

  --luka-secondary: #8c8577;

  --luka-border: rgba(194, 113, 79, 0.2);

  --luka-shadow: rgba(194, 113, 79, 0.15);

  --luka-social-bg: #ffffff;

  --luka-social-text: #8b7355;

  --luka-footer-border: rgba(194, 113, 79, 0.15);

}



body.theme-luka {

  background: var(--luka-bg);

  color: var(--luka-text);

  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  font-size: 16px;

  line-height: 1.65;

  transition: background-color 0.3s ease, color 0.3s ease;

}



body.theme-luka a {

  color: var(--luka-accent);

  text-decoration: none;

}



body.theme-luka a:hover {

  filter: brightness(1.15);

}



body.theme-luka .top-nav {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: 60px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: var(--luka-bg);

  border-bottom: 1px solid var(--luka-footer-border);

  z-index: 1000;

}



body.theme-luka .nav-container {

  width: 100%;

  max-width: 1120px;

  padding: 0 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



body.theme-luka .nav-left a {

  color: var(--luka-text);

  font-size: 18px;

  font-weight: 600;

}



body.theme-luka .theme-toggle {

  border: none;

  background: transparent;

  color: var(--luka-text);

  width: 40px;

  height: 40px;

  border-radius: 999px;

  cursor: pointer;

  font-size: 18px;

  transition: background-color 0.2s ease, color 0.2s ease;

}



body.theme-luka .theme-toggle:hover {

  background: var(--luka-border);

  color: var(--luka-accent);

}



body.theme-luka .wrapper {

  width: 100%;

  max-width: 1120px;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  min-height: 100vh;

}



body.theme-luka .sidebar {

  width: 320px;

  flex-shrink: 0;

  position: fixed;

  top: 60px;

  left: calc(50% - 560px);

  height: calc(100vh - 60px);

  overflow-y: auto;

  text-align: center;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

  padding-top: 60px;

  z-index: 100;

}



body.theme-luka .profile-card {

  width: 100%;

  padding: 0 20px;

  text-align: center;

}



body.theme-luka .image.avatar {

  display: block;

  margin: 0 auto 28px;

}



body.theme-luka .image.avatar img {

  width: 220px;

  height: 220px;

  border-radius: 50%;

  object-fit: cover;

  box-shadow: 0 6px 24px var(--luka-shadow);

}



body.theme-luka .site-name {

  margin: 0 0 8px;

  color: var(--luka-text);

  font-size: 28px;

  line-height: 1.2;

}



body.theme-luka .site-email {

  margin: 0 0 24px;

  color: var(--luka-secondary);

  font-size: 13px;

  font-family: "Ubuntu Mono", "SFMono-Regular", monospace;

  word-break: break-all;

}



body.theme-luka .social-icons {

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

}



body.theme-luka .social-icons a {

  width: 45px;

  height: 45px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--luka-social-bg);

  color: var(--luka-social-text) !important;

  box-shadow: 0 2px 8px rgba(61, 57, 41, 0.08);

  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;

}



body.theme-luka .social-icons a:hover {

  background: var(--luka-accent);

  color: #fff !important;

  transform: translateY(-2px);

}



body.theme-luka .visitor-card {

  margin: 40px auto 0;

  width: 300px;

  padding: 18px 16px;

  border: 1px dashed var(--luka-border);

  border-radius: 14px;

  color: var(--luka-secondary);

  text-align: left;

}



body.theme-luka .visitor-card-title {

  margin-bottom: 8px;

  font-size: 13px;

  font-weight: 600;

  color: var(--luka-accent);

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



body.theme-luka .visitor-card-body {

  font-size: 13px;

  line-height: 1.6;

}



body.theme-luka .content {

  flex: 1;

  min-width: 0;

  margin-left: 320px;

  padding: 120px 40px 80px 60px;

}



body.theme-luka .section {

  margin-bottom: 44px;

  opacity: 0;

  transform: translateY(12px);

  transition: opacity 0.45s ease, transform 0.45s ease;

  scroll-margin-top: 80px;

}



body.theme-luka .section.visible {

  opacity: 1;

  transform: translateY(0);

}



body.theme-luka .section-title {

  display: inline-block;

  margin: 0 0 18px;

  padding-bottom: 10px;

  border-bottom: 2px solid var(--luka-accent);

  color: var(--luka-accent);

  font-size: 19px;

  font-weight: 600;

}



body.theme-luka .section-body p {

  margin: 0 0 14px;

}



body.theme-luka .card {

  background: transparent;

  padding: 0;

  box-shadow: none;

}





body.theme-luka #education .card {

  margin-bottom: 36px; 

}





body.theme-luka #education .card:last-child {

  margin-bottom: 0; 

}



body.theme-luka .timeline-item {

  position: relative;

  margin-left: 20px;

  padding-left: 8px;

  padding-bottom: 20px;

}



body.theme-luka .timeline-item::before {

  content: "";

  position: absolute;

  left: -20px;

  top: 0;

  bottom: 0;

  width: 2px;

  background: linear-gradient(to bottom, var(--luka-accent), rgba(194, 113, 79, 0.12));

}



body.theme-luka .timeline-item:last-child::before {

  bottom: 30%;

}



body.theme-luka .timeline-item::after {

  content: "";

  position: absolute;

  left: -24px;

  top: 45px;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--luka-accent);

  border: 2px solid var(--luka-bg);

}



body.theme-luka .experience-item {

  display: flex;

  align-items: center;

  gap: 24px;

}



body.theme-luka .institution-logo {

  width: 100px;

  height: 100px;

  flex-shrink: 0;

   object-fit: contain;



}



body.theme-luka .experience-content {

  flex: 1;

}



body.theme-luka .experience-content p {

  margin: 0 0 2px;

}



body.theme-luka .exp-title {

  font-size: 15px;

  color: var(--luka-text);

}



body.theme-luka .exp-detail {

  font-size: 14px;

  color: var(--luka-secondary);

}



body.theme-luka .exp-period {

  font-size: 13px;

  color: var(--luka-accent);

  font-weight: 500;

}



body.theme-luka .project-card {

  font-size: 15px;

  line-height: 1.7;

}



body.theme-luka .publications ol.bibliography {

  list-style: none;

  padding: 0;

  margin: 0;

}



body.theme-luka .publications ol.bibliography li {

  margin-bottom: 14px;

  padding: 15px 0 15px 16px;

  border-left: 3px solid var(--luka-accent);

}



body.theme-luka .pub-content .title {

  margin-bottom: 4px;

  color: var(--luka-text);

  font-size: 15px;

  font-weight: 600;

}



body.theme-luka .pub-content .author {

  margin-bottom: 4px;

  color: var(--luka-secondary);

  font-size: 14px;

}



body.theme-luka .pub-content .periodical {

  margin-bottom: 6px;

  color: var(--luka-accent);

  font-size: 14px;

}



body.theme-luka .pub-content .links a {

  font-size: 13px;

  font-weight: 500;

}



body.theme-luka .awards-grid {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



body.theme-luka .award-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 4px 0;

}



body.theme-luka .award-icon {

  flex-shrink: 0;

  font-size: 20px;

}



body.theme-luka .award-text {

  color: var(--luka-text);

  font-size: 14px;

}



body.theme-luka .site-footer {

  width: 100%;

  flex-basis: 100%;

  padding: 32px 24px 40px 380px;

  text-align: center;

}



body.theme-luka .site-footer p {

  margin: 0;

  padding-top: 20px;

  border-top: 1px solid var(--luka-footer-border);

  color: var(--luka-secondary);

  font-size: 13px;

}



body.theme-luka .template-credit {

  display: inline-block;

  margin-top: 8px;

  font-size: 12px;

}



body.theme-luka h1,

body.theme-luka h2,

body.theme-luka h3,

body.theme-luka h4,

body.theme-luka strong {

  color: var(--luka-text);

}



  





body.theme-luka .menu-toggle {

  display: none !important; 

}



@media (max-width: 1080px) {

  body.theme-luka .nav-container {

    padding: 0 20px;

  }



  body.theme-luka .wrapper {

    flex-direction: column;

    padding: 0 20px;

  }



  body.theme-luka .sidebar {

    position: static;

    left: auto;

    width: 100%;

    height: auto;

    padding-top: 80px;

    overflow: visible;

  }



  body.theme-luka .profile-card {

    padding: 0;

  }





  body.theme-luka .visitor-card {

    width: 100%;       

    max-width: 500px;  

  }



  body.theme-luka .content {

    margin-left: 0;

    padding: 32px 0 48px;

  }



  body.theme-luka .site-footer {

    padding: 32px 0;

  }



  body.theme-luka .site-footer p {

    padding-top: 0;

    border-top: 1px solid var(--luka-footer-border);

  }

}



/* ============================================================
   导航栏终极修复方案（Desktop + Mobile）
   ============================================================ */

/* 1. 电脑端逻辑：显示横向菜单，隐藏三道杠 */
body.theme-luka .menu-toggle {
  display: none !important; 
}

body.theme-luka .nav-menu {
  display: flex !important;
  gap: 25px;
  align-items: center;
}

body.theme-luka .nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.theme-luka .nav-menu a {
    /* 强制使用正常页面字体颜色，覆盖默认的链接橘红色 */
    color: var(--luka-text) !important; 
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s ease;
}

body.theme-luka .nav-menu a:hover {
    /* 悬停时变为橘红色 */
    color: var(--luka-accent) !important;
    filter: none;
}

/* 2. 移动端逻辑 (屏幕宽度 <= 820px) */
@media (max-width: 820px) {
  
  /* 强制横向菜单消失 */
  body.theme-luka .nav-menu {
    display: none !important;
    flex-direction: column !important;
    gap:5px !important;
    position: absolute !important;
    top: 55px !important;
    right: 10px !important;
    width: 120px !important;
    background: var(--luka-bg) !important;
    padding: 0 !important;
    border: 1px solid var(--luka-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px var(--luka-shadow) !important;
    z-index: 2000 !important;
    overflow: hidden !important;
  }

  /* 点击后激活小面板 */
  body.theme-luka .nav-menu.active {
    display: flex !important;
    animation: fadeInDown 0.2s ease-out;
  }
  
    

  /* 菜单选项：高度绝对对齐 + 字体加粗 */
  body.theme-luka .nav-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 35px !important;     /* 统一所有选项高度 */
    
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--luka-text) !important;
    
    border-bottom: 1px dashed var(--luka-border) !important;
    background: transparent !important; 
  }
    
  body.theme-luka .nav-menu a:hover {
        color: var(--luka-accent) !important; /* 悬停时变为橘红色 */
        background: rgba(194, 113, 79, 0.05) !important; /* 增加一个极浅的背景反馈 */
    }
  body.theme-luka .nav-menu a:last-child {
    border-bottom: none !important; /* 最后一个选项去掉虚线，高度依然是36px */
  }

  /* 核心对齐：让三道杠和月亮图标在同一水平线上 */
  body.theme-luka .nav-right {
    display: flex !important;
    align-items: center !important; /* 垂直居中对齐 */
    gap: 5px !important;
  }

  body.theme-luka .menu-toggle {
    display: inline-flex !important; /* 手机端开启 */
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    background: none !important;
    border: none !important;
    color: var(--luka-text) !important;
    cursor: pointer !important;
  }

  /* 确保月亮按钮大小和三道杠一致，方便对齐 */
  body.theme-luka .theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }
}

/* 动画定义 */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}



@media (max-width: 640px) {

  body.theme-luka .social-icons a {
    width: 40px !important;
    height: 40px !important;
  }

  body.theme-luka .image.avatar img {

    width: 148px;

    height: 148px;

  }



  body.theme-luka .site-name {

    font-size: 24px;

  }



  body.theme-luka .experience-item {

    gap: 12px;

  }



  body.theme-luka .institution-logo {

    width: 64px;

    height: 64px;

  }



  body.theme-luka .visitor-card {

    width: 90%;

    max-width: 500px;

  }

}







@media (max-width: 480px) {

  body.theme-luka .section {

    margin-bottom: 32px;

  }



  body.theme-luka .section-title {

    font-size: 18px;

  }



  body.theme-luka .project-card,

  body.theme-luka .exp-detail,

  body.theme-luka .award-text,

  body.theme-luka .pub-content .author,

  body.theme-luka .pub-content .periodical {

    font-size: 13px;

  }

}



/* 1. Adjusted link text (PDF, Bibtex) */

.links a {

  font-size: 0.95rem !important;  /* Reduced from 1.1rem */

  font-weight: 600 !important;    /* "Semi-bold" instead of "Heavy" */

  text-decoration: none;

  display: inline-flex;

  align-items: center;

}



/* 2. Adjusted icons */

.links a i {

  font-size: 1.1rem !important;   /* Reduced from 1.3rem */

  margin-right: 5px;              

}



/* This matches the color and width of your publication side-lines */

.service-list-styled {

  list-style-type: none;

  padding-left: 15px;

  margin-left: 5px;

  /* Match the reddish-brown accent color of the Luka theme */

  border-left: 3px solid var(--luka-accent); 

}



.service-list-styled li {

  margin-bottom: 5px;

  font-size: 0.95rem;

}



.service-heading {

  margin-bottom: 8px;

  font-size: 1rem;

  color: #333;

}





body.theme-luka .news-scroll-container {

  max-height: 120px;   

  overflow-y: auto;     

  padding-right: 8px;   

}





body.theme-luka .news-scroll-container::-webkit-scrollbar {

  width: 4px;           

}



body.theme-luka .news-scroll-container::-webkit-scrollbar-track {

  background: transparent;

}



body.theme-luka .news-scroll-container::-webkit-scrollbar-thumb {

  background-color: var(--luka-accent); 

  border-radius: 10px;

  opacity: 0.5;

}





body.theme-luka .news-scroll-container::-webkit-scrollbar-thumb:hover {

  background-color: var(--luka-text);

}


/* /* --- 1. 彻底移除移动端点击时的蓝色阴影/高亮 (系统自带的) --- */
body.theme-luka .menu-toggle,
body.theme-luka .theme-toggle,
body.theme-luka .nav-menu a {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

/* --- 2. 只有在电脑端（支持悬停的设备）才显示橘色高亮 --- */
@media (hover: hover) {
  body.theme-luka .menu-toggle:hover,
  body.theme-luka .theme-toggle:hover,
  body.theme-luka .nav-menu a:hover {
    color: var(--luka-accent) !important;
    background: rgba(194, 113, 79, 0.05) !important;
  }
}

/* --- 3. 在移动端，仅在按下的那一瞬间有反馈，松开即消失 --- */
@media (hover: none) {
  body.theme-luka .menu-toggle:active,
  body.theme-luka .theme-toggle:active,
  body.theme-luka .nav-menu a:active {
    color: var(--luka-accent) !important;
    background: rgba(194, 113, 79, 0.1) !important; /* 按下时的瞬时反馈 */
  }
} */