/* Photography Modern Clean - Custom Styles */

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

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

.nav-link.active {
    @apply text-sage-600 font-semibold;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
}

.mobile-nav-link {
    @apply text-gray-600 hover:text-sage-600 block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200;
}

/* Hero Section Background */
#home {
    background-image: 
        linear-gradient(135deg, rgba(93, 111, 93, 0.8) 0%, rgba(122, 140, 122, 0.6) 100%),
        url('https://picsum.photos/1920/1080?random=hero');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Filter Buttons */
.filter-btn {
    @apply px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 border-2;
}

.filter-btn:not(.active) {
    @apply border-gray-300 text-gray-600 hover:border-sage-400 hover:text-sage-600 bg-white;
}

.filter-btn.active {
    @apply border-sage-600 text-white bg-sage-600 shadow-lg;
}

/* Gallery Item Hover Effects */
.gallery-item {
    @apply transform transition-all duration-300;
}

.gallery-item:hover {
    @apply -translate-y-2 shadow-xl;
}

/* Collection Card Hover Effects */
.collection-card {
    @apply transform transition-all duration-300;
}

.collection-card:hover {
    @apply -translate-y-2;
}

/* Lightbox Enhancements */
.lightbox-image-container {
    @apply relative;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Intersection Observer Animations */
.animate-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #a3b1a3;
}

/* Focus Styles for Accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-sage-500 ring-offset-2;
}

/* Form Enhancements */
input:focus, 
textarea:focus, 
select:focus {
    @apply outline-none ring-2 ring-sage-500 border-transparent;
}

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

/* Mobile Optimizations */
@media (max-width: 768px) {
    #home {
        background-attachment: scroll;
    }
    
    .gallery-item:hover {
        @apply translate-y-0 shadow-lg;
    }
    
    .collection-card:hover {
        @apply translate-y-0;
    }
}

/* Print Styles */
@media print {
    .fixed,
    nav,
    footer {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .filter-btn:not(.active) {
        @apply border-black text-black;
    }
    
    .filter-btn.active {
        @apply border-black bg-black text-white;
    }
}

/* 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;
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}

/* Custom Utilities */
.text-balance {
    text-wrap: balance;
}

.aspect-photo {
    aspect-ratio: 3 / 4;
}

.aspect-landscape {
    aspect-ratio: 4 / 3;
}

/* Image Loading States */
img {
    @apply transition-opacity duration-300;
}

img:not([src]) {
    @apply opacity-0;
}

/* Enhanced Focus Indicators */
a:focus-visible,
button:focus-visible {
    @apply outline-2 outline-sage-500 outline-offset-2;
}

/* Typography Enhancements */
.font-serif {
    font-feature-settings: 'liga' 1, 'kern' 1;
}

/* Grid Enhancements */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2rem;
    }
}

/* Button Enhancements */
button {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sage-500 focus-visible:ring-offset-2;
}

/* Link Enhancements */
a {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sage-500 focus-visible:ring-offset-2 focus-visible:rounded;
}