/* Site-specific additions on top of Beautiful Jekyll. Loaded via site-css in _config.yml. */

:root {
  --accent: #0a6c8f;
  --accent-soft: #e8f3f7;
  --muted: #5f6b73;
  --rule: #dde3e7;
  --card-bg: #fbfcfd;
}

/* ---------- Home page intro ---------- */
.intro {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  margin: 0.5rem 0 2rem;
}
.intro-photo {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent-soft);
}
.intro-text p { margin-bottom: 0.75rem; }
.intro-role {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.btn-outline {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.btn-outline:hover, .btn-outline:focus { background: var(--accent); color: #fff; text-decoration: none; }

@media (max-width: 575.98px) {
  .intro { flex-direction: column; text-align: center; }
  .button-row { justify-content: center; }
}

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}
.stat {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
}
.stat-value {
  display: block;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.stat-label { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.35; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.info-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: var(--card-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.info-card:hover, a.info-card:focus {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(10, 108, 143, 0.12);
  text-decoration: none;
  color: inherit;
}
.info-card-kicker {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  word-break: break-word;
}
.info-card-title {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
.info-card-body { font-size: 0.95rem; line-height: 1.5; }
.repo-card .info-card-kicker { text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.info-card-meta { margin-top: auto; padding-top: 0.25rem; font-size: 0.8rem; color: var(--muted); }

/* ---------- Project blocks (Research page) ---------- */
.project {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 1.25rem 0 1.75rem;
}
.project h3 { margin-top: 0; font-size: 1.25rem; }
.project-meta {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.project-links { font-size: 0.9rem; margin-top: 0.5rem; }
.project-links a { margin-right: 0.85rem; white-space: nowrap; }

/* ---------- Publication lists ---------- */
.pub-list { padding-left: 1.6rem; }
.pub-list .pub { margin-bottom: 0.9rem; line-height: 1.5; }
.pub-title { font-weight: 600; }
.pub-links { display: block; margin-top: 0.2rem; font-size: 0.8rem; }
.pub-badge {
  display: inline-block;
  margin: 0.15rem 0.35rem 0 0;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--accent);
  background: #fff;
  word-break: break-all;
}
a.pub-badge:hover, a.pub-badge:focus { border-color: var(--accent); text-decoration: none; }
.pub-badge-oa { color: #2f6b2f; border-color: #cfe3cf; background: #f3faf3; }
.pub-badge-code { color: #333; }
.pub-note { color: var(--muted); font-style: italic; }
.pub-legend { font-size: 0.85rem; color: var(--muted); }

/* ---------- Dated lists (CV, presentations, media) ---------- */
.dated-list { list-style: none; padding-left: 0; margin: 0.5rem 0 1.5rem; }
.dated-list li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f0f2f4;
  line-height: 1.5;
}
.dated-list li:last-child { border-bottom: none; }
.dated-list .when {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding-top: 0.1rem;
}
.dated-list .what-sub { display: block; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 575.98px) {
  .dated-list li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------- CV ---------- */
.cv-job { margin: 1rem 0 1.5rem; }
.cv-job h3 { font-size: 1.15rem; margin: 0 0 0.15rem; }
.cv-job .cv-org { color: var(--muted); font-size: 0.95rem; }
.cv-job ul { margin-top: 0.4rem; }
.cv-job li { margin-bottom: 0.25rem; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }

/* ---------- Home: recent notebook posts ---------- */
.recent-posts { list-style: none; padding-left: 0; }
.recent-posts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f0f2f4;
}
.recent-posts-date { flex: 0 0 auto; color: var(--muted); font-size: 0.85rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.table-wrap table { width: 100%; font-size: 0.9rem; }
.table-wrap th, .table-wrap td { padding: 0.35rem 0.5rem; }

/* ---------- Print (lets visitors save the CV page as a clean PDF) ---------- */
@media print {
  .navbar, footer, .no-print, .pager, .blog-tags, #social-share-section { display: none !important; }
  body { padding-top: 0 !important; font-size: 11pt; }
  .intro-header { margin: 0 !important; padding: 0 !important; }
  .intro-header .page-heading { padding: 0 0 0.5rem !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .pub-badge { border: none; padding: 0; }
  .cv-job, .pub, .dated-list li { break-inside: avoid; }
}

/* ---------- Notebook posts: keep wide tables, code, and images inside the viewport on phones ---------- */
.blog-post table { display: block; max-width: 100%; overflow-x: auto; }
.blog-post img, .blog-post video, .blog-post iframe { max-width: 100%; height: auto; }
.blog-post pre { max-width: 100%; overflow-x: auto; }
.blog-post { overflow-wrap: anywhere; } /* long file names and URLs in headings and lists */
.blog-post p > code, .blog-post li > code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Lab notebook ---------- */
.nb-jump { font-size: 0.9rem; line-height: 1.8; }
.nb-entries { list-style: none; padding-left: 0; margin: 0.25rem 0 1.5rem; }
.nb-entries li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid #f0f2f4;
}
.nb-entries li:last-child { border-bottom: none; }
.nb-date {
  flex: 0 0 6.5rem;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.nb-recent .nb-date { flex-basis: 7.5rem; }
.nb-badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
}
.nb-project {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 1rem 1.25rem 0.25rem;
  margin: 1rem 0 1.5rem;
  scroll-margin-top: 90px;
}
.nb-project h3 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.nb-project-meta { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.4rem; }
.nb-project-links { font-size: 0.9rem; margin-bottom: 0.4rem; }
.nb-project-links a { margin-right: 1rem; }
.nb-project .nb-entries { margin-bottom: 0.75rem; }
.nb-note { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.25rem; }
h2[id] { scroll-margin-top: 90px; }

/* Project box at the top of an entry */
.nb-meta {
  border-left: 3px solid var(--accent);
  background: var(--card-bg);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}
.nb-meta-kicker {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.nb-meta-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.35rem; }
.nb-meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; margin: 0; }
.nb-meta-list dt { font-weight: 600; color: var(--muted); }
.nb-meta-list dd { margin: 0; }

/* Previous / next within a project */
.nb-nav { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1rem; }
.nb-nav-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }
.nb-nav-links { display: flex; justify-content: space-between; gap: 1rem; }
.nb-nav-links a {
  display: flex;
  flex-direction: column;
  max-width: 48%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-decoration: none;
}
.nb-nav-links a:hover, .nb-nav-links a:focus { border-color: var(--accent); text-decoration: none; }
.nb-nav-links a span {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.nb-nav-next { margin-left: auto; text-align: right; }
@media (max-width: 575.98px) {
  .nb-nav-links { flex-direction: column; }
  .nb-nav-links a { max-width: 100%; }
  .nb-nav-next { text-align: left; margin-left: 0; }
  .nb-date { flex-basis: 100%; }
}