/* ============================================================
   CSS Custom Properties — Light (default) & Dark mode
   ============================================================ */
:root {
  --bg:           #faf9f7;   /* warm off-white */
  --bg-card:      #ffffff;
  --bg-nav:       #faf9f7;
  --bg-muted:     #f3f1ed;
  --text:         #212529;
  --text-muted:   #6c757d;
  --text-subtle:  #999;
  --border:       #e0ddd8;
  --shadow:       rgba(0,0,0,0.08);
  --link:         #0d6efd;
}

[data-theme="dark"] {
  --bg:           #1a1c22;
  --bg-card:      #23262f;
  --bg-nav:       #13141a;
  --bg-muted:     #2a2d38;
  --text:         #e2e4ea;
  --text-muted:   #9aa0b0;
  --text-subtle:  #6b7280;
  --border:       #32374a;
  --shadow:       rgba(0,0,0,0.35);
  --link:         #7eb8f7;
}

/* ============================================================
   Base
   ============================================================ */
body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.25s, color 0.25s;
  /* Sticky footer: body fills the viewport, #content grows to push the
     footer to the bottom on short pages. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--link); }

/* ============================================================
   Layout
   ============================================================ */
#content {
  margin-top: 70px;
  padding-top: 1.5rem;
  flex: 1 0 auto;        /* grow inside the flex-column body */
  display: flex;
  flex-direction: column;
}
#content > hr { margin-top: auto; } /* pushes hr + footer to the bottom */
.centered-text { text-align: center; }
#heading h2 { padding-top: 40px; }
.definitions { color: white; background: #333; padding: 2px 5px; border-radius: 5px; }
#content > .row:first-child h2 { margin-bottom: 1.5rem; }

/* ============================================================
   Navbar
   ============================================================ */
#main-nav {
  background-color: var(--bg-nav) !important;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.25s;
}
#main-nav .navbar-brand,
#main-nav .nav-link {
  color: var(--text) !important;
}
#main-nav .nav-link:hover,
#main-nav .nav-link.active {
  color: var(--link) !important;
}
#main-nav .navbar-toggler {
  border-color: var(--border);
}
#main-nav .navbar-toggler-icon {
  filter: none;
}
[data-theme="dark"] #main-nav .navbar-toggler-icon {
  filter: invert(1);
}

/* Dark mode toggle button */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s, color 0.2s;
}
.theme-toggle-btn:hover {
  border-color: var(--link);
  color: var(--link);
}

/* ============================================================
   Cards & borders (general)
   ============================================================ */
.bg-light {
  background-color: var(--bg-muted) !important;
  color: var(--text) !important;
}
.border, .border-rounded {
  border-color: var(--border) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}

/* ============================================================
   Project cards
   ============================================================ */
.project-card {
  transition: box-shadow 0.2s, transform 0.15s;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.project-card:hover {
  box-shadow: 0 3px 12px var(--shadow);
  transform: translateY(-1px);
}
/* Portfolio list cards: flush-thumb media layout, uniform height. */
.project-card.project-card-row {
  padding: 0;
  overflow: hidden;
  gap: 0 !important;
  min-height: 80px;          /* matches the thumb height — keeps every card uniform */
}
.project-card-body {
  flex-grow: 1;
  min-width: 0;
  padding: 0.6rem 1rem;
}
.project-card h5 { margin-bottom: 0.25rem; color: var(--text); }
.project-card .project-year { font-size: 0.82rem; color: var(--text-muted); }
.project-card .project-links a { margin-right: 0.5rem; }
.project-card .text-muted { color: var(--text-muted) !important; }

/* ============================================================
   Topic filter pills
   ============================================================ */
.topic-pill { cursor: pointer; margin: 2px; user-select: none; transition: opacity 0.2s; }
.topic-pill.active { opacity: 1; }
.topic-pill:not(.active) { opacity: 0.45; }
/* In the sidebar column each pill stretches full width */
#topic-filters.flex-md-column .topic-pill { width: 100%; text-align: left; }
.pub-entry.hidden { display: none; }
.pub-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ============================================================
   Publication entries
   ============================================================ */
.pub-entry {
  background: var(--bg-card);
  border-color: var(--border) !important;
  color: var(--text);
  border-radius: 0.5rem !important;
}
.pub-entry a { color: var(--link); }

/* Current-year highlight: teal left rule + cool tint. Awards win when both. */
:root              { --current: #1abc9c; --current-bg: rgba(26,188,156,0.08); }
[data-theme="dark"] { --current: #4fd8c4; --current-bg: rgba(79,216,196,0.12); }
.pub-entry.pub-current-year:not(.pub-award) {
  border-left-width: 4px !important;
  border-left-color: var(--current) !important;
  background: linear-gradient(to right, var(--current-bg), var(--bg-card) 40%);
}

/* Award highlight: subtle gold left rule + warm tint */
:root             { --award: #d4a017; --award-bg: rgba(245,180,0,0.07); }
[data-theme="dark"] { --award: #ffce4d; --award-bg: rgba(255,206,77,0.10); }
.pub-entry.pub-award {
  border-left-width: 4px !important;
  border-left-color: var(--award) !important;
  background: linear-gradient(to right, var(--award-bg), var(--bg-card) 40%);
}
.pub-entry.pub-award .award-label { color: var(--award); }

/* Click-to-view lightbox for project images */
#image-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  z-index: 9999;
  padding: 2rem;
  cursor: zoom-out;
}
#image-lightbox.show { display: flex; }
#image-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
#image-lightbox .lightbox-caption {
  color: rgba(255,255,255,0.85);
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  max-width: 80%;
}
.project-img { cursor: zoom-in; transition: transform 0.15s; }
.project-img:hover { transform: scale(1.01); }

/* Theme-aware image swap: light variant shown by default, dark variant under [data-theme="dark"]. */
.theme-image-dark { display: none; }
[data-theme="dark"] .theme-image-light { display: none; }
[data-theme="dark"] .theme-image-dark { display: inline-block; }

/* Left-align KaTeX display math when it appears inside a project body block. */
.project-body .katex-display { text-align: left; margin: 0.5em 0; }

/* Liber AI consultancy CTA on the neuro-symbolic page. */
.liberai-cta {
  background: var(--bg-card);
  transition: box-shadow 0.2s, transform 0.15s;
  max-width: 680px;
}
.liberai-cta:hover {
  box-shadow: 0 3px 12px var(--shadow);
  transform: translateY(-1px);
}

/* Portfolio list thumbnails — fixed 140 × 80, flush with the card edges. */
.project-thumb {
  width: 140px;
  height: 80px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg-muted);
  /* Card has border + rounded corners and overflow:hidden, so the thumb sits flush. */
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
}
.project-thumb-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 1px;
  border-right-color: transparent;
}

/* Same gold-highlight treatment for project-page callouts */
.project-highlight {
  background: linear-gradient(to right, var(--award-bg), var(--bg-card) 40%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--award);
  border-radius: 0.5rem;
  padding: 0.65rem 0.9rem;
  color: var(--text);
  margin-bottom: 1rem;
  font-weight: 600;
}
.project-highlight i.bi-award { color: var(--award); margin-right: 0.4rem; }

/* ============================================================
   List groups
   ============================================================ */
.list-group-item {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
.list-group-item-action:hover {
  background-color: var(--bg-muted);
  color: var(--text);
}
.list-group-item-primary {
  background-color: rgba(13,110,253,0.1);
}

/* ============================================================
   Tables
   ============================================================ */
.table {
  color: var(--text);
}
.table-bordered, .table td, .table th {
  border-color: var(--border) !important;
}
.table-sm th {
  background-color: var(--bg-muted);
}

/* ============================================================
   Outline buttons — readable in dark mode
   ============================================================ */
[data-theme="dark"] .btn-outline-dark {
  color: var(--text-muted);
  border-color: var(--border);
}
[data-theme="dark"] .btn-outline-dark:hover {
  background-color: var(--bg-muted);
  color: var(--text);
  border-color: var(--text-muted);
}
[data-theme="dark"] .btn-outline-primary {
  color: #7eb8f7;
  border-color: #7eb8f7;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: rgba(126,184,247,0.15);
  color: #aad0ff;
}
[data-theme="dark"] .btn-outline-info {
  color: #5bc0de;
  border-color: #5bc0de;
}
[data-theme="dark"] .btn-outline-info:hover {
  background-color: rgba(91,192,222,0.15);
  color: #8dd8ee;
}
[data-theme="dark"] .btn-outline-success {
  color: #5cb85c;
  border-color: #5cb85c;
}
[data-theme="dark"] .btn-outline-success:hover {
  background-color: rgba(92,184,92,0.15);
  color: #88cc88;
}
[data-theme="dark"] .btn-outline-secondary {
  color: var(--text-muted);
  border-color: var(--border);
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--bg-muted);
  color: var(--text);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
[data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted); }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-subtle); }

/* ============================================================
   Alerts
   ============================================================ */
.alert-secondary {
  background-color: var(--bg-muted);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ============================================================
   Footer
   ============================================================ */
footer {
  color: var(--text-muted);
  font-size: 0.88rem;
}
footer a { color: var(--link); }
hr { border-color: var(--border); }

/* ============================================================
   Embedding plot
   ============================================================ */
#embedding-plot {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-card);
}

/* ============================================================
   Horizontal timelines
   ============================================================ */
.timeline-area { margin-bottom: 1rem; }
.timeline-btn { transition: opacity 0.2s; }
.timeline-btn.active { opacity: 1; }
.timeline-btn:not(.active) { opacity: 0.45; }
.timeline-strip {
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 10px;
  position: relative;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: stretch;
}
.timeline-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  text-align: center;
  margin: 0 15px;
  position: relative;
  white-space: normal;
  width: 110px;
}
.timeline-year {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--text);
  flex-shrink: 0;
}
.timeline-dot-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}
.timeline-dot-row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -15px;
  right: -15px;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0d6efd;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.timeline-label { font-size: 0.72rem; color: var(--text-muted); white-space: normal; line-height: 1.2; margin-top: 4px; }
a.timeline-milestone {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s;
}
a.timeline-milestone:hover { transform: translateY(-2px); }
a.timeline-milestone:hover .timeline-label { color: var(--link); text-decoration: underline; }

/* ============================================================
   Discipline circles (Neuro-Symbolic page)
   ============================================================ */
.disciplines-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 2rem;
  margin: 2rem 0 3rem;
}
.discipline-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 175px;
}
.disc-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.discipline-circle:hover .disc-icon {
  transform: scale(1.07);
  box-shadow: 0 4px 16px var(--shadow);
}
.disc-label {
  margin-top: 0.8rem;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--text);
}
.disc-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* ============================================================
   Talks cards
   ============================================================ */
.talk-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s, transform 0.15s;
}
.talk-card:hover {
  box-shadow: 0 3px 12px var(--shadow);
  transform: translateY(-1px);
  color: var(--text);
}
.talk-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.375rem;
  flex-shrink: 0;
}
.talk-card .talk-title { font-weight: 600; }
.talk-card .talk-meta { font-size: 0.82rem; color: var(--text-muted); }

/* ============================================================
   Page fade-in
   ============================================================ */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#content {
  animation: pageFadeIn 0.4s ease both;
}

/* ============================================================
   Card / entry stagger (applied via inline animation-delay)
   ============================================================ */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  animation: cardFadeIn 0.35s ease both;
  display: block; /* ensure block so transform works */
}

/* ============================================================
   Citation badges (Semantic Scholar)
   ============================================================ */
.citation-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 10px;
  white-space: nowrap;
  vertical-align: middle;
}
.citation-badge i { font-size: 0.78rem; }

/* ============================================================
   GitHub repo cards
   ============================================================ */
.github-repos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.github-repo-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.2s, transform 0.15s;
}
.github-repo-card:hover {
  box-shadow: 0 3px 12px var(--shadow);
  transform: translateY(-1px);
  color: var(--text);
}
.repo-name { font-size: 0.9rem; color: var(--link); word-break: break-all; }
.repo-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.repo-stars { font-size: 0.75rem; color: #f39c12; white-space: nowrap; }
.repo-lang {
  font-size: 0.72rem;
  color: var(--text-subtle);
  margin-top: auto;
  padding-top: 0.4rem;
}

/* ============================================================
   Badge text: white + dark stroke for readability on any bg
   ============================================================ */
.badge {
  color: #fff !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.55),
     1px -1px 0 rgba(0,0,0,0.55),
    -1px  1px 0 rgba(0,0,0,0.55),
     1px  1px 0 rgba(0,0,0,0.55);
}

/* ============================================================
   Topic colors
   ============================================================ */
.topic-entity-resolution { background-color: #e74c3c; }
.topic-question-answering { background-color: #3498db; }
.topic-knowledge-graphs { background-color: #2ecc71; }
.topic-machine-learning { background-color: #9b59b6; }
.topic-large-language-models { background-color: #f39c12; }
.topic-ontologies-and-standards { background-color: #0e8a6d; }
.topic-link-prediction { background-color: #b35518; }
.topic-forecasting { background-color: #34495e; }
.topic-agentic-ai { background-color: #c0392b; }
.topic-position-paper { background-color: #7f8c8d; }