/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 /* Custom scrollbar styles */
 ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-neutral-100 dark:bg-neutral-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-neutral-400 dark:bg-neutral-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-neutral-500 dark:bg-neutral-500;
}

/* Focus styles for accessibility */
*:focus {
  outline: none;
}

*:focus-visible {
  @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-white dark:ring-offset-neutral-900;
}

/* Skip link styles */
.sr-only:focus {
  @apply not-sr-only absolute top-0 left-0;
}

/* Smooth transitions for dark mode */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animation utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes bounceLight {
  0%, 100% {
    transform: translateY(-5%);
  }
  50% {
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.8s ease-out;
}

.animate-bounce-light {
  animation: bounceLight 4s ease-in-out infinite;
}

/* Utility classes for animations */
.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-600 {
  animation-delay: 600ms;
}

.animation-delay-800 {
  animation-delay: 800ms;
}

.animation-delay-1000 {
  animation-delay: 1000ms;
}

.animation-delay-2000 {
  animation-delay: 2000ms;
}

.animation-delay-4000 {
  animation-delay: 4000ms;
}

/* Gradient text */
.gradient-text {
  @apply bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent;
}

/* Button hover effects */
.button-primary {
  @apply px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all transform hover:scale-105;
}

.button-secondary {
  @apply px-6 py-3 bg-secondary-600 text-white rounded-lg hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500 transition-all transform hover:scale-105;
}

/* Card hover effects */
.card-hover {
  @apply transition-all duration-300 hover:shadow-large hover:transform hover:scale-105;
}

/* Custom shadow utilities */
.shadow-soft {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.08);
}

.shadow-medium {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
}

.shadow-large {
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.15);
}

/* Aspect ratio utilities for images */
.aspect-w-16 {
  position: relative;
  padding-bottom: calc(9 / 16 * 100%);
}

.aspect-w-16 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.aspect-w-4 {
  position: relative;
  padding-bottom: calc(3 / 4 * 100%);
}

.aspect-w-4 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    @apply text-black bg-white;
  }
  
  a {
    text-decoration: underline;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    @apply border-neutral-900 dark:border-white;
  }
  
  body {
    @apply bg-white text-black dark:bg-black dark:text-white;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Prose customization for better typography */
.prose {
  @apply prose-neutral dark:prose-invert prose-lg;
}

.prose a {
  @apply text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors;
}

.prose strong {
  @apply text-neutral-900 dark:text-white;
}

.prose code {
  @apply bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 rounded;
}


/* Force gradient backgrounds to render properly */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* Ensure program card gradients are visible */
.from-primary-500 {
  --tw-gradient-from: #0066cc;
}

.to-primary-700 {
  --tw-gradient-to: #003d7a;
}

.from-secondary-500 {
  --tw-gradient-from: #ff7300;
}

.to-secondary-700 {
  --tw-gradient-to: #994500;
}

.from-accent-500 {
  --tw-gradient-from: #8b5cf6;
}

.to-accent-700 {
  --tw-gradient-to: #6d28d9;
}

/* Ensure CTA gradient is visible */
.from-primary-600 {
  --tw-gradient-from: #0052a3;
}

.to-primary-700 {
  --tw-gradient-to: #003d7a;
}

/* Dark overlay gradients for images */
.from-neutral-900\/80 {
  --tw-gradient-from: rgba(23, 23, 23, 0.8);
}

.via-neutral-900\/60 {
  --tw-gradient-via: rgba(23, 23, 23, 0.6);
}

.to-neutral-900\/40 {
  --tw-gradient-to: rgba(23, 23, 23, 0.4);
}

/* Program card overlay gradients */
.from-primary-700\/80 {
  --tw-gradient-from: rgba(0, 61, 122, 0.8);
}

.to-primary-500\/40 {
  --tw-gradient-to: rgba(0, 102, 204, 0.4);
}

.from-secondary-700\/80 {
  --tw-gradient-from: rgba(153, 69, 0, 0.8);
}

.to-secondary-500\/40 {
  --tw-gradient-to: rgba(255, 115, 0, 0.4);
}

.from-accent-700\/80 {
  --tw-gradient-from: rgba(109, 40, 217, 0.8);
}

.to-accent-500\/40 {
  --tw-gradient-to: rgba(139, 92, 246, 0.4);
}