/* Common Styles for Portfolio Website */

/* Font Family */
.font-inter {
    font-family: 'Inter', sans-serif;
}

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

.nav-link.active {
    @apply text-blue-600 bg-blue-50;
}

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

.mobile-nav-link.active {
    @apply text-blue-600 bg-blue-50;
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 shadow-sm;
}

.btn-secondary {
    @apply inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 shadow-sm;
}

.btn-white {
    @apply inline-flex items-center px-6 py-3 border border-white text-base font-medium rounded-lg text-blue-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-colors duration-200 shadow-sm;
}

/* Skill Cards */
.skill-card {
    @apply bg-white p-6 rounded-lg text-center shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100;
}

/* Project Cards */
.project-card {
    @apply bg-white rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-gray-100;
}

.project-card:hover {
    transform: translateY(-2px);
}

.project-image {
    @apply w-full h-48 object-cover;
}

.project-content {
    @apply p-6;
}

.project-title {
    @apply text-xl font-semibold text-gray-900 mb-2;
}

.project-description {
    @apply text-gray-600 mb-4;
}

.project-tags {
    @apply flex flex-wrap gap-2 mb-4;
}

.project-tag {
    @apply px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full;
}

.project-links {
    @apply flex gap-3;
}

.project-link {
    @apply text-blue-600 hover:text-blue-800 font-medium text-sm transition-colors duration-200;
}

/* Form Styles */
.form-group {
    @apply mb-6;
}

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

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 resize-vertical;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

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

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

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

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .container-padding {
        @apply px-4;
    }
}

@media (min-width: 769px) {
    .container-padding {
        @apply px-6;
    }
}

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

.loading-spinner {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
}

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

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

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

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