/* ==========================================
   1. GLOBAL & TYPOGRAPHY POLISH
   ========================================== */
/* We rely on 'Plus Jakarta Sans' from base.html for a modern look */
.nav-font {
    letter-spacing: -0.02em;
}

/* Custom scrollbar to match the blue theme */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }

/* ==========================================
   2. "PIMPED" AUDIO PLAYER (NotebookLM)
   ========================================== */
audio.custom-audio-player {
    filter: sepia(20%) saturate(70%) hue-rotate(185deg) contrast(95%);
    height: 24px; /* Ultra-slim for horizontal layout */
    width: 100%;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Chrome/Safari/Edge Specific Internals */
audio.custom-audio-player::-webkit-media-controls-enclosure {
    background-color: rgba(239, 246, 255, 0.9); /* Matching Blue-50 */
    border-radius: 8px;
}

audio.custom-audio-player::-webkit-media-controls-play-button {
    background-color: #2563eb; /* LMU Blue */
    border-radius: 50%;
    transform: scale(0.7); /* Smaller for the compact row */
    transition: transform 0.2s ease;
}

audio.custom-audio-player::-webkit-media-controls-play-button:hover {
    transform: scale(0.85);
    background-color: #1e40af;
}

/* Hide clutter for the compact horizontal view */
audio.custom-audio-player::-webkit-media-controls-volume-slider,
audio.custom-audio-player::-webkit-media-controls-mute-button {
    display: none;
}

/* ==========================================
   3. PUBLICATION CARD ELEMENTS
   ========================================== */
/* Ensuring italics for S. cerevisiae and gene names work */
.pub_title i, .pub_title em {
    font-style: italic;
    color: inherit;
}

/* Superscript styling for Corresponding (#) and Equal (*) authors */
sup {
    font-size: 0.65em;
    top: -0.4em;
    margin-left: 1px;
}

/* Action Link Hover Effect */
.group\/link:hover svg {
    transform: translateX(3px);
    transition: transform 0.2s ease;
}

/* ==========================================
   4. LEGACY CAROUSEL & OVERLAY HELPERS
   ========================================== */
.card-image {
    position: relative;
    overflow: hidden;
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 41, 59, 0.5); /* Slate-900 tint */
    opacity: 0;
    transition: 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group:hover .image-overlay {
    opacity: 1;
}

/* Carousel Indicators */
.carousel-indicators li {
    display: inline-block;
    width: 30px;
    height: 4px;
    margin: 6px;
    background-color: #cbd5e1; /* slate-300 */
    cursor: pointer;
    border-radius: 2px;
}

.carousel-indicators .active {
    background-color: #3b82f6; /* blue-500 */
}

/* Smooth jumping to headers */
.scroll-mt-32 {
    scroll-margin-top: 128px; /* Offset for the fixed nav + year bar */
}

/* Hide scrollbar for the year slider but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Ensure year headers stop below the sticky bars */
[id^="year-"] {
    scroll-margin-top: 200px; /* Adjust this value if you change bar heights */
    transition: all 0.3s ease;
}

/* Optional: Highlight the year header briefly when jumped to */
[id^="year-"]:target h2 {
    color: #2563eb; /* LMU Blue */
    transform: translateX(10px);
}