/* Custom styles for personal website */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

/* Import EB Garamond (body) and Playfair Display (headings) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:wght@500;600;700&display=swap');

/* Global font size */
body {
  font-size: 0.95em !important;
}

main {
  font-size: 1.05em !important;
}

/* Playfair Display for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important;
}

/* Navbar styling */
.navbar {
  background-color: #111111 !important;
  border-bottom: none !important;
}

.navbar-brand {
  color: #ffffff !important;
  font-family: 'Kaushan Script', cursive !important;
  font-size: 1.5rem !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

.navbar-nav .nav-link {
  color: #ffffff !important;
}

.navbar-nav .nav-link:hover {
  color: #ffffff !important;
  background-color: #333333 !important;
  border-radius: 4px;
}

.navbar-nav .nav-link.active {
  color: #ffffff !important;
  background-color: #333333 !important;
  border-radius: 4px;
}

/* Navbar icons (right side) */
.navbar-nav .nav-link .bi {
  color: #ffffff !important;
}

/* Footer styling override */
.page-footer {
  background-color: #111111 !important;
  border-top: none !important;
  color: #ffffff !important;
}

.page-footer a {
  color: #cccccc !important;
  text-decoration: none;
}

.page-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Title block banner styling - Light mode */
.title-block-banner,
.quarto-title-banner,
.quarto-title-block,
.page-header,
.hero-banner {
  background-color: white !important;
  background: white !important;
  color: #212529 !important;
}

.title-block-banner .title,
.quarto-title-banner .title,
.quarto-title-block .title,
.quarto-title-block h1,
.quarto-title h1,
.page-header h1,
.hero-banner h1,
h1.title,
.listing-title,
.listing-subtitle,
.listing-description,
.listing-author,
.listing-date,
.listing-item h3,
.listing-item h3 a,
#title-block-header h1,
#title-block-header .title,
.about-entity .about-entity-heading {
  color: #212529 !important;
}

/* Title block banner styling - Dark mode (Quarto class-based toggle) */
body.quarto-dark .title-block-banner,
body.quarto-dark .quarto-title-banner,
body.quarto-dark .quarto-title-block,
body.quarto-dark .page-header,
body.quarto-dark .hero-banner,
body.quarto-dark #title-block-header,
html[data-bs-theme="dark"] .title-block-banner,
html[data-bs-theme="dark"] .quarto-title-banner,
html[data-bs-theme="dark"] .quarto-title-block,
html[data-bs-theme="dark"] .page-header,
html[data-bs-theme="dark"] .hero-banner,
html[data-bs-theme="dark"] #title-block-header {
  background-color: transparent !important;
  background: transparent !important;
  color: #f8f9fa !important;
}

body.quarto-dark .title-block-banner .title,
body.quarto-dark .quarto-title-banner .title,
body.quarto-dark .quarto-title-block .title,
body.quarto-dark .quarto-title-block h1,
body.quarto-dark .quarto-title h1,
body.quarto-dark .page-header h1,
body.quarto-dark .hero-banner h1,
body.quarto-dark h1.title,
body.quarto-dark .listing-title,
body.quarto-dark .listing-subtitle,
body.quarto-dark .listing-description,
body.quarto-dark .listing-author,
body.quarto-dark .listing-date,
body.quarto-dark .listing-item h3,
body.quarto-dark .listing-item h3 a,
body.quarto-dark #title-block-header h1,
body.quarto-dark #title-block-header .title,
body.quarto-dark .about-entity .about-entity-heading,
html[data-bs-theme="dark"] .title-block-banner .title,
html[data-bs-theme="dark"] .quarto-title-banner .title,
html[data-bs-theme="dark"] .quarto-title-block .title,
html[data-bs-theme="dark"] .quarto-title-block h1,
html[data-bs-theme="dark"] .quarto-title h1,
html[data-bs-theme="dark"] .page-header h1,
html[data-bs-theme="dark"] .hero-banner h1,
html[data-bs-theme="dark"] h1.title,
html[data-bs-theme="dark"] .listing-title,
html[data-bs-theme="dark"] .listing-subtitle,
html[data-bs-theme="dark"] .listing-description,
html[data-bs-theme="dark"] .listing-author,
html[data-bs-theme="dark"] .listing-date,
html[data-bs-theme="dark"] .listing-item h3,
html[data-bs-theme="dark"] .listing-item h3 a,
html[data-bs-theme="dark"] #title-block-header h1,
html[data-bs-theme="dark"] #title-block-header .title,
html[data-bs-theme="dark"] .about-entity .about-entity-heading {
  color: #f8f9fa !important;
}

/* ===== Shared sidebar layout for all custom pages ===== */

.site-page {
  display: flex;
  max-width: 1100px;
  margin: 5rem auto;
  padding: 0 2rem;
  gap: 3.5rem;
  align-items: flex-start;
}

.site-sidebar {
  flex: 0 0 200px;
}


.site-sidebar .index-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #111;
  white-space: nowrap;
}

.site-sidebar .index-affil {
  font-size: 0.85rem;
  color: #555;
  margin: 0 0 1.3rem 0;
  line-height: 1.45;
}

.site-sidebar .index-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-sidebar .index-nav li {
  margin-bottom: 0.3rem;
}

.site-sidebar .index-nav a {
  font-size: 0.92rem;
  color: #111;
  text-decoration: none;
  font-family: "EB Garamond", Georgia, serif;
  white-space: nowrap;
}

.site-sidebar .index-nav a:hover {
  text-decoration: underline;
}

.site-sidebar .index-nav a.active {
  text-decoration: underline;
}

.site-sidebar .index-sketch {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.nav-icon {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
  margin-right: 0.15em;
}

.site-content {
  flex: 1;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #212529;
  min-width: 0;
}

.site-content p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.site-content a {
  color: #111;
}

.site-content a:hover {
  text-decoration: underline;
}

/* Dark mode — sidebar */
body.quarto-dark .site-sidebar .index-name,
html[data-bs-theme="dark"] .site-sidebar .index-name { color: #f0f0f0 !important; }
body.quarto-dark .site-sidebar .index-affil,
html[data-bs-theme="dark"] .site-sidebar .index-affil { color: #aaa !important; }
body.quarto-dark .site-sidebar .index-nav a,
html[data-bs-theme="dark"] .site-sidebar .index-nav a { color: #ddd !important; }
body.quarto-dark .site-sidebar .index-nav a.active,
html[data-bs-theme="dark"] .site-sidebar .index-nav a.active { text-decoration: underline !important; }
body.quarto-dark .site-content,
html[data-bs-theme="dark"] .site-content { color: #cfcfcf !important; }
body.quarto-dark .site-content a,
html[data-bs-theme="dark"] .site-content a { color: #7ec87e !important; }

/* =====================================================================
   Consistent dark-mode palette for all custom pages (CV / research /
   teaching / index). Single source of truth so every page reads the same:
     headings/names ...... #f0f0f0
     body / detail text .. #cfcfcf
     muted (dates etc.) .. #a8a8a8
     links ............... #7ec87e
     accent (refs) ....... #e0a3a3
   ===================================================================== */

/* Headings, names and entry/section titles */
body.quarto-dark .site-content h2,
body.quarto-dark .site-content h3,
body.quarto-dark .cv-name,
body.quarto-dark .cv-section-title,
body.quarto-dark .cv-entry-title,
body.quarto-dark .cv-entry-detail strong,
html[data-bs-theme="dark"] .site-content h2,
html[data-bs-theme="dark"] .site-content h3,
html[data-bs-theme="dark"] .cv-name,
html[data-bs-theme="dark"] .cv-section-title,
html[data-bs-theme="dark"] .cv-entry-title,
html[data-bs-theme="dark"] .cv-entry-detail strong { color: #f0f0f0 !important; }

/* Body / detail text */
body.quarto-dark .cv-entry-detail,
body.quarto-dark .cv-entry-subtitle,
html[data-bs-theme="dark"] .cv-entry-detail,
html[data-bs-theme="dark"] .cv-entry-subtitle { color: #cfcfcf !important; }

/* Muted secondary text (dates, contact line, reference details) */
body.quarto-dark .cv-entry-date,
body.quarto-dark .cv-contact,
body.quarto-dark .cv-reference-details,
html[data-bs-theme="dark"] .cv-entry-date,
html[data-bs-theme="dark"] .cv-contact,
html[data-bs-theme="dark"] .cv-reference-details { color: #a8a8a8 !important; }

/* Accent — reference names (maroon in light mode) */
body.quarto-dark .cv-reference-name,
html[data-bs-theme="dark"] .cv-reference-name { color: #e0a3a3 !important; }

/* Links inside content/contact (override per-page black link colors) */
body.quarto-dark .site-content a,
body.quarto-dark .cv-contact a,
html[data-bs-theme="dark"] .site-content a,
html[data-bs-theme="dark"] .cv-contact a { color: #7ec87e !important; }

/* Section divider borders, lighter so they stay subtle on dark */
body.quarto-dark .cv-section-title,
body.quarto-dark .cv-header,
html[data-bs-theme="dark"] .cv-section-title,
html[data-bs-theme="dark"] .cv-header { border-color: #444 !important; }

/* --- Research + Teaching page specifics, same palette --- */

/* Headings (#f0f0f0) */
body.quarto-dark .diss-title,
body.quarto-dark .institution-header h3,
html[data-bs-theme="dark"] .diss-title,
html[data-bs-theme="dark"] .institution-header h3 { color: #f0f0f0 !important; }

/* Muted (#a8a8a8) */
body.quarto-dark .diss-meta,
body.quarto-dark .teaching-intro,
body.quarto-dark .institution-header span,
body.quarto-dark .photo-credit,
html[data-bs-theme="dark"] .diss-meta,
html[data-bs-theme="dark"] .teaching-intro,
html[data-bs-theme="dark"] .institution-header span,
html[data-bs-theme="dark"] .photo-credit { color: #a8a8a8 !important; }

/* Photo credit link */
body.quarto-dark .photo-credit a,
html[data-bs-theme="dark"] .photo-credit a { color: #7ec87e !important; }

/* Teaching tables — body text (#cfcfcf), accent headers (#e0a3a3) */
body.quarto-dark .institution-body table,
body.quarto-dark .institution-body table td,
html[data-bs-theme="dark"] .institution-body table,
html[data-bs-theme="dark"] .institution-body table td {
  color: #cfcfcf !important;
  background-color: transparent !important;
  --bs-table-bg: transparent;
}
body.quarto-dark .institution-body table td,
html[data-bs-theme="dark"] .institution-body table td { border-bottom-color: #333 !important; }
body.quarto-dark .institution-body table th,
html[data-bs-theme="dark"] .institution-body table th { color: #e0a3a3 !important; border-bottom-color: #555 !important; }
body.quarto-dark .institution-body table thead tr,
html[data-bs-theme="dark"] .institution-body table thead tr { background-color: #2a2a2a !important; }
body.quarto-dark .institution-body table tr:hover td,
html[data-bs-theme="dark"] .institution-body table tr:hover td { background-color: #2a2020 !important; }

/* =====================================================================
   RESPONSIVE / MOBILE  —  applies to every page of the site
   ---------------------------------------------------------------------
   Layout ladder:
     > 768px  ..... desktop two-column (sidebar + content)
     <= 768px ..... single column, nav becomes a wrapping menu row
     <= 420px ..... tighter spacing / smaller decorative images
   ===================================================================== */

/* ---- Safety net at every width (custom pages AND Quarto course pages) ---- */

html {
  -webkit-text-size-adjust: 100%;   /* stop Android/WebKit auto text inflation */
  text-size-adjust: 100%;
}

/* Nothing with an intrinsic size may be wider than its container.
   (Bootstrap's reboot does NOT do this, which is why the 600px course
   images used to push the whole page sideways on a phone.) */
img, svg, video, iframe, embed, object {
  max-width: 100%;
}

img {
  height: auto;                     /* keep aspect ratio when width/height attrs are set */
}

/* Wide content scrolls inside its own box instead of widening the page */
pre, .sourceCode, .cell-output, .table-responsive, .institution-body {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Display equations get their own scrollbar rather than overflowing */
mjx-container[display="true"],
.math.display,
.MathJax_Display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Long URLs / emails must not stretch the layout */
.site-content,
main.content {
  overflow-wrap: break-word;
}


/* ===================== Phones and small tablets ===================== */
@media (max-width: 768px) {

  body { overflow-x: hidden; }      /* final guard against sideways drift */

  /* ---------- Shared custom-page shell (index / research / teaching / cv) ---------- */

  .site-page {
    display: block;                 /* simple, predictable stacking */
    max-width: 100%;
    margin: 1.25rem auto 2.5rem;
    padding: 0 1.15rem;
  }

  .site-sidebar {
    flex: none;
    width: auto;
    margin-bottom: 1.4rem;
  }

  .site-sidebar .index-name {
    font-size: 1.45rem;
    line-height: 1.25;
    white-space: normal;
    margin-bottom: 0.15rem;
    color: #111 !important;
  }

  .site-sidebar .index-affil {
    font-size: 0.95rem;
    margin-bottom: 0.55rem;
    color: #444 !important;
  }

  /* Navigation turns into a wrapping row of comfortable tap targets */
  .site-sidebar .index-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.15rem;
    margin: 0.3rem 0 0;
    padding: 0.25rem 0;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
  }

  .site-sidebar .index-nav li { margin: 0; }

  .site-sidebar .index-nav a {
    display: inline-block;
    padding: 0.45rem 0;             /* ~44px tap height */
    font-size: 1rem;
    color: #111 !important;
    white-space: nowrap;
  }

  /* the e-mail entry is long: give it its own line and let it wrap */
  .site-sidebar .index-nav li:last-child { flex: 1 0 100%; }
  .site-sidebar .index-nav li:last-child a {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
  }

  /* ---------- Home page: portrait sits beside the name block ---------- */

  .index-sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1rem;
  }

  .index-sidebar .sidebar-identity {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Pandoc wraps a standalone <img> in a <p>, so the flex item may be either
     the paragraph or the image itself — style whichever one shows up. */
  .index-sidebar > p:first-child,
  .index-sidebar > .index-sketch {
    order: 1;
    flex: 0 0 auto;
    width: 108px;
    margin: 0 !important;
    align-self: flex-start;
  }

  .index-sidebar .index-sketch {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 6px;
  }

  .index-sidebar .index-nav {
    order: 2;
    flex: 1 0 100%;
  }

  /* ---------- Research / Teaching: decorative photo becomes a slim banner ---------- */

  .site-sidebar .research-sidebar-image,
  .site-sidebar .sidebar-image {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    margin: 0.7rem 0 0.4rem;
  }

  .site-sidebar .photo-credit,
  .site-sidebar > p:not([class]):not(:first-child) {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    margin-bottom: 0.5rem !important;
  }

  /* ---------- CV download button ---------- */

  .cv-download {
    margin-top: 1.25rem;
    padding-top: 1rem;
  }

  .cv-download-btn {
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }

  /* ---------- Content column ---------- */

  .site-content {
    width: auto;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #222 !important;
  }

  .site-page .site-content h2 { font-size: 1.2rem; margin-top: 1.6rem; }
  .site-page .site-content h3 { font-size: 1.05rem; }

  .site-content ul { padding-left: 1.1rem; }

  /* ---------- CV specifics ---------- */

  .site-content .cv-header {
    margin-top: 0;
    margin-bottom: 1.2rem;
  }

  .site-content .cv-name { font-size: 1.5rem; }

  .site-content .cv-contact { font-size: 0.88rem; }

  .site-content .cv-entry-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .site-content .cv-reference {
    display: block;
    margin-right: 0;
  }

  /* ---------- Teaching tables: sideways scroll instead of squeezed columns ---------- */

  .site-content .institution-body table {
    display: table;                 /* the .institution-body wrapper does the scrolling */
    min-width: 33rem;
    font-size: 0.85rem;
  }

  .site-content .institution-body table th,
  .site-content .institution-body table td {
    padding: 0.4rem 0.55rem;
  }

  /* ---------- Quarto course pages (eco104 / eco204 / julia_course) ---------- */

  main.content > table,
  main.content table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.9rem;
  }

  main.content .quarto-figure,
  main.content figure { margin-left: 0; margin-right: 0; }

  .navbar-brand { font-size: 1.2rem !important; }

  /* keep the dark-mode toggle clear of the thumb / gesture bar */
  #dark-toggle {
    bottom: max(1rem, env(safe-area-inset-bottom));
    right: 1rem;
  }
}


/* ===================== Teaching tables become cards on phones =====================
   A four-column table (Course | Role | Term(s) | Links) cannot be read on a
   360-430px screen. Below 620px each row is redrawn as a small card, with the
   column headings re-attached to each cell via ::before, so nothing is lost. */
@media (max-width: 620px) {

  .site-content .institution-body { overflow-x: visible; }

  .site-content .institution-body table,
  .site-content .institution-body tbody,
  .site-content .institution-body tr,
  .site-content .institution-body td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .site-content .institution-body thead { display: none; }

  .site-content .institution-body tr {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.7rem;
  }

  .site-content .institution-body tr:hover td { background-color: transparent !important; }

  .site-content .institution-body td {
    border: none !important;
    padding: 0.1rem 0 !important;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .site-content .institution-body td:empty { display: none; }

  .site-content .institution-body td:first-child {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }

  .site-content .institution-body td:nth-child(2)::before { content: "Role — "; }
  .site-content .institution-body td:nth-child(3)::before { content: "Term(s) — "; }
  .site-content .institution-body td:nth-child(4)::before { content: "Links — "; }

  .site-content .institution-body td:nth-child(2)::before,
  .site-content .institution-body td:nth-child(3)::before,
  .site-content .institution-body td:nth-child(4)::before {
    font-weight: 600;
    color: #4C0000;
  }

  body.quarto-dark .site-content .institution-body tr,
  html[data-bs-theme="dark"] .site-content .institution-body tr { border-color: #3a3a3a; }

  body.quarto-dark .site-content .institution-body td:nth-child(2)::before,
  body.quarto-dark .site-content .institution-body td:nth-child(3)::before,
  body.quarto-dark .site-content .institution-body td:nth-child(4)::before,
  html[data-bs-theme="dark"] .site-content .institution-body td:nth-child(2)::before,
  html[data-bs-theme="dark"] .site-content .institution-body td:nth-child(3)::before,
  html[data-bs-theme="dark"] .site-content .institution-body td:nth-child(4)::before { color: #e0a3a3; }
}


/* ===================== Narrow phones ===================== */
@media (max-width: 420px) {

  .site-page {
    padding: 0 0.9rem;
    margin-top: 1rem;
  }

  .site-sidebar .index-name { font-size: 1.3rem; }

  .index-sidebar { column-gap: 0.75rem; }
  .index-sidebar > p:first-child,
  .index-sidebar > .index-sketch { width: 90px; }

  .site-sidebar .index-nav { gap: 0 0.95rem; }
  .site-sidebar .index-nav a { font-size: 0.95rem; }

  .site-sidebar .research-sidebar-image,
  .site-sidebar .sidebar-image { max-height: 120px; }

  .site-content { font-size: 1rem; }

  .site-content .cv-name { font-size: 1.3rem; }

  .navbar-brand { font-size: 1.05rem !important; }
}


/* ---- Dark mode: mobile nav rules must not keep light-mode colours ---- */
@media (max-width: 768px) {
  body.quarto-dark .site-sidebar .index-name,
  html[data-bs-theme="dark"] .site-sidebar .index-name { color: #f0f0f0 !important; }

  body.quarto-dark .site-sidebar .index-affil,
  html[data-bs-theme="dark"] .site-sidebar .index-affil { color: #a8a8a8 !important; }

  body.quarto-dark .site-sidebar .index-nav,
  html[data-bs-theme="dark"] .site-sidebar .index-nav {
    border-top-color: #3a3a3a;
    border-bottom-color: #3a3a3a;
  }

  body.quarto-dark .site-sidebar .index-nav a,
  html[data-bs-theme="dark"] .site-sidebar .index-nav a { color: #ddd !important; }

  body.quarto-dark .site-content,
  html[data-bs-theme="dark"] .site-content { color: #cfcfcf !important; }
}

.index-grid {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
}

.index-g-col-4 {
  flex: 1;
  margin: 0 5px;
}

/* Navigation dropdown styles */
.dropdown-menu {
  max-height: 400px;
  overflow: auto;
}

.quarto-navbar-tools .dropdown-menu.show {
  right: 0px;
  left: auto;
}

@media (max-width: 988px) {
  .quarto-navbar-tools .dropdown-menu.show {
    right: -80px;
  }
}

/* About page styling */
.about-entity {
  margin-bottom: 2rem;
}

.about-links {
  margin-top: 1rem;
}

/* Blog listing styles */
.listing-item {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.listing-item:last-child {
  border-bottom: none;
}

/* Research page styles */
.research-section {
  margin-bottom: 2rem;
}

.publication-item {
  margin-bottom: 1rem;
}

/* Teaching page styles */
.course-item {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
}

/* Footer styles */
.page-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

/* Theorem-like environments styling (without labels - Quarto crossref handles labels) */
.lemma, .theorem, .proposition, .corollary, .definition {
  background-color: #f8f9fa;
  color: #212529;
  border-left: 4px solid #007bff;
  padding: 1rem 1rem 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 0.25rem;
}

/* Theorem environments - Dark mode */
body.quarto-dark .lemma,
body.quarto-dark .theorem,
body.quarto-dark .proposition,
body.quarto-dark .corollary,
body.quarto-dark .definition,
html[data-bs-theme="dark"] .lemma,
html[data-bs-theme="dark"] .theorem,
html[data-bs-theme="dark"] .proposition,
html[data-bs-theme="dark"] .corollary,
html[data-bs-theme="dark"] .definition {
  background-color: #2b3035;
  color: #f8f9fa;
  border-left-color: #4dabf7;
}

/* Removed ::before rules to prevent duplication with Quarto's crossref labels */

.proof {
  padding: 1rem 0;
  margin: 1rem 0;
}

.proof::before {
  content: "Proof. ";
  font-weight: bold;
  font-style: italic;
  color: #6c757d;
}

.proof::after {
  content: " ∎";
  float: right;
  font-weight: bold;
}
/* Citation styling (similar to LaTeX hyperref) */
/* You can customize the citation color by changing the values below */
/* Popular color options:
   - Dark red: #8B0000
   - Blue: #0066cc
   - Dark green: #006400
   - Purple: #800080
   - Teal: #008080
*/

/* Style the entire citation span (including author name and year) */
span.citation {
  color: #006400 !important;  /* Dark green for entire citation */
  font-weight: 500 !important;
}

span.citation:hover {
  color: #004d00 !important;  /* Darker green on hover */
  cursor: pointer;
}

/* Style citation links */
.citation a {
  color: #006400 !important;  /* Dark green for citations */
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease;
}

.citation a:hover {
  color: #004d00 !important;  /* Darker green on hover */
  text-decoration: underline !important;
}

/* Style for citation links in the text (e.g., the year part) */
a[href^="#ref-"] {
  color: #006400 !important;  /* Dark green for citation links */
  text-decoration: none !important;
  font-weight: 500 !important;
}

a[href^="#ref-"]:hover {
  color: #004d00 !important;  /* Darker green on hover */
  text-decoration: underline !important;
}