/* ── Font display ────────────────────────────────────────────────────── */

@font-face {
  font-family: 'bootstrap-icons';
  font-display: swap;
}

/* ── Mobile responsiveness ───────────────────────────────────────────── */

/* KaTeX / MathJax: horizontal scroll like code blocks */
.math.display,
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  display: block;
}

/* Prevent the inner katex span from forcing width */
.katex-display>.katex {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.5em;
  /* prevents scrollbar from clipping descenders */
}

/* Inline math: leave as-is, wrapping is fine for inline */
.math.inline .katex {
  overflow-x: visible;
}

/* Code blocks: scroll horizontally instead of overflowing */
pre,
pre.sourceCode {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  white-space: pre;
  /* keep syntax highlighting intact */
}

/* Output from executed code cells */
.cell-output pre,
.cell-output-stdout pre,
.cell-output-display pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Charts / figures: scale down to fit screen width */
img,
.cell-output-display img,
figure img {
  max-width: 100%;
  height: auto;
}

/* Matplotlib / plotly output containers */
.cell-output-display {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Tables: scroll horizontally on mobile */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Accessibility: contrast fixes ──────────────────────────────────── */

.listing-category {
  color: #c8d0d8 !important;
  opacity: 1 !important;
}

.listing-date {
  color: #c8d0d8 !important;
  opacity: 1 !important;
}

.nav-footer,
.nav-footer a,
.nav-footer p,
.nav-footer .nav-footer-left,
.nav-footer .nav-footer-center,
.nav-footer .nav-footer-right {
  color: #c8d0d8 !important;
  opacity: 1 !important;
}

/* ── Blog listing card hover ─────────────────────────────────────────── */

.quarto-grid-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.quarto-grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .quarto-grid-item {
    transition: none;
  }
}

/* ── Small screen tweaks (≤600px) ────────────────────────────────────── */
@media (max-width: 600px) {

  /* Reduce font size slightly for code so it fits better */
  pre,
  code {
    font-size: 0.82em;
  }

  /* KaTeX display math: slightly smaller */
  .katex-display .katex {
    font-size: 1em;
  }

  /* TOC: hide on very small screens to save vertical space */
  #TOC {
    display: none;
  }

  /* Give the main content full width */
  .content,
  .page-layout-article .content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}