/* Site-specific styles layered on top of the Academic Pages theme (main.css).
   Layout and card styles follow the reference site; colors use HKUST navy. */

:root {
  --accent: #003C71;          /* HKUST navy */
  --accent-hover: #1a73e8;
  --muted: #555;
  --muted-2: #666;
  --rule: #eee;
  --chip-bg: #f1f4f8;
  --chip-border: #dde3ea;
  --chip-text: #2b3440;
  --tile-bg: #eef3f9;
  --tile-fg: #003C71;
}
html[data-theme="dark"] {
  --accent: #4ea3d6;          /* ~6:1 on #474747 */
  --accent-hover: #8ec5e8;
  --muted: #c0c0c0;
  --muted-2: #b8b8b8;
  --rule: #5a5a5a;
  --chip-bg: #3d3d3d;
  --chip-border: #5e5e5e;
  --chip-text: #ececec;
  --tile-bg: #3a4652;
  --tile-fg: #cfe6f5;
}

/* Hide the empty theme footer box */
.page__footer { display: none !important; }

/* Links: navy in the article body, black in nav + sidebar */
.page__content a:link,
.page__content a:visited { color: var(--accent); }
.page__content a:hover { color: var(--accent-hover); }
.greedy-nav a, .greedy-nav a:link, .greedy-nav a:visited,
.author__urls a, .author__urls a:link, .author__urls a:visited { color: #000 !important; }
.greedy-nav a:hover, .author__urls a:hover { color: #003C71 !important; }
html[data-theme="dark"] .greedy-nav a, html[data-theme="dark"] .greedy-nav a:link,
html[data-theme="dark"] .greedy-nav a:visited, html[data-theme="dark"] .author__urls a,
html[data-theme="dark"] .author__urls a:link, html[data-theme="dark"] .author__urls a:visited { color: #fff !important; }
html[data-theme="dark"] .greedy-nav a:hover, html[data-theme="dark"] .author__urls a:hover { color: #4ea3d6 !important; }

/* Keep the current-page nav item clickable (theme disables it) */
.masthead__menu-item.selected a { pointer-events: auto !important; cursor: pointer !important; }

/* Anchored headings clear the fixed masthead */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.page__content h1[id] { scroll-margin-top: 80px; }
#about { scroll-margin-top: 90px; }

/* Language toggle pill (中 / EN) */
#lang-toggle a { font-weight: 600; }
.lang-toggle-text {
  border: 1px solid currentColor; border-radius: 3px;
  padding: 0 0.4em; font-size: 0.85em; letter-spacing: 0.02em;
}

/* Sidebar: Follow button opens the link list on narrow screens */
.author__urls.is-open { display: block; }

/* ---------- Article typography ---------- */
.page__content { font-size: 15px; line-height: 1.55; }
.page__content h1 {
  font-size: 1.55em; margin-top: 1.5em; margin-bottom: 0.4em;
  border-bottom: 2px solid var(--rule); padding-bottom: 0.2em;
}
.page__content h1:first-of-type { margin-top: 0.4em; }
.page__title .name-alt { font-weight: 400; color: var(--muted-2); font-size: 0.7em; margin-left: 0.25em; }

/* News list */
.news-list li { margin-bottom: 0.3em; }

/* ---------- Experience / education entries ---------- */
.exp-item {
  display: flex; gap: 1em; margin: 1em 0; padding-bottom: 0.85em;
  border-bottom: 1px solid var(--rule); align-items: flex-start;
}
.exp-item:last-child { border-bottom: none; }
.exp-logo { flex: 0 0 70px; width: 70px; height: 70px; object-fit: contain; }
.exp-logo-icon {
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--tile-bg); color: var(--tile-fg); font-size: 30px;
}
.exp-text { flex: 1; min-width: 0; }
.exp-meta { margin: 0 0 0.3em 0 !important; line-height: 1.45; }
.exp-desc { margin: 0 !important; color: var(--muted); font-size: 0.93em; line-height: 1.55; }
.exp-desc + .exp-desc { margin-top: 0.35em !important; }

/* ---------- Project cards ---------- */
.paper-box {
  display: flex; gap: 1.2em; margin: 1em 0; padding-bottom: 0.9em;
  border-bottom: 1px solid var(--rule); align-items: flex-start;
}
.paper-box:last-of-type { border-bottom: none; }
.paper-box-text { flex: 1; min-width: 0; }
.paper-title { font-weight: 600; margin: 0 0 0.25em 0 !important; font-size: 1.02em; line-height: 1.35; }
.paper-authors { margin: 0 0 0.35em 0 !important; color: var(--muted); font-size: 0.93em; }
.paper-meta { margin: 0 0 0.25em 0 !important; font-style: italic; color: #444; font-size: 0.93em; }
html[data-theme="dark"] .paper-meta { color: #e4e4e4; }
.paper-meta-highlight {
  background: #ff5722; color: #fff; padding: 0.08em 0.5em; border-radius: 3px;
  font-weight: 600; font-style: normal; font-size: 0.78em; margin-left: 0.35em;
  vertical-align: 2px; letter-spacing: 0.02em;
}
.paper-meta-highlight:first-child { margin-left: 0; }
.paper-meta-highlight.funded { background: #1f7a8c; }
.paper-meta-highlight.champion { background: #b8860b; }
.paper-meta-highlight.course { background: #6f42c1; }
.paper-extra { margin: 0.3em 0 0 0 !important; color: var(--muted-2); font-size: 0.86em; line-height: 1.5; }
.paper-extra em { color: inherit; }
.paper-extra ul { margin: 0.2em 0 0 0; padding-left: 1.2em; }
.paper-extra li { margin-bottom: 0.15em; }

.paper-links { margin: 0 0 0.35em 0 !important; font-size: 0.82em; }
.paper-links a, .paper-links a:link, .paper-links a:visited, .paper-links a:hover {
  display: inline-block; padding: 0.1em 0.55em; margin-right: 0.3em; border-radius: 3px;
  text-decoration: none !important; color: #fff !important; font-weight: 500;
}
.paper-link-website { background: #1f7a8c; }
.paper-link-demo { background: #6f42c1; }

/* ---------- Chips (courses, skills) ---------- */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.35em 0.4em; margin: 0.4em 0 0 0 !important; padding: 0; list-style: none; }
.chip-list li {
  margin: 0; padding: 0.12em 0.6em; border-radius: 999px; font-size: 0.84em; line-height: 1.5;
  background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--chip-text);
}
.chip-list .grade { font-weight: 600; margin-left: 0.3em; color: var(--accent); }

.skill-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.55em 1.1em; margin: 0.8em 0; align-items: baseline; }
.page__content .skill-grid dt { margin-top: 0; font-weight: 600; font-size: 0.95em; }
.page__content .skill-grid dd { margin: 0; font-size: 1em; }  /* theme shrinks dd to .75em */
.skill-grid .chip-list { margin: 0 !important; }

/* ---------- Mobile / tablet ---------- */
@media (max-width: 900px) {
  .page__content { font-size: 16px; line-height: 1.6; }
  .page__content h1 { font-size: 1.4em; margin-top: 1.3em; margin-bottom: 0.35em; }
  .page__content a { word-break: break-word; }
  .paper-box { margin: 0.85em 0; padding-bottom: 0.7em; }
}
@media (max-width: 600px) {
  .page__content h1 { font-size: 1.3em; }
  .paper-title { font-size: 1em; }
  .exp-logo { flex: 0 0 50px; width: 50px; height: 50px; }
  .exp-logo-icon { font-size: 22px; }
  .skill-grid { grid-template-columns: 1fr; gap: 0.25em; }
  .page__content .skill-grid dd { margin-bottom: 0.5em; }
  .sidebar.sticky { position: relative !important; top: auto !important; }
  .page__inner-wrap { padding: 0 0.6em; }
  body { overflow-x: hidden; }
}