/* CourseBag Global Styles and Colors */

/* Custom Tailwind Colors */
:root {
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
}

/* Global Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Utility Classes */
.gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.hero-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgba(16, 185, 129, 0.15) 1px, transparent 0);
  background-size: 20px 20px;
}

/* Component Specific Styles */
.team-member {
  transition: all 0.3s ease;
}

.team-member:hover {
  transform: translateY(-5px);
}

.value-card {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.value-card:hover {
  border-color: #10b981;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.1);
}

.course-card {
  transition: all 0.3s ease;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Back to Top Button Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.back-to-top-enter {
  animation: fadeInUp 0.3s ease-out forwards;
}

.back-to-top-exit {
  animation: fadeOutDown 0.3s ease-out forwards;
}

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

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

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

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

/* Focus Styles */
.focus-ring:focus {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Loading States */
.loading {
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive Utilities */
@media (max-width: 640px) {
  .mobile-stack {
    flex-direction: column;
  }

  .mobile-center {
    text-align: center;
  }

  .mobile-full {
    width: 100%;
  }
}

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

/* Active Menu Styles */
.nav-link-active {
  position: relative;
  color: #059669;
  background-color: #ecfdf5;
  border-bottom: 2px solid #10b981;
}

.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  border-radius: 1px;
}

.nav-link-hover {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link-hover:hover {
  color: #10b981;
  background-color: #f9fafb;
  transform: translateY(-1px);
}

.nav-link-hover:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
  border-radius: 6px;
  z-index: -1;
}