body {
  font-family: 'Google Sans', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.publication-title {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  margin-bottom: 1.5rem !important;
}

.publication-authors {
  margin-bottom: 0.75rem;
}

.publication-body img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}

.hero-body {
  padding: 3rem 1.5rem 2rem;
}

.hero.is-small .hero-body {
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.footer {
  background-color: #2c3e50;
  color: white;
  padding: 2rem 0;
  margin-top: 4rem;
}

.footer .content p {
  margin-bottom: 0;
}

.footer a {
  color: #3498db;
}

.footer a:hover {
  color: #5dade2;
}

.section.article {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.article-body {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.article-body .content p {
  margin-bottom: 1rem;
}

.promo-video {
  border-radius: 10px;
}

.content {
  font-size: 1rem;
}

.content p {
  text-align: justify;
  margin-bottom: 1.25rem;
}

.content ul, .content ol {
  margin-bottom: 1.5rem;
}

.content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

pre {
  background-color: #f5f5f5;
  padding: 1em;
  border-radius: 4px;
}

.author-block {
  margin-bottom: 0.5rem;
}

.external-link {
  margin-bottom: 0.5rem;
}

.demo-video {
  max-width: 100%;
  height: auto;
}

.pet-photo {
  width: 30px;
  height: 30px;
}

.pet-photo:hover {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 10;
}

/* Responsive padding */
.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

.section {
  padding: 3rem 1.5rem;
}

.section .title {
  margin-bottom: 2rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff; /* Improved from #e0e0e0 for better contrast */
  }
  
  .title, .subtitle {
    color: #ffffff;
  }
  
  .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    color: #ffffff;
  }
  
  /* Ensure strong and em elements have high contrast in dark mode */
  strong, b {
    color: #ffffff;
    font-weight: 700; /* Ensure bold text is actually bold */
  }
  
  em, i {
    color: #ffffff;
  }
  
  .box {
    background-color: #252525;
    color: #ffffff; /* Improved from #e0e0e0 for better contrast */
  }
  
  .footer {
    background-color: #1a1a1a;
    color: #ffffff; /* Improved from #cccccc for better contrast */
  }
  
  table.table {
    background-color: #252525;
    color: #ffffff;
  }
  
  table.table th {
    color: #ffffff;
  }
  
  table.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: #2d2d2d;
  }
  
  pre {
    background-color: #2d2d2d;
    color: #ffffff; /* Improved from #e0e0e0 for better contrast */
  }
  
  code {
    background-color: #333333;
    color: #ffffff;
    border-radius: 4px;
    padding: 2px 4px;
  }
  
  pre code {
    background-color: transparent;
  }

  a {
    color: #61dafb;
  }

  blockquote {
    background-color: #252525;
    border-left: 5px solid #61dafb;
    color: #ffffff;
  }

  a:hover {
    color: #a5e9ff;
  }

  p, li, span, div:not(.has-background), td, th, label, figcaption {
    color: #ffffff;
  }

  ::selection {
    background-color: #61dafb;
    color: #000000;
  }

  .readme-section {
    border-color: #30363d;
    color: #c9d1d9;
  }
  
  .readme-section h3 {
    color: #c9d1d9;
    border-bottom-color: #21262d;
  }
  
  .readme-section h4 {
    color: #c9d1d9;
  }
  
  .readme-section p {
    color: #c9d1d9;
  }

  .readme-section a {
    color: #58a6ff;
  }

  .readme-section a:hover {
    color: #79c0ff;
  }
  
  .code-block pre {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  .code-block code {
    color: #c9d1d9;
  }

  .copy-button {
    color: #7d8590;
  }

  .copy-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #c9d1d9;
  }

  .copy-button:active {
    transform: scale(0.95);
  }

  .github-link {
    color: #58a6ff;
  }
}

@media screen and (max-width: 600px) {
  .publication-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .link-block {
    margin: 0.3rem;
  }
}
@media screen and (max-width: 768px) {
  .section .content img {
    width: 100%;
  }
  
  .publication-title {
    font-size: 1.75rem !important;
  }
  
  .columns .column {
    margin-bottom: 1rem;
  }
  
  .pipeline-diagram {
    width: 100%;
  }
}

/* Make tables responsive */
@media screen and (max-width: 768px) {
  .table-container {
    overflow-x: auto;
  }
}

/* Remove all hover effects from tables */
.table.is-hoverable tbody tr:hover,
.table.is-hoverable tbody tr:not(.is-selected):hover,
.table tbody tr:hover,
.table tr:hover,
.table.is-striped tbody tr:not(.is-selected):nth-child(even):hover,
.table.is-striped tbody tr:not(.is-selected):nth-child(odd):hover,
.table.is-striped.is-hoverable tbody tr:not(.is-selected):nth-child(even):hover,
.table.is-striped.is-hoverable tbody tr:not(.is-selected):nth-child(odd):hover {
  background-color: inherit !important;
}

/* Completely disable hoverable behavior */
.table.is-hoverable {
  cursor: default;
}

.table.is-hoverable tbody tr,
.table tbody tr {
  transition: none !important;
}

/* Ensure that the hover color is removed from all tables */
.table tr:hover td,
.table.is-hoverable tr:hover td,
.table.is-striped tr:hover td {
  background-color: inherit !important;
}

/* Remove hover effect from tables - apply to both light and dark modes */
.table.is-hoverable tbody tr:hover,
.table.is-hoverable tbody tr:not(.is-selected):hover,
.table.is-striped.is-hoverable tbody tr:not(.is-selected):nth-child(even):hover,
.table.is-striped.is-hoverable tbody tr:not(.is-selected):nth-child(odd):hover {
  background-color: transparent !important;
}

/* Override Bulma's is-hoverable class entirely */
.table.is-hoverable {
  cursor: default;
}

.table.is-hoverable tbody tr {
  transition: none !important;
}

/* YOOO Paper Website Custom Styles */

/* Title styling with gradient */
.publication-title {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  margin-bottom: 1.5rem !important;
}

/* Improved spacing for sections */
.section {
  padding: 3rem 1.5rem;
}

.section .title {
  margin-bottom: 2rem;
}

/* Better content spacing */
.content p {
  margin-bottom: 1.25rem;
}

.content ul, .content ol {
  margin-bottom: 1.5rem;
}

/* Metric cards with hover effects */
.metric-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1rem;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Pipeline diagrams styling */
.pipeline-diagram {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

/* Better image containers */
.image-container {
  margin: 2rem 0;
  text-align: center;
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Improved columns spacing */
.columns {
  margin-bottom: 2rem;
}

.columns:last-child {
  margin-bottom: 0;
}

/* Better box styling */
.box {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

/* Hero section improvements */
.hero-body {
  padding: 3rem 1.5rem 2rem;
}

/* Video section improvements - removed unused teaser styles */

/* Publication links removed as paper not published yet */

/* Author information spacing */
.publication-authors {
  margin-bottom: 0.75rem;
}

/* Abstract section improvements */
.content.has-text-justified {
  text-align: justify;
  line-height: 1.6;
}

/* Methodology section improvements */
.title.is-5 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Results section improvements */
.notification {
  border-radius: 8px;
  margin: 2rem 0;
}

/* Image caption styling */
.image-caption {
  font-style: italic;
  color: #666;
  text-align: center;
  margin-top: 0.5rem;
}

/* Colored section titles */
.pitch-title {
  color: #e74c3c;
}

.roll-title {
  color: #9b59b6;
}

.deployment-title {
  color: #f39c12;
}

.future-title {
  color: #3498db;
}

/* Future directions box */
.future-box {
  border-left: 4px solid #3498db;
}

/* Metric cards styling */
.metric-card {
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.insertion-card {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.detection-card {
  background: linear-gradient(135deg, #3498db, #5dade2);
}

.speed-card {
  background: linear-gradient(135deg, #e74c3c, #ec7063);
}

.metric-title {
  color: white !important;
}

.metric-value {
  color: white !important;
  margin-bottom: 0.5rem !important;
}

.metric-note {
  font-size: 0.9em;
  opacity: 0.9;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .image-caption {
    color: #aaa;
  }
  
  /* Make colored titles brighter in dark mode */
  .pitch-title {
    color: #ff6b6b;
  }
  
  .roll-title {
    color: #d183ff;
  }
  
  .deployment-title {
    color: #ffb74d;
  }
  
  .future-title {
    color: #4dabff;
  }
  
  .future-box {
    border-left: 4px solid #4dabff;
  }
}

/* GitHub CTA styling */
.github-cta {
  text-align: center;
  margin: 2rem 0;
  font-size: 1.1rem;
}

.github-cta .fa-github {
  font-size: 1.2em;
  vertical-align: middle;
  margin-right: 0.3em;
}

.github-link {
  color: #0366d6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.github-link:hover {
  border-bottom-color: currentColor;
}