/* ====== Theme tokens ====== */
:root {
  --accent: #2563eb;
  --brand-dark: #1e3a8a;
}

html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ====== Navbar ====== */
.bg-accent { background: var(--accent) !important; }
.navbar .nav-link { color: #fff !important; opacity: .95; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #e2e8f0 !important; }

/* ====== Hero ====== */
.hero {
  min-height: 82vh;
  background: linear-gradient(180deg, var(--accent) 0%, var(--brand-dark) 100%);
}
.hero h1.fw-extrabold { font-weight: 800; letter-spacing: .3px; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: 2rem; font-size: .9rem;
  background: rgba(255,255,255,.22); color: #fff;
}
.btn-accent { background: #fff; color: var(--accent); border: 0; }
.btn-accent:hover { background: #f1f5f9; color: #0b3bb3; }

/* ====== Cards/Sections ====== */
.section-title { font-weight: 700; letter-spacing: .2px; color: var(--brand-dark); }
.card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
.card:hover { border-color: var(--accent); }
.badge-soft { background: #e0e7ff; color: var(--brand-dark); border: 0; }

/* ====== Timeline ====== */
.timeline { position: relative; padding-left: 1.25rem; }
.timeline::before {
  content: ""; position: absolute; left: .4rem; top: .25rem; bottom: .25rem; width: 2px; background: var(--accent);
}
.t-dot { width: .75rem; height: .75rem; background: var(--accent); border-radius: 50%; margin-right: .75rem; flex: 0 0 auto; }

/* ====== Avatar ====== */
.avatar { width: 250px; height: 250px; border-radius: 100%; object-fit: cover; border: 3px solid #fff; }

/* ====== Footer ====== */
.footer { background: var(--brand-dark); color: #f9fafb; }

/* ====== Social list ====== */
.social-list a:hover { opacity: .9; }

/* ====== Publication buttons ====== */
/* Primary publication button (for "Paper") */
.pub-btn{
  min-width: 90px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  white-space: nowrap;
}

/* Smaller secondary button (for GitHub) */
.pub-btn-sm{
  min-width: 120px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .55rem;
  padding: 0 .75rem;
  white-space: nowrap;
}

/* Optional: darker outline style for GitHub */
.btn-outline-dark-gh{
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  background: transparent;
}
.btn-outline-dark-gh:hover{
  color: #fff;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Full-width stack on small screens */
@media (max-width: 576px){
  .pub-btn,
  .pub-btn-sm{ width: 100%; }
}

/* Uniform project thumbnails */
.proj-thumb{
  width: 200px;          /* set the exact width you want */
  height: 120px;         /* set the exact height you want */
  object-fit: cover;     /* crop to fill without distortion */
  border-radius: .5rem;  /* match your card rounding */
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;        /* keep fixed size inside flex rows */
}

/* Optional: smaller screens */
@media (max-width: 576px){
  .proj-thumb{
    width: 160px;
    height: 100px;
  }
}

/* Teaching history styling */
.teach-list .list-group-item{
  padding: .85rem 1rem;
}
.badge-accent{
  background: rgba(37,99,235,.12);   /* subtle blue to match your theme */
  color: #2563eb;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-weight: 600;
}
[data-bs-theme="dark"] .badge-accent{
  background: rgba(99,102,241,.25);
  color: #c7d2fe;
}
/* === Teaching Timeline (same layout, theme-aware colors) === */

.teaching-year {
  display: flex;
  gap: 1.5rem;
}

.teaching-year-label {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bs-emphasis-color);  /* replaces #67738d */
  min-width: 70px;
}

.teaching-year-content {
  border-left: 3px solid var(--bs-border-color);  /* replaces #e5e7eb */
  padding-left: 1.5rem;
  margin-top: 0.15rem;
}

/* Course title (same font, but color theme-aware) */
.teaching-course .teaching-code {
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
  font-size: 1.05rem;
  color: var(--bs-body-color);   /* replaces #317777 */
  margin-bottom: .1rem;
}

/* Secondary text (dates, positions) */
.teaching-course .text-body-secondary {
  color: var(--bs-secondary-color) !important;
}

.teaching-code a {
  text-decoration: none;   /* removes underline */
  color: blue;          /* keeps the same color as the heading */
}

.teaching-code a:hover {
  text-decoration: underline;   /* optional: underline only on hover */
}



/* ====== Dark mode tweaks ====== */
[data-bs-theme="dark"] .section-title { color: #c7d2fe; }
[data-bs-theme="dark"] .badge-soft { background: rgba(99,102,241,.18); color: #c7d2fe; }
[data-bs-theme="dark"] .navbar.bg-accent { background: #0d1b3d !important; }
[data-bs-theme="dark"] .hero {
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(37,99,235,.35), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #0b1126 100%);
}
[data-bs-theme="dark"] .btn-accent { background: var(--accent); color: #fff; }
[data-bs-theme="dark"] .btn-accent:hover { background: #1f4cd6; }