/* =========================================================
   FINAL CUSTOM CSS (Navbar fixed + clean sidebar + TOC + Progress)
   File: static/css/custom.css
   ========================================================= */

/* -----------------------------
   0) Global safety
------------------------------ */
:root {
  --nav-h: 70px; /* JS will overwrite this with real navbar height */
}

/* -----------------------------
   1) NAVBAR: fixed, always visible
------------------------------ */
#navbar-main, .navbar, header, .page-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  transform: translateY(0) !important;  /* kill hide-on-scroll transforms */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Push all pages down below the fixed navbar */
body {
  padding-top: var(--nav-h, 70px) !important;
  margin-top: 0 !important;
}

/* Homepage hero often already includes top spacing.
   Cancel the extra offset so homepage doesn't look "dropped". */
.page-home .home-section:first-of-type,
.home .home-section:first-of-type {
  margin-top: calc(-1 * var(--nav-h, 70px)) !important;
}

/* Avoid wrapper clipping (helps progress bar visibility on home) */
.page-wrapper, main, .home-section {
  overflow: visible !important;
}

/* -----------------------------
   2) RIGHT SIDEBAR: one clean divider only
------------------------------ */
.aside-column {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: calc(var(--nav-h, 70px) + 20px) !important; /* below navbar */
  height: calc(100vh - (var(--nav-h, 70px) + 20px)) !important;
  overflow-y: auto !important;
  align-self: flex-start !important;

  border-left: 1px solid #e1e4e8 !important; /* single divider line */
  padding-left: 20px !important;
  background-color: #ffffff !important;
}

/* Main content spacing away from divider */
.col-lg-9, .col-md-8 {
  padding-right: 40px !important;
}
.row { align-items: flex-start !important; }

/* -----------------------------
   3) REMOVE "inner TOC line" / box borders
------------------------------ */
.toc-sidebar,
.tags-sidebar {
  border-left: none !important;
  padding-left: 0 !important;
  background: transparent !important;
}

.toc-sidebar nav#TableOfContents,
.toc-sidebar #TableOfContents {
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* TOC links */
.toc-sidebar a {
  display: block;
  color: #586069;
  text-decoration: none;
  padding: 4px 0;
  font-size: 0.85rem;
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: all 0.2s ease;
}
.toc-sidebar a.active-toc-link {
  color: #0366d6 !important;
  font-weight: 600 !important;
  border-left: 2px solid #0366d6 !important;
}

/* Sidebar headings */
.toc-sidebar h3, .tags-sidebar h3 {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: #24292e;
  margin-bottom: 0.5rem;
}

/* -----------------------------
   4) STATUS PILL under title (if used on project pages)
------------------------------ */
.article-title { margin-bottom: 0.35rem !important; }
.article-status-row { margin: 0.25rem 0 1.25rem 0 !important; }

.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border: 1px solid transparent;
}



/* -----------------------------
   5) READING PROGRESS BAR (always visible)
------------------------------ */
#reading-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0%;
  height: 3px !important;
  background: #1565c0 !important;
  z-index: 100000 !important; /* below navbar */
  transition: width 0.1s linear;
}

/* ================================
   STATUS PILL under title
   ================================ */
.article-title {
  margin-bottom: 0.35rem !important;
}

.article-status-row {
  margin: 0.3rem 0 1.25rem 0 !important;
}

.status-pill {
  display: inline-block !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  border: 1px solid transparent !important;
}


/* ================================
   TAGS — Horizontal pill layout
   (desktop + mobile)
   ================================ */
.tags-sidebar ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tags-sidebar ul li {
  list-style: none !important;
  margin: 0 !important;
}

/* Make tag badges look like clean chips */
.tags-sidebar .badge {
  display: inline-block !important;
  background: #f1f3f5 !important;
  color: #24292e !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 1px solid #e1e4e8 !important;
  transition: all 0.2s ease !important;
}

.tags-sidebar .badge:hover {
  background: #0366d6 !important;
  color: #ffffff !important;
  border-color: #0366d6 !important;
}

/* =========================
   AUTHOR FOOTER (Projects)
   ========================= */

.author-footer-divider{
  margin: 2.5rem 0 1.5rem 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}

.author-footer{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 0 8px 0;
}

.author-footer__avatar img{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e6e6e6;
}

.author-footer__avatar-fallback{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
}

.author-footer__name{
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}

.author-footer__role{
  margin-top: 4px;
  color: #6b7280;
  font-size: 0.95rem;
}

.author-footer__bio{
  margin-top: 8px;
  color: #111827;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 70ch;
}

.author-footer__links{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.author-footer__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  background: #fff;
}

.author-footer__link i{
  font-size: 1.05rem;
}

.author-footer__link:hover{
  border-color: #cfd4dc;
  background: #fafafa;
}

/* Mobile stacking */
@media (max-width: 768px){
  .author-footer{
    flex-direction: column;
    gap: 12px;
  }
}

/* Publication badge colors */
.status-pill--pub{
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  border-color: #2e7d32 !important;
}

.status-pill--talk{
  background: #fff3e0 !important;
  color: #e65100 !important;
  border-color: #e65100 !important;
}

.status-pill--preprint{
  background: #e3f2fd !important;
  color: #1565c0 !important;
  border-color: #1565c0 !important;
}



/* Publication meta line */
.pub-meta{
  margin: 0.2rem 0 1.1rem 0;
  font-size: 0.95rem;
}
.pub-meta__label{
  font-weight: 700;
  margin-right: 6px;
}
.pub-meta__value{
  color: #24292e;
}

/* Abstract block */
.pub-abstract{
  margin: 1.25rem 0 1.25rem 0;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
}
.pub-abstract h2{
  font-size: 1.05rem;
  margin: 0 0 0.5rem 0;
}

/* Citation box */
.citebox{
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
}
.citebox__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.citebox__links{
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.citebox__link{
  text-decoration: none;
  font-weight: 600;
}

/* =========================
   PUBLICATION CAPSULE COLORS
   ========================= */
.status-pill--pub {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  border-color: #2e7d32 !important;
}
.status-pill--conf {
  background: #fff3e0 !important;
  color: #ef6c00 !important;
  border-color: #ef6c00 !important;
}
.status-pill--thesis {
  background: #ede7f6 !important;
  color: #5e35b1 !important;
  border-color: #5e35b1 !important;
}
.status-pill--research {
  background: #e3f2fd !important;
  color: #1565c0 !important;
  border-color: #1565c0 !important;
}

.publication-venue {
  margin: 0.25rem 0 1.25rem 0;
  font-size: 1.05rem;
}

/* =========================
   Citation + Link blocks
   ========================= */
.publication-citebox,
.publication-links {
  margin-top: 1.25rem;
}

.publication-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.pub-link-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e1e4e8;
  background: #ffffff;
  text-decoration: none !important;
  font-size: 0.85rem;
}

.pub-link-chip:hover {
  background: #0366d6;
  color: #fff !important;
  border-color: #0366d6;
}

/* Make tag chips inline in the sidebar (desktop + mobile) */
.tags-sidebar ul,
.tags-sidebar--mobile ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.tags-sidebar li,
.tags-sidebar--mobile li {
  list-style: none !important;
  margin: 0 !important;
}