/* Custom styles for the Digital Humanities & AI website */

/* Navigation styles */
.nav-link {
    @apply px-3 py-2 text-sm font-medium transition-colors duration-200 text-white text-opacity-80 hover:text-white hover:text-opacity-100;
}

.nav-link.active {
    @apply text-white text-opacity-100 border-b-2 border-blue-400;
}

.mobile-nav-link {
    @apply block w-full px-6 py-4 text-lg font-medium transition-all duration-200 text-white text-opacity-90 hover:text-white hover:text-opacity-100 bg-gradient-to-r from-white/5 to-white/10 hover:from-blue-500/20 hover:to-purple-500/20 rounded-xl border border-white/10 hover:border-blue-400/40 shadow-md hover:shadow-lg backdrop-blur-sm text-center;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-link.active {
    @apply text-white text-opacity-100 bg-gradient-to-r from-blue-500/30 to-purple-500/30 border-blue-400/50 shadow-xl backdrop-blur-sm;
}

/* Button styles */
.btn-primary {
    @apply text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 inline-block text-center shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
}

.btn-secondary {
    @apply font-medium py-3 px-6 rounded-lg transition-all duration-200 inline-block text-center border shadow-sm hover:shadow-md transform hover:-translate-y-0.5;
}

/* Card styles */
.publication-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200;
}

.teaching-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6;
}

.blog-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200;
}

/* Keyword tags */
.keyword-tag {
    @apply inline-block text-sm font-medium px-3 py-1 rounded-full shadow-sm backdrop-blur-sm;
}

/* Social links */
.social-link {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 shadow-sm hover:shadow-md transform hover:-translate-y-0.5 backdrop-blur-sm;
}

/* Academic profile icons */
.academic-icon-link {
    @apply text-white text-opacity-70 hover:text-opacity-100 transition-all duration-200 transform hover:scale-110 hover:text-blue-300;
}

/* Section management */
.section {
    @apply transition-all duration-300;
}

.section.hidden {
    @apply opacity-0 pointer-events-none absolute inset-0 translate-y-4;
}

.section.active {
    @apply opacity-100 relative translate-y-0;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom focus styles */
input:focus, textarea:focus, button:focus {
    outline: none;
}

/* Animation for mobile menu */
#mobile-menu {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

#mobile-menu.hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    max-height: 400px;
}

/* Enhanced mobile menu container styling */
#mobile-menu > div {
    @apply bg-black/60 backdrop-blur-md border-t border-white/20 shadow-2xl;
    border-radius: 0 0 16px 16px;
}

/* Mobile menu button styling */
#mobile-menu-button {
    @apply p-2 rounded-lg hover:bg-white/10 transition-all duration-200;
}

#mobile-menu-button:hover {
    @apply shadow-lg backdrop-blur-sm;
}

/* Responsive typography */
@media (max-width: 640px) {
    .btn-primary, .btn-secondary {
        @apply w-full text-center;
    }
    
    /* Allow scrolling on mobile */
    #main-content {
        overflow-y: auto !important;
    }
    
    /* Ensure mobile menu doesn't interfere with content */
    #mobile-menu {
        z-index: 40;
    }
    
    /* Add extra top padding to sections on mobile when menu is open */
    body.mobile-menu-open #main-content {
        padding-top: 1rem;
    }
    
    /* Improve mobile menu spacing */
    #mobile-menu .space-y-3 > * + * {
        margin-top: 0.75rem;
    }
    
    /* Ensure mobile menu items are properly spaced and sized */
    .mobile-nav-link {
        margin-bottom: 0.75rem;
    }
    
    .mobile-nav-link:last-child {
        margin-bottom: 0;
    }
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Backdrop blur support */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .section {
        page-break-inside: avoid;
    }
}

/* Filter button styles */
.filter-btn {
    @apply px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 border backdrop-blur-sm;
    @apply bg-white bg-opacity-10 text-white text-opacity-70 border-white border-opacity-20;
    @apply hover:bg-opacity-20 hover:text-opacity-100 hover:border-opacity-40;
}

.filter-btn.active {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white border-transparent shadow-lg;
}

/* Publication filtering */
.publication-card.hidden {
    @apply opacity-0 pointer-events-none absolute;
}

.publication-card:not(.hidden) {
    @apply opacity-100 relative;
}