/* CERAN Immobilier – Custom Styles */

/* Navigation links */
.nav-link {
    @apply text-sm font-medium text-stone-600 hover:text-stone-800 transition-colors duration-200 relative;
}
.nav-link.active {
    @apply text-stone-800;
}
.nav-link.active::after {
    content: '';
    @apply absolute -bottom-1 left-0 right-0 h-0.5 bg-gold-400 rounded-full;
}

.mobile-nav-link {
    @apply block px-4 py-2 text-sm font-medium text-stone-600 hover:text-stone-800 hover:bg-stone-50 rounded-lg transition-colors;
}

/* Filter buttons */
.filter-btn {
    @apply px-5 py-2 text-sm font-medium text-stone-500 bg-stone-50 border border-stone-200 rounded-lg hover:border-stone-400 hover:text-stone-700 transition-all duration-200;
}
.filter-btn.active {
    @apply bg-stone-800 text-white border-stone-800;
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #c9a959;
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f5f5f4;
}
::-webkit-scrollbar-thumb {
    background: #a8a29e;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #78716c;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}