/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Slab:wght@500;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ---------- Palette (light, calm, academic) ---------- */
:root {
  --fg: #1f2328;
  --fg-muted: #57606a;
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --border: #d0d7de;
  --accent: #1a5fb4;
  --accent-soft: #eaf2fb;
}

/* ---------- Base ---------- */
body {
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

#quarto-content {
  max-width: 1080px;
}

/* Landing page uses the full viewport, so lift the cap there */
#quarto-content.page-layout-full {
  max-width: none;
}

/* Research and Teaching pages: widen the body content column while keeping
   the right-side TOC. Targets `body-classes: page-wide` set in the
   respective .qmd frontmatter. Overrides Quarto's default
   `minmax(500px, calc(850px - 3em))` body column with a higher cap. */
body.page-wide #quarto-content {
  max-width: 1500px;
}
body.page-wide #quarto-content.page-columns {
  grid-template-columns:
    [screen-start] 1.5em
    [screen-start-inset] 5fr
    [page-start page-start-inset] 35px
    [body-start-outset] 35px
    [body-start] 1.5em
    [body-content-start] minmax(500px, 1100px)
    [body-content-end] 1.5em
    [body-end] 35px
    [body-end-outset] minmax(75px, 145px)
    [page-end-inset] 35px
    [page-end] 5fr
    [screen-end-inset] 1.5em
    [screen-end] !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

h1 { margin-top: 0.2em; }
h2 {
  margin-top: 2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
h3 { margin-top: 1.6rem; }

p, li { color: var(--fg); }
.text-muted { color: var(--fg-muted) !important; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Navbar ---------- */
.navbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg) !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
  font-weight: 500;
}
.navbar .nav-link.active {
  color: var(--accent) !important;
}

/* ---------- Full-width page grid override ---------- */
/* Quarto's default grid caps body-content at ~800px. On the landing page
   (page-layout: full) we want the content to use the available viewport. */
.page-layout-full.page-columns {
  grid-template-columns:
    [screen-start] 1.5em
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] 1fr
    [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 1.5em
    [screen-end] !important;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Two-column blocks in body ---------- */
/* Quarto's .columns is presentations-only by default; make it work in HTML. */
.quarto-about-trestles .about-contents div.columns,
#quarto-document-content div.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.quarto-about-trestles .about-contents div.columns > div.column,
#quarto-document-content div.columns > div.column {
  min-width: 0;
}
/* Stack columns on narrow viewports */
@media (max-width: 768px) {
  .quarto-about-trestles .about-contents div.columns,
  #quarto-document-content div.columns {
    flex-direction: column;
  }
  .quarto-about-trestles .about-contents div.columns > div.column,
  #quarto-document-content div.columns > div.column {
    width: 100% !important;
  }
}

/* ---------- About block (landing page) ---------- */
.quarto-about-trestles {
  padding-left: clamp(1rem, 4vw, 3rem) !important;
  padding-right: clamp(1rem, 4vw, 3rem) !important;
}

/* Durante-style sidebar header */
.quarto-about-trestles .about-entity .quarto-title h1.title {
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  margin-bottom: 0.4em;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.quarto-about-trestles .about-entity .quarto-title p.subtitle.lead {
  font-family: "Roboto Slab", serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

/* Contact list injected into the sidebar */
.quarto-about-trestles .about-entity #sidebar-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.45;
}
.quarto-about-trestles .about-entity #sidebar-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  color: var(--fg);
}
.quarto-about-trestles .about-entity #sidebar-contact li i {
  flex-shrink: 0;
  margin-top: 0.18em;
  color: var(--fg-muted);
  font-size: 1rem;
}
.quarto-about-trestles .about-entity #sidebar-contact li a {
  color: var(--fg);
  border-bottom: none;
}
.quarto-about-trestles .about-entity #sidebar-contact li a:hover {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.quarto-about-trestles .about-entity {
  flex: 0 0 clamp(260px, 28vw, 400px) !important;
}

.quarto-about-trestles .about-contents {
  flex: 1 1 0;
  min-width: 0;
}

.quarto-about-trestles .about-entity {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--bg-soft);
}
.quarto-about-trestles .about-link {
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.quarto-about-trestles .about-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---------- TOC ---------- */
#TOC, .toc-active a {
  font-size: 0.92em;
}
.sidebar nav[role="doc-toc"] ul > li > a.active,
.sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
  border-left: 2px solid var(--accent);
  color: var(--accent);
}

/* ---------- Code ---------- */
pre, code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
pre {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}
code:not(pre code) {
  background: var(--bg-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
}

/* ---------- Lists ---------- */
ol, ul {
  padding-left: 1.4rem;
}
ol li, ul li {
  margin-bottom: 0.25rem;
}

/* ---------- Footer ---------- */
.page-footer {
  border-top: 1px solid var(--border);
  background: var(--bg) !important;
  color: var(--fg-muted);
  font-size: 0.9em;
}

/* ---------- Listings (publications, code, featured) ---------- */
.quarto-listing {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Neutralize global h2/h3 border on listing card titles */
.quarto-listing .listing-title,
.quarto-listing .card-title,
.quarto-listing .listing-item h3 {
  border-bottom: none !important;
  margin-top: 0;
  padding-bottom: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Default-type listing items get a soft card frame */
.quarto-listing-default .listing-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quarto-listing-default .listing-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Grid-type listing (Code page) */
.quarto-listing-grid .card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.quarto-listing-grid .card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.quarto-listing-grid .card .card-body {
  padding: 1rem 1.1rem;
}

/* Table-type listing (Working / WIP) */
.quarto-listing-table th {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
}
.quarto-listing-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0.5rem;
  vertical-align: top;
}

/* Listing metadata (date, categories) */
.quarto-listing .listing-date,
.quarto-listing .listing-author {
  color: var(--fg-muted);
  font-size: 0.88rem;
}

/* Category filter chips */
.quarto-listing-category {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin: 0.15rem 0.3rem 0.15rem 0;
  font-size: 0.8rem;
  background: var(--bg);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.quarto-listing-category:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.quarto-listing-category.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* "See all →" links under the featured listings on the landing */
.featured-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.featured-link:hover {
  border-bottom-color: var(--accent);
}