/* Science Kit Computer Graphics - CSS Styles */

/* Highlight animation for anchor links */
.target-highlight {
    animation: highlightFade 2s ease-in-out;
    scroll-margin-top: 20px; /* Add some space above when scrolling to element */
}

@keyframes highlightFade {
    0% {
        background-color: #fff3cd;
    }
    25% {
        background-color: #fff3cd;
    }
    100% {
        background-color: transparent;
    }
}

/* Alternative smooth glow effect */
.target-glow {
    animation: glowFade 2.5s ease-in-out;
}

@keyframes glowFade {
    0% {
        box-shadow: 0 0 15px #007bff;
        background-color: rgba(0, 123, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 20px #007bff;
        background-color: rgba(0, 123, 255, 0.15);
    }
    100% {
        box-shadow: none;
        background-color: transparent;
    }
}

/* WEBGL Viewer Styles */
.glb-viewer {
    padding: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding-bottom: 20px;
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 10px;
}

.canvas-container {
    width: 100%;
    height: 400px;
    margin: auto;
    padding: 0;
}

.canvas-container:hover {
    cursor: pointer; /* Change cursor to pointer on hover */
}

.dg {
    left: 20px !important; /* Adds 20px padding from right edge */
}

@media (max-width: 576px) { /* Small screens */
    .canvas-container {
        margin: 0;
        padding: 0;
        height: 300px;
        width: 100%;
    }
}

/* Citation Styles */
/* .citation-number {
  font-weight: bold;
  color: #0066cc;
} */

/* .citation-link {
  color: #333;
  text-decoration: none;
} */

/* .citation-link:hover .citation-number {
  background-color: #f0f0f0;
  padding: 1px 3px;
  border-radius: 2px;
} */

/* Style for number-only citations */
/* .citation-link:not(:has(.citation-link-title)) {
  font-weight: bold;
} */

/* .bibliography{
    padding: 0;
    margin: 0;
}
.bibliography ol  {
    padding: 0 !important;
    margin: 0;
}
.bibliography li {
    padding: 0 !important;
    margin-left: 2rem !important;
} */

/* Images Styles */
/* Basic figure styling */
.figure-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5em 0;
}

.figure-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: 200px; /* Ensure enough height for vertical centering */
}

.figure-image {
  height: auto;
  max-height: 400px; /* Control maximum height */
  max-width: 100%;
  object-fit: contain; /* Preserve aspect ratio */
  border-radius: 4px;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

.figure-caption {
  text-align: center;
  margin-top: 0.5em;
  font-style: italic;
  color: #666;
}

/* Responsive height controls */
/* @media (max-width: 768px) {
  .figure-image {
    max-height: 250px;
  }
} */

/* Responsive layout for small screens */
@media (max-width: 500px) {
    .figure-images {
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }
    
    .figure-image {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 300px;
    }
}

@media (max-width: 500px) {
    .figure-block {
        flex-direction: column;
        align-items: center;
        width: 100% !important;
    }
}

/* Special styling for multi-image figures */
.figure-images:has(> .figure-image:nth-child(2)) .figure-image {
  max-height: 300px; /* Smaller max height for multi-image figures */
}

/* Style based on figure number */
/* .figure-block[data-figure-number="1"] {
  border-left: 3px solid #007acc;
  padding-left: 1em;
} */


/* styloe for alerts */
@media (min-width: 700px) {
    .alert {
        width: calc(100% - 2rem);
    }
}