/* Custom styles for Our Society website */

/* Navigation styles */
.nav-link {
    @apply text-slate-600 hover:text-slate-900 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-primary bg-primary/10;
}

.mobile-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    color: #334155 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    flex-direction: row !important;
}

.mobile-nav-link:hover {
    color: #6C63FF !important;
    background-color: rgba(108, 99, 255, 0.05) !important;
}

.mobile-nav-link.active {
    color: #6C63FF !important;
    background-color: rgba(108, 99, 255, 0.1) !important;
    border-left: 4px solid #6C63FF !important;
}

.mobile-nav-link svg {
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    display: inline-block !important;
}

/* Festive separator for events page */
.festive-separator {
    border-top: 2px dotted #FF7A59;
    position: relative;
    margin: 2rem 0;
}

.festive-separator::before {
    content: '✨';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0 1rem;
    font-size: 1.2rem;
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Focus styles for accessibility */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

/* Button styles */
.btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors duration-200 focus-ring;
}

.btn-secondary {
    @apply bg-white text-primary border-2 border-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-colors duration-200 focus-ring;
}

.btn-accent {
    @apply bg-accent text-white px-6 py-3 rounded-lg font-medium hover:bg-accent/90 transition-colors duration-200 focus-ring;
}

/* Card styles */
.card {
    @apply bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-md transition-shadow duration-200;
}

.card-hover {
    @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-200;
}

/* Event card specific styles */
.event-card {
    @apply card card-hover;
}

.event-card.hidden {
    display: none !important;
}

/* Photo grid styles */
.photo-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6;
}

.photo-thumb {
    @apply cursor-pointer rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200 focus-ring;
}

/* Filter chip styles */
.filter-chip {
    @apply px-4 py-2 rounded-full text-sm font-medium border-2 cursor-pointer transition-colors duration-200 focus-ring;
}

.filter-chip.active {
    @apply bg-primary text-white border-primary;
}

.filter-chip:not(.active) {
    @apply bg-white text-slate-600 border-slate-300 hover:border-primary hover:text-primary;
}

/* Stats bar styles */
.stats-item {
    @apply text-center;
}

.stats-number {
    @apply text-3xl font-bold text-primary font-display;
}

.stats-label {
    @apply text-sm text-slate-600 mt-1;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200 resize-vertical;
}

.form-label {
    @apply block text-sm font-medium text-slate-700 mb-2;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

/* Success/Error alerts */
.alert {
    @apply px-4 py-3 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-50 text-green-800 border border-green-200;
}

.alert-error {
    @apply bg-red-50 text-red-800 border border-red-200;
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .nav-link {
        @apply border border-transparent;
    }
    
    .nav-link:hover,
    .nav-link.active {
        @apply border-current;
    }
}

/* Text truncation utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scroll indicator improvements */
.scroll-indicator {
    @apply cursor-pointer select-none;
}

.scroll-indicator:hover {
    @apply transform scale-105;
}

.scroll-indicator:active {
    @apply transform scale-95;
}

/* Mobile-specific scroll indicator */
@media (max-width: 768px) {
    .scroll-indicator {
        @apply text-white/80;
    }
    
    .scroll-indicator span {
        @apply text-xs;
    }
}

/* Photo grid improvements */
.photo-grid {
    @apply grid gap-6;
}

.photo-grid.grid-cols-1 {
    @apply grid-cols-1;
}

.photo-grid.grid-cols-2 {
    @apply grid-cols-1 sm:grid-cols-2;
}

.photo-grid.grid-cols-3 {
    @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
}

.photo-grid.grid-cols-4 {
    @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-4;
}

/* Ensure proper containment */
.photo-thumb {
    @apply relative overflow-hidden;
}

/* Fix any potential overflow issues */
.photo-thumb img {
    @apply w-full h-full object-cover;
}

/* Improved hover states */
.photo-thumb:hover {
    @apply transform scale-105 transition-transform duration-300;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .photo-thumb:hover {
        @apply transform-none;
    }
}

/* Custom Scrollbar Styles */
.scrollbar-thin {
    scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #6C63FF;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #5a52e6;
}

.scrollbar-thumb-primary::-webkit-scrollbar-thumb {
    background: #6C63FF;
}

.scrollbar-track-slate-100::-webkit-scrollbar-track {
    background: #f1f5f9;
}